82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { track } from '@amplitude/analytics-browser'
|
|
import clsx from 'clsx'
|
|
import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
|
|
import { APIError } from 'web/lib/firebase/api'
|
|
import { useState } from 'react'
|
|
import { useMutation } from 'react-query'
|
|
import { placeBet } from 'web/lib/firebase/api'
|
|
import { BuyAmountInput } from './amount-input'
|
|
import { Button } from './button'
|
|
import { Row } from './layout/row'
|
|
import { YesNoSelector } from './yes-no-selector'
|
|
|
|
export function BetInline(props: {
|
|
contract: CPMMBinaryContract | PseudoNumericContract
|
|
className?: string
|
|
}) {
|
|
const { contract, className } = props
|
|
|
|
const [outcome, setOutcome] = useState<'YES' | 'NO'>('YES')
|
|
|
|
const [amount, setAmount] = useState<number>()
|
|
const [error, setError] = useState<string>()
|
|
|
|
// adapted from bet-panel.ts submitBet()
|
|
const submitBet = useMutation(
|
|
() => placeBet({ outcome, amount, contractId: contract.id }),
|
|
{
|
|
onError: (e) =>
|
|
setError(e instanceof APIError ? e.toString() : 'Error placing bet'),
|
|
onSuccess: () => {
|
|
track('bet', {
|
|
location: 'embed',
|
|
outcomeType: contract.outcomeType,
|
|
slug: contract.slug,
|
|
contractId: contract.id,
|
|
amount,
|
|
outcome,
|
|
isLimitOrder: false,
|
|
})
|
|
},
|
|
}
|
|
)
|
|
|
|
const betDisabled = submitBet.isLoading || submitBet.isError || !amount
|
|
|
|
return (
|
|
<Row className={clsx('h-8 items-stretch justify-center gap-3', className)}>
|
|
<div className="text-xl">Bet</div>
|
|
<YesNoSelector
|
|
className="space-x-0"
|
|
btnClassName="rounded-none first:rounded-l-2xl last:rounded-r-2xl"
|
|
selected={outcome}
|
|
onSelect={setOutcome}
|
|
isPseudoNumeric={false}
|
|
/>
|
|
<BuyAmountInput
|
|
className="-mb-4"
|
|
inputClassName={clsx(
|
|
'input-sm w-[100px] !text-base',
|
|
error && 'input-error'
|
|
)}
|
|
amount={amount}
|
|
onChange={setAmount}
|
|
error="" // handle error ourselves
|
|
setError={setError}
|
|
/>
|
|
<Button
|
|
color={({ YES: 'green', NO: 'red' } as const)[outcome]}
|
|
size="xs"
|
|
disabled={betDisabled}
|
|
onClick={() => submitBet.mutate()}
|
|
>
|
|
{submitBet.isLoading
|
|
? 'Submitting'
|
|
: submitBet.isSuccess
|
|
? 'Success!'
|
|
: 'Submit'}
|
|
</Button>
|
|
</Row>
|
|
)
|
|
}
|