import clsx from 'clsx' import { ReactNode } from 'react' import { Answer } from 'common/answer' import { getProbability } from 'common/calculate' import { getValueFromBucket } from 'common/calculate-dpm' import { BinaryContract, Contract, FreeResponseContract, resolution, } from 'common/contract' import { formatLargeNumber, formatPercent } from 'common/util/format' import { ClientRender } from './client-render' export function OutcomeLabel(props: { contract: Contract outcome: resolution | string truncate: 'short' | 'long' | 'none' value?: number }) { const { outcome, contract, truncate, value } = props const { outcomeType } = contract if (outcomeType === 'PSEUDO_NUMERIC') return if (outcomeType === 'BINARY') return if (outcomeType === 'NUMERIC') return ( {value ?? getValueFromBucket(outcome, contract)} ) return ( ) } export function BinaryOutcomeLabel(props: { outcome: resolution }) { const { outcome } = props if (outcome === 'YES') return if (outcome === 'NO') return if (outcome === 'MKT') return return } export function PseudoNumericOutcomeLabel(props: { outcome: resolution }) { const { outcome } = props if (outcome === 'YES') return if (outcome === 'NO') return if (outcome === 'MKT') return return } export function BinaryContractOutcomeLabel(props: { contract: BinaryContract resolution: resolution }) { const { contract, resolution } = props if (resolution === 'MKT') { const prob = contract.resolutionProbability ?? getProbability(contract) return } return } export function FreeResponseOutcomeLabel(props: { contract: FreeResponseContract resolution: string | 'CANCEL' | 'MKT' truncate: 'short' | 'long' | 'none' answerClassName?: string }) { const { contract, resolution, truncate, answerClassName } = props if (resolution === 'CANCEL') return if (resolution === 'MKT') return const chosen = contract.answers?.find((answer) => answer.id === resolution) if (!chosen) return return ( ) } export const OUTCOME_TO_COLOR = { YES: 'primary', NO: 'red-400', CANCEL: 'yellow-400', MKT: 'blue-400', } export function YesLabel() { return YES } export function HigherLabel() { return HIGHER } export function LowerLabel() { return LOWER } export function NoLabel() { return NO } export function CancelLabel() { return N/A } export function ProbLabel() { return PROB } export function MultiLabel() { return MANY } export function ProbPercentLabel(props: { prob: number }) { const { prob } = props return {formatPercent(prob)} } export function NumericValueLabel(props: { value: number }) { const { value } = props return {formatLargeNumber(value)} } export function AnswerNumberLabel(props: { number: string }) { return #{props.number} } export function AnswerLabel(props: { answer: Answer truncate: 'short' | 'long' | 'none' className?: string }) { const { answer, truncate, className } = props const { text } = answer let truncated = text if (truncate === 'short' && text.length > 20) { truncated = text.slice(0, 10) + '...' + text.slice(-10) } else if (truncate === 'long' && text.length > 75) { truncated = text.slice(0, 75) + '...' } return ( {truncated} ) } function FreeResponseAnswerToolTip(props: { text: string children?: ReactNode }) { const { text } = props return ( <> {props.children} {props.children} ) }