Simple market resolved panel

functions/src/types/contract.ts

@@ -16,7 +16,7 @@ export type Contract = {
   lastUpdatedTime: number // If the question or description was changed
   closeTime?: number // When no more trading is allowed
 
-  // isResolved: boolean
+  isResolved: boolean
   resolutionTime?: 10293849 // When the contract creator resolved the market; 0 if unresolved
   resolution?: 'YES' | 'NO' | 'CANCEL' // Chosen by creator; must be one of outcomes
 }

web/components/resolved-panel.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx'
+import dayjs from 'dayjs'
+import React from 'react'
+
+import { Contract } from '../lib/firebase/contracts'
+import { formatMoney } from '../lib/util/format'
+import { Col } from './layout/col'
+import { Spacer } from './layout/spacer'
+
+export function ResolvedPanel(props: {
+  contract: Contract
+  className?: string
+}) {
+  const { contract, className } = props
+
+  const { resolution, resolutionTime, pot, seedAmounts } = contract
+
+  const total = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
+
+  const color =
+    resolution === 'YES'
+      ? 'text-primary'
+      : resolution === 'NO'
+      ? 'text-red-400'
+      : resolution === 'CANCEL'
+      ? 'text-yellow-400'
+      : 'text-gray-500'
+
+  return (
+    <Col
+      className={clsx(
+        'bg-gray-100 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
+        className
+      )}
+    >
+      <div className={clsx('font-bold font-sans text-5xl')}>
+        Resolved: <span className={color}>{resolution}</span>
+      </div>
+
+      <Spacer h={4} />
+      <div className="text-gray-500">
+        {dayjs(resolutionTime).format('MMM D, HH:mma')}
+      </div>
+      <Spacer h={4} />
+
+      <div className="text-gray-700">
+        {resolution === 'YES' ? (
+          <>Yes bettors have collectively won {formatMoney(total)}.</>
+        ) : resolution === 'NO' ? (
+          <>No bettors have collectively won {formatMoney(total)}.</>
+        ) : (
+          <>All bets have been returned.</>
+        )}
+      </div>
+    </Col>
+  )
+}

web/lib/firebase/contracts.ts

@@ -30,7 +30,7 @@ export type Contract = {
   lastUpdatedTime: number // If the question or description was changed
   closeTime?: number // When no more trading is allowed
 
-  // isResolved: boolean
+  isResolved: boolean
   resolutionTime?: 10293849 // When the contract creator resolved the market; 0 if unresolved
   resolution?: 'YES' | 'NO' | 'CANCEL' // Chosen by creator; must be one of outcomes
 }

web/pages/contract/[contractId].tsx

@@ -7,6 +7,7 @@ import { BetPanel } from '../../components/bet-panel'
 import { Col } from '../../components/layout/col'
 import { useUser } from '../../hooks/use-user'
 import { ResolutionPanel } from '../../components/resolution-panel'
+import { ResolvedPanel } from '../../components/resolved-panel'
 
 export default function ContractPage() {
   const user = useUser()
@@ -24,19 +25,29 @@ export default function ContractPage() {
     return <div>Contract not found...</div>
   }
 
-  const isCreator = user?.id === contract.creatorId
+  const { creatorId, isResolved } = contract
+  const isCreator = user?.id === creatorId
 
   return (
     <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
       <Header />
 
       <Col className="w-full md:justify-between md:flex-row mt-4">
-        <ContractOverview contract={contract} className="max-w-4xl w-full p-4" />
+        <ContractOverview
+          contract={contract}
+          className="max-w-4xl w-full p-4"
+        />
 
         <div className="mt-12 md:mt-0 md:ml-8" />
 
-        {isCreator ? (
-          <ResolutionPanel className="self-start" creator={user} contract={contract} />
+        {isResolved ? (
+          <ResolvedPanel className="self-start" contract={contract} />
+        ) : isCreator ? (
+          <ResolutionPanel
+            className="self-start"
+            creator={user}
+            contract={contract}
+          />
         ) : (
           <BetPanel className="self-start" contract={contract} />
         )}