import clsx from 'clsx' import Link from 'next/link' import { Row } from '../components/layout/row' import { formatMoney } from '../lib/util/format' import { UserLink } from './user-page' import { Contract, contractMetrics, contractPath, } from '../lib/firebase/contracts' import { Col } from './layout/col' import { parseTags } from '../../common/util/parse' import dayjs from 'dayjs' import { TrendingUpIcon } from '@heroicons/react/solid' import { DateTimeTooltip } from './datetime-tooltip' import { CompactTagsList } from './tags-list' import { ClockIcon } from '@heroicons/react/outline' import { fromNow } from '../lib/util/time' export function ContractCard(props: { contract: Contract showHotVolume?: boolean showCloseTime?: boolean className?: string }) { const { contract, showHotVolume, showCloseTime, className } = props const { question, resolution } = contract const { probPercent } = contractMetrics(contract) return (

{question}

) } export function ResolutionOrChance(props: { resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' probPercent: string large?: boolean className?: string }) { const { resolution, probPercent, large, className } = props const resolutionColor = { YES: 'text-primary', NO: 'text-red-400', MKT: 'text-blue-400', CANCEL: 'text-yellow-400', '': '', // Empty if unresolved }[resolution || ''] const resolutionText = { YES: 'YES', NO: 'NO', MKT: 'MKT', CANCEL: 'N/A', '': '', }[resolution || ''] return ( {resolution ? ( <>
Resolved
{resolutionText}
) : ( <>
{probPercent}
chance
)} ) } export function AbbrContractDetails(props: { contract: Contract showHotVolume?: boolean showCloseTime?: boolean }) { const { contract, showHotVolume, showCloseTime } = props const { volume24Hours, creatorName, creatorUsername, closeTime } = contract const { truePool } = contractMetrics(contract) return (
{showHotVolume ? (
{' '} {formatMoney(volume24Hours)}
) : showCloseTime ? (
Closes{' '} {fromNow(closeTime || 0)}
) : (
{formatMoney(truePool)} pool
)}
) } export function ContractDetails(props: { contract: Contract }) { const { contract } = props const { question, description, closeTime, creatorName, creatorUsername } = contract const { truePool, createdDate, resolvedDate } = contractMetrics(contract) const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`) return (
{createdDate} {resolvedDate && contract.resolutionTime ? ( <> {' - '} {resolvedDate} ) : null} {!resolvedDate && closeTime && ( <> {' - '} Date.now() ? 'Trading ends:' : 'Trading ended:' } time={closeTime} > {dayjs(closeTime).format('MMM D, YYYY')} )}
{formatMoney(truePool)} pool
) } // String version of the above, to send to the OpenGraph image generator export function contractTextDetails(contract: Contract) { const { question, description, closeTime } = contract const { truePool, createdDate, resolvedDate } = contractMetrics(contract) const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`) return ( `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` + (closeTime ? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs( closeTime ).format('MMM D, h:mma')}` : '') + ` • ${formatMoney(truePool)} pool` + (tags.length > 0 ? ` • ${tags.join(' ')}` : '') ) }