Update bet panel logic

This commit is contained in:
James Grugett 2022-05-06 14:41:29 -04:00
parent 91990f524f
commit 1e3a7747ee

View File

@ -5,19 +5,15 @@ import {
getOutcomeProbabilityAfterBet, getOutcomeProbabilityAfterBet,
calculateShares, calculateShares,
calculatePayoutAfterCorrectBet, calculatePayoutAfterCorrectBet,
getOutcomeProbability,
} from '../../common/calculate' } from '../../common/calculate'
import { NumericContract } from '../../common/contract' import { NumericContract } from '../../common/contract'
import { import { formatPercent, formatMoney } from '../../common/util/format'
formatPercent,
formatWithCommas,
formatMoney,
} from '../../common/util/format'
import { useFocus } from '../hooks/use-focus' import { useFocus } from '../hooks/use-focus'
import { useUser } from '../hooks/use-user' import { useUser } from '../hooks/use-user'
import { placeBet } from '../lib/firebase/api-call' import { placeBet } from '../lib/firebase/api-call'
import { firebaseLogin, User } from '../lib/firebase/users' import { firebaseLogin, User } from '../lib/firebase/users'
import { BucketAmountInput, BuyAmountInput } from './amount-input' import { BucketAmountInput, BuyAmountInput } from './amount-input'
import { InfoTooltip } from './info-tooltip'
import { Col } from './layout/col' import { Col } from './layout/col'
import { Row } from './layout/row' import { Row } from './layout/row'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
@ -69,13 +65,18 @@ function NumericBuyPanel(props: {
focusAmountInput() focusAmountInput()
}, [focusAmountInput]) }, [focusAmountInput])
function onBucketChange(newBucket: string | undefined) {
setWasSubmitted(false)
setBucketChoice(newBucket)
}
function onBetChange(newAmount: number | undefined) { function onBetChange(newAmount: number | undefined) {
setWasSubmitted(false) setWasSubmitted(false)
setBetAmount(newAmount) setBetAmount(newAmount)
} }
async function submitBet() { async function submitBet() {
if (!user || !betAmount) return if (!user || !betAmount || !bucketChoice) return
setError(undefined) setError(undefined)
setIsSubmitting(true) setIsSubmitting(true)
@ -99,43 +100,32 @@ function NumericBuyPanel(props: {
} }
} }
const betDisabled = isSubmitting || !betAmount || error const betDisabled = isSubmitting || !betAmount || !bucketChoice || error
const initialProb = 0 const initialProb = bucketChoice
const outcomeProb = getOutcomeProbabilityAfterBet( ? getOutcomeProbability(contract, bucketChoice)
contract, : 0
bucketChoice || 'YES', const outcomeProb = bucketChoice
betAmount ?? 0 ? getOutcomeProbabilityAfterBet(contract, bucketChoice, betAmount ?? 0)
)
const resultProb = bucketChoice === 'NO' ? 1 - outcomeProb : outcomeProb
const shares = calculateShares(
contract,
betAmount ?? 0,
bucketChoice || 'YES'
)
const currentPayout = betAmount
? calculatePayoutAfterCorrectBet(contract, {
outcome: bucketChoice,
amount: betAmount,
shares,
} as Bet)
: 0 : 0
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0 const shares = bucketChoice
? calculateShares(contract, betAmount ?? 0, bucketChoice)
: 0
const currentPayout =
betAmount && bucketChoice
? calculatePayoutAfterCorrectBet(contract, {
outcome: bucketChoice,
amount: betAmount,
shares,
} as Bet)
: 0
const currentReturn =
betAmount && bucketChoice ? (currentPayout - betAmount) / betAmount : 0
const currentReturnPercent = formatPercent(currentReturn) const currentReturnPercent = formatPercent(currentReturn)
const dpmTooltip =
contract.mechanism === 'dpm-2'
? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
shares +
contract.totalShares[bucketChoice ?? 'YES'] -
(contract.phantomShares
? contract.phantomShares[bucketChoice ?? 'YES']
: 0)
)} ${bucketChoice ?? 'YES'} shares`
: undefined
return ( return (
<> <>
<div className="my-3 text-left text-sm text-gray-500">Numeric value</div> <div className="my-3 text-left text-sm text-gray-500">Numeric value</div>
@ -145,7 +135,7 @@ function NumericBuyPanel(props: {
min={min} min={min}
max={max} max={max}
inputClassName="w-full max-w-none" inputClassName="w-full max-w-none"
onChange={(bucket) => setBucketChoice(bucket ? `${bucket}` : undefined)} onChange={(bucket) => onBucketChange(bucket ? `${bucket}` : undefined)}
error={error} error={error}
setError={setError} setError={setError}
disabled={isSubmitting} disabled={isSubmitting}
@ -169,24 +159,16 @@ function NumericBuyPanel(props: {
<Row> <Row>
<div>{formatPercent(initialProb)}</div> <div>{formatPercent(initialProb)}</div>
<div className="mx-2"></div> <div className="mx-2"></div>
<div>{formatPercent(resultProb)}</div> <div>{formatPercent(outcomeProb)}</div>
</Row> </Row>
</Row> </Row>
<Row className="items-center justify-between gap-2 text-sm"> <Row className="items-center justify-between gap-2 text-sm">
<Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500"> <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
<div> <div>
{contract.mechanism === 'dpm-2' ? ( Estimated
<> <br /> payout if correct
Estimated
<br /> payout if correct
</>
) : (
<>Payout if correct</>
)}
</div> </div>
{dpmTooltip && <InfoTooltip text={dpmTooltip} />}
</Row> </Row>
<Row className="flex-wrap items-end justify-end gap-2"> <Row className="flex-wrap items-end justify-end gap-2">
<span className="whitespace-nowrap"> <span className="whitespace-nowrap">
@ -203,11 +185,7 @@ function NumericBuyPanel(props: {
<button <button
className={clsx( className={clsx(
'btn flex-1', 'btn flex-1',
betDisabled betDisabled ? 'btn-disabled' : 'btn-primary',
? 'btn-disabled'
: bucketChoice === 'YES'
? 'btn-primary'
: 'border-none bg-red-400 hover:bg-red-500',
isSubmitting ? 'loading' : '' isSubmitting ? 'loading' : ''
)} )}
onClick={betDisabled ? undefined : submitBet} onClick={betDisabled ? undefined : submitBet}