From 94a225615fd12e7a0e4aedc7754fc5c56e0b92c0 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 18 Aug 2022 13:28:05 -0700
Subject: [PATCH] Show probability change

---
 web/components/bet-inline.tsx                 | 25 ++++++++++++++++---
 web/components/contract/contract-card.tsx     | 16 ++++++++++--
 web/pages/embed/[username]/[contractSlug].tsx | 12 +++++++--
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/web/components/bet-inline.tsx b/web/components/bet-inline.tsx
index 76db2ef4..9f3c6e5b 100644
--- a/web/components/bet-inline.tsx
+++ b/web/components/bet-inline.tsx
@@ -1,22 +1,27 @@
 import { track } from '@amplitude/analytics-browser'
 import clsx from 'clsx'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
+import { getBinaryCpmmBetInfo } from 'common/new-bet'
 import { APIError } from 'web/lib/firebase/api'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMutation } from 'react-query'
 import { placeBet } from 'web/lib/firebase/api'
 import { BuyAmountInput } from './amount-input'
 import { Button } from './button'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
+import { useUnfilledBets } from 'web/hooks/use-bets'
 import { useUser } from 'web/hooks/use-user'
 import { SignUpPrompt } from './sign-up-prompt'
+import { getCpmmProbability } from 'common/calculate-cpmm'
 
+// adapted from bet-panel.ts
 export function BetInline(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   className?: string
+  setProbAfter: (probAfter: number) => void
 }) {
-  const { contract, className } = props
+  const { contract, className, setProbAfter: setResult } = props
 
   const user = useUser()
 
@@ -24,7 +29,19 @@ export function BetInline(props: {
   const [amount, setAmount] = useState<number>()
   const [error, setError] = useState<string>()
 
-  // adapted from bet-panel.ts submitBet()
+  const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
+  const unfilledBets = useUnfilledBets(contract.id) ?? []
+
+  const { newPool, newP } = getBinaryCpmmBetInfo(
+    outcome ?? 'YES',
+    amount ?? 0,
+    contract,
+    undefined,
+    unfilledBets
+  )
+  const resultProb = getCpmmProbability(newPool, newP)
+  useEffect(() => setResult(resultProb), [resultProb])
+
   const submitBet = useMutation(
     () => placeBet({ outcome, amount, contractId: contract.id }),
     {
@@ -54,7 +71,7 @@ export function BetInline(props: {
         btnClassName="rounded-none first:rounded-l-2xl last:rounded-r-2xl"
         selected={outcome}
         onSelect={setOutcome}
-        isPseudoNumeric={false}
+        isPseudoNumeric={isPseudoNumeric}
       />
       <BuyAmountInput
         className="-mb-4"
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 3d4fa8d1..c3bf1a31 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -185,11 +185,16 @@ export function BinaryResolutionOrChance(props: {
   contract: BinaryContract
   large?: boolean
   className?: string
+  probAfter?: number // 0 to 1
 }) {
-  const { contract, large, className } = props
+  const { contract, large, className, probAfter } = props
   const { resolution } = contract
   const textColor = `text-${getColor(contract)}`
 
+  const before = getBinaryProbPercent(contract)
+  const after = probAfter && formatPercent(probAfter)
+  const probChanged = before !== after
+
   return (
     <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
       {resolution ? (
@@ -206,7 +211,14 @@ export function BinaryResolutionOrChance(props: {
         </>
       ) : (
         <>
-          <div className={textColor}>{getBinaryProbPercent(contract)}</div>
+          {probAfter && probChanged ? (
+            <div>
+              <span className="text-gray-500 line-through">{before}</span>
+              <span className={textColor}>{after}</span>
+            </div>
+          ) : (
+            <div className={textColor}>{before}</div>
+          )}
           <div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
             chance
           </div>
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index ca588b4a..61a0a793 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -94,6 +94,8 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
   const [betPanelOpen, setBetPanelOpen] = useState(false)
 
+  const [probAfter, setProbAfter] = useState<number>()
+
   return (
     <Col className="h-[100vh] w-full bg-white">
       <div className="relative flex flex-col pt-2">
@@ -119,7 +121,13 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
               </Button>
             )}
 
-          {isBinary && <BinaryResolutionOrChance contract={contract} />}
+          {isBinary && (
+            <BinaryResolutionOrChance
+              contract={contract}
+              probAfter={probAfter}
+              className="items-center"
+            />
+          )}
 
           {isPseudoNumeric && (
             <PseudoNumericResolutionOrExpectation contract={contract} />
@@ -142,7 +150,7 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
       {(isBinary || isPseudoNumeric) && betPanelOpen && (
         <Row className="mb-2 items-center justify-center gap-4 self-center rounded bg-indigo-200 py-2 px-3">
-          <BetInline contract={contract as any} />
+          <BetInline contract={contract as any} setProbAfter={setProbAfter}/>
           <button onClick={() => setBetPanelOpen(false)}>
             <XIcon className="h-6 w-6" />
           </button>