Include top answer in answer card.

web/components/contract/contract-card.tsx

@@ -1,9 +1,10 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import _ from 'lodash'
 import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
 import { TrendingUpIcon } from '@heroicons/react/solid'
 import { Row } from '../layout/row'
-import { formatMoney } from '../../../common/util/format'
+import { formatMoney, formatPercent } from '../../../common/util/format'
 import { UserLink } from '../user-page'
 import {
   Contract,
@@ -30,9 +31,11 @@ import {
   FullContract,
 } from '../../../common/contract'
 import {
+  AnswerLabel,
   BinaryContractOutcomeLabel,
   FreeResponseOutcomeLabel,
 } from '../outcome-label'
+import { getOutcomeProbability } from '../../../common/calculate'
 
 export function ContractCard(props: {
   contract: Contract
@@ -80,10 +83,9 @@ export function ContractCard(props: {
               contract={contract}
             />
           )}
-          {outcomeType === 'FREE_RESPONSE' && resolution && (
+          {outcomeType === 'FREE_RESPONSE' && (
-            <FreeResponseResolution
+            <FreeResponseResolutionOrChance
               contract={contract as FullContract<DPM, FreeResponse>}
-              resolution={resolution}
               truncate="long"
             />
           )}
@@ -130,20 +132,51 @@ export function BinaryResolutionOrChance(props: {
   )
 }
 
-export function FreeResponseResolution(props: {
+function getTopAnswer(contract: FreeResponseContract) {
+  const { answers } = contract
+  const top = _.maxBy(
+    answers.map((answer) => ({
+      answer,
+      prob: getOutcomeProbability(contract, answer.id),
+    })),
+    ({ prob }) => prob
+  )
+  return top?.answer
+}
+
+export function FreeResponseResolutionOrChance(props: {
   contract: FreeResponseContract
-  resolution: string
   truncate: 'short' | 'long' | 'none'
 }) {
-  const { contract, resolution, truncate } = props
+  const { contract, truncate } = props
+  const { resolution } = contract
+
+  const topAnswer = getTopAnswer(contract)
+
   return (
     <Col className="text-xl">
+      {resolution ? (
+        <>
           <div className={clsx('text-base text-gray-500')}>Resolved</div>
           <FreeResponseOutcomeLabel
             contract={contract}
             resolution={resolution}
             truncate={truncate}
           />
+        </>
+      ) : (
+        topAnswer && (
+          <Row className="flex-1 items-center justify-between gap-6">
+            <AnswerLabel answer={topAnswer} truncate={truncate} />
+            <Col className="text-primary">
+              <div>
+                {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
+              </div>
+              <div className="text-base">chance</div>
+            </Col>
+          </Row>
+        )
+      )}
     </Col>
   )
 }

web/components/contract/contract-overview.tsx

@@ -7,7 +7,7 @@ import { Row } from '../layout/row'
 import { Linkify } from '../linkify'
 import clsx from 'clsx'
 import {
-  FreeResponseResolution,
+  FreeResponseResolutionOrChance,
   ContractDetails,
   BinaryResolutionOrChance,
 } from './contract-card'
@@ -59,9 +59,8 @@ export const ContractOverview = (props: {
         ) : (
           outcomeType === 'FREE_RESPONSE' &&
           resolution && (
-            <FreeResponseResolution
+            <FreeResponseResolutionOrChance
               contract={contract}
-              resolution={resolution}
               truncate="none"
             />
           )

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

@@ -10,7 +10,7 @@ import { AnswersGraph } from '../../../components/answers/answers-graph'
 import {
   BinaryResolutionOrChance,
   ContractDetails,
-  FreeResponseResolution,
+  FreeResponseResolutionOrChance,
 } from '../../../components/contract/contract-card'
 import { ContractProbGraph } from '../../../components/contract/contract-prob-graph'
 import { Col } from '../../../components/layout/col'
@@ -122,9 +122,8 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
           {isBinary && <BinaryResolutionOrChance contract={contract} />}
 
           {outcomeType === 'FREE_RESPONSE' && resolution && (
-            <FreeResponseResolution
+            <FreeResponseResolutionOrChance
               contract={contract}
-              resolution={resolution}
               truncate="long"
             />
           )}