2022-01-02 19:09:01 +00:00
|
|
|
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'
|
2022-01-12 19:01:04 +00:00
|
|
|
import {
|
|
|
|
Contract,
|
|
|
|
contractMetrics,
|
|
|
|
contractPath,
|
|
|
|
} from '../lib/firebase/contracts'
|
2022-01-02 20:53:42 +00:00
|
|
|
import { Col } from './layout/col'
|
2022-01-21 23:21:46 +00:00
|
|
|
import { parseTags } from '../../common/util/parse'
|
2022-01-05 17:49:20 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-01-24 07:38:29 +00:00
|
|
|
import { TrendingUpIcon } from '@heroicons/react/solid'
|
2022-01-16 09:16:15 +00:00
|
|
|
import { DateTimeTooltip } from './datetime-tooltip'
|
2022-01-22 20:52:49 +00:00
|
|
|
import { CompactTagsList } from './tags-list'
|
2022-01-24 07:38:29 +00:00
|
|
|
import { ClockIcon } from '@heroicons/react/outline'
|
|
|
|
import { fromNow } from '../lib/util/time'
|
2022-01-02 19:09:01 +00:00
|
|
|
|
2022-01-09 21:21:30 +00:00
|
|
|
export function ContractCard(props: {
|
|
|
|
contract: Contract
|
|
|
|
showHotVolume?: boolean
|
2022-01-17 22:54:00 +00:00
|
|
|
showCloseTime?: boolean
|
2022-01-14 06:55:35 +00:00
|
|
|
className?: string
|
2022-01-09 21:21:30 +00:00
|
|
|
}) {
|
2022-01-17 22:54:00 +00:00
|
|
|
const { contract, showHotVolume, showCloseTime, className } = props
|
2022-01-04 22:09:03 +00:00
|
|
|
const { question, resolution } = contract
|
2022-01-12 19:01:04 +00:00
|
|
|
const { probPercent } = contractMetrics(contract)
|
2022-01-02 19:09:01 +00:00
|
|
|
|
|
|
|
return (
|
2022-01-18 22:55:39 +00:00
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
|
|
|
|
className
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<Link href={contractPath(contract)}>
|
|
|
|
<a className="absolute left-0 right-0 top-0 bottom-0" />
|
|
|
|
</Link>
|
|
|
|
<Row className="justify-between gap-4 mb-2">
|
|
|
|
<p className="font-medium text-indigo-700">{question}</p>
|
|
|
|
<ResolutionOrChance
|
|
|
|
className="items-center"
|
|
|
|
resolution={resolution}
|
|
|
|
probPercent={probPercent}
|
|
|
|
/>
|
|
|
|
</Row>
|
|
|
|
<AbbrContractDetails
|
|
|
|
contract={contract}
|
|
|
|
showHotVolume={showHotVolume}
|
|
|
|
showCloseTime={showCloseTime}
|
2022-01-15 23:28:32 +00:00
|
|
|
/>
|
2022-01-18 22:55:39 +00:00
|
|
|
</div>
|
2022-01-14 22:59:14 +00:00
|
|
|
</div>
|
2022-01-02 19:09:01 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-01-02 20:53:42 +00:00
|
|
|
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 (
|
|
|
|
<Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
|
|
|
|
{resolution ? (
|
|
|
|
<>
|
|
|
|
<div
|
|
|
|
className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
|
|
|
|
>
|
|
|
|
Resolved
|
|
|
|
</div>
|
|
|
|
<div className={resolutionColor}>{resolutionText}</div>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<div className="text-primary">{probPercent}</div>
|
|
|
|
<div
|
|
|
|
className={clsx('text-primary', large ? 'text-xl' : 'text-base')}
|
|
|
|
>
|
|
|
|
chance
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-01-09 21:21:30 +00:00
|
|
|
export function AbbrContractDetails(props: {
|
|
|
|
contract: Contract
|
|
|
|
showHotVolume?: boolean
|
2022-01-17 22:54:00 +00:00
|
|
|
showCloseTime?: boolean
|
2022-01-09 21:21:30 +00:00
|
|
|
}) {
|
2022-01-17 22:54:00 +00:00
|
|
|
const { contract, showHotVolume, showCloseTime } = props
|
|
|
|
const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
|
2022-01-12 19:01:04 +00:00
|
|
|
const { truePool } = contractMetrics(contract)
|
2022-01-05 07:06:30 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Col className={clsx('text-sm text-gray-500 gap-2')}>
|
|
|
|
<Row className="gap-2 flex-wrap">
|
2022-01-13 21:16:47 +00:00
|
|
|
<UserLink
|
|
|
|
className="whitespace-nowrap"
|
|
|
|
name={creatorName}
|
|
|
|
username={creatorUsername}
|
|
|
|
/>
|
2022-01-09 21:21:30 +00:00
|
|
|
<div>•</div>
|
|
|
|
{showHotVolume ? (
|
|
|
|
<div className="whitespace-nowrap">
|
2022-01-12 17:51:46 +00:00
|
|
|
<TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}
|
|
|
|
{formatMoney(volume24Hours)}
|
2022-01-09 21:21:30 +00:00
|
|
|
</div>
|
2022-01-17 22:54:00 +00:00
|
|
|
) : showCloseTime ? (
|
|
|
|
<div className="whitespace-nowrap">
|
2022-01-24 07:38:29 +00:00
|
|
|
<ClockIcon className="h-5 w-5 -my-1 text-gray-500 inline" /> Closes{' '}
|
|
|
|
{fromNow(closeTime || 0)}
|
2022-01-17 22:54:00 +00:00
|
|
|
</div>
|
2022-01-09 21:21:30 +00:00
|
|
|
) : (
|
|
|
|
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
|
|
|
|
)}
|
2022-01-05 07:06:30 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ContractDetails(props: { contract: Contract }) {
|
|
|
|
const { contract } = props
|
2022-01-13 21:16:47 +00:00
|
|
|
const { question, description, closeTime, creatorName, creatorUsername } =
|
|
|
|
contract
|
2022-01-12 19:01:04 +00:00
|
|
|
const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
|
2022-01-02 19:09:01 +00:00
|
|
|
|
2022-01-04 22:09:03 +00:00
|
|
|
const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
|
|
|
|
|
2022-01-02 19:09:01 +00:00
|
|
|
return (
|
2022-01-05 07:06:30 +00:00
|
|
|
<Col className="text-sm text-gray-500 gap-2 sm:flex-row sm:flex-wrap">
|
2022-01-04 22:09:03 +00:00
|
|
|
<Row className="gap-2 flex-wrap">
|
2022-01-13 21:16:47 +00:00
|
|
|
<UserLink
|
|
|
|
className="whitespace-nowrap"
|
|
|
|
name={creatorName}
|
|
|
|
username={creatorUsername}
|
|
|
|
/>
|
2022-01-04 22:09:03 +00:00
|
|
|
<div className="">•</div>
|
2022-01-19 22:01:54 +00:00
|
|
|
|
2022-01-04 22:09:03 +00:00
|
|
|
<div className="whitespace-nowrap">
|
2022-01-19 22:01:54 +00:00
|
|
|
<DateTimeTooltip text="Market created:" time={contract.createdTime}>
|
2022-01-16 09:16:15 +00:00
|
|
|
{createdDate}
|
|
|
|
</DateTimeTooltip>
|
2022-01-19 22:01:54 +00:00
|
|
|
|
2022-01-16 09:16:15 +00:00
|
|
|
{resolvedDate && contract.resolutionTime ? (
|
|
|
|
<>
|
|
|
|
{' - '}
|
2022-01-19 22:01:54 +00:00
|
|
|
<DateTimeTooltip
|
|
|
|
text="Market resolved:"
|
|
|
|
time={contract.resolutionTime}
|
|
|
|
>
|
2022-01-16 09:16:15 +00:00
|
|
|
{resolvedDate}
|
|
|
|
</DateTimeTooltip>
|
|
|
|
</>
|
|
|
|
) : null}
|
2022-01-19 22:01:54 +00:00
|
|
|
|
|
|
|
{!resolvedDate && closeTime && (
|
|
|
|
<>
|
|
|
|
{' - '}
|
|
|
|
<DateTimeTooltip
|
|
|
|
text={
|
2022-01-19 22:07:58 +00:00
|
|
|
closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'
|
2022-01-19 22:01:54 +00:00
|
|
|
}
|
|
|
|
time={closeTime}
|
|
|
|
>
|
2022-01-16 09:16:15 +00:00
|
|
|
{dayjs(closeTime).format('MMM D, YYYY')}
|
|
|
|
</DateTimeTooltip>
|
2022-01-19 22:01:54 +00:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
2022-01-04 22:09:03 +00:00
|
|
|
<div className="">•</div>
|
|
|
|
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
2022-01-02 19:09:01 +00:00
|
|
|
)
|
|
|
|
}
|
2022-01-10 07:05:24 +00:00
|
|
|
|
|
|
|
// String version of the above, to send to the OpenGraph image generator
|
|
|
|
export function contractTextDetails(contract: Contract) {
|
|
|
|
const { question, description, closeTime } = contract
|
2022-01-12 19:01:04 +00:00
|
|
|
const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
|
2022-01-10 07:05:24 +00:00
|
|
|
|
|
|
|
const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
|
|
|
|
|
|
|
|
return (
|
2022-01-10 07:09:39 +00:00
|
|
|
`${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
|
2022-01-10 07:05:24 +00:00
|
|
|
(closeTime
|
|
|
|
? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
|
|
|
|
closeTime
|
|
|
|
).format('MMM D, h:mma')}`
|
|
|
|
: '') +
|
|
|
|
` • ${formatMoney(truePool)} pool` +
|
|
|
|
(tags.length > 0 ? ` • ${tags.join(' ')}` : '')
|
|
|
|
)
|
|
|
|
}
|