Show numeric values in card preview

og-image/api/_lib/parser.ts

@@ -16,6 +16,7 @@ export function parseRequest(req: IncomingMessage) {
     // Attributes for Manifold card:
     question,
     probability,
+    numericValue,
     metadata,
     creatorName,
     creatorUsername,
@@ -71,6 +72,7 @@ export function parseRequest(req: IncomingMessage) {
     question:
       getString(question) || 'Will you create a prediction market on Manifold?',
     probability: getString(probability),
+    numericValue: getString(numericValue) || '',
     metadata: getString(metadata) || 'Jan 1  •  M$ 123 pool',
     creatorName: getString(creatorName) || 'Manifold Markets',
     creatorUsername: getString(creatorUsername) || 'ManifoldMarkets',

og-image/api/_lib/template.ts

@@ -91,6 +91,7 @@ export function getHtml(parsedReq: ParsedRequest) {
     creatorName,
     creatorUsername,
     creatorAvatarUrl,
+    numericValue,
   } = parsedReq
   const MAX_QUESTION_CHARS = 100
   const truncatedQuestion =
@@ -147,8 +148,14 @@ export function getHtml(parsedReq: ParsedRequest) {
         <div class="text-indigo-700 text-6xl leading-tight">
           ${truncatedQuestion}
         </div>
-        <div class="flex flex-col text-primary">
+        <div class="flex flex-col text-primary text-center">
           <div class="text-8xl">${probability}</div>
+          <span class='text-blue-400'> 
+           <div class="text-8xl ">${
+             numericValue !== '' && probability === '' ? numericValue : ''
+           }</div>
+          <div class="text-4xl">${numericValue !== '' ? 'expected' : ''}</div>
+          </span>
           <div class="text-4xl">${probability !== '' ? 'chance' : ''}</div>
         </div>
       </div>

og-image/api/_lib/types.ts

@@ -14,6 +14,7 @@ export interface ParsedRequest {
   // Attributes for Manifold card:
   question: string
   probability: string
+  numericValue: string
   metadata: string
   creatorName: string
   creatorUsername: string

web/components/SEO.tsx

@@ -9,6 +9,7 @@ export type OgCardProps = {
   creatorName: string
   creatorUsername: string
   creatorAvatarUrl?: string
+  numericValue?: string
 }
 
 function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
@@ -25,6 +26,12 @@ function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
     props.probability === undefined
       ? ''
       : `&probability=${encodeURIComponent(props.probability ?? '')}`
+
+  const numericValueParam =
+    props.numericValue === undefined
+      ? ''
+      : `&numericValue=${encodeURIComponent(props.numericValue ?? '')}`
+
   const creatorAvatarUrlParam =
     props.creatorAvatarUrl === undefined
       ? ''
@@ -41,6 +48,7 @@ function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
     `https://manifold-og-image.vercel.app/m.png` +
     `?question=${encodeURIComponent(props.question)}` +
     probabilityParam +
+    numericValueParam +
     `&metadata=${encodeURIComponent(props.metadata)}` +
     `&creatorName=${encodeURIComponent(props.creatorName)}` +
     creatorAvatarUrlParam +

web/components/contract/contract-card-preview.tsx

@@ -2,6 +2,8 @@ import { Contract } from 'common/contract'
 import { getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { richTextToString } from 'common/util/parse'
 import { contractTextDetails } from 'web/components/contract/contract-details'
+import { getFormattedMappedValue } from 'common/pseudo-numeric'
+import { getProbability } from 'common/calculate'
 
 export const getOpenGraphProps = (contract: Contract) => {
   const {
@@ -16,6 +18,11 @@ export const getOpenGraphProps = (contract: Contract) => {
   const probPercent =
     outcomeType === 'BINARY' ? getBinaryProbPercent(contract) : undefined
 
+  const numericValue =
+    outcomeType === 'PSEUDO_NUMERIC'
+      ? getFormattedMappedValue(contract)(getProbability(contract))
+      : undefined
+
   const stringDesc = typeof desc === 'string' ? desc : richTextToString(desc)
 
   const description = resolution
@@ -32,5 +39,6 @@ export const getOpenGraphProps = (contract: Contract) => {
     creatorUsername,
     creatorAvatarUrl,
     description,
+    numericValue,
   }
 }