manifold/web/components/bet-panel.tsx

224 lines
6.0 KiB
TypeScript
Raw Normal View History

2021-12-10 17:14:05 +00:00
import clsx from 'clsx'
import React, { useEffect, useRef, useState } from 'react'
2021-12-11 00:06:17 +00:00
2021-12-10 17:14:05 +00:00
import { useUser } from '../hooks/use-user'
import { Contract } from '../../common/contract'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { Spacer } from './layout/spacer'
import { YesNoSelector } from './yes-no-selector'
2022-01-05 18:23:44 +00:00
import {
formatMoney,
formatPercent,
formatWithCommas,
} from '../lib/util/format'
2021-12-13 18:32:40 +00:00
import { Title } from './title'
import {
getProbability,
calculateShares,
getProbabilityAfterBet,
calculatePayoutAfterCorrectBet,
} from '../../common/calculate'
2021-12-18 07:09:11 +00:00
import { firebaseLogin } from '../lib/firebase/users'
import { Bet } from '../../common/bet'
import { placeBet } from '../lib/firebase/api-call'
2022-01-11 03:41:42 +00:00
import { AmountInput } from './amount-input'
import { InfoTooltip } from './info-tooltip'
import { OutcomeLabel } from './outcome-label'
// Focus helper from https://stackoverflow.com/a/54159564/1222351
function useFocus(): [React.RefObject<HTMLElement>, () => void] {
const htmlElRef = useRef<HTMLElement>(null)
const setFocus = () => {
htmlElRef.current && htmlElRef.current.focus()
}
return [htmlElRef, setFocus]
}
export function BetPanel(props: {
contract: Contract
className?: string
title?: string // Set if BetPanel is on a feed modal
selected?: 'YES' | 'NO'
}) {
useEffect(() => {
// warm up cloud function
placeBet({}).catch()
}, [])
const { contract, className, title, selected } = props
2021-12-10 17:14:05 +00:00
const user = useUser()
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
const [inputRef, focusAmountInput] = useFocus()
const [error, setError] = useState<string | undefined>()
2021-12-10 17:14:05 +00:00
const [isSubmitting, setIsSubmitting] = useState(false)
const [wasSubmitted, setWasSubmitted] = useState(false)
function onBetChoice(choice: 'YES' | 'NO') {
setBetChoice(choice)
setWasSubmitted(false)
focusAmountInput()
}
2022-01-11 03:41:42 +00:00
function onBetChange(newAmount: number | undefined) {
setWasSubmitted(false)
2022-01-11 03:41:42 +00:00
setBetAmount(newAmount)
if (!betChoice) {
setBetChoice('YES')
}
2021-12-10 16:04:59 +00:00
}
2021-12-10 17:14:05 +00:00
async function submitBet() {
if (!user || !betAmount) return
if (user.balance < betAmount) {
2021-12-15 09:06:03 +00:00
setError('Insufficient balance')
return
}
setError(undefined)
2021-12-10 17:14:05 +00:00
setIsSubmitting(true)
2021-12-11 00:06:17 +00:00
const result = await placeBet({
amount: betAmount,
outcome: betChoice,
2021-12-11 00:40:23 +00:00
contractId: contract.id,
}).then((r) => r.data as any)
2021-12-15 18:12:47 +00:00
2021-12-11 00:06:17 +00:00
console.log('placed bet. Result:', result)
2021-12-10 17:14:05 +00:00
2021-12-15 18:12:47 +00:00
if (result?.status === 'success') {
setIsSubmitting(false)
setWasSubmitted(true)
setBetAmount(undefined)
} else {
setError(result?.error || 'Error placing bet')
setIsSubmitting(false)
}
2021-12-10 17:14:05 +00:00
}
const betDisabled = isSubmitting || !betAmount || error
2021-12-10 17:14:05 +00:00
const initialProb = getProbability(contract.totalShares)
const resultProb = getProbabilityAfterBet(
contract.totalShares,
betChoice || 'YES',
betAmount ?? 0
)
const shares = calculateShares(
contract.totalShares,
betAmount ?? 0,
betChoice || 'YES'
)
const currentPayout = betAmount
? calculatePayoutAfterCorrectBet(contract, {
outcome: betChoice,
amount: betAmount,
shares,
} as Bet)
: 0
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
2022-01-27 06:38:22 +00:00
const panelTitle = title ?? 'Place a trade'
if (title) {
focusAmountInput()
}
return (
2022-01-06 09:49:41 +00:00
<Col
className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)}
>
<Title
2022-01-27 06:38:22 +00:00
className={clsx('!mt-0', title ? '!text-xl' : '!text-neutral')}
text={panelTitle}
/>
2021-12-15 09:06:03 +00:00
2022-01-27 06:38:22 +00:00
{/* <div className="mt-2 mb-1 text-sm text-gray-500">Outcome</div> */}
<YesNoSelector
2022-01-27 06:38:22 +00:00
className="mb-4"
selected={betChoice}
2021-12-13 18:32:40 +00:00
onSelect={(choice) => onBetChoice(choice)}
/>
<div className="my-3 text-sm text-gray-500 text-left">Amount </div>
2022-01-11 03:41:42 +00:00
<AmountInput
inputClassName="w-full"
amount={betAmount}
onChange={onBetChange}
error={error}
setError={setError}
disabled={isSubmitting}
inputRef={inputRef}
2022-01-11 03:41:42 +00:00
/>
<Spacer h={4} />
<div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
<Row>
2021-12-15 09:06:03 +00:00
<div>{formatPercent(initialProb)}</div>
<div className="mx-2"></div>
<div>{formatPercent(resultProb)}</div>
</Row>
2021-12-10 17:14:05 +00:00
{betChoice && (
<>
<Spacer h={4} />
<Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
Payout if <OutcomeLabel outcome={betChoice} />
<InfoTooltip
text={`Current payout for ${formatWithCommas(
shares
)} / ${formatWithCommas(
shares +
contract.totalShares[betChoice] -
contract.phantomShares[betChoice]
)} ${betChoice} shares`}
/>
</Row>
<div>
{formatMoney(currentPayout)}
&nbsp; <span>(+{currentReturnPercent})</span>
</div>
</>
)}
<Spacer h={6} />
2021-12-18 07:09:11 +00:00
{user ? (
<button
className={clsx(
'btn',
betDisabled
? 'btn-disabled'
: betChoice === 'YES'
? 'btn-primary'
: 'bg-red-400 hover:bg-red-500 border-none',
isSubmitting ? 'loading' : ''
)}
onClick={betDisabled ? undefined : submitBet}
>
{isSubmitting ? 'Submitting...' : 'Submit trade'}
2021-12-18 07:09:11 +00:00
</button>
) : (
<button
className="btn mt-4 border-none normal-case text-lg font-medium whitespace-nowrap px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
2021-12-18 07:09:11 +00:00
onClick={firebaseLogin}
>
Sign in to trade!
2021-12-18 07:09:11 +00:00
</button>
)}
{wasSubmitted && <div className="mt-4">Trade submitted!</div>}
</Col>
)
}