DX: Link to Firestore console from "..."

common/envs/constants.ts

@@ -44,3 +44,7 @@ export const CORS_ORIGIN_VERCEL = new RegExp(
 )
 // Any localhost server on any port
 export const CORS_ORIGIN_LOCALHOST = /^http:\/\/localhost:\d+$/
+
+export function firestoreConsolePath(contractId: string) {
+  return `https://console.firebase.google.com/project/${PROJECT_ID}/firestore/data/~2Fcontracts~2F${contractId}`
+}

web/components/contract/contract-info-dialog.tsx

@@ -13,6 +13,9 @@ import { Col } from '../layout/col'
 import { Modal } from '../layout/modal'
 import { Title } from '../title'
 import { InfoTooltip } from '../info-tooltip'
+import { useAdmin, useDev } from 'web/hooks/use-admin'
+import { SiteLink } from '../site-link'
+import { firestoreConsolePath } from 'common/envs/constants'
 
 export const contractDetailsButtonClassName =
   'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
@@ -21,10 +24,12 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
 
   const [open, setOpen] = useState(false)
+  const isDev = useDev()
+  const isAdmin = useAdmin()
 
   const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
 
-  const { createdTime, closeTime, resolutionTime, mechanism, outcomeType } =
+  const { createdTime, closeTime, resolutionTime, mechanism, outcomeType, id } =
     contract
 
   const tradersCount = uniqBy(
@@ -121,6 +126,18 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
                 </td>
                 <td>{contractPool(contract)}</td>
               </tr>
+
+              {/* Show a path to Firebase if user is an admin, or we're on localhost */}
+              {(isAdmin || isDev) && (
+                <tr>
+                  <td>[DEV] Firestore</td>
+                  <td>
+                    <SiteLink href={firestoreConsolePath(id)}>
+                      Console link
+                    </SiteLink>
+                  </td>
+                </tr>
+              )}
             </tbody>
           </table>
 

web/hooks/use-admin.ts

@@ -5,3 +5,7 @@ export const useAdmin = () => {
   const privateUser = usePrivateUser()
   return isAdmin(privateUser?.email || '')
 }
+
+export const useDev = () => {
+  return process.env.NODE_ENV === 'development'
+}

web/pages/admin.tsx

@@ -10,6 +10,7 @@ import { mapKeys } from 'lodash'
 import { useAdmin } from 'web/hooks/use-admin'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
+import { firestoreConsolePath } from 'common/envs/constants'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -198,7 +199,7 @@ function ContractsTable() {
             html(`<a
               class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
               target="_blank"
-              href="https://console.firebase.google.com/project/mantic-markets/firestore/data/~2Fcontracts~2F${cell}">${cell}</a>`),
+              href="${firestoreConsolePath(cell as string)}">${cell}</a>`),
         },
       ]}
       search={true}