290 lines
8.7 KiB
TypeScript
290 lines
8.7 KiB
TypeScript
import clsx from 'clsx'
|
|
import {
|
|
getOutcomeProbability,
|
|
getOutcomeProbabilityAfterBet,
|
|
getTopAnswer,
|
|
} from 'common/calculate'
|
|
import { getExpectedValue } from 'common/calculate-dpm'
|
|
import {
|
|
Contract,
|
|
FullContract,
|
|
CPMM,
|
|
DPM,
|
|
Binary,
|
|
NumericContract,
|
|
FreeResponseContract,
|
|
} from 'common/contract'
|
|
import {
|
|
formatLargeNumber,
|
|
formatMoney,
|
|
formatPercent,
|
|
} from 'common/util/format'
|
|
import { useState } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { useUserContractBets } from 'web/hooks/use-user-bets'
|
|
import { placeBet } from 'web/lib/firebase/api-call'
|
|
import { getBinaryProb, getBinaryProbPercent } from 'web/lib/firebase/contracts'
|
|
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
|
|
import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
|
|
import { Col } from '../layout/col'
|
|
import { OUTCOME_TO_COLOR } from '../outcome-label'
|
|
import { useSaveShares } from '../use-save-shares'
|
|
|
|
const BET_SIZE = 10
|
|
|
|
export function QuickBet(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
|
|
const user = useUser()
|
|
const userBets = useUserContractBets(user?.id, contract.id)
|
|
const topAnswer =
|
|
contract.outcomeType === 'FREE_RESPONSE'
|
|
? getTopAnswer(contract as FreeResponseContract)
|
|
: undefined
|
|
|
|
// TODO: yes/no from useSaveShares doesn't work on numeric contracts
|
|
const { yesFloorShares, noFloorShares } = useSaveShares(
|
|
contract as FullContract<DPM | CPMM, Binary | FreeResponseContract>,
|
|
userBets,
|
|
topAnswer?.number.toString() || undefined
|
|
)
|
|
const hasUpShares =
|
|
yesFloorShares || (noFloorShares && contract.outcomeType === 'NUMERIC')
|
|
const hasDownShares =
|
|
noFloorShares && yesFloorShares <= 0 && contract.outcomeType !== 'NUMERIC'
|
|
|
|
const [upHover, setUpHover] = useState(false)
|
|
const [downHover, setDownHover] = useState(false)
|
|
|
|
let previewProb = undefined
|
|
try {
|
|
previewProb = upHover
|
|
? getOutcomeProbabilityAfterBet(
|
|
contract,
|
|
quickOutcome(contract, 'UP') || '',
|
|
BET_SIZE
|
|
)
|
|
: downHover
|
|
? 1 -
|
|
getOutcomeProbabilityAfterBet(
|
|
contract,
|
|
quickOutcome(contract, 'DOWN') || '',
|
|
BET_SIZE
|
|
)
|
|
: undefined
|
|
} catch (e) {
|
|
// Catch any errors from hovering on an invalid option
|
|
}
|
|
|
|
const color = getColor(contract, previewProb)
|
|
|
|
async function placeQuickBet(direction: 'UP' | 'DOWN') {
|
|
const betPromise = async () => {
|
|
const outcome = quickOutcome(contract, direction)
|
|
return await placeBet({
|
|
amount: BET_SIZE,
|
|
outcome,
|
|
contractId: contract.id,
|
|
})
|
|
}
|
|
const shortQ = contract.question.slice(0, 20)
|
|
toast.promise(betPromise(), {
|
|
loading: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
|
|
success: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
|
|
error: (err) => `${err.message}`,
|
|
})
|
|
}
|
|
|
|
function quickOutcome(contract: Contract, direction: 'UP' | 'DOWN') {
|
|
if (contract.outcomeType === 'BINARY') {
|
|
return direction === 'UP' ? 'YES' : 'NO'
|
|
}
|
|
if (contract.outcomeType === 'FREE_RESPONSE') {
|
|
// TODO: Implement shorting of free response answers
|
|
if (direction === 'DOWN') {
|
|
throw new Error("Can't bet against free response answers")
|
|
}
|
|
return getTopAnswer(contract)?.id
|
|
}
|
|
if (contract.outcomeType === 'NUMERIC') {
|
|
// TODO: Ideally an 'UP' bet would be a uniform bet between [current, max]
|
|
throw new Error("Can't quick bet on numeric markets")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Col
|
|
className={clsx(
|
|
'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
|
|
// Use this for colored QuickBet panes
|
|
// `bg-opacity-10 bg-${color}`
|
|
)}
|
|
>
|
|
{/* Up bet triangle */}
|
|
<div>
|
|
<div
|
|
className="peer absolute top-0 left-0 right-0 h-[50%]"
|
|
onMouseEnter={() => setUpHover(true)}
|
|
onMouseLeave={() => setUpHover(false)}
|
|
onClick={() => placeQuickBet('UP')}
|
|
/>
|
|
<div className="mt-2 text-center text-xs text-transparent peer-hover:text-gray-400">
|
|
{formatMoney(10)}
|
|
</div>
|
|
|
|
{hasUpShares > 0 ? (
|
|
<TriangleFillIcon
|
|
className={clsx(
|
|
'mx-auto h-5 w-5',
|
|
upHover ? `text-${color}` : 'text-gray-400'
|
|
)}
|
|
/>
|
|
) : (
|
|
<TriangleFillIcon
|
|
className={clsx(
|
|
'mx-auto h-5 w-5',
|
|
upHover ? `text-${color}` : 'text-gray-200'
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<QuickOutcomeView contract={contract} previewProb={previewProb} />
|
|
|
|
{/* Down bet triangle */}
|
|
<div>
|
|
<div
|
|
className="peer absolute bottom-0 left-0 right-0 h-[50%]"
|
|
onMouseEnter={() => setDownHover(true)}
|
|
onMouseLeave={() => setDownHover(false)}
|
|
onClick={() => placeQuickBet('DOWN')}
|
|
></div>
|
|
{hasDownShares > 0 ? (
|
|
<TriangleDownFillIcon
|
|
className={clsx(
|
|
'mx-auto h-5 w-5',
|
|
downHover ? `text-${color}` : 'text-gray-400'
|
|
)}
|
|
/>
|
|
) : (
|
|
<TriangleDownFillIcon
|
|
className={clsx(
|
|
'mx-auto h-5 w-5',
|
|
downHover ? `text-${color}` : 'text-gray-200'
|
|
)}
|
|
/>
|
|
)}
|
|
<div className="mb-2 text-center text-xs text-transparent peer-hover:text-gray-400">
|
|
{formatMoney(10)}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
export function ProbBar(props: { contract: Contract; previewProb?: number }) {
|
|
const { contract, previewProb } = props
|
|
const color = getColor(contract, previewProb)
|
|
const prob = previewProb ?? getProb(contract)
|
|
return (
|
|
<>
|
|
<div
|
|
className={clsx(
|
|
'absolute right-0 top-0 w-2 rounded-tr-md transition-all',
|
|
'bg-gray-200'
|
|
)}
|
|
style={{ height: `${100 * (1 - prob)}%` }}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
'absolute right-0 bottom-0 w-2 rounded-br-md transition-all',
|
|
`bg-${color}`,
|
|
// If we're showing the full bar, also round the top
|
|
prob === 1 ? 'rounded-tr-md' : ''
|
|
)}
|
|
style={{ height: `${100 * prob}%` }}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function QuickOutcomeView(props: {
|
|
contract: Contract
|
|
previewProb?: number
|
|
caption?: 'chance' | 'expected'
|
|
}) {
|
|
const { contract, previewProb, caption } = props
|
|
const { outcomeType } = contract
|
|
// If there's a preview prob, display that instead of the current prob
|
|
const override =
|
|
previewProb === undefined ? undefined : formatPercent(previewProb)
|
|
const textColor = `text-${getColor(contract, previewProb)}`
|
|
|
|
let display: string | undefined
|
|
switch (outcomeType) {
|
|
case 'BINARY':
|
|
display = getBinaryProbPercent(contract)
|
|
break
|
|
case 'NUMERIC':
|
|
display = formatLargeNumber(getExpectedValue(contract as NumericContract))
|
|
break
|
|
case 'FREE_RESPONSE':
|
|
const topAnswer = getTopAnswer(contract as FreeResponseContract)
|
|
display =
|
|
topAnswer &&
|
|
formatPercent(getOutcomeProbability(contract, topAnswer.id))
|
|
break
|
|
}
|
|
|
|
return (
|
|
<Col className={clsx('items-center text-3xl', textColor)}>
|
|
{override ?? display}
|
|
{caption && <div className="text-base">{caption}</div>}
|
|
<ProbBar contract={contract} previewProb={previewProb} />
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
// Return a number from 0 to 1 for this contract
|
|
// Resolved contracts are set to 1, for coloring purposes (even if NO)
|
|
function getProb(contract: Contract) {
|
|
const { outcomeType, resolution } = contract
|
|
return resolution
|
|
? 1
|
|
: outcomeType === 'BINARY'
|
|
? getBinaryProb(contract)
|
|
: outcomeType === 'FREE_RESPONSE'
|
|
? getOutcomeProbability(contract, getTopAnswer(contract)?.id || '')
|
|
: outcomeType === 'NUMERIC'
|
|
? getNumericScale(contract as NumericContract)
|
|
: 1 // Should not happen
|
|
}
|
|
|
|
function getNumericScale(contract: NumericContract) {
|
|
const { min, max } = contract
|
|
const ev = getExpectedValue(contract)
|
|
return (ev - min) / (max - min)
|
|
}
|
|
|
|
export function getColor(contract: Contract, previewProb?: number) {
|
|
// TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
|
|
// TODO: Try injecting a gradient here
|
|
// return 'primary'
|
|
const { resolution } = contract
|
|
if (resolution) {
|
|
return (
|
|
OUTCOME_TO_COLOR[resolution as 'YES' | 'NO' | 'CANCEL' | 'MKT'] ??
|
|
// If resolved to a FR answer, use 'primary'
|
|
'primary'
|
|
)
|
|
}
|
|
if (contract.outcomeType === 'NUMERIC') {
|
|
return 'blue-400'
|
|
}
|
|
|
|
const marketClosed = (contract.closeTime || Infinity) < Date.now()
|
|
const prob = previewProb ?? getProb(contract)
|
|
return marketClosed ? 'gray-400' : prob >= 0.5 ? 'primary' : 'red-400'
|
|
}
|