Make bet panel calculate bet info and display it.

web/components/bet-panel.tsx

@@ -8,6 +8,7 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
+import { formatMoney } from '../lib/util/format'
 
 export function BetPanel(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
@@ -23,6 +24,8 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   function onBetChange(str: string) {
     const amount = parseInt(str)
     setBetAmount(isNaN(amount) ? undefined : amount)
+
+    setWasSubmitted(false)
   }
 
   async function submitBet() {
@@ -48,10 +51,20 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
   const betDisabled = isSubmitting || wasSubmitted
 
+  const initialProb = getProbability(contract.pot, betChoice)
+  const resultProb = getProbability(contract.pot, betChoice, betAmount)
+  const dpmWeight = getDpmWeight(contract.pot, betAmount ?? 0, betChoice)
+
+  const estimatedWinnings = Math.floor((betAmount ?? 0) + dpmWeight)
+  const estimatedReturn = betAmount
+    ? (estimatedWinnings - betAmount) / betAmount
+    : 0
+  const estimatedReturnPercent = (estimatedReturn * 100).toFixed() + '%'
+
   return (
     <Col
       className={clsx(
-        'bg-gray-200 shadow-xl p-6 rounded w-full md:w-auto',
+        'bg-gray-200 shadow-xl px-8 py-6 rounded w-full md:w-auto',
         className
       )}
     >
@@ -60,37 +73,43 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
         className="p-2"
         selected={betChoice}
         onSelect={setBetChoice}
-        yesLabel="Yes 57"
-        noLabel="No 43"
       />
 
       <Spacer h={4} />
 
       <div className="p-2 font-medium">Bet amount</div>
-      <Row className="p-2 items-center">
+      <Row className="p-2 items-center relative">
+        <div className="absolute inset-y-0 left-2 pl-3 flex items-center pointer-events-none">
+          <span className="text-gray-500 sm:text-sm">M$</span>
+        </div>
         <input
-          className="input input-bordered input-md"
+          className="input input-bordered input-md pl-10 block"
-          style={{ maxWidth: 80 }}
+          style={{ maxWidth: 100 }}
           type="text"
           placeholder="0"
           value={betAmount ?? ''}
           onChange={(e) => onBetChange(e.target.value)}
         />
-        <div className="ml-3">points</div>
       </Row>
 
-      {!!betAmount && (
-        <>
       <Spacer h={4} />
 
-          <div className="p-2 font-medium">Average price</div>
+      <div className="p-2 font-medium">Implied probability</div>
-          <div className="px-2">{betChoice === 'YES' ? 0.57 : 0.43} points</div>
+      <Row>
+        <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
+          {Math.floor(initialProb * 1000) / 10 + '%'}
+        </div>
+        <div>→</div>
+        <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
+          {Math.floor(resultProb * 1000) / 10 + '%'}
+        </div>
+      </Row>
 
       <Spacer h={2} />
 
       <div className="p-2 font-medium">Estimated winnings</div>
-          <div className="px-2">
+      <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
-            {Math.floor(betAmount / (betChoice === 'YES' ? 0.57 : 0.43))} points
+        {formatMoney(estimatedWinnings)} (+{estimatedReturnPercent})
       </div>
 
       <Spacer h={6} />
@@ -122,11 +141,35 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
           </button>
         </Col>
       )}
-        </>
-      )}
     </Col>
   )
 }
 
 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/header.tsx

@@ -34,16 +34,16 @@ function SignInLink(props: { darkBackground?: boolean }) {
       {user ? (
         <>
           <Link href="/contract">
-            <a className={clsx('text-base', themeClasses)}>Create a market</a>
+            <a className={clsx('text-base font-medium', themeClasses)}>Create a market</a>
           </Link>
 
           <Link href="/account">
-            <a className={clsx('text-base', themeClasses)}>{user.name}</a>
+            <a className={clsx('text-base font-medium', themeClasses)}>{user.name}</a>
           </Link>
         </>
       ) : showLogin ? (
         <button
-          className={clsx('text-base', themeClasses)}
+          className={clsx('text-base font-medium', themeClasses)}
           onClick={() => firebaseLogin()}
         >
           Sign In

web/components/yes-no-selector.tsx

@@ -45,7 +45,7 @@ function Button(props: {
     <button
       type="button"
       className={classNames(
-        'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
+        'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
         !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
         color === 'green' &&
           'bg-green-500 hover:bg-green-600 focus:ring-green-500',

web/lib/util/format.ts

@@ -0,0 +1,9 @@
+const formatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0,
+})
+
+export const formatMoney = (amount: number) => {
+  return 'M$ ' + formatter.format(amount).substr(1)
+}