Answer bet panel
This commit is contained in:
James Grugett
parent
467effa5ca
commit
b9248499c9
|
|
@ -1,27 +0,0 @@
|
|||
import * as _ from 'lodash'
|
||||
|
||||
export function getMultiProbability(
|
||||
totalShares: {
|
||||
[answerId: string]: number
|
||||
},
|
||||
answerId: string
|
||||
) {
|
||||
const squareSum = _.sumBy(Object.values(totalShares), (shares) => shares ** 2)
|
||||
const shares = totalShares[answerId] ?? 0
|
||||
return shares ** 2 / squareSum
|
||||
}
|
||||
|
||||
export function calculateMultiShares(
|
||||
totalShares: {
|
||||
[answerId: string]: number
|
||||
},
|
||||
bet: number,
|
||||
betChoice: string
|
||||
) {
|
||||
const squareSum = _.sumBy(Object.values(totalShares), (shares) => shares ** 2)
|
||||
const shares = totalShares[betChoice] ?? 0
|
||||
|
||||
const c = 2 * bet * Math.sqrt(squareSum)
|
||||
|
||||
return Math.sqrt(bet ** 2 + shares ** 2 + c) - shares
|
||||
}
|
||||
|
|
@ -1,39 +1,51 @@
|
|||
import _ from 'lodash'
|
||||
import { Bet } from './bet'
|
||||
import { Contract } from './contract'
|
||||
import { FEES } from './fees'
|
||||
|
||||
export function getProbability(totalShares: { YES: number; NO: number }) {
|
||||
const { YES: y, NO: n } = totalShares
|
||||
return y ** 2 / (y ** 2 + n ** 2)
|
||||
return getOutcomeProbability(totalShares, 'YES')
|
||||
}
|
||||
|
||||
export function getOutcomeProbability(
|
||||
totalShares: {
|
||||
[outcome: string]: number
|
||||
},
|
||||
outcome: string
|
||||
) {
|
||||
const squareSum = _.sumBy(Object.values(totalShares), (shares) => shares ** 2)
|
||||
const shares = totalShares[outcome] ?? 0
|
||||
return shares ** 2 / squareSum
|
||||
}
|
||||
|
||||
export function getProbabilityAfterBet(
|
||||
totalShares: { YES: number; NO: number },
|
||||
outcome: 'YES' | 'NO',
|
||||
totalShares: {
|
||||
[outcome: string]: number
|
||||
},
|
||||
outcome: string,
|
||||
bet: number
|
||||
) {
|
||||
const shares = calculateShares(totalShares, bet, outcome)
|
||||
|
||||
const [YES, NO] =
|
||||
outcome === 'YES'
|
||||
? [totalShares.YES + shares, totalShares.NO]
|
||||
: [totalShares.YES, totalShares.NO + shares]
|
||||
const prevShares = totalShares[outcome] ?? 0
|
||||
const newTotalShares = { ...totalShares, outcome: prevShares + shares }
|
||||
|
||||
return getProbability({ YES, NO })
|
||||
return getOutcomeProbability(newTotalShares, outcome)
|
||||
}
|
||||
|
||||
export function calculateShares(
|
||||
totalShares: { YES: number; NO: number },
|
||||
totalShares: {
|
||||
[outcome: string]: number
|
||||
},
|
||||
bet: number,
|
||||
betChoice: 'YES' | 'NO'
|
||||
betChoice: string
|
||||
) {
|
||||
const [yesShares, noShares] = [totalShares.YES, totalShares.NO]
|
||||
const squareSum = _.sumBy(Object.values(totalShares), (shares) => shares ** 2)
|
||||
const shares = totalShares[betChoice] ?? 0
|
||||
|
||||
const c = 2 * bet * Math.sqrt(yesShares ** 2 + noShares ** 2)
|
||||
const c = 2 * bet * Math.sqrt(squareSum)
|
||||
|
||||
return betChoice === 'YES'
|
||||
? Math.sqrt(bet ** 2 + yesShares ** 2 + c) - yesShares
|
||||
: Math.sqrt(bet ** 2 + noShares ** 2 + c) - noShares
|
||||
return Math.sqrt(bet ** 2 + shares ** 2 + c) - shares
|
||||
}
|
||||
|
||||
export function calculateEstimatedWinnings(
|
||||
|
|
@ -128,15 +140,15 @@ export function calculateCancelPayout(contract: Contract, bet: Bet) {
|
|||
export function calculateStandardPayout(
|
||||
contract: Contract,
|
||||
bet: Bet,
|
||||
outcome: 'YES' | 'NO'
|
||||
outcome: string
|
||||
) {
|
||||
const { amount, outcome: betOutcome, shares } = bet
|
||||
if (betOutcome !== outcome) return 0
|
||||
|
||||
const { totalShares, totalBets, phantomShares } = contract
|
||||
if (totalShares[outcome] === 0) return 0
|
||||
if (!totalShares[outcome]) return 0
|
||||
|
||||
const truePool = contract.pool.YES + contract.pool.NO
|
||||
const truePool = _.sum(Object.values(totalShares))
|
||||
|
||||
if (totalBets[outcome] >= truePool)
|
||||
return (amount / totalBets[outcome]) * truePool
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Bet } from './bet'
|
||||
import { calculateShares, getProbability } from './calculate'
|
||||
import { calculateMultiShares, getMultiProbability } from './calculate-multi'
|
||||
import {
|
||||
calculateShares,
|
||||
getProbability,
|
||||
getOutcomeProbability,
|
||||
} from './calculate'
|
||||
import { Contract } from './contract'
|
||||
import { User } from './user'
|
||||
|
||||
|
|
@ -66,7 +69,7 @@ export const getNewMultiBetInfo = (
|
|||
const prevOutcomePool = pool[outcome] ?? 0
|
||||
const newPool = { ...pool, outcome: prevOutcomePool + amount }
|
||||
|
||||
const shares = calculateMultiShares(contract.totalShares, amount, outcome)
|
||||
const shares = calculateShares(contract.totalShares, amount, outcome)
|
||||
|
||||
const prevShares = totalShares[outcome] ?? 0
|
||||
const newTotalShares = { ...totalShares, outcome: prevShares + shares }
|
||||
|
|
@ -74,8 +77,8 @@ export const getNewMultiBetInfo = (
|
|||
const prevTotalBets = totalBets[outcome] ?? 0
|
||||
const newTotalBets = { ...totalBets, outcome: prevTotalBets + amount }
|
||||
|
||||
const probBefore = getMultiProbability(totalShares, outcome)
|
||||
const probAfter = getMultiProbability(newTotalShares, outcome)
|
||||
const probBefore = getOutcomeProbability(totalShares, outcome)
|
||||
const probAfter = getOutcomeProbability(newTotalShares, outcome)
|
||||
|
||||
const newBet: Bet<'MULTI'> = {
|
||||
id: newBetId,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,32 @@
|
|||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Textarea from 'react-expanding-textarea'
|
||||
|
||||
import { Answer } from '../../common/answer'
|
||||
import { Contract } from '../../common/contract'
|
||||
import { AmountInput } from './amount-input'
|
||||
import { Col } from './layout/col'
|
||||
import { createAnswer } from '../lib/firebase/api-call'
|
||||
import { createAnswer, placeBet } 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 } 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,
|
||||
} from '../../common/calculate'
|
||||
import { firebaseLogin } from '../lib/firebase/users'
|
||||
|
||||
export function AnswersPanel(props: {
|
||||
contract: Contract<'MULTI'>
|
||||
|
|
@ -36,7 +50,10 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
|
|||
|
||||
const createdDate = dayjs(createdTime).format('MMM D')
|
||||
|
||||
const [isBetting, setIsBetting] = useState(false)
|
||||
|
||||
return (
|
||||
<Col>
|
||||
<Col className="p-2 sm:flex-row">
|
||||
<Col className="gap-2 flex-1">
|
||||
<div>{answer.text}</div>
|
||||
|
|
@ -61,9 +78,161 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
|
|||
|
||||
<BuyButton
|
||||
className="justify-end self-end flex-initial"
|
||||
onClick={() => {}}
|
||||
onClick={() => {
|
||||
setIsBetting(true)
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
{isBetting && <AnswerBetPanel answer={answer} contract={contract} />}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function AnswerBetPanel(props: {
|
||||
answer: Answer
|
||||
contract: Contract<'MULTI'>
|
||||
}) {
|
||||
const { answer, contract } = 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 [wasSubmitted, setWasSubmitted] = useState(false)
|
||||
|
||||
const inputRef = useRef<HTMLElement>(null)
|
||||
useEffect(() => {
|
||||
inputRef.current && inputRef.current.focus()
|
||||
}, [])
|
||||
|
||||
function onBetChange(newAmount: number | undefined) {
|
||||
setWasSubmitted(false)
|
||||
setBetAmount(newAmount)
|
||||
}
|
||||
|
||||
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)
|
||||
setWasSubmitted(true)
|
||||
setBetAmount(undefined)
|
||||
} 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
|
||||
? 0
|
||||
: // 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-center">
|
||||
<Col className="p-2 items-start">
|
||||
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
|
||||
<AmountInput
|
||||
inputClassName="w-full"
|
||||
amount={betAmount}
|
||||
onChange={onBetChange}
|
||||
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">
|
||||
Potential payout
|
||||
<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>
|
||||
)}
|
||||
|
||||
{wasSubmitted && <div className="mt-4">Trade submitted!</div>}
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user