Hide BetRow when not appropriate

web/components/bet-row.tsx

@@ -7,7 +7,6 @@ import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
-// TODO: Hide when not appropriate
 export default function BetRow(props: { contract: Contract }) {
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
@@ -16,7 +15,7 @@ export default function BetRow(props: { contract: Contract }) {
 
   return (
     <>
-      <div className="-mt-4 text-xl pb-6 -mx-4 -mb-6">
+      <div className="-mt-2 text-xl -mx-4">
         <Row className="items-center gap-2 justify-center">
           Buy
           <YesNoSelector

web/components/contract-feed.tsx

@@ -19,6 +19,7 @@ import {
   Contract,
   contractPath,
   updateContract,
+  tradingAllowed,
 } from '../lib/firebase/contracts'
 import { useUser } from '../hooks/use-user'
 import { Linkify } from './linkify'
@@ -39,6 +40,7 @@ import Textarea from 'react-expanding-textarea'
 import { outcome } from '../../common/contract'
 import { fromNow } from '../lib/util/time'
 import BetRow from './bet-row'
+import clsx from 'clsx'
 
 export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
   const { username, avatarUrl } = props
@@ -649,7 +651,7 @@ export function ContractFeed(props: {
 
   return (
     <div className="flow-root">
-      <ul role="list" className="">
+      <ul role="list" className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         {items.map((activityItem, activityItemIdx) => (
           <li key={activityItem.id}>
             <div className="relative pb-8">
@@ -688,7 +690,7 @@ export function ContractFeed(props: {
           </li>
         ))}
       </ul>
-      <BetRow contract={contract} />
+      {tradingAllowed(contract) && <BetRow contract={contract} />}
     </div>
   )
 }

web/lib/firebase/contracts.ts

@@ -52,6 +52,13 @@ export function contractMetrics(contract: Contract) {
   return { truePool, probPercent, startProb, createdDate, resolvedDate }
 }
 
+export function tradingAllowed(contract: Contract) {
+  return (
+    !contract.isResolved &&
+    (!contract.closeTime || contract.closeTime > Date.now())
+  )
+}
+
 const db = getFirestore(app)
 export const contractCollection = collection(db, 'contracts')
 

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

@@ -15,6 +15,7 @@ import {
   contractMetrics,
   Contract,
   getContractFromSlug,
+  tradingAllowed,
 } from '../../lib/firebase/contracts'
 import { SEO } from '../../components/SEO'
 import { Page } from '../../components/page'
@@ -70,8 +71,7 @@ export default function ContractPage(props: {
 
   const { creatorId, isResolved, resolution, question } = contract
   const isCreator = user?.id === creatorId
-  const allowTrade =
+  const allowTrade = tradingAllowed(contract)
-    !isResolved && (!contract.closeTime || contract.closeTime > Date.now())
   const allowResolve = !isResolved && isCreator && !!user
 
   const { probPercent } = contractMetrics(contract)