display numeric resolution

web/components/contract/contract-card.tsx

@@ -17,6 +17,7 @@ import {
   FreeResponse,
   FreeResponseContract,
   FullContract,
+  NumericContract,
 } from 'common/contract'
 import {
   AnswerLabel,
@@ -25,6 +26,7 @@ import {
 } from '../outcome-label'
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AbbrContractDetails } from './contract-details'
+import { getValueFromBucket } from 'common/calculate-dpm'
 
 export function ContractCard(props: {
   contract: Contract
@@ -164,3 +166,20 @@ export function FreeResponseResolutionOrChance(props: {
     </Col>
   )
 }
+
+export function NumericResolution(props: {
+  contract: NumericContract
+  className?: string
+}) {
+  const { contract, className } = props
+  const { resolution } = contract
+
+  const resolutionValue = getValueFromBucket(resolution, contract)
+
+  return (
+    <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
+      <div className={clsx('text-base text-gray-500')}>Resolved</div>
+      <div className="text-blue-400">{resolutionValue}</div>
+    </Col>
+  )
+}

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

@@ -5,6 +5,7 @@ import { AnswersGraph } from 'web/components/answers/answers-graph'
 import {
   BinaryResolutionOrChance,
   FreeResponseResolutionOrChance,
+  NumericResolution,
 } from 'web/components/contract/contract-card'
 import { ContractDetails } from 'web/components/contract/contract-details'
 import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
@@ -119,6 +120,10 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
               truncate="long"
             />
           )}
+
+          {outcomeType === 'NUMERIC' && resolution && (
+            <NumericResolution contract={contract} />
+          )}
         </Row>
 
         <Spacer h={2} />