Advanced metrics for bet panel

web/components/advanced-panel.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import { useState } from 'react'
+
+export function AdvancedPanel(props: { children: any }) {
+  const { children } = props
+  const [collapsed, setCollapsed] = useState(true)
+
+  return (
+    <div
+      tabIndex={0}
+      className={clsx(
+        'cursor-pointer relative collapse collapse-arrow',
+        collapsed ? 'collapse-close' : 'collapse-open'
+      )}
+    >
+      <div onClick={() => setCollapsed((collapsed) => !collapsed)}>
+        <div className="mt-4 mr-6 text-sm text-gray-400 text-right">
+          Advanced
+        </div>
+        <div
+          className="collapse-title p-0 absolute w-0 h-0 min-h-0"
+          style={{
+            top: -2,
+            right: -15,
+            color: '#9ca3af' /* gray-400 */,
+          }}
+        />
+      </div>
+
+      <div className="collapse-content !p-0 m-0 !bg-transparent">
+        {children}
+      </div>
+    </div>
+  )
+}

web/components/bet-panel.tsx

@@ -8,14 +8,22 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
-import { formatMoney, formatPercent } from '../lib/util/format'
+import {
+  formatMoney,
+  formatPercent,
+  formatWithCommas,
+} from '../lib/util/format'
 import { Title } from './title'
 import {
   getProbability,
   calculateShares,
   getProbabilityAfterBet,
+  calculatePayout,
 } from '../lib/calculate'
 import { firebaseLogin } from '../lib/firebase/users'
+import { OutcomeLabel } from './outcome-label'
+import { AdvancedPanel } from './advanced-panel'
+import { Bet } from '../lib/firebase/bets'
 
 export function BetPanel(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
@@ -151,6 +159,29 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
         {formatMoney(estimatedWinnings)}   (+{estimatedReturnPercent})
       </div>
 
+      <AdvancedPanel>
+        <div className="mt-2 mb-1 text-sm text-gray-400">
+          <OutcomeLabel outcome={betChoice} /> shares
+        </div>
+        <div>
+          {formatWithCommas(shares)} of{' '}
+          {formatWithCommas(shares + contract.totalShares[betChoice])}
+        </div>
+
+        <div className="mt-2 mb-1 text-sm text-gray-400">
+          Current payout if <OutcomeLabel outcome={betChoice} />
+        </div>
+        <div>
+          {formatMoney(
+            calculatePayout(
+              contract,
+              { outcome: betChoice, amount: betAmount ?? 0, shares } as Bet,
+              betChoice
+            )
+          )}
+        </div>
+      </AdvancedPanel>
+
       <Spacer h={6} />
 
       {user ? (

web/pages/create.tsx

@@ -11,6 +11,7 @@ import { useUser } from '../hooks/use-user'
 import { Contract, path } from '../lib/firebase/contracts'
 import { Page } from '../components/page'
 import { formatMoney } from '../lib/util/format'
+import { AdvancedPanel } from '../components/advanced-panel'
 
 // Allow user to create a new contract
 export default function NewContract() {
@@ -29,7 +30,6 @@ export default function NewContract() {
   const [closeDate, setCloseDate] = useState('')
 
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [collapsed, setCollapsed] = useState(true)
 
   const closeTime = dateToMillis(closeDate) || undefined
   // We'd like this to look like "Apr 2, 2022, 23:59:59 PM PT" but timezones are hard with dayjs
@@ -141,29 +141,7 @@ export default function NewContract() {
             />
           </div>
 
-          {/* Collapsible "Advanced" section */}
-          <div
-            tabIndex={0}
-            className={clsx(
-              'cursor-pointer relative collapse collapse-arrow',
-              collapsed ? 'collapse-close' : 'collapse-open'
-            )}
-          >
-            <div onClick={() => setCollapsed((collapsed) => !collapsed)}>
-              <div className="mt-4 mr-6 text-sm text-gray-400 text-right">
-                Advanced
-              </div>
-              <div
-                className="collapse-title p-0 absolute w-0 h-0 min-h-0"
-                style={{
-                  top: -2,
-                  right: -15,
-                  color: '#9ca3af' /* gray-400 */,
-                }}
-              />
-            </div>
-
-            <div className="collapse-content !p-0 m-0 !bg-transparent">
+          <AdvancedPanel>
             <div className="form-control mb-1">
               <label className="label">
                 <span className="label-text">Subsidize your market</span>
@@ -215,8 +193,7 @@ export default function NewContract() {
                 {closeDate ? formattedCloseTime : 'this time'}
               </span>
             </label>
-            </div>
-          </div>
+          </AdvancedPanel>
 
           <Spacer h={4} />