Add contracts table to admin page

web/pages/admin.tsx

@@ -5,8 +5,8 @@ import { html } from 'gridjs'
 import dayjs from 'dayjs'
 import { useUsers } from '../hooks/use-users'
 import { useUser } from '../hooks/use-user'
-import Error from 'next/error'
 import Custom404 from './404'
+import { useContracts } from '../hooks/use-contracts'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -73,6 +73,64 @@ function UsersTable() {
   )
 }
 
+function ContractsTable() {
+  let contracts = useContracts() ?? []
+  // Sort users by createdTime descending, by default
+  contracts.sort((a, b) => b.createdTime - a.createdTime)
+
+  return (
+    <Grid
+      data={contracts}
+      columns={[
+        {
+          id: 'creatorUsername',
+          name: 'Username',
+          formatter: (cell) =>
+            html(`<a 
+              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
+              target="_blank"
+              href="/${cell}">@${cell}</a>`),
+        },
+        {
+          id: 'question',
+          name: 'Question',
+          formatter: (cell) => cell,
+        },
+        {
+          id: 'volume24Hours',
+          name: '24 hour vol',
+          formatter: (cell) => (cell as number).toFixed(0),
+        },
+        {
+          id: 'closeTime',
+          name: 'Close time',
+          formatter: (cell) =>
+            html(
+              `<span class="whitespace-nowrap">${dayjs(cell as number).format(
+                'MMM D, h:mma'
+              )}</span>`
+            ),
+        },
+        {
+          id: 'id',
+          name: 'ID',
+          formatter: (cell) =>
+            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>`),
+        },
+      ]}
+      search={true}
+      sort={true}
+      pagination={{
+        enabled: true,
+        limit: 25,
+      }}
+    />
+  )
+}
+
 export default function Admin() {
   const user = useUser()
   const adminIds = [
@@ -84,6 +142,7 @@ export default function Admin() {
   return isAdmin ? (
     <Page wide>
       <UsersTable />
+      <ContractsTable />
     </Page>
   ) : (
     <Custom404 />