Prevent trading after contract has closed

web/components/contract-overview.tsx

@@ -16,6 +16,19 @@ import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 
+function ContractCloseTime(props: { contract: Contract }) {
+  const closeTime = props.contract.closeTime
+  if (!closeTime) {
+    return null
+  }
+  return (
+    <div className="text-gray-500 text-sm">
+      Trading {closeTime > Date.now() ? 'closes' : 'closed'} at{' '}
+      {dayjs(closeTime).format('MMM D, h:mma')}
+    </div>
+  )
+}
+
 function ContractDescription(props: {
   contract: Contract
   isCreator: boolean
@@ -127,9 +140,14 @@ export const ContractOverview = (props: {
 
       <Spacer h={12} />
 
+      <ContractCloseTime contract={contract} />
+
+      <Spacer h={4} />
+
       {((isCreator && !contract.resolution) || contract.description) && (
         <label className="text-gray-500 mb-2 text-sm">Description</label>
       )}
+
       <ContractDescription contract={contract} isCreator={isCreator} />
 
       {/* Show a delete button for contracts without any trading */}

web/pages/[username]/[contractSlug].tsx

@@ -53,6 +53,9 @@ export default function ContractPage(props: {
 
   const { creatorId, isResolved, resolution, question } = contract
   const isCreator = user?.id === creatorId
+  const allowTrade =
+    !isResolved && (!contract.closeTime || contract.closeTime > Date.now())
+  const allowResolve = !isResolved && isCreator && user
 
   const { probPercent } = compute(contract)
 
@@ -61,7 +64,7 @@ export default function ContractPage(props: {
     : `${probPercent} chance. ${contract.description}`
 
   return (
-    <Page wide={!isResolved}>
+    <Page wide={allowTrade}>
       <SEO
         title={question}
         description={description}
@@ -74,14 +77,13 @@ export default function ContractPage(props: {
           <BetsSection contract={contract} user={user ?? null} />
         </div>
 
-        {!isResolved && (
+        {(allowTrade || allowResolve) && (
           <>
             <div className="md:ml-8" />
 
             <Col className="flex-1">
-              <BetPanel contract={contract} />
-
-              {isCreator && user && (
+              {allowTrade && <BetPanel contract={contract} />}
+              {allowResolve && (
                 <ResolutionPanel creator={user} contract={contract} />
               )}
             </Col>