diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 0fa026d3..574fdd53 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -18,14 +18,13 @@ import { calculateShares, getProbabilityAfterBet, calculatePayoutAfterCorrectBet, - calculateEstimatedWinnings, } from '../../common/calculate' import { firebaseLogin } from '../lib/firebase/users' -import { OutcomeLabel } from './outcome-label' -import { AdvancedPanel } from './advanced-panel' import { Bet } from '../../common/bet' import { placeBet } from '../lib/firebase/api-call' import { AmountInput } from './amount-input' +import { InfoTooltip } from './info-tooltip' +import { OutcomeLabel } from './outcome-label' export function BetPanel(props: { contract: Contract; className?: string }) { useEffect(() => { @@ -99,17 +98,16 @@ export function BetPanel(props: { contract: Contract; className?: string }) { betChoice ) - const estimatedWinnings = calculateEstimatedWinnings( - contract.totalShares, - shares, - betChoice - ) - - const estimatedReturn = betAmount - ? (estimatedWinnings - betAmount) / betAmount + const currentPayout = betAmount + ? calculatePayoutAfterCorrectBet(contract, { + outcome: betChoice, + amount: betAmount, + shares, + } as Bet) : 0 - const estimatedReturnPercent = (estimatedReturn * 100).toFixed() + '%' + const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0 + const currentReturnPercent = (currentReturn * 100).toFixed() + '%' return ( onBetChoice(choice)} /> -
Amount
+
Amount
{formatPercent(resultProb)} -
- Estimated max payout -
+ + Payout if + +
- {formatMoney(estimatedWinnings)}  {' '} - {estimatedWinnings ? (+{estimatedReturnPercent}) : null} + {formatMoney(currentPayout)} +   (+{currentReturnPercent})
- -
- shares -
-
- {formatWithCommas(shares)} of{' '} - {formatWithCommas(shares + contract.totalShares[betChoice])} -
- -
- Current payout if -
-
- {formatMoney( - betAmount - ? calculatePayoutAfterCorrectBet(contract, { - outcome: betChoice, - amount: betAmount, - shares, - } as Bet) - : 0 - )} -
-
- {user ? ( diff --git a/web/components/info-tooltip.tsx b/web/components/info-tooltip.tsx new file mode 100644 index 00000000..e6d9430a --- /dev/null +++ b/web/components/info-tooltip.tsx @@ -0,0 +1,10 @@ +import { InformationCircleIcon } from '@heroicons/react/solid' + +export function InfoTooltip(props: { text: string }) { + const { text } = props + return ( +
+ +
+ ) +}