manifold/web/components/answers/answer-item.tsx

160 lines
5.1 KiB
TypeScript
Raw Normal View History

2022-02-20 22:25:58 +00:00
import clsx from 'clsx'
import { Answer } from 'common/answer'
import { DPM, FreeResponse, FullContract } 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'
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-02-20 22:25:58 +00:00
export function AnswerItem(props: {
answer: Answer
Cfmm (#64) * cpmm initial commit: common logic, cloud functions * remove unnecessary property * contract type * rename 'calculate.ts' => 'calculate-dpm.ts' * rename dpm calculations * use focus hook * mechanism-agnostic calculations * bet panel: use new calculations * use new calculations * delete markets cloud function * use correct contract type in scripts / functions * calculate fixed payouts; bets list calculations * new bet: use calculateCpmmPurchase * getOutcomeProbabilityAfterBet * use deductFixedFees * fix auto-refactor * fix antes * separate logic to payouts-dpm, payouts-fixed * liquidity provision tracking * remove comment * liquidity label * create liquidity provision even if no ante bet * liquidity fee * use all bets for getFixedCancelPayouts * updateUserBalance: allow negative balances * store initialProbability in contracts * turn on liquidity fee; turn off creator fee * Include time param in tweet url, so image preview is re-fetched * share redemption * cpmm ContractBetsTable display * formatMoney: handle minus zero * filter out redemption bets * track fees on contract and bets; change fee schedule for cpmm markets; only pay out creator fees at resolution * small fixes * small fixes * Redeem shares pays back loans first * Fix initial point on graph * calculateCpmmPurchase: deduct creator fee * Filter out redemption bets from feed * set env to dev for user-testing purposes * creator fees messaging * new cfmm: k = y^(1-p) * n^p * addCpmmLiquidity * correct price function * enable fees * handle overflow * liquidity provision tracking * raise fees * Fix merge error * fix dpm free response payout for single outcome * Fix DPM payout calculation * Remove hardcoding as dev Co-authored-by: James Grugett <jahooma@gmail.com>
2022-03-15 22:27:51 +00:00
contract: FullContract<DPM, FreeResponse>
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
const { username, avatarUrl, name, number, text } = answer
2022-02-20 22:25:58 +00:00
const isChosen = chosenProb !== undefined
Cfmm (#64) * cpmm initial commit: common logic, cloud functions * remove unnecessary property * contract type * rename 'calculate.ts' => 'calculate-dpm.ts' * rename dpm calculations * use focus hook * mechanism-agnostic calculations * bet panel: use new calculations * use new calculations * delete markets cloud function * use correct contract type in scripts / functions * calculate fixed payouts; bets list calculations * new bet: use calculateCpmmPurchase * getOutcomeProbabilityAfterBet * use deductFixedFees * fix auto-refactor * fix antes * separate logic to payouts-dpm, payouts-fixed * liquidity provision tracking * remove comment * liquidity label * create liquidity provision even if no ante bet * liquidity fee * use all bets for getFixedCancelPayouts * updateUserBalance: allow negative balances * store initialProbability in contracts * turn on liquidity fee; turn off creator fee * Include time param in tweet url, so image preview is re-fetched * share redemption * cpmm ContractBetsTable display * formatMoney: handle minus zero * filter out redemption bets * track fees on contract and bets; change fee schedule for cpmm markets; only pay out creator fees at resolution * small fixes * small fixes * Redeem shares pays back loans first * Fix initial point on graph * calculateCpmmPurchase: deduct creator fee * Filter out redemption bets from feed * set env to dev for user-testing purposes * creator fees messaging * new cfmm: k = y^(1-p) * n^p * addCpmmLiquidity * correct price function * enable fees * handle overflow * liquidity provision tracking * raise fees * Fix merge error * fix dpm free response payout for single outcome * Fix DPM payout calculation * Remove hardcoding as dev Co-authored-by: James Grugett <jahooma@gmail.com>
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 (
<div
2022-02-20 22:25:58 +00:00
className={clsx(
'flex flex-col gap-4 rounded p-4 sm:flex-row',
2022-02-20 22:25:58 +00:00
wasResolvedTo
? resolution === 'MKT'
? 'mb-2 bg-blue-50'
: 'mb-8 bg-green-50'
2022-02-20 22:25:58 +00:00
: chosenProb === undefined
? 'bg-gray-50'
: showChoice === 'radio'
? 'bg-green-50'
: 'bg-blue-50'
2022-02-20 22:25:58 +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
<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>
{/* TODO: Show total pool? */}
<div className="text-base">{showChoice && '#' + number}</div>
2022-02-20 22:25:58 +00:00
</Row>
</Col>
<Row className="items-center justify-end gap-4 self-end sm:self-start">
{!wasResolvedTo &&
(showChoice === 'checkbox' ? (
<input
className="input input-bordered w-24 justify-self-end text-2xl"
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',
tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
2022-02-20 22:25:58 +00:00
)}
>
{probPercent}
2022-02-20 22:25:58 +00:00
</div>
))}
{showChoice ? (
<div className="form-control py-1">
<label className="label cursor-pointer gap-3">
<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
/>
)}
{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
)}
</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',
resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
)}
>
Chosen{' '}
{resolutions ? `${Math.round(resolutions[answer.id])}%` : ''}
</div>
<div className="text-2xl text-gray-500">{probPercent}</div>
</Col>
)
)}
</Row>
</div>
2022-02-20 22:25:58 +00:00
)
}