import clsx from 'clsx'
import Link from 'next/link'
import { Row } from '../layout/row'
import { formatLargeNumber, formatPercent } from 'common/util/format'
import {
Contract,
contractPath,
getBinaryProbPercent,
} from 'web/lib/firebase/contracts'
import { Col } from '../layout/col'
import {
Binary,
CPMM,
DPM,
FreeResponse,
FreeResponseContract,
FullContract,
NumericContract,
} from 'common/contract'
import {
AnswerLabel,
BinaryContractOutcomeLabel,
FreeResponseOutcomeLabel,
} from '../outcome-label'
import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
import { AvatarDetails, MiscDetails } from './contract-details'
import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
import { QuickBet, ProbBar, getColor } from './quick-bet'
import { useContractWithPreload } from 'web/hooks/use-contract'
export function ContractCard(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
className?: string
}) {
const { showHotVolume, showCloseTime, className } = props
const contract = useContractWithPreload(props.contract) ?? props.contract
const { question, outcomeType } = contract
const marketClosed = (contract.closeTime || Infinity) < Date.now()
const showQuickBet = !(
marketClosed ||
(outcomeType === 'FREE_RESPONSE' && getTopAnswer(contract) === undefined)
)
return (
{question}
{outcomeType === 'FREE_RESPONSE' && (
}
truncate="long"
/>
)}
{showQuickBet ? (
) : (
{outcomeType === 'BINARY' && (
)}
{outcomeType === 'NUMERIC' && (
)}
{outcomeType === 'FREE_RESPONSE' && (
}
truncate="long"
/>
)}
)}
)
}
export function BinaryResolutionOrChance(props: {
contract: FullContract
large?: boolean
className?: string
}) {
const { contract, large, className } = props
const { resolution } = contract
const textColor = `text-${getColor(contract)}`
return (
{resolution ? (
<>
Resolved
>
) : (
<>
{getBinaryProbPercent(contract)}
chance
>
)}
)
}
function FreeResponseTopAnswer(props: {
contract: FreeResponseContract
truncate: 'short' | 'long' | 'none'
className?: string
}) {
const { contract, truncate } = props
const topAnswer = getTopAnswer(contract)
return topAnswer ? (
) : null
}
export function FreeResponseResolutionOrChance(props: {
contract: FreeResponseContract
truncate: 'short' | 'long' | 'none'
className?: string
}) {
const { contract, truncate, className } = props
const { resolution } = contract
const topAnswer = getTopAnswer(contract)
const textColor = `text-${getColor(contract)}`
return (
{resolution ? (
<>
Resolved
>
) : (
topAnswer && (
{formatPercent(getOutcomeProbability(contract, topAnswer.id))}
chance
)
)}
)
}
export function NumericResolutionOrExpectation(props: {
contract: NumericContract
className?: string
}) {
const { contract, className } = props
const { resolution } = contract
const textColor = `text-${getColor(contract)}`
const resolutionValue =
contract.resolutionValue ?? getValueFromBucket(resolution ?? '', contract)
return (
{resolution ? (
<>
Resolved
{resolutionValue}
>
) : (
<>
{formatLargeNumber(getExpectedValue(contract))}
expected
>
)}
)
}