Show gray probabilities for closed markets

web/components/contract-card.tsx

@@ -48,11 +48,7 @@ export function ContractCard(props: {
 
         <Row className="justify-between gap-4">
           <p className="font-medium text-indigo-700">{question}</p>
-          <ResolutionOrChance
-            className="items-center"
-            resolution={resolution}
-            probPercent={probPercent}
-          />
+          <ResolutionOrChance className="items-center" contract={contract} />
         </Row>
       </div>
     </div>
@@ -60,12 +56,14 @@ export function ContractCard(props: {
 }
 
 export function ResolutionOrChance(props: {
-  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
-  probPercent: string
+  contract: Contract
   large?: boolean
   className?: string
 }) {
-  const { resolution, probPercent, large, className } = props
+  const { contract, large, className } = props
+  const { resolution } = contract
+  const { probPercent } = contractMetrics(contract)
+  const marketClosed = (contract.closeTime || Infinity) < Date.now()
 
   const resolutionColor = {
     YES: 'text-primary',
@@ -75,6 +73,8 @@ export function ResolutionOrChance(props: {
     '': '', // Empty if unresolved
   }[resolution || '']
 
+  const probColor = marketClosed ? 'text-gray-400' : 'text-primary'
+
   const resolutionText = {
     YES: 'YES',
     NO: 'NO',
@@ -96,10 +96,8 @@ export function ResolutionOrChance(props: {
         </>
       ) : (
         <>
-          <div className="text-primary">{probPercent}</div>
-          <div
-            className={clsx('text-primary', large ? 'text-xl' : 'text-base')}
-          >
+          <div className={probColor}>{probPercent}</div>
+          <div className={clsx(probColor, large ? 'text-xl' : 'text-base')}>
             chance
           </div>
         </>

web/components/contract-feed.tsx

@@ -340,11 +340,7 @@ function FeedQuestion(props: { contract: Contract }) {
           >
             {question}
           </SiteLink>
-          <ResolutionOrChance
-            className="items-center"
-            resolution={resolution}
-            probPercent={probPercent}
-          />
+          <ResolutionOrChance className="items-center" contract={contract} />
         </Col>
         <TruncatedComment
           comment={contract.description}

web/components/contract-overview.tsx

@@ -57,8 +57,7 @@ export const ContractOverview = (props: {
           <Row className="items-center justify-between gap-4">
             <ResolutionOrChance
               className="md:hidden"
-              resolution={resolution}
-              probPercent={probPercent}
+              contract={contract}
               large
             />
 
@@ -75,12 +74,7 @@ export const ContractOverview = (props: {
         </Col>
 
         <Col className="hidden items-end justify-between md:flex">
-          <ResolutionOrChance
-            className="items-end"
-            resolution={resolution}
-            probPercent={probPercent}
-            large
-          />
+          <ResolutionOrChance className="items-end" contract={contract} large />
         </Col>
       </Row>