Merge branch 'main' into private-user

web/components/contract-card.tsx

@@ -26,28 +26,30 @@ export function ContractCard(props: {
   const { probPercent } = contractMetrics(contract)
 
   return (
-    <div
+    <div>
-      className={clsx(
+      <div
-        'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
+        className={clsx(
-        className
+          'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
-      )}
+          className
-    >
+        )}
-      <Link href={contractPath(contract)}>
+      >
-        <a className="absolute left-0 right-0 top-0 bottom-0" />
+        <Link href={contractPath(contract)}>
-      </Link>
+          <a className="absolute left-0 right-0 top-0 bottom-0" />
-      <Row className="justify-between gap-4 mb-2">
+        </Link>
-        <p className="font-medium text-indigo-700">{question}</p>
+        <Row className="justify-between gap-4 mb-2">
-        <ResolutionOrChance
+          <p className="font-medium text-indigo-700">{question}</p>
-          className="items-center"
+          <ResolutionOrChance
-          resolution={resolution}
+            className="items-center"
-          probPercent={probPercent}
+            resolution={resolution}
+            probPercent={probPercent}
+          />
+        </Row>
+        <AbbrContractDetails
+          contract={contract}
+          showHotVolume={showHotVolume}
+          showCloseTime={showCloseTime}
         />
-      </Row>
+      </div>
-      <AbbrContractDetails
-        contract={contract}
-        showHotVolume={showHotVolume}
-        showCloseTime={showCloseTime}
-      />
     </div>
   )
 }

web/components/contract-prob-graph.tsx

@@ -47,7 +47,10 @@ export function ContractProbGraph(props: { contract: Contract }) {
   const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
 
   return (
-    <div className="w-full" style={{ height: 400 }}>
+    <div
+      className="w-full"
+      style={{ height: !width || width >= 800 ? 400 : 250 }}
+    >
       <ResponsiveLine
         data={data}
         yScale={{ min: 0, max: 100, type: 'linear' }}

web/hooks/use-window-size.ts

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react'
 
 export const useWindowSize = () => {
-  const [size, setSize] = useState(
+  const [size, setSize] = useState<{
-    typeof window === 'undefined'
+    width: number | undefined
-      ? { width: undefined, height: undefined }
+    height: number | undefined
-      : { width: window.innerWidth, height: window.innerHeight }
+  }>({ width: undefined, height: undefined })
-  )
 
   useEffect(() => {
     const onResize = () => {
       setSize({ width: window.innerWidth, height: window.innerHeight })
     }
 
+    onResize()
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
   }, [])

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,70 @@ function UsersTable() {
   )
 }
 
+function ContractsTable() {
+  let contracts = useContracts() ?? []
+  // Sort users by createdTime descending, by default
+  contracts.sort((a, b) => b.createdTime - a.createdTime)
+  contracts = contracts.filter((contract) => !contract.isResolved)
+
+  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: 'visibility',
+          name: 'Visibility',
+          formatter: (cell) => cell,
+        },
+        {
+          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 +148,7 @@ export default function Admin() {
   return isAdmin ? (
     <Page wide>
       <UsersTable />
+      <ContractsTable />
     </Page>
   ) : (
     <Custom404 />