Fix feed and cards for multi contracts

web/components/answers-panel.tsx

@@ -34,7 +34,6 @@ import { Bet } from '../../common/bet'
 import { useAnswers } from '../hooks/use-answers'
 import { ResolveConfirmationButton } from './confirmation-button'
 import { tradingAllowed } from '../lib/firebase/contracts'
-import { OutcomeLabel } from './outcome-label'
 
 export function AnswersPanel(props: {
   contract: Contract<'MULTI'>
@@ -65,11 +64,6 @@ export function AnswersPanel(props: {
 
   return (
     <Col className="gap-3">
-      {resolution && (
-        <div>
-          Resolved to answer <OutcomeLabel outcome={resolution} />:
-        </div>
-      )}
       {sortedAnswers.map((answer) => (
         <AnswerItem
           key={answer.id}
@@ -156,6 +150,7 @@ function AnswerItem(props: {
         />
       ) : (
         <Row className="self-end sm:self-start items-center gap-4">
+          {!wasResolvedTo && (
             <div
               className={clsx(
                 'text-2xl',
@@ -164,6 +159,7 @@ function AnswerItem(props: {
             >
               {probPercent}
             </div>
+          )}
           {showChoice ? (
             <div className="form-control py-1">
               <label className="cursor-pointer label gap-2">
@@ -189,7 +185,10 @@ function AnswerItem(props: {
                 />
               )}
               {wasResolvedTo && (
+                <Col className="items-end">
                   <div className="text-green-700 text-xl">Chosen</div>
+                  <div className="text-2xl text-gray-500">{probPercent}</div>
+                </Col>
               )}
             </>
           )}

web/components/contract-card.tsx

@@ -61,28 +61,30 @@ export function ContractCard(props: {
 }
 
 export function ResolutionOrChance(props: {
-  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
+  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' | string
   probPercent: string
   large?: boolean
   className?: string
 }) {
   const { resolution, probPercent, large, className } = props
 
-  const resolutionColor = {
+  const resolutionColor =
+    {
       YES: 'text-primary',
       NO: 'text-red-400',
       MKT: 'text-blue-400',
       CANCEL: 'text-yellow-400',
       '': '', // Empty if unresolved
-  }[resolution || '']
+    }[resolution || ''] ?? 'text-primary'
 
-  const resolutionText = {
+  const resolutionText =
+    {
       YES: 'YES',
       NO: 'NO',
       MKT: probPercent,
       CANCEL: 'N/A',
       '': '',
-  }[resolution || '']
+    }[resolution || ''] ?? `#${resolution}`
 
   return (
     <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>

web/components/contract-feed.tsx

@@ -390,8 +390,9 @@ function OutcomeIcon(props: { outcome?: outcome }) {
     case 'NO':
       return <XIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
     case 'CANCEL':
-    default:
       return <BanIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+    default:
+      return <CheckIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
   }
 }
 

web/components/contract-overview.tsx

@@ -48,16 +48,17 @@ export const ContractOverview = (props: {
             <Linkify text={question} />
           </div>
 
-          {isBinary && (
           <Row className="items-center justify-between gap-4">
+            {(isBinary || resolution) && (
               <ResolutionOrChance
                 className="md:hidden"
                 resolution={resolution}
                 probPercent={getBinaryProbPercent(contract)}
                 large
               />
+            )}
 
-              {tradingAllowed(contract) && (
+            {isBinary && tradingAllowed(contract) && (
               <BetRow
                 contract={contract}
                 className="md:hidden"
@@ -65,12 +66,11 @@ export const ContractOverview = (props: {
               />
             )}
           </Row>
-          )}
 
           <ContractDetails contract={contract} />
         </Col>
 
-        {isBinary && (
+        {(isBinary || resolution) && (
           <Col className="hidden items-end justify-between md:flex">
             <ResolutionOrChance
               className="items-end"