From 6f5ac2d1d1db013d722b60a6e32a0b0e84b12e2a Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 15 Feb 2022 23:02:48 -0600
Subject: [PATCH] Fix feed and cards for multi contracts

---
 web/components/answers-panel.tsx     | 29 ++++++++++++-------------
 web/components/contract-card.tsx     | 32 +++++++++++++++-------------
 web/components/contract-feed.tsx     |  3 ++-
 web/components/contract-overview.tsx | 24 ++++++++++-----------
 4 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/web/components/answers-panel.tsx b/web/components/answers-panel.tsx
index e1990892..c41ffded 100644
--- a/web/components/answers-panel.tsx
+++ b/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,14 +150,16 @@ function AnswerItem(props: {
         />
       ) : (
         <Row className="self-end sm:self-start items-center gap-4">
-          <div
-            className={clsx(
-              'text-2xl',
-              tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
-            )}
-          >
-            {probPercent}
-          </div>
+          {!wasResolvedTo && (
+            <div
+              className={clsx(
+                'text-2xl',
+                tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
+              )}
+            >
+              {probPercent}
+            </div>
+          )}
           {showChoice ? (
             <div className="form-control py-1">
               <label className="cursor-pointer label gap-2">
@@ -189,7 +185,10 @@ function AnswerItem(props: {
                 />
               )}
               {wasResolvedTo && (
-                <div className="text-green-700 text-xl">Chosen</div>
+                <Col className="items-end">
+                  <div className="text-green-700 text-xl">Chosen</div>
+                  <div className="text-2xl text-gray-500">{probPercent}</div>
+                </Col>
               )}
             </>
           )}
diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 2c2f2ad4..1f062c89 100644
--- a/web/components/contract-card.tsx
+++ b/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 = {
-    YES: 'text-primary',
-    NO: 'text-red-400',
-    MKT: 'text-blue-400',
-    CANCEL: 'text-yellow-400',
-    '': '', // Empty if unresolved
-  }[resolution || '']
+  const resolutionColor =
+    {
+      YES: 'text-primary',
+      NO: 'text-red-400',
+      MKT: 'text-blue-400',
+      CANCEL: 'text-yellow-400',
+      '': '', // Empty if unresolved
+    }[resolution || ''] ?? 'text-primary'
 
-  const resolutionText = {
-    YES: 'YES',
-    NO: 'NO',
-    MKT: probPercent,
-    CANCEL: 'N/A',
-    '': '',
-  }[resolution || '']
+  const resolutionText =
+    {
+      YES: 'YES',
+      NO: 'NO',
+      MKT: probPercent,
+      CANCEL: 'N/A',
+      '': '',
+    }[resolution || ''] ?? `#${resolution}`
 
   return (
     <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index be326d9d..caaf5b18 100644
--- a/web/components/contract-feed.tsx
+++ b/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" />
   }
 }
 
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 3576a817..ba5af210 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -48,29 +48,29 @@ export const ContractOverview = (props: {
             <Linkify text={question} />
           </div>
 
-          {isBinary && (
-            <Row className="items-center justify-between gap-4">
+          <Row className="items-center justify-between gap-4">
+            {(isBinary || resolution) && (
               <ResolutionOrChance
                 className="md:hidden"
                 resolution={resolution}
                 probPercent={getBinaryProbPercent(contract)}
                 large
               />
+            )}
 
-              {tradingAllowed(contract) && (
-                <BetRow
-                  contract={contract}
-                  className="md:hidden"
-                  labelClassName="hidden"
-                />
-              )}
-            </Row>
-          )}
+            {isBinary && tradingAllowed(contract) && (
+              <BetRow
+                contract={contract}
+                className="md:hidden"
+                labelClassName="hidden"
+              />
+            )}
+          </Row>
 
           <ContractDetails contract={contract} />
         </Col>
 
-        {isBinary && (
+        {(isBinary || resolution) && (
           <Col className="hidden items-end justify-between md:flex">
             <ResolutionOrChance
               className="items-end"