2022-02-20 22:25:58 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
|
2022-05-09 13:04:36 +00:00
|
|
|
import { Answer } from 'common/answer'
|
2022-07-28 02:40:33 +00:00
|
|
|
import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
|
2022-02-20 22:25:58 +00:00
|
|
|
import { Col } from '../layout/col'
|
|
|
|
import { Row } from '../layout/row'
|
|
|
|
import { Avatar } from '../avatar'
|
|
|
|
import { SiteLink } from '../site-link'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { formatPercent } from 'common/util/format'
|
|
|
|
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
|
|
|
|
import { tradingAllowed } from 'web/lib/firebase/contracts'
|
2022-02-26 04:00:21 +00:00
|
|
|
import { Linkify } from '../linkify'
|
2022-10-10 02:37:24 +00:00
|
|
|
import { Input } from '../input'
|
2022-02-20 22:25:58 +00:00
|
|
|
|
|
|
|
export function AnswerItem(props: {
|
|
|
|
answer: Answer
|
2022-07-28 02:40:33 +00:00
|
|
|
contract: FreeResponseContract | MultipleChoiceContract
|
2022-02-20 22:25:58 +00:00
|
|
|
showChoice: 'radio' | 'checkbox' | undefined
|
|
|
|
chosenProb: number | undefined
|
|
|
|
totalChosenProb?: number
|
|
|
|
onChoose: (answerId: string, prob: number) => void
|
|
|
|
onDeselect: (answerId: string) => void
|
|
|
|
}) {
|
|
|
|
const {
|
|
|
|
answer,
|
|
|
|
contract,
|
|
|
|
showChoice,
|
|
|
|
chosenProb,
|
|
|
|
totalChosenProb,
|
|
|
|
onChoose,
|
|
|
|
onDeselect,
|
|
|
|
} = props
|
|
|
|
const { resolution, resolutions, totalShares } = contract
|
2022-02-24 19:26:01 +00:00
|
|
|
const { username, avatarUrl, name, number, text } = answer
|
2022-02-20 22:25:58 +00:00
|
|
|
const isChosen = chosenProb !== undefined
|
|
|
|
|
2022-03-15 22:27:51 +00:00
|
|
|
const prob = getDpmOutcomeProbability(totalShares, answer.id)
|
2022-02-20 22:25:58 +00:00
|
|
|
const roundedProb = Math.round(prob * 100)
|
|
|
|
const probPercent = formatPercent(prob)
|
|
|
|
const wasResolvedTo =
|
|
|
|
resolution === answer.id || (resolutions && resolutions[answer.id])
|
|
|
|
|
|
|
|
return (
|
2022-02-24 19:26:01 +00:00
|
|
|
<div
|
2022-02-20 22:25:58 +00:00
|
|
|
className={clsx(
|
2022-02-24 19:26:01 +00:00
|
|
|
'flex flex-col gap-4 rounded p-4 sm:flex-row',
|
2022-02-20 22:25:58 +00:00
|
|
|
wasResolvedTo
|
|
|
|
? resolution === 'MKT'
|
2022-02-24 19:26:01 +00:00
|
|
|
? 'mb-2 bg-blue-50'
|
2022-05-17 15:55:26 +00:00
|
|
|
: 'mb-10 bg-green-50'
|
2022-02-20 22:25:58 +00:00
|
|
|
: chosenProb === undefined
|
|
|
|
? 'bg-gray-50'
|
|
|
|
: showChoice === 'radio'
|
|
|
|
? 'bg-green-50'
|
2022-04-18 23:02:40 +00:00
|
|
|
: 'bg-blue-50'
|
2022-02-20 22:25:58 +00:00
|
|
|
)}
|
|
|
|
>
|
2022-02-24 19:26:01 +00:00
|
|
|
<Col className="flex-1 gap-3">
|
2022-02-26 04:00:21 +00:00
|
|
|
<div className="whitespace-pre-line">
|
|
|
|
<Linkify text={text} />
|
|
|
|
</div>
|
2022-02-20 22:25:58 +00:00
|
|
|
|
2022-02-24 19:26:01 +00:00
|
|
|
<Row className="items-center gap-2 text-sm text-gray-500">
|
2022-02-20 22:25:58 +00:00
|
|
|
<SiteLink className="relative" href={`/${username}`}>
|
|
|
|
<Row className="items-center gap-2">
|
|
|
|
<Avatar avatarUrl={avatarUrl} size={6} />
|
|
|
|
<div className="truncate">{name}</div>
|
|
|
|
</Row>
|
|
|
|
</SiteLink>
|
2022-02-24 19:26:01 +00:00
|
|
|
{/* TODO: Show total pool? */}
|
2022-05-04 22:03:06 +00:00
|
|
|
<div className="text-base">{showChoice && '#' + number}</div>
|
2022-02-20 22:25:58 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
|
2022-04-18 23:02:40 +00:00
|
|
|
<Row className="items-center justify-end gap-4 self-end sm:self-start">
|
|
|
|
{!wasResolvedTo &&
|
|
|
|
(showChoice === 'checkbox' ? (
|
2022-10-10 02:37:24 +00:00
|
|
|
<Input
|
|
|
|
className="w-24 justify-self-end !text-2xl"
|
2022-04-18 23:02:40 +00:00
|
|
|
type="number"
|
|
|
|
placeholder={`${roundedProb}`}
|
|
|
|
maxLength={9}
|
|
|
|
value={chosenProb ? Math.round(chosenProb) : ''}
|
|
|
|
onChange={(e) => {
|
|
|
|
const { value } = e.target
|
|
|
|
const numberValue = value
|
|
|
|
? parseInt(value.replace(/[^\d]/, ''))
|
|
|
|
: 0
|
|
|
|
if (!isNaN(numberValue)) onChoose(answer.id, numberValue)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'text-2xl',
|
2022-10-12 06:58:20 +00:00
|
|
|
tradingAllowed(contract) ? 'text-teal-500' : 'text-gray-500'
|
2022-02-20 22:25:58 +00:00
|
|
|
)}
|
2022-04-18 23:02:40 +00:00
|
|
|
>
|
|
|
|
{probPercent}
|
2022-02-20 22:25:58 +00:00
|
|
|
</div>
|
2022-04-18 23:02:40 +00:00
|
|
|
))}
|
|
|
|
{showChoice ? (
|
|
|
|
<div className="form-control py-1">
|
2022-10-13 18:23:42 +00:00
|
|
|
<label className="cursor-pointer gap-3 px-1 py-2">
|
2022-04-18 23:02:40 +00:00
|
|
|
<span className="">Choose this answer</span>
|
|
|
|
{showChoice === 'radio' && (
|
|
|
|
<input
|
|
|
|
className={clsx('radio', chosenProb && '!bg-green-500')}
|
|
|
|
type="radio"
|
|
|
|
name="opt"
|
|
|
|
checked={isChosen}
|
|
|
|
onChange={() => onChoose(answer.id, 1)}
|
|
|
|
value={answer.id}
|
2022-02-20 22:25:58 +00:00
|
|
|
/>
|
|
|
|
)}
|
2022-04-18 23:02:40 +00:00
|
|
|
{showChoice === 'checkbox' && (
|
|
|
|
<input
|
|
|
|
className={clsx('checkbox', chosenProb && '!bg-blue-500')}
|
|
|
|
type="checkbox"
|
|
|
|
name="opt"
|
|
|
|
checked={isChosen}
|
|
|
|
onChange={() => {
|
|
|
|
if (isChosen) onDeselect(answer.id)
|
|
|
|
else {
|
|
|
|
onChoose(answer.id, 100 * prob)
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
value={answer.id}
|
|
|
|
/>
|
2022-02-20 22:25:58 +00:00
|
|
|
)}
|
2022-04-18 23:02:40 +00:00
|
|
|
</label>
|
|
|
|
{showChoice === 'checkbox' && (
|
|
|
|
<div className="ml-1">
|
|
|
|
{chosenProb && totalChosenProb
|
|
|
|
? Math.round((100 * chosenProb) / totalChosenProb)
|
|
|
|
: 0}
|
|
|
|
% share
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
wasResolvedTo && (
|
|
|
|
<Col className="items-end">
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'text-xl',
|
2022-10-12 06:58:20 +00:00
|
|
|
resolution === 'MKT' ? 'text-blue-700' : 'text-teal-600'
|
2022-04-18 23:02:40 +00:00
|
|
|
)}
|
|
|
|
>
|
|
|
|
Chosen{' '}
|
|
|
|
{resolutions ? `${Math.round(resolutions[answer.id])}%` : ''}
|
|
|
|
</div>
|
|
|
|
<div className="text-2xl text-gray-500">{probPercent}</div>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</Row>
|
2022-02-24 19:26:01 +00:00
|
|
|
</div>
|
2022-02-20 22:25:58 +00:00
|
|
|
)
|
|
|
|
}
|