open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update bet UI with market summary and computed columns

Browse Source
This commit is contained in:
jahooma 2021-12-15 16:57:40 -06:00
parent e281233924
commit e8f94f48e2
5 changed files with 178 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/bet-panel.tsx
View File

@ -10,6 +10,11 @@ import { Spacer } from './layout/spacer'
import { YesNoSelector } from './yes-no-selector'
import { formatMoney, formatPercent } from '../lib/util/format'
import { Title } from './title'
import {
getProbability,
getDpmWeight,
getProbabilityAfterBet,
} from '../lib/calculation/contract'
export function BetPanel(props: { contract: Contract; className?: string }) {
const { contract, className } = props
@ -79,8 +84,12 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
const betDisabled = isSubmitting || !betAmount || error
const initialProb = getProbability(contract.pot, betChoice)
const resultProb = getProbability(contract.pot, betChoice, betAmount)
const initialProb = getProbability(contract.pot)
const resultProb = getProbabilityAfterBet(
contract.pot,
betChoice,
betAmount ?? 0
)
const dpmWeight = getDpmWeight(contract.pot, betAmount ?? 0, betChoice)
const estimatedWinnings = Math.floor((betAmount ?? 0) + dpmWeight)
@ -166,29 +175,3 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
const functions = getFunctions()
export const placeBet = httpsCallable(functions, 'placeBet')
const getProbability = (
pot: { YES: number; NO: number },
outcome: 'YES' | 'NO',
bet = 0
) => {
const [yesPot, noPot] = [
pot.YES + (outcome === 'YES' ? bet : 0),
pot.NO + (outcome === 'NO' ? bet : 0),
]
const numerator = Math.pow(yesPot, 2)
const denominator = Math.pow(yesPot, 2) + Math.pow(noPot, 2)
return numerator / denominator
}
const getDpmWeight = (
pot: { YES: number; NO: number },
bet: number,
betChoice: 'YES' | 'NO'
) => {
const [yesPot, noPot] = [pot.YES, pot.NO]
return betChoice === 'YES'
? (bet * Math.pow(noPot, 2)) / (Math.pow(yesPot, 2) + bet * yesPot)
: (bet * Math.pow(yesPot, 2)) / (Math.pow(noPot, 2) + bet * noPot)
}

128
web/components/bets-list.tsx
View File

@ -7,8 +7,10 @@ import { Bet } from '../lib/firebase/bets'
import { User } from '../lib/firebase/users'
import { formatMoney, formatPercent } from '../lib/util/format'
import { Col } from './layout/col'
import { ContractDetails } from './contracts-list'
import { Spacer } from './layout/spacer'
import { Contract } from '../lib/firebase/contracts'
import { Row } from './layout/row'
import { calculateWinnings, currentValue } from '../lib/calculation/contract'
export function BetsList(props: { user: User }) {
const { user } = props
@ -25,7 +27,7 @@ export function BetsList(props: { user: User }) {
return (
<Col className="mt-6 gap-10">
{Object.keys(contractBets).map((contractId) => (
<ContractBetsTable
<MyContractBets
key={contractId}
contractId={contractId}
bets={contractBets[contractId]}
@ -35,47 +37,116 @@ export function BetsList(props: { user: User }) {
)
}
function ContractBetsTable(props: { contractId: string; bets: Bet[] }) {
function MyContractBets(props: { contractId: string; bets: Bet[] }) {
const { contractId, bets } = props
const contract = useContract(contractId)
if (contract === 'loading' || contract === null) return <></>
const { resolution } = contract
const betsTotal = _.sumBy(bets, (bet) => bet.amount)
const betsValue = _.sumBy(bets, (bet) => currentValue(contract, bet))
const yesWinnings = _.sumBy(bets, (bet) =>
calculateWinnings(contract, bet, 'YES')
)
const noWinnings = _.sumBy(bets, (bet) =>
calculateWinnings(contract, bet, 'NO')
)
return (
<div className="px-4">
<Link href={`/contract/${contractId}`}>
<a>
<p className="font-medium text-indigo-700 mb-2">
<div className="font-medium text-indigo-700 mb-1">
{contract.question}
</p>
<ContractDetails contract={contract} />
</div>
<Row className="gap-2 text-gray-500 text-sm">
<div>By {contract.creatorName}</div>
{resolution && <div>•</div>}
{resolution === 'YES' && (
<div className="text-primary">Resolved YES</div>
)}
{resolution === 'NO' && (
<div className="text-red-400">Resolved NO</div>
)}
{resolution === 'CANCEL' && (
<div className="text-yellow-400">Resolved CANCEL</div>
)}
</Row>
</a>
</Link>
<Spacer h={4} />
<div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full">
<thead>
<tr className="p-2">
<th>Outcome</th>
<th>Amount</th>
<th>Probability</th>
<th>Estimated payoff</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{bets.map((bet) => (
<BetRow key={bet.id} bet={bet} />
))}
</tbody>
</table>
</div>
<Spacer h={6} />
<Row className="gap-8 ">
<Col>
<div className="text-sm text-gray-500">Total bets</div>
<div className="">{formatMoney(betsTotal)}</div>
</Col>
{resolution ? (
<>
<Col>
<div className="text-sm text-gray-500">Winnings</div>
<div className="">{formatMoney(yesWinnings)}</div>
</Col>
</>
) : (
<>
<Col>
<div className="text-sm text-gray-500">Current value</div>
<div className="">{formatMoney(betsValue)}</div>
</Col>
<Col>
<div className="text-sm text-primary">If YES</div>
<div className="">{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="text-sm text-red-400">If NO</div>
<div className="">{formatMoney(noWinnings)}</div>
</Col>
</>
)}
</Row>
<Spacer h={6} />
<ContractBetsTable contract={contract} bets={bets} />
</div>
)
}
function BetRow(props: { bet: Bet }) {
const { bet } = props
function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
const { contract, bets } = props
return (
<div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full">
<thead>
<tr className="p-2">
<th>Outcome</th>
<th>Bet</th>
<th>Probability</th>
<th>Date</th>
<th>Est. max payout</th>
<th>Profit/loss</th>
</tr>
</thead>
<tbody>
{bets.map((bet) => (
<BetRow key={bet.id} bet={bet} contract={contract} />
))}
</tbody>
</table>
</div>
)
}
function BetRow(props: { bet: Bet; contract: Contract }) {
const { bet, contract } = props
const { amount, outcome, createdTime, probBefore, probAfter, dpmWeight } = bet
return (
@ -85,8 +156,9 @@ function BetRow(props: { bet: Bet }) {
<td>
{formatPercent(probBefore)} → {formatPercent(probAfter)}
</td>
<td>{formatMoney(amount + dpmWeight)}</td>
<td>{dayjs(createdTime).format('MMM D, H:mma')}</td>
<td>{formatMoney(amount + dpmWeight)}</td>
<td>{formatMoney(currentValue(contract, bet) - amount)}</td>
</tr>
)
}

2
web/components/contracts-list.tsx
View File

@ -18,7 +18,7 @@ export function ContractDetails(props: { contract: Contract }) {
{resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
</div>
<div className="mx-2">•</div>
<div className="whitespace-nowrap">{formatMoney(volume)} pot</div>
<div className="whitespace-nowrap">{formatMoney(volume)} bet</div>
</Row>
)
}

66
web/lib/calculation/contract.ts Normal file
View File

@ -0,0 +1,66 @@
import { Bet } from '../firebase/bets'
import { Contract } from '../firebase/contracts'
export function getProbability(pot: { YES: number; NO: number }) {
const [yesPot, noPot] = [pot.YES, pot.NO]
const numerator = Math.pow(yesPot, 2)
const denominator = Math.pow(yesPot, 2) + Math.pow(noPot, 2)
return numerator / denominator
}
export function getProbabilityAfterBet(
pot: { YES: number; NO: number },
outcome: 'YES' | 'NO',
bet: number
) {
const [YES, NO] = [
pot.YES + (outcome === 'YES' ? bet : 0),
pot.NO + (outcome === 'NO' ? bet : 0),
]
return getProbability({ YES, NO })
}
export function getDpmWeight(
pot: { YES: number; NO: number },
bet: number,
betChoice: 'YES' | 'NO'
) {
const [yesPot, noPot] = [pot.YES, pot.NO]
return betChoice === 'YES'
? (bet * Math.pow(noPot, 2)) / (Math.pow(yesPot, 2) + bet * yesPot)
: (bet * Math.pow(yesPot, 2)) / (Math.pow(noPot, 2) + bet * noPot)
}
export function calculateWinnings(
contract: Contract,
bet: Bet,
outcome: 'YES' | 'NO' | 'CANCEL'
) {
let { dpmWeights, pot } = contract
const { amount, outcome: betOutcome, dpmWeight } = bet
if (outcome === 'CANCEL') return amount
if (!dpmWeights) {
// Fake data if not set.
dpmWeights = { YES: 100, NO: 100 }
}
// Fake data if not set.
if (!pot) pot = { YES: 100, NO: 100 }
return betOutcome === outcome
? 0.98 *
(dpmWeight / dpmWeights[outcome]) *
pot[outcome === 'YES' ? 'NO' : 'YES'] +
amount
: 0
}
export function currentValue(contract: Contract, bet: Bet) {
const prob = getProbability(contract.pot)
const yesWinnings = calculateWinnings(contract, bet, 'YES')
const noWinnings = calculateWinnings(contract, bet, 'NO')
return prob * yesWinnings + (1 - prob) * noWinnings
}

1
web/lib/service/create-contract.ts
View File

@ -31,7 +31,6 @@ export async function createContract(
seedAmounts: { YES: seedYes, NO: seedNo },
pot: { YES: seedYes, NO: seedNo },
dpmWeights: { YES: 0, NO: 0 },
isResolved: false,
// TODO: Set create time to Firestore timestamp