From ce52c834aa71b1421678fa24d95373cf51c1a003 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Mon, 16 May 2022 17:21:45 -0400
Subject: [PATCH] display numeric resolution

---
 web/components/contract/contract-card.tsx     | 19 +++++++++++++++++++
 web/pages/embed/[username]/[contractSlug].tsx |  5 +++++
 2 files changed, 24 insertions(+)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index d1c7dd31..7472dbf4 100644
--- a/web/components/contract/contract-card.tsx
+++ b/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>
+  )
+}
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 7792a633..79f9ac24 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/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} />