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,69 +73,73 @@ 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"
-          style={{ maxWidth: 80 }}
+          className="input input-bordered input-md pl-10 block"
+          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">Implied probability</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" style={{ fontFamily: 'sans-serif' }}>
+        {formatMoney(estimatedWinnings)} (+{estimatedReturnPercent})
+      </div>
+
+      <Spacer h={6} />
+
+      <button
+        className={clsx(
+          'btn',
+          betDisabled
+            ? 'btn-disabled'
+            : betChoice === 'YES'
+            ? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
+            : 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
+        )}
+        onClick={betDisabled ? undefined : submitBet}
+      >
+        Place bet
+      </button>
+
+      {wasSubmitted && (
+        <Col>
           <Spacer h={4} />
 
-          <div className="p-2 font-medium">Average price</div>
-          <div className="px-2">{betChoice === 'YES' ? 0.57 : 0.43} points</div>
+          <div>Bet submitted!</div>
 
-          <Spacer h={2} />
+          <Spacer h={4} />
 
-          <div className="p-2 font-medium">Estimated winnings</div>
-          <div className="px-2">
-            {Math.floor(betAmount / (betChoice === 'YES' ? 0.57 : 0.43))} points
-          </div>
-
-          <Spacer h={6} />
-
-          <button
-            className={clsx(
-              'btn',
-              betDisabled
-                ? 'btn-disabled'
-                : betChoice === 'YES'
-                ? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
-                : 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
-            )}
-            onClick={betDisabled ? undefined : submitBet}
-          >
-            Place bet
+          <button className="btn btn-accent btn-xs" onClick={newBet}>
+            New bet
           </button>
-
-          {wasSubmitted && (
-            <Col>
-              <Spacer h={4} />
-
-              <div>Bet submitted!</div>
-
-              <Spacer h={4} />
-
-              <button className="btn btn-accent btn-xs" onClick={newBet}>
-                New bet
-              </button>
-            </Col>
-          )}
-        </>
+        </Col>
       )}
     </Col>
   )
@@ -130,3 +147,29 @@ 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/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)
+}