diff --git a/web/components/advanced-panel.tsx b/web/components/advanced-panel.tsx
new file mode 100644
index 00000000..491e9c3b
--- /dev/null
+++ b/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 (
+
+
setCollapsed((collapsed) => !collapsed)}>
+
+ Advanced
+
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 55467527..4bb5702d 100644
--- a/web/components/bet-panel.tsx
+++ b/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})
+
+
+ shares
+
+
+ {formatWithCommas(shares)} of{' '}
+ {formatWithCommas(shares + contract.totalShares[betChoice])}
+
+
+
+ Current payout if
+
+
+ {formatMoney(
+ calculatePayout(
+ contract,
+ { outcome: betChoice, amount: betAmount ?? 0, shares } as Bet,
+ betChoice
+ )
+ )}
+
+
+
{user ? (
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index c4303148..2d6c2027 100644
--- a/web/pages/create.tsx
+++ b/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,82 +141,59 @@ export default function NewContract() {
/>
- {/* Collapsible "Advanced" section */}
-
-
setCollapsed((collapsed) => !collapsed)}>
-
- Advanced
+
+
+
+
+
+
+
+ Remaining balance
-
+ {formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
+
+
+
+
+
+
+
+ e.stopPropagation()}
+ onChange={(e) => setCloseDate(e.target.value || '')}
+ min={new Date().toISOString().split('T')[0]}
+ disabled={isSubmitting}
+ value={closeDate}
/>
-
-
-
-
-
-
-
-
- Remaining balance
-
-
- {formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
-
-
-
-
-
-
-
- e.stopPropagation()}
- onChange={(e) => setCloseDate(e.target.value || '')}
- min={new Date().toISOString().split('T')[0]}
- disabled={isSubmitting}
- value={closeDate}
- />
-
-
-
-
+
+