diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 565a5219..36c1f83d 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { Contract } from '../lib/firebase/contracts' import { Col } from './layout/col' +import { Row } from './layout/row' import { Spacer } from './layout/spacer' import { YesNoSelector } from './yes-no-selector' @@ -8,7 +9,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) { const { contract, className } = props const [betChoice, setBetChoice] = useState<'YES' | 'NO'>('YES') - const [shares, setShares] = useState(0) + const [betAmount, setBetAmount] = useState(undefined) return ( @@ -23,29 +24,40 @@ export function BetPanel(props: { contract: Contract; className?: string }) { -
Shares
-
+
Bet amount
+ setShares(parseInt(e.target.value) || 0)} + placeholder="0" + value={betAmount} + onChange={(e) => setBetAmount(parseInt(e.target.value) || 0)} onFocus={(e) => e.target.select()} /> -
+
points
+ - + {!!betAmount && ( + <> + -
Price
-
- {shares * (betChoice === 'YES' ? 57 : 43)} points -
+
Average price
+
+ {betChoice === 'YES' ? 0.57 : 0.43} points +
- + - {shares !== 0 && ( - +
Estimated winnings
+
+ {Math.floor(betAmount / (betChoice === 'YES' ? 0.57 : 0.43))} points +
+ + + + + )} )