2022-01-02 19:09:01 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
import Link from 'next/link'
|
2022-04-19 02:44:31 +00:00
|
|
|
import _ from 'lodash'
|
2022-04-07 21:15:51 +00:00
|
|
|
import { Row } from '../layout/row'
|
2022-04-20 03:34:41 +00:00
|
|
|
import { formatPercent } from '../../../common/util/format'
|
2022-01-12 19:01:04 +00:00
|
|
|
import {
|
|
|
|
Contract,
|
|
|
|
contractPath,
|
2022-02-17 23:00:19 +00:00
|
|
|
getBinaryProbPercent,
|
2022-04-07 21:15:51 +00:00
|
|
|
} from '../../lib/firebase/contracts'
|
|
|
|
import { Col } from '../layout/col'
|
|
|
|
import { Spacer } from '../layout/spacer'
|
2022-04-18 23:02:40 +00:00
|
|
|
import {
|
|
|
|
Binary,
|
|
|
|
CPMM,
|
|
|
|
DPM,
|
|
|
|
FreeResponse,
|
|
|
|
FreeResponseContract,
|
|
|
|
FullContract,
|
|
|
|
} from '../../../common/contract'
|
|
|
|
import {
|
2022-04-19 02:44:31 +00:00
|
|
|
AnswerLabel,
|
2022-04-18 23:02:40 +00:00
|
|
|
BinaryContractOutcomeLabel,
|
|
|
|
FreeResponseOutcomeLabel,
|
|
|
|
} from '../outcome-label'
|
2022-04-20 21:36:41 +00:00
|
|
|
import { getOutcomeProbability, getTopAnswer } from '../../../common/calculate'
|
2022-04-20 03:34:41 +00:00
|
|
|
import { AbbrContractDetails } from './contract-details'
|
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-04-18 23:02:40 +00:00
|
|
|
const { question, outcomeType, resolution } = contract
|
2022-01-02 19:09:01 +00:00
|
|
|
|
|
|
|
return (
|
2022-01-18 22:55:39 +00:00
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
2022-02-11 18:40:22 +00:00
|
|
|
'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
|
2022-01-18 22:55:39 +00:00
|
|
|
className
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<Link href={contractPath(contract)}>
|
|
|
|
<a className="absolute left-0 right-0 top-0 bottom-0" />
|
|
|
|
</Link>
|
2022-02-04 18:30:56 +00:00
|
|
|
|
|
|
|
<AbbrContractDetails
|
|
|
|
contract={contract}
|
|
|
|
showHotVolume={showHotVolume}
|
|
|
|
showCloseTime={showCloseTime}
|
|
|
|
/>
|
|
|
|
<Spacer h={3} />
|
|
|
|
|
2022-04-18 23:02:40 +00:00
|
|
|
<Row
|
|
|
|
className={clsx(
|
|
|
|
'justify-between gap-4',
|
2022-04-20 03:31:41 +00:00
|
|
|
outcomeType === 'FREE_RESPONSE' && 'flex-col items-start !gap-2'
|
2022-04-18 23:02:40 +00:00
|
|
|
)}
|
|
|
|
>
|
2022-02-15 02:27:43 +00:00
|
|
|
<p
|
2022-02-18 02:24:10 +00:00
|
|
|
className="break-words font-medium text-indigo-700"
|
2022-02-15 02:27:43 +00:00
|
|
|
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
|
|
|
|
>
|
|
|
|
{question}
|
|
|
|
</p>
|
2022-04-18 23:02:40 +00:00
|
|
|
{outcomeType === 'BINARY' && (
|
|
|
|
<BinaryResolutionOrChance
|
|
|
|
className="items-center"
|
|
|
|
contract={contract}
|
|
|
|
/>
|
|
|
|
)}
|
2022-04-19 02:44:31 +00:00
|
|
|
{outcomeType === 'FREE_RESPONSE' && (
|
|
|
|
<FreeResponseResolutionOrChance
|
2022-04-20 03:31:41 +00:00
|
|
|
className="self-end text-gray-600"
|
2022-04-18 23:02:40 +00:00
|
|
|
contract={contract as FullContract<DPM, FreeResponse>}
|
|
|
|
truncate="long"
|
|
|
|
/>
|
|
|
|
)}
|
2022-01-18 22:55:39 +00:00
|
|
|
</Row>
|
|
|
|
</div>
|
2022-01-14 22:59:14 +00:00
|
|
|
</div>
|
2022-01-02 19:09:01 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-04-18 23:02:40 +00:00
|
|
|
export function BinaryResolutionOrChance(props: {
|
|
|
|
contract: FullContract<DPM | CPMM, Binary>
|
2022-01-02 20:53:42 +00:00
|
|
|
large?: boolean
|
|
|
|
className?: string
|
|
|
|
}) {
|
2022-02-14 21:33:47 +00:00
|
|
|
const { contract, large, className } = props
|
2022-04-18 23:02:40 +00:00
|
|
|
const { resolution } = contract
|
2022-01-02 20:53:42 +00:00
|
|
|
|
2022-04-18 23:02:40 +00:00
|
|
|
const marketClosed = (contract.closeTime || Infinity) < Date.now()
|
2022-02-14 21:33:47 +00:00
|
|
|
const probColor = marketClosed ? 'text-gray-400' : 'text-primary'
|
|
|
|
|
2022-01-02 20:53:42 +00:00
|
|
|
return (
|
|
|
|
<Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
|
|
|
|
{resolution ? (
|
|
|
|
<>
|
|
|
|
<div
|
|
|
|
className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
|
|
|
|
>
|
|
|
|
Resolved
|
|
|
|
</div>
|
2022-04-18 23:02:40 +00:00
|
|
|
<BinaryContractOutcomeLabel
|
|
|
|
contract={contract}
|
|
|
|
resolution={resolution}
|
|
|
|
/>
|
2022-01-02 20:53:42 +00:00
|
|
|
</>
|
|
|
|
) : (
|
2022-04-18 23:02:40 +00:00
|
|
|
<>
|
|
|
|
<div className={probColor}>{getBinaryProbPercent(contract)}</div>
|
|
|
|
<div className={clsx(probColor, large ? 'text-xl' : 'text-base')}>
|
|
|
|
chance
|
|
|
|
</div>
|
|
|
|
</>
|
2022-01-02 20:53:42 +00:00
|
|
|
)}
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-04-19 02:44:31 +00:00
|
|
|
export function FreeResponseResolutionOrChance(props: {
|
2022-04-18 23:02:40 +00:00
|
|
|
contract: FreeResponseContract
|
|
|
|
truncate: 'short' | 'long' | 'none'
|
2022-04-20 03:31:41 +00:00
|
|
|
className?: string
|
2022-04-18 23:02:40 +00:00
|
|
|
}) {
|
2022-04-20 03:31:41 +00:00
|
|
|
const { contract, truncate, className } = props
|
2022-04-19 02:44:31 +00:00
|
|
|
const { resolution } = contract
|
|
|
|
|
|
|
|
const topAnswer = getTopAnswer(contract)
|
|
|
|
|
2022-04-18 23:02:40 +00:00
|
|
|
return (
|
2022-04-20 03:31:41 +00:00
|
|
|
<Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
|
2022-04-19 02:44:31 +00:00
|
|
|
{resolution ? (
|
|
|
|
<>
|
|
|
|
<div className={clsx('text-base text-gray-500')}>Resolved</div>
|
|
|
|
<FreeResponseOutcomeLabel
|
|
|
|
contract={contract}
|
|
|
|
resolution={resolution}
|
|
|
|
truncate={truncate}
|
2022-04-20 03:31:41 +00:00
|
|
|
answerClassName="text-xl"
|
2022-04-19 02:44:31 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
topAnswer && (
|
2022-04-20 03:31:41 +00:00
|
|
|
<Row className="items-center gap-6">
|
|
|
|
<AnswerLabel
|
|
|
|
className="!text-gray-600"
|
|
|
|
answer={topAnswer}
|
|
|
|
truncate={truncate}
|
|
|
|
/>
|
|
|
|
<Col className="text-primary text-3xl">
|
2022-04-19 02:44:31 +00:00
|
|
|
<div>
|
|
|
|
{formatPercent(getOutcomeProbability(contract, topAnswer.id))}
|
|
|
|
</div>
|
|
|
|
<div className="text-base">chance</div>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
)}
|
2022-04-18 23:02:40 +00:00
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|