Split answers panel into 5 files
This commit is contained in:
James Grugett
parent
fd846254a0
commit
8580698c15
|
|
@ -1,690 +0,0 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
|
||||
import Textarea from 'react-expanding-textarea'
|
||||
import { XIcon } from '@heroicons/react/solid'
|
||||
|
||||
import { Answer } from '../../common/answer'
|
||||
import { Contract } from '../../common/contract'
|
||||
import { AmountInput } from './amount-input'
|
||||
import { Col } from './layout/col'
|
||||
import { createAnswer, placeBet, resolveMarket } from '../lib/firebase/api-call'
|
||||
import { Row } from './layout/row'
|
||||
import { Avatar } from './avatar'
|
||||
import { SiteLink } from './site-link'
|
||||
import { DateTimeTooltip } from './datetime-tooltip'
|
||||
import dayjs from 'dayjs'
|
||||
import { BuyButton, ChooseCancelSelector } from './yes-no-selector'
|
||||
import { Spacer } from './layout/spacer'
|
||||
import {
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
} from '../../common/util/format'
|
||||
import { InfoTooltip } from './info-tooltip'
|
||||
import { useUser } from '../hooks/use-user'
|
||||
import {
|
||||
getProbabilityAfterBet,
|
||||
getOutcomeProbability,
|
||||
calculateShares,
|
||||
calculatePayoutAfterCorrectBet,
|
||||
} from '../../common/calculate'
|
||||
import { firebaseLogin } from '../lib/firebase/users'
|
||||
import { Bet } from '../../common/bet'
|
||||
import { useAnswers } from '../hooks/use-answers'
|
||||
import { ResolveConfirmationButton } from './confirmation-button'
|
||||
import { tradingAllowed } from '../lib/firebase/contracts'
|
||||
import { removeUndefinedProps } from '../../common/util/object'
|
||||
|
||||
export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
|
||||
const { contract } = props
|
||||
const { creatorId, resolution, resolutions } = contract
|
||||
|
||||
const answers = useAnswers(contract.id) ?? props.answers
|
||||
const [winningAnswers, otherAnswers] = _.partition(
|
||||
answers.filter((answer) => answer.id !== '0'),
|
||||
(answer) =>
|
||||
answer.id === resolution || (resolutions && resolutions[answer.id])
|
||||
)
|
||||
const sortedAnswers = [
|
||||
..._.sortBy(winningAnswers, (answer) =>
|
||||
resolutions ? -1 * resolutions[answer.id] : 0
|
||||
),
|
||||
..._.sortBy(
|
||||
otherAnswers,
|
||||
(answer) => -1 * getOutcomeProbability(contract.totalShares, answer.id)
|
||||
),
|
||||
]
|
||||
|
||||
const user = useUser()
|
||||
|
||||
const [resolveOption, setResolveOption] = useState<
|
||||
'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
>()
|
||||
const [chosenAnswers, setChosenAnswers] = useState<{
|
||||
[answerId: string]: number
|
||||
}>({})
|
||||
|
||||
const chosenTotal = _.sum(Object.values(chosenAnswers))
|
||||
|
||||
const onChoose = (answerId: string, prob: number) => {
|
||||
if (resolveOption === 'CHOOSE') {
|
||||
setChosenAnswers({ [answerId]: prob })
|
||||
} else {
|
||||
setChosenAnswers((chosenAnswers) => {
|
||||
return {
|
||||
...chosenAnswers,
|
||||
[answerId]: prob,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onDeselect = (answerId: string) => {
|
||||
setChosenAnswers((chosenAnswers) => {
|
||||
const newChosenAnswers = { ...chosenAnswers }
|
||||
delete newChosenAnswers[answerId]
|
||||
return newChosenAnswers
|
||||
})
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setChosenAnswers({})
|
||||
}, [resolveOption])
|
||||
|
||||
const showChoice = resolution
|
||||
? undefined
|
||||
: resolveOption === 'CHOOSE'
|
||||
? 'radio'
|
||||
: resolveOption === 'CHOOSE_MULTIPLE'
|
||||
? 'checkbox'
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<Col className="gap-3">
|
||||
{sortedAnswers.map((answer) => (
|
||||
<AnswerItem
|
||||
key={answer.id}
|
||||
answer={answer}
|
||||
contract={contract}
|
||||
showChoice={showChoice}
|
||||
chosenProb={chosenAnswers[answer.id]}
|
||||
totalChosenProb={chosenTotal}
|
||||
onChoose={onChoose}
|
||||
onDeselect={onDeselect}
|
||||
/>
|
||||
))}
|
||||
|
||||
{sortedAnswers.length === 0 ? (
|
||||
<div className="text-gray-500 p-4">No answers yet...</div>
|
||||
) : (
|
||||
<div className="text-gray-500 self-end p-4">
|
||||
None of the above:{' '}
|
||||
{formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tradingAllowed(contract) && !resolveOption && (
|
||||
<CreateAnswerInput contract={contract} />
|
||||
)}
|
||||
|
||||
{user?.id === creatorId && !resolution && (
|
||||
<AnswerResolvePanel
|
||||
contract={contract}
|
||||
resolveOption={resolveOption}
|
||||
setResolveOption={setResolveOption}
|
||||
chosenAnswers={chosenAnswers}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function AnswerItem(props: {
|
||||
answer: Answer
|
||||
contract: Contract
|
||||
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, createdTime, number, text } = answer
|
||||
const isChosen = chosenProb !== undefined
|
||||
|
||||
const createdDate = dayjs(createdTime).format('MMM D')
|
||||
const prob = getOutcomeProbability(totalShares, answer.id)
|
||||
const roundedProb = Math.round(prob * 100)
|
||||
const probPercent = formatPercent(prob)
|
||||
const wasResolvedTo =
|
||||
resolution === answer.id || (resolutions && resolutions[answer.id])
|
||||
|
||||
const [isBetting, setIsBetting] = useState(false)
|
||||
|
||||
return (
|
||||
<Col
|
||||
className={clsx(
|
||||
'p-4 sm:flex-row rounded gap-4',
|
||||
wasResolvedTo
|
||||
? resolution === 'MKT'
|
||||
? 'bg-blue-50 mb-2'
|
||||
: 'bg-green-50 mb-8'
|
||||
: chosenProb === undefined
|
||||
? 'bg-gray-50'
|
||||
: showChoice === 'radio'
|
||||
? 'bg-green-50'
|
||||
: 'bg-blue-50'
|
||||
)}
|
||||
>
|
||||
<Col className="gap-3 flex-1">
|
||||
<div className="whitespace-pre-line break-words">{text}</div>
|
||||
|
||||
<Row className="text-gray-500 text-sm gap-2 items-center">
|
||||
<SiteLink className="relative" href={`/${username}`}>
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar avatarUrl={avatarUrl} size={6} />
|
||||
<div className="truncate">{name}</div>
|
||||
</Row>
|
||||
</SiteLink>
|
||||
|
||||
<div className="">•</div>
|
||||
|
||||
<div className="whitespace-nowrap">
|
||||
<DateTimeTooltip text="" time={contract.createdTime}>
|
||||
{createdDate}
|
||||
</DateTimeTooltip>
|
||||
</div>
|
||||
<div className="">•</div>
|
||||
<div className="text-base">#{number}</div>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
{isBetting ? (
|
||||
<AnswerBetPanel
|
||||
answer={answer}
|
||||
contract={contract}
|
||||
closePanel={() => setIsBetting(false)}
|
||||
/>
|
||||
) : (
|
||||
<Row className="self-end sm:self-start items-center gap-4 justify-end">
|
||||
{!wasResolvedTo &&
|
||||
(showChoice === 'checkbox' ? (
|
||||
<input
|
||||
className="input input-bordered text-2xl justify-self-end w-24"
|
||||
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'
|
||||
)}
|
||||
>
|
||||
{probPercent}
|
||||
</div>
|
||||
))}
|
||||
{showChoice ? (
|
||||
<div className="form-control py-1">
|
||||
<label className="cursor-pointer label 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}
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
{showChoice === 'checkbox' && (
|
||||
<div className="ml-1">
|
||||
{chosenProb && totalChosenProb
|
||||
? Math.round((100 * chosenProb) / totalChosenProb)
|
||||
: 0}
|
||||
% share
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{tradingAllowed(contract) && (
|
||||
<BuyButton
|
||||
className="justify-end self-end flex-initial btn-md !px-8"
|
||||
onClick={() => {
|
||||
setIsBetting(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{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>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function AnswerBetPanel(props: {
|
||||
answer: Answer
|
||||
contract: Contract
|
||||
closePanel: () => void
|
||||
}) {
|
||||
const { answer, contract, closePanel } = props
|
||||
const { id: answerId } = answer
|
||||
|
||||
const user = useUser()
|
||||
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
|
||||
|
||||
const [error, setError] = useState<string | undefined>()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const inputRef = useRef<HTMLElement>(null)
|
||||
useEffect(() => {
|
||||
inputRef.current && inputRef.current.focus()
|
||||
}, [])
|
||||
|
||||
async function submitBet() {
|
||||
if (!user || !betAmount) return
|
||||
|
||||
if (user.balance < betAmount) {
|
||||
setError('Insufficient balance')
|
||||
return
|
||||
}
|
||||
|
||||
setError(undefined)
|
||||
setIsSubmitting(true)
|
||||
|
||||
const result = await placeBet({
|
||||
amount: betAmount,
|
||||
outcome: answerId,
|
||||
contractId: contract.id,
|
||||
}).then((r) => r.data as any)
|
||||
|
||||
console.log('placed bet. Result:', result)
|
||||
|
||||
if (result?.status === 'success') {
|
||||
setIsSubmitting(false)
|
||||
closePanel()
|
||||
} else {
|
||||
setError(result?.error || 'Error placing bet')
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const betDisabled = isSubmitting || !betAmount || error
|
||||
|
||||
const initialProb = getOutcomeProbability(contract.totalShares, answer.id)
|
||||
|
||||
const resultProb = getProbabilityAfterBet(
|
||||
contract.totalShares,
|
||||
answerId,
|
||||
betAmount ?? 0
|
||||
)
|
||||
|
||||
const shares = calculateShares(contract.totalShares, betAmount ?? 0, answerId)
|
||||
|
||||
const currentPayout = betAmount
|
||||
? calculatePayoutAfterCorrectBet(contract, {
|
||||
outcome: answerId,
|
||||
amount: betAmount,
|
||||
shares,
|
||||
} as Bet)
|
||||
: 0
|
||||
|
||||
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
||||
const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
|
||||
|
||||
return (
|
||||
<Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
|
||||
<Row className="self-stretch items-center justify-between">
|
||||
<div className="text-xl">Buy this answer</div>
|
||||
|
||||
<button className="btn-ghost btn-circle" onClick={closePanel}>
|
||||
<XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</Row>
|
||||
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
|
||||
<AmountInput
|
||||
inputClassName="w-full"
|
||||
amount={betAmount}
|
||||
onChange={setBetAmount}
|
||||
error={error}
|
||||
setError={setError}
|
||||
disabled={isSubmitting}
|
||||
inputRef={inputRef}
|
||||
/>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
<div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
|
||||
<Row>
|
||||
<div>{formatPercent(initialProb)}</div>
|
||||
<div className="mx-2">→</div>
|
||||
<div>{formatPercent(resultProb)}</div>
|
||||
</Row>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
<Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
|
||||
Payout if chosen
|
||||
<InfoTooltip
|
||||
text={`Current payout for ${formatWithCommas(
|
||||
shares
|
||||
)} / ${formatWithCommas(
|
||||
shares + contract.totalShares[answerId]
|
||||
)} shares`}
|
||||
/>
|
||||
</Row>
|
||||
<div>
|
||||
{formatMoney(currentPayout)}
|
||||
<span>(+{currentReturnPercent})</span>
|
||||
</div>
|
||||
|
||||
<Spacer h={6} />
|
||||
|
||||
{user ? (
|
||||
<button
|
||||
className={clsx(
|
||||
'btn',
|
||||
betDisabled ? 'btn-disabled' : 'btn-primary',
|
||||
isSubmitting ? 'loading' : ''
|
||||
)}
|
||||
onClick={betDisabled ? undefined : submitBet}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit trade'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in to trade!
|
||||
</button>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateAnswerInput(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const user = useUser()
|
||||
const [text, setText] = useState('')
|
||||
const [betAmount, setBetAmount] = useState<number | undefined>(10)
|
||||
const [amountError, setAmountError] = useState<string | undefined>()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const canSubmit = text && betAmount && !amountError && !isSubmitting
|
||||
|
||||
const submitAnswer = async () => {
|
||||
if (canSubmit) {
|
||||
setIsSubmitting(true)
|
||||
const result = await createAnswer({
|
||||
contractId: contract.id,
|
||||
text,
|
||||
amount: betAmount,
|
||||
}).then((r) => r.data)
|
||||
|
||||
setIsSubmitting(false)
|
||||
|
||||
if (result.status === 'success') {
|
||||
setText('')
|
||||
setBetAmount(10)
|
||||
setAmountError(undefined)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const resultProb = getProbabilityAfterBet(
|
||||
contract.totalShares,
|
||||
'new',
|
||||
betAmount ?? 0
|
||||
)
|
||||
|
||||
const shares = calculateShares(contract.totalShares, betAmount ?? 0, 'new')
|
||||
|
||||
const currentPayout = betAmount
|
||||
? calculatePayoutAfterCorrectBet(contract, {
|
||||
outcome: 'new',
|
||||
amount: betAmount,
|
||||
shares,
|
||||
} as Bet)
|
||||
: 0
|
||||
|
||||
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
||||
const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
|
||||
|
||||
return (
|
||||
<Col className="gap-4 p-4 bg-gray-50 rounded">
|
||||
<Col className="flex-1 gap-2">
|
||||
<div className="mb-1">Add your answer</div>
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
className="textarea textarea-bordered w-full"
|
||||
placeholder="Type your answer..."
|
||||
rows={1}
|
||||
maxLength={10000}
|
||||
/>
|
||||
<div />
|
||||
<Col
|
||||
className={clsx(
|
||||
'sm:flex-row gap-4',
|
||||
text ? 'justify-between' : 'self-end'
|
||||
)}
|
||||
>
|
||||
{text && (
|
||||
<>
|
||||
<Col className="gap-2 mt-1">
|
||||
<div className="text-gray-500 text-sm">
|
||||
Ante (cannot be sold)
|
||||
</div>
|
||||
<AmountInput
|
||||
amount={betAmount}
|
||||
onChange={setBetAmount}
|
||||
error={amountError}
|
||||
setError={setAmountError}
|
||||
minimumAmount={10}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="gap-2 mt-1">
|
||||
<div className="text-sm text-gray-500">Implied probability</div>
|
||||
<Row>
|
||||
<div>{formatPercent(0)}</div>
|
||||
<div className="mx-2">→</div>
|
||||
<div>{formatPercent(resultProb)}</div>
|
||||
</Row>
|
||||
<Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
|
||||
Payout if chosen
|
||||
<InfoTooltip
|
||||
text={`Current payout for ${formatWithCommas(
|
||||
shares
|
||||
)} / ${formatWithCommas(shares)} shares`}
|
||||
/>
|
||||
</Row>
|
||||
<div>
|
||||
{formatMoney(currentPayout)}
|
||||
<span>(+{currentReturnPercent})</span>
|
||||
</div>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
{user ? (
|
||||
<button
|
||||
className={clsx(
|
||||
'btn self-end mt-2',
|
||||
canSubmit ? 'btn-outline' : 'btn-disabled',
|
||||
isSubmitting && 'loading'
|
||||
)}
|
||||
disabled={!canSubmit}
|
||||
onClick={submitAnswer}
|
||||
>
|
||||
Submit answer & bet
|
||||
</button>
|
||||
) : (
|
||||
text && (
|
||||
<button
|
||||
className="btn self-end whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</Col>
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function AnswerResolvePanel(props: {
|
||||
contract: Contract
|
||||
resolveOption: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
setResolveOption: (
|
||||
option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
) => void
|
||||
chosenAnswers: { [answerId: string]: number }
|
||||
}) {
|
||||
const { contract, resolveOption, setResolveOption, chosenAnswers } = props
|
||||
const answers = Object.keys(chosenAnswers)
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | undefined>(undefined)
|
||||
|
||||
const onResolve = async () => {
|
||||
if (resolveOption === 'CHOOSE' && answers.length !== 1) return
|
||||
if (resolveOption === 'CHOOSE_MULTIPLE' && answers.length < 2) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
const totalProb = _.sum(Object.values(chosenAnswers))
|
||||
const normalizedProbs = _.mapValues(
|
||||
chosenAnswers,
|
||||
(prob) => (100 * prob) / totalProb
|
||||
)
|
||||
|
||||
const resolutionProps = removeUndefinedProps({
|
||||
outcome:
|
||||
resolveOption === 'CHOOSE'
|
||||
? answers[0]
|
||||
: resolveOption === 'CHOOSE_MULTIPLE'
|
||||
? 'MKT'
|
||||
: 'CANCEL',
|
||||
resolutions:
|
||||
resolveOption === 'CHOOSE_MULTIPLE' ? normalizedProbs : undefined,
|
||||
contractId: contract.id,
|
||||
})
|
||||
|
||||
const result = await resolveMarket(resolutionProps).then((r) => r.data)
|
||||
|
||||
console.log('resolved', resolutionProps, 'result:', result)
|
||||
|
||||
if (result?.status !== 'success') {
|
||||
setError(result?.message || 'Error resolving market')
|
||||
}
|
||||
setResolveOption(undefined)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
const resolutionButtonClass =
|
||||
resolveOption === 'CANCEL'
|
||||
? 'bg-yellow-400 hover:bg-yellow-500'
|
||||
: resolveOption === 'CHOOSE' && answers.length
|
||||
? 'btn-primary'
|
||||
: resolveOption === 'CHOOSE_MULTIPLE' &&
|
||||
answers.length > 1 &&
|
||||
answers.every((answer) => chosenAnswers[answer] > 0)
|
||||
? 'bg-blue-400 hover:bg-blue-500'
|
||||
: 'btn-disabled'
|
||||
|
||||
return (
|
||||
<Col className="gap-4 p-4 bg-gray-50 rounded">
|
||||
<div>Resolve your market</div>
|
||||
<Col className="sm:flex-row sm:items-center gap-4">
|
||||
<ChooseCancelSelector
|
||||
className="sm:!flex-row sm:items-center"
|
||||
selected={resolveOption}
|
||||
onSelect={setResolveOption}
|
||||
/>
|
||||
|
||||
<Row
|
||||
className={clsx(
|
||||
'flex-1 items-center',
|
||||
resolveOption ? 'justify-between' : 'justify-end'
|
||||
)}
|
||||
>
|
||||
{resolveOption && (
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
onClick={() => {
|
||||
setResolveOption(undefined)
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<ResolveConfirmationButton
|
||||
onResolve={onResolve}
|
||||
isSubmitting={isSubmitting}
|
||||
openModelButtonClass={resolutionButtonClass}
|
||||
submitButtonClass={resolutionButtonClass}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
{!!error && <div className="text-red-500">{error}</div>}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
168
web/components/answers/answer-bet-panel.tsx
Normal file
168
web/components/answers/answer-bet-panel.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { XIcon } from '@heroicons/react/solid'
|
||||
|
||||
import { Answer } from '../../../common/answer'
|
||||
import { Contract } from '../../../common/contract'
|
||||
import { AmountInput } from '../amount-input'
|
||||
import { Col } from '../layout/col'
|
||||
import { placeBet } from '../../lib/firebase/api-call'
|
||||
import { Row } from '../layout/row'
|
||||
import { Spacer } from '../layout/spacer'
|
||||
import {
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
} from '../../../common/util/format'
|
||||
import { InfoTooltip } from '../info-tooltip'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import {
|
||||
getProbabilityAfterBet,
|
||||
getOutcomeProbability,
|
||||
calculateShares,
|
||||
calculatePayoutAfterCorrectBet,
|
||||
} from '../../../common/calculate'
|
||||
import { firebaseLogin } from '../../lib/firebase/users'
|
||||
import { Bet } from '../../../common/bet'
|
||||
|
||||
export function AnswerBetPanel(props: {
|
||||
answer: Answer
|
||||
contract: Contract
|
||||
closePanel: () => void
|
||||
}) {
|
||||
const { answer, contract, closePanel } = props
|
||||
const { id: answerId } = answer
|
||||
|
||||
const user = useUser()
|
||||
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
|
||||
|
||||
const [error, setError] = useState<string | undefined>()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const inputRef = useRef<HTMLElement>(null)
|
||||
useEffect(() => {
|
||||
inputRef.current && inputRef.current.focus()
|
||||
}, [])
|
||||
|
||||
async function submitBet() {
|
||||
if (!user || !betAmount) return
|
||||
|
||||
if (user.balance < betAmount) {
|
||||
setError('Insufficient balance')
|
||||
return
|
||||
}
|
||||
|
||||
setError(undefined)
|
||||
setIsSubmitting(true)
|
||||
|
||||
const result = await placeBet({
|
||||
amount: betAmount,
|
||||
outcome: answerId,
|
||||
contractId: contract.id,
|
||||
}).then((r) => r.data as any)
|
||||
|
||||
console.log('placed bet. Result:', result)
|
||||
|
||||
if (result?.status === 'success') {
|
||||
setIsSubmitting(false)
|
||||
closePanel()
|
||||
} else {
|
||||
setError(result?.error || 'Error placing bet')
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const betDisabled = isSubmitting || !betAmount || error
|
||||
|
||||
const initialProb = getOutcomeProbability(contract.totalShares, answer.id)
|
||||
|
||||
const resultProb = getProbabilityAfterBet(
|
||||
contract.totalShares,
|
||||
answerId,
|
||||
betAmount ?? 0
|
||||
)
|
||||
|
||||
const shares = calculateShares(contract.totalShares, betAmount ?? 0, answerId)
|
||||
|
||||
const currentPayout = betAmount
|
||||
? calculatePayoutAfterCorrectBet(contract, {
|
||||
outcome: answerId,
|
||||
amount: betAmount,
|
||||
shares,
|
||||
} as Bet)
|
||||
: 0
|
||||
|
||||
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
||||
const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
|
||||
|
||||
return (
|
||||
<Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
|
||||
<Row className="self-stretch items-center justify-between">
|
||||
<div className="text-xl">Buy this answer</div>
|
||||
|
||||
<button className="btn-ghost btn-circle" onClick={closePanel}>
|
||||
<XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</Row>
|
||||
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
|
||||
<AmountInput
|
||||
inputClassName="w-full"
|
||||
amount={betAmount}
|
||||
onChange={setBetAmount}
|
||||
error={error}
|
||||
setError={setError}
|
||||
disabled={isSubmitting}
|
||||
inputRef={inputRef}
|
||||
/>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
<div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
|
||||
<Row>
|
||||
<div>{formatPercent(initialProb)}</div>
|
||||
<div className="mx-2">→</div>
|
||||
<div>{formatPercent(resultProb)}</div>
|
||||
</Row>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
<Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
|
||||
Payout if chosen
|
||||
<InfoTooltip
|
||||
text={`Current payout for ${formatWithCommas(
|
||||
shares
|
||||
)} / ${formatWithCommas(
|
||||
shares + contract.totalShares[answerId]
|
||||
)} shares`}
|
||||
/>
|
||||
</Row>
|
||||
<div>
|
||||
{formatMoney(currentPayout)}
|
||||
<span>(+{currentReturnPercent})</span>
|
||||
</div>
|
||||
|
||||
<Spacer h={6} />
|
||||
|
||||
{user ? (
|
||||
<button
|
||||
className={clsx(
|
||||
'btn',
|
||||
betDisabled ? 'btn-disabled' : 'btn-primary',
|
||||
isSubmitting ? 'loading' : ''
|
||||
)}
|
||||
onClick={betDisabled ? undefined : submitBet}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit trade'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in to trade!
|
||||
</button>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
193
web/components/answers/answer-item.tsx
Normal file
193
web/components/answers/answer-item.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { Answer } from '../../../common/answer'
|
||||
import { Contract } from '../../../common/contract'
|
||||
import { Col } from '../layout/col'
|
||||
import { Row } from '../layout/row'
|
||||
import { Avatar } from '../avatar'
|
||||
import { SiteLink } from '../site-link'
|
||||
import { DateTimeTooltip } from '../datetime-tooltip'
|
||||
import dayjs from 'dayjs'
|
||||
import { BuyButton } from '../yes-no-selector'
|
||||
import { formatPercent } from '../../../common/util/format'
|
||||
import { getOutcomeProbability } from '../../../common/calculate'
|
||||
import { tradingAllowed } from '../../lib/firebase/contracts'
|
||||
import { AnswerBetPanel } from './answer-bet-panel'
|
||||
|
||||
export function AnswerItem(props: {
|
||||
answer: Answer
|
||||
contract: Contract
|
||||
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, createdTime, number, text } = answer
|
||||
const isChosen = chosenProb !== undefined
|
||||
|
||||
const createdDate = dayjs(createdTime).format('MMM D')
|
||||
const prob = getOutcomeProbability(totalShares, answer.id)
|
||||
const roundedProb = Math.round(prob * 100)
|
||||
const probPercent = formatPercent(prob)
|
||||
const wasResolvedTo =
|
||||
resolution === answer.id || (resolutions && resolutions[answer.id])
|
||||
|
||||
const [isBetting, setIsBetting] = useState(false)
|
||||
|
||||
return (
|
||||
<Col
|
||||
className={clsx(
|
||||
'p-4 sm:flex-row rounded gap-4',
|
||||
wasResolvedTo
|
||||
? resolution === 'MKT'
|
||||
? 'bg-blue-50 mb-2'
|
||||
: 'bg-green-50 mb-8'
|
||||
: chosenProb === undefined
|
||||
? 'bg-gray-50'
|
||||
: showChoice === 'radio'
|
||||
? 'bg-green-50'
|
||||
: 'bg-blue-50'
|
||||
)}
|
||||
>
|
||||
<Col className="gap-3 flex-1">
|
||||
<div className="whitespace-pre-line break-words">{text}</div>
|
||||
|
||||
<Row className="text-gray-500 text-sm gap-2 items-center">
|
||||
<SiteLink className="relative" href={`/${username}`}>
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar avatarUrl={avatarUrl} size={6} />
|
||||
<div className="truncate">{name}</div>
|
||||
</Row>
|
||||
</SiteLink>
|
||||
|
||||
<div className="">•</div>
|
||||
|
||||
<div className="whitespace-nowrap">
|
||||
<DateTimeTooltip text="" time={contract.createdTime}>
|
||||
{createdDate}
|
||||
</DateTimeTooltip>
|
||||
</div>
|
||||
<div className="">•</div>
|
||||
<div className="text-base">#{number}</div>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
{isBetting ? (
|
||||
<AnswerBetPanel
|
||||
answer={answer}
|
||||
contract={contract}
|
||||
closePanel={() => setIsBetting(false)}
|
||||
/>
|
||||
) : (
|
||||
<Row className="self-end sm:self-start items-center gap-4 justify-end">
|
||||
{!wasResolvedTo &&
|
||||
(showChoice === 'checkbox' ? (
|
||||
<input
|
||||
className="input input-bordered text-2xl justify-self-end w-24"
|
||||
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'
|
||||
)}
|
||||
>
|
||||
{probPercent}
|
||||
</div>
|
||||
))}
|
||||
{showChoice ? (
|
||||
<div className="form-control py-1">
|
||||
<label className="cursor-pointer label 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}
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
{showChoice === 'checkbox' && (
|
||||
<div className="ml-1">
|
||||
{chosenProb && totalChosenProb
|
||||
? Math.round((100 * chosenProb) / totalChosenProb)
|
||||
: 0}
|
||||
% share
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{tradingAllowed(contract) && (
|
||||
<BuyButton
|
||||
className="justify-end self-end flex-initial btn-md !px-8"
|
||||
onClick={() => {
|
||||
setIsBetting(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{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>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
111
web/components/answers/answer-resolve-panel.tsx
Normal file
111
web/components/answers/answer-resolve-panel.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { Contract } from '../../../common/contract'
|
||||
import { Col } from '../layout/col'
|
||||
import { resolveMarket } from '../../lib/firebase/api-call'
|
||||
import { Row } from '../layout/row'
|
||||
import { ChooseCancelSelector } from '../yes-no-selector'
|
||||
import { ResolveConfirmationButton } from '../confirmation-button'
|
||||
import { removeUndefinedProps } from '../../../common/util/object'
|
||||
|
||||
export function AnswerResolvePanel(props: {
|
||||
contract: Contract
|
||||
resolveOption: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
setResolveOption: (
|
||||
option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
) => void
|
||||
chosenAnswers: { [answerId: string]: number }
|
||||
}) {
|
||||
const { contract, resolveOption, setResolveOption, chosenAnswers } = props
|
||||
const answers = Object.keys(chosenAnswers)
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | undefined>(undefined)
|
||||
|
||||
const onResolve = async () => {
|
||||
if (resolveOption === 'CHOOSE' && answers.length !== 1) return
|
||||
if (resolveOption === 'CHOOSE_MULTIPLE' && answers.length < 2) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
const totalProb = _.sum(Object.values(chosenAnswers))
|
||||
const normalizedProbs = _.mapValues(
|
||||
chosenAnswers,
|
||||
(prob) => (100 * prob) / totalProb
|
||||
)
|
||||
|
||||
const resolutionProps = removeUndefinedProps({
|
||||
outcome:
|
||||
resolveOption === 'CHOOSE'
|
||||
? answers[0]
|
||||
: resolveOption === 'CHOOSE_MULTIPLE'
|
||||
? 'MKT'
|
||||
: 'CANCEL',
|
||||
resolutions:
|
||||
resolveOption === 'CHOOSE_MULTIPLE' ? normalizedProbs : undefined,
|
||||
contractId: contract.id,
|
||||
})
|
||||
|
||||
const result = await resolveMarket(resolutionProps).then((r) => r.data)
|
||||
|
||||
console.log('resolved', resolutionProps, 'result:', result)
|
||||
|
||||
if (result?.status !== 'success') {
|
||||
setError(result?.message || 'Error resolving market')
|
||||
}
|
||||
setResolveOption(undefined)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
const resolutionButtonClass =
|
||||
resolveOption === 'CANCEL'
|
||||
? 'bg-yellow-400 hover:bg-yellow-500'
|
||||
: resolveOption === 'CHOOSE' && answers.length
|
||||
? 'btn-primary'
|
||||
: resolveOption === 'CHOOSE_MULTIPLE' &&
|
||||
answers.length > 1 &&
|
||||
answers.every((answer) => chosenAnswers[answer] > 0)
|
||||
? 'bg-blue-400 hover:bg-blue-500'
|
||||
: 'btn-disabled'
|
||||
|
||||
return (
|
||||
<Col className="gap-4 p-4 bg-gray-50 rounded">
|
||||
<div>Resolve your market</div>
|
||||
<Col className="sm:flex-row sm:items-center gap-4">
|
||||
<ChooseCancelSelector
|
||||
className="sm:!flex-row sm:items-center"
|
||||
selected={resolveOption}
|
||||
onSelect={setResolveOption}
|
||||
/>
|
||||
|
||||
<Row
|
||||
className={clsx(
|
||||
'flex-1 items-center',
|
||||
resolveOption ? 'justify-between' : 'justify-end'
|
||||
)}
|
||||
>
|
||||
{resolveOption && (
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
onClick={() => {
|
||||
setResolveOption(undefined)
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<ResolveConfirmationButton
|
||||
onResolve={onResolve}
|
||||
isSubmitting={isSubmitting}
|
||||
openModelButtonClass={resolutionButtonClass}
|
||||
submitButtonClass={resolutionButtonClass}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
{!!error && <div className="text-red-500">{error}</div>}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
118
web/components/answers/answers-panel.tsx
Normal file
118
web/components/answers/answers-panel.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import _ from 'lodash'
|
||||
import { useLayoutEffect, useState } from 'react'
|
||||
|
||||
import { Answer } from '../../../common/answer'
|
||||
import { Contract } from '../../../common/contract'
|
||||
import { Col } from '../layout/col'
|
||||
import { formatPercent } from '../../../common/util/format'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import { getOutcomeProbability } from '../../../common/calculate'
|
||||
import { useAnswers } from '../../hooks/use-answers'
|
||||
import { tradingAllowed } from '../../lib/firebase/contracts'
|
||||
import { AnswerItem } from './answer-item'
|
||||
import { CreateAnswerPanel } from './create-answer-panel'
|
||||
import { AnswerResolvePanel } from './answer-resolve-panel'
|
||||
|
||||
export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
|
||||
const { contract } = props
|
||||
const { creatorId, resolution, resolutions } = contract
|
||||
|
||||
const answers = useAnswers(contract.id) ?? props.answers
|
||||
const [winningAnswers, otherAnswers] = _.partition(
|
||||
answers.filter((answer) => answer.id !== '0'),
|
||||
(answer) =>
|
||||
answer.id === resolution || (resolutions && resolutions[answer.id])
|
||||
)
|
||||
const sortedAnswers = [
|
||||
..._.sortBy(winningAnswers, (answer) =>
|
||||
resolutions ? -1 * resolutions[answer.id] : 0
|
||||
),
|
||||
..._.sortBy(
|
||||
otherAnswers,
|
||||
(answer) => -1 * getOutcomeProbability(contract.totalShares, answer.id)
|
||||
),
|
||||
]
|
||||
|
||||
const user = useUser()
|
||||
|
||||
const [resolveOption, setResolveOption] = useState<
|
||||
'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
|
||||
>()
|
||||
const [chosenAnswers, setChosenAnswers] = useState<{
|
||||
[answerId: string]: number
|
||||
}>({})
|
||||
|
||||
const chosenTotal = _.sum(Object.values(chosenAnswers))
|
||||
|
||||
const onChoose = (answerId: string, prob: number) => {
|
||||
if (resolveOption === 'CHOOSE') {
|
||||
setChosenAnswers({ [answerId]: prob })
|
||||
} else {
|
||||
setChosenAnswers((chosenAnswers) => {
|
||||
return {
|
||||
...chosenAnswers,
|
||||
[answerId]: prob,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onDeselect = (answerId: string) => {
|
||||
setChosenAnswers((chosenAnswers) => {
|
||||
const newChosenAnswers = { ...chosenAnswers }
|
||||
delete newChosenAnswers[answerId]
|
||||
return newChosenAnswers
|
||||
})
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setChosenAnswers({})
|
||||
}, [resolveOption])
|
||||
|
||||
const showChoice = resolution
|
||||
? undefined
|
||||
: resolveOption === 'CHOOSE'
|
||||
? 'radio'
|
||||
: resolveOption === 'CHOOSE_MULTIPLE'
|
||||
? 'checkbox'
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<Col className="gap-3">
|
||||
{sortedAnswers.map((answer) => (
|
||||
<AnswerItem
|
||||
key={answer.id}
|
||||
answer={answer}
|
||||
contract={contract}
|
||||
showChoice={showChoice}
|
||||
chosenProb={chosenAnswers[answer.id]}
|
||||
totalChosenProb={chosenTotal}
|
||||
onChoose={onChoose}
|
||||
onDeselect={onDeselect}
|
||||
/>
|
||||
))}
|
||||
|
||||
{sortedAnswers.length === 0 ? (
|
||||
<div className="text-gray-500 p-4">No answers yet...</div>
|
||||
) : (
|
||||
<div className="text-gray-500 self-end p-4">
|
||||
None of the above:{' '}
|
||||
{formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tradingAllowed(contract) && !resolveOption && (
|
||||
<CreateAnswerPanel contract={contract} />
|
||||
)}
|
||||
|
||||
{user?.id === creatorId && !resolution && (
|
||||
<AnswerResolvePanel
|
||||
contract={contract}
|
||||
resolveOption={resolveOption}
|
||||
setResolveOption={setResolveOption}
|
||||
chosenAnswers={chosenAnswers}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
156
web/components/answers/create-answer-panel.tsx
Normal file
156
web/components/answers/create-answer-panel.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { useState } from 'react'
|
||||
import Textarea from 'react-expanding-textarea'
|
||||
|
||||
import { Contract } from '../../../common/contract'
|
||||
import { AmountInput } from '../amount-input'
|
||||
import { Col } from '../layout/col'
|
||||
import { createAnswer } from '../../lib/firebase/api-call'
|
||||
import { Row } from '../layout/row'
|
||||
import {
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
} from '../../../common/util/format'
|
||||
import { InfoTooltip } from '../info-tooltip'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import {
|
||||
getProbabilityAfterBet,
|
||||
calculateShares,
|
||||
calculatePayoutAfterCorrectBet,
|
||||
} from '../../../common/calculate'
|
||||
import { firebaseLogin } from '../../lib/firebase/users'
|
||||
import { Bet } from '../../../common/bet'
|
||||
|
||||
export function CreateAnswerPanel(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const user = useUser()
|
||||
const [text, setText] = useState('')
|
||||
const [betAmount, setBetAmount] = useState<number | undefined>(10)
|
||||
const [amountError, setAmountError] = useState<string | undefined>()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const canSubmit = text && betAmount && !amountError && !isSubmitting
|
||||
|
||||
const submitAnswer = async () => {
|
||||
if (canSubmit) {
|
||||
setIsSubmitting(true)
|
||||
const result = await createAnswer({
|
||||
contractId: contract.id,
|
||||
text,
|
||||
amount: betAmount,
|
||||
}).then((r) => r.data)
|
||||
|
||||
setIsSubmitting(false)
|
||||
|
||||
if (result.status === 'success') {
|
||||
setText('')
|
||||
setBetAmount(10)
|
||||
setAmountError(undefined)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const resultProb = getProbabilityAfterBet(
|
||||
contract.totalShares,
|
||||
'new',
|
||||
betAmount ?? 0
|
||||
)
|
||||
|
||||
const shares = calculateShares(contract.totalShares, betAmount ?? 0, 'new')
|
||||
|
||||
const currentPayout = betAmount
|
||||
? calculatePayoutAfterCorrectBet(contract, {
|
||||
outcome: 'new',
|
||||
amount: betAmount,
|
||||
shares,
|
||||
} as Bet)
|
||||
: 0
|
||||
|
||||
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
||||
const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
|
||||
|
||||
return (
|
||||
<Col className="gap-4 p-4 bg-gray-50 rounded">
|
||||
<Col className="flex-1 gap-2">
|
||||
<div className="mb-1">Add your answer</div>
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
className="textarea textarea-bordered w-full"
|
||||
placeholder="Type your answer..."
|
||||
rows={1}
|
||||
maxLength={10000}
|
||||
/>
|
||||
<div />
|
||||
<Col
|
||||
className={clsx(
|
||||
'sm:flex-row gap-4',
|
||||
text ? 'justify-between' : 'self-end'
|
||||
)}
|
||||
>
|
||||
{text && (
|
||||
<>
|
||||
<Col className="gap-2 mt-1">
|
||||
<div className="text-gray-500 text-sm">
|
||||
Ante (cannot be sold)
|
||||
</div>
|
||||
<AmountInput
|
||||
amount={betAmount}
|
||||
onChange={setBetAmount}
|
||||
error={amountError}
|
||||
setError={setAmountError}
|
||||
minimumAmount={10}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="gap-2 mt-1">
|
||||
<div className="text-sm text-gray-500">Implied probability</div>
|
||||
<Row>
|
||||
<div>{formatPercent(0)}</div>
|
||||
<div className="mx-2">→</div>
|
||||
<div>{formatPercent(resultProb)}</div>
|
||||
</Row>
|
||||
<Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
|
||||
Payout if chosen
|
||||
<InfoTooltip
|
||||
text={`Current payout for ${formatWithCommas(
|
||||
shares
|
||||
)} / ${formatWithCommas(shares)} shares`}
|
||||
/>
|
||||
</Row>
|
||||
<div>
|
||||
{formatMoney(currentPayout)}
|
||||
<span>(+{currentReturnPercent})</span>
|
||||
</div>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
{user ? (
|
||||
<button
|
||||
className={clsx(
|
||||
'btn self-end mt-2',
|
||||
canSubmit ? 'btn-outline' : 'btn-disabled',
|
||||
isSubmitting && 'loading'
|
||||
)}
|
||||
disabled={!canSubmit}
|
||||
onClick={submitAnswer}
|
||||
>
|
||||
Submit answer & bet
|
||||
</button>
|
||||
) : (
|
||||
text && (
|
||||
<button
|
||||
className="btn self-end whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</Col>
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ import { Fold } from '../../../common/fold'
|
|||
import { useFoldsWithTags } from '../../hooks/use-fold'
|
||||
import { listAllAnswers } from '../../lib/firebase/answers'
|
||||
import { Answer } from '../../../common/answer'
|
||||
import { AnswersPanel } from '../../components/answers-panel'
|
||||
import { AnswersPanel } from '../../components/answers/answers-panel'
|
||||
|
||||
export async function getStaticProps(props: {
|
||||
params: { username: string; contractSlug: string }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user