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} - /> -
- -
-
+ +