Update bet UI with market summary and computed columns

web/components/bet-panel.tsx

@@ -10,6 +10,11 @@ import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
 import { formatMoney, formatPercent } from '../lib/util/format'
 import { Title } from './title'
+import {
+  getProbability,
+  getDpmWeight,
+  getProbabilityAfterBet,
+} from '../lib/calculation/contract'
 
 export function BetPanel(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
@@ -79,8 +84,12 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
   const betDisabled = isSubmitting || !betAmount || error
 
-  const initialProb = getProbability(contract.pot, betChoice)
+  const initialProb = getProbability(contract.pot)
-  const resultProb = getProbability(contract.pot, betChoice, betAmount)
+  const resultProb = getProbabilityAfterBet(
+    contract.pot,
+    betChoice,
+    betAmount ?? 0
+  )
   const dpmWeight = getDpmWeight(contract.pot, betAmount ?? 0, betChoice)
 
   const estimatedWinnings = Math.floor((betAmount ?? 0) + dpmWeight)
@@ -166,29 +175,3 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
 const functions = getFunctions()
 export const placeBet = httpsCallable(functions, 'placeBet')
-
-const getProbability = (
-  pot: { YES: number; NO: number },
-  outcome: 'YES' | 'NO',
-  bet = 0
-) => {
-  const [yesPot, noPot] = [
-    pot.YES + (outcome === 'YES' ? bet : 0),
-    pot.NO + (outcome === 'NO' ? bet : 0),
-  ]
-  const numerator = Math.pow(yesPot, 2)
-  const denominator = Math.pow(yesPot, 2) + Math.pow(noPot, 2)
-  return numerator / denominator
-}
-
-const getDpmWeight = (
-  pot: { YES: number; NO: number },
-  bet: number,
-  betChoice: 'YES' | 'NO'
-) => {
-  const [yesPot, noPot] = [pot.YES, pot.NO]
-
-  return betChoice === 'YES'
-    ? (bet * Math.pow(noPot, 2)) / (Math.pow(yesPot, 2) + bet * yesPot)
-    : (bet * Math.pow(yesPot, 2)) / (Math.pow(noPot, 2) + bet * noPot)
-}

web/components/bets-list.tsx

@@ -7,8 +7,10 @@ import { Bet } from '../lib/firebase/bets'
 import { User } from '../lib/firebase/users'
 import { formatMoney, formatPercent } from '../lib/util/format'
 import { Col } from './layout/col'
-import { ContractDetails } from './contracts-list'
 import { Spacer } from './layout/spacer'
+import { Contract } from '../lib/firebase/contracts'
+import { Row } from './layout/row'
+import { calculateWinnings, currentValue } from '../lib/calculation/contract'
 
 export function BetsList(props: { user: User }) {
   const { user } = props
@@ -25,7 +27,7 @@ export function BetsList(props: { user: User }) {
   return (
     <Col className="mt-6 gap-10">
       {Object.keys(contractBets).map((contractId) => (
-        <ContractBetsTable
+        <MyContractBets
           key={contractId}
           contractId={contractId}
           bets={contractBets[contractId]}
@@ -35,47 +37,116 @@ export function BetsList(props: { user: User }) {
   )
 }
 
-function ContractBetsTable(props: { contractId: string; bets: Bet[] }) {
+function MyContractBets(props: { contractId: string; bets: Bet[] }) {
   const { contractId, bets } = props
 
   const contract = useContract(contractId)
   if (contract === 'loading' || contract === null) return <></>
 
+  const { resolution } = contract
+
+  const betsTotal = _.sumBy(bets, (bet) => bet.amount)
+
+  const betsValue = _.sumBy(bets, (bet) => currentValue(contract, bet))
+
+  const yesWinnings = _.sumBy(bets, (bet) =>
+    calculateWinnings(contract, bet, 'YES')
+  )
+  const noWinnings = _.sumBy(bets, (bet) =>
+    calculateWinnings(contract, bet, 'NO')
+  )
+
   return (
     <div className="px-4">
       <Link href={`/contract/${contractId}`}>
         <a>
-          <p className="font-medium text-indigo-700 mb-2">
+          <div className="font-medium text-indigo-700 mb-1">
             {contract.question}
-          </p>
+          </div>
-          <ContractDetails contract={contract} />
+
+          <Row className="gap-2 text-gray-500 text-sm">
+            <div>By {contract.creatorName}</div>
+            {resolution && <div>•</div>}
+            {resolution === 'YES' && (
+              <div className="text-primary">Resolved YES</div>
+            )}
+            {resolution === 'NO' && (
+              <div className="text-red-400">Resolved NO</div>
+            )}
+            {resolution === 'CANCEL' && (
+              <div className="text-yellow-400">Resolved CANCEL</div>
+            )}
+          </Row>
         </a>
       </Link>
-      <Spacer h={4} />
+
+      <Spacer h={6} />
+
+      <Row className="gap-8 ">
+        <Col>
+          <div className="text-sm text-gray-500">Total bets</div>
+          <div className="">{formatMoney(betsTotal)}</div>
+        </Col>
+        {resolution ? (
+          <>
+            <Col>
+              <div className="text-sm text-gray-500">Winnings</div>
+              <div className="">{formatMoney(yesWinnings)}</div>
+            </Col>
+          </>
+        ) : (
+          <>
+            <Col>
+              <div className="text-sm text-gray-500">Current value</div>
+              <div className="">{formatMoney(betsValue)}</div>
+            </Col>
+            <Col>
+              <div className="text-sm text-primary">If YES</div>
+              <div className="">{formatMoney(yesWinnings)}</div>
+            </Col>
+            <Col>
+              <div className="text-sm text-red-400">If NO</div>
+              <div className="">{formatMoney(noWinnings)}</div>
+            </Col>
+          </>
+        )}
+      </Row>
+
+      <Spacer h={6} />
+
+      <ContractBetsTable contract={contract} bets={bets} />
+    </div>
+  )
+}
+
+function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
+  const { contract, bets } = props
+
+  return (
     <div className="overflow-x-auto">
       <table className="table table-zebra table-compact text-gray-500 w-full">
         <thead>
           <tr className="p-2">
             <th>Outcome</th>
-              <th>Amount</th>
+            <th>Bet</th>
             <th>Probability</th>
-              <th>Estimated payoff</th>
             <th>Date</th>
+            <th>Est. max payout</th>
+            <th>Profit/loss</th>
           </tr>
         </thead>
         <tbody>
           {bets.map((bet) => (
-              <BetRow key={bet.id} bet={bet} />
+            <BetRow key={bet.id} bet={bet} contract={contract} />
           ))}
         </tbody>
       </table>
     </div>
-    </div>
   )
 }
 
-function BetRow(props: { bet: Bet }) {
+function BetRow(props: { bet: Bet; contract: Contract }) {
-  const { bet } = props
+  const { bet, contract } = props
   const { amount, outcome, createdTime, probBefore, probAfter, dpmWeight } = bet
 
   return (
@@ -85,8 +156,9 @@ function BetRow(props: { bet: Bet }) {
       <td>
         {formatPercent(probBefore)} → {formatPercent(probAfter)}
       </td>
-      <td>{formatMoney(amount + dpmWeight)}</td>
       <td>{dayjs(createdTime).format('MMM D, H:mma')}</td>
+      <td>{formatMoney(amount + dpmWeight)}</td>
+      <td>{formatMoney(currentValue(contract, bet) - amount)}</td>
     </tr>
   )
 }

web/components/contracts-list.tsx

@@ -18,7 +18,7 @@ export function ContractDetails(props: { contract: Contract }) {
         {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
       </div>
       <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{formatMoney(volume)} pot</div>
+      <div className="whitespace-nowrap">{formatMoney(volume)} bet</div>
     </Row>
   )
 }

web/lib/calculation/contract.ts

@@ -0,0 +1,66 @@
+import { Bet } from '../firebase/bets'
+import { Contract } from '../firebase/contracts'
+
+export function getProbability(pot: { YES: number; NO: number }) {
+  const [yesPot, noPot] = [pot.YES, pot.NO]
+  const numerator = Math.pow(yesPot, 2)
+  const denominator = Math.pow(yesPot, 2) + Math.pow(noPot, 2)
+  return numerator / denominator
+}
+
+export function getProbabilityAfterBet(
+  pot: { YES: number; NO: number },
+  outcome: 'YES' | 'NO',
+  bet: number
+) {
+  const [YES, NO] = [
+    pot.YES + (outcome === 'YES' ? bet : 0),
+    pot.NO + (outcome === 'NO' ? bet : 0),
+  ]
+  return getProbability({ YES, NO })
+}
+
+export function getDpmWeight(
+  pot: { YES: number; NO: number },
+  bet: number,
+  betChoice: 'YES' | 'NO'
+) {
+  const [yesPot, noPot] = [pot.YES, pot.NO]
+
+  return betChoice === 'YES'
+    ? (bet * Math.pow(noPot, 2)) / (Math.pow(yesPot, 2) + bet * yesPot)
+    : (bet * Math.pow(yesPot, 2)) / (Math.pow(noPot, 2) + bet * noPot)
+}
+
+export function calculateWinnings(
+  contract: Contract,
+  bet: Bet,
+  outcome: 'YES' | 'NO' | 'CANCEL'
+) {
+  let { dpmWeights, pot } = contract
+  const { amount, outcome: betOutcome, dpmWeight } = bet
+
+  if (outcome === 'CANCEL') return amount
+
+  if (!dpmWeights) {
+    // Fake data if not set.
+    dpmWeights = { YES: 100, NO: 100 }
+  }
+  // Fake data if not set.
+  if (!pot) pot = { YES: 100, NO: 100 }
+
+  return betOutcome === outcome
+    ? 0.98 *
+        (dpmWeight / dpmWeights[outcome]) *
+        pot[outcome === 'YES' ? 'NO' : 'YES'] +
+        amount
+    : 0
+}
+
+export function currentValue(contract: Contract, bet: Bet) {
+  const prob = getProbability(contract.pot)
+  const yesWinnings = calculateWinnings(contract, bet, 'YES')
+  const noWinnings = calculateWinnings(contract, bet, 'NO')
+
+  return prob * yesWinnings + (1 - prob) * noWinnings
+}

web/lib/service/create-contract.ts

@@ -31,7 +31,6 @@ export async function createContract(
     seedAmounts: { YES: seedYes, NO: seedNo },
     pot: { YES: seedYes, NO: seedNo },
     dpmWeights: { YES: 0, NO: 0 },
-
     isResolved: false,
 
     // TODO: Set create time to Firestore timestamp