2021-12-15 07:41:50 +00:00
|
|
|
import Link from 'next/link'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import dayjs from 'dayjs'
|
2021-12-16 03:04:38 +00:00
|
|
|
import { useEffect, useState } from 'react'
|
2021-12-15 07:41:50 +00:00
|
|
|
import { useUserBets } from '../hooks/use-user-bets'
|
|
|
|
import { Bet } from '../lib/firebase/bets'
|
|
|
|
import { User } from '../lib/firebase/users'
|
|
|
|
import { formatMoney, formatPercent } from '../lib/util/format'
|
|
|
|
import { Col } from './layout/col'
|
2021-12-15 18:41:18 +00:00
|
|
|
import { Spacer } from './layout/spacer'
|
2021-12-17 23:16:42 +00:00
|
|
|
import { Contract, getContractFromId, path } from '../lib/firebase/contracts'
|
2021-12-15 22:57:40 +00:00
|
|
|
import { Row } from './layout/row'
|
2021-12-16 02:11:29 +00:00
|
|
|
import { UserLink } from './user-page'
|
2021-12-16 02:27:09 +00:00
|
|
|
import {
|
|
|
|
calculatePayout,
|
|
|
|
currentValue,
|
|
|
|
resolvedPayout,
|
|
|
|
} from '../lib/calculation/contract'
|
2021-12-16 04:30:24 +00:00
|
|
|
import clsx from 'clsx'
|
2021-12-15 07:41:50 +00:00
|
|
|
|
|
|
|
export function BetsList(props: { user: User }) {
|
|
|
|
const { user } = props
|
|
|
|
const bets = useUserBets(user?.id ?? '')
|
|
|
|
|
2021-12-16 03:04:38 +00:00
|
|
|
const [contracts, setContracts] = useState<Contract[]>([])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const loadedBets = bets === 'loading' ? [] : bets
|
|
|
|
const contractIds = _.uniq(loadedBets.map((bet) => bet.contractId))
|
|
|
|
|
|
|
|
let disposed = false
|
2021-12-17 23:16:42 +00:00
|
|
|
Promise.all(contractIds.map((id) => getContractFromId(id))).then(
|
|
|
|
(contracts) => {
|
|
|
|
if (!disposed) setContracts(contracts.filter(Boolean) as Contract[])
|
|
|
|
}
|
|
|
|
)
|
2021-12-16 03:04:38 +00:00
|
|
|
|
|
|
|
return () => {
|
|
|
|
disposed = true
|
|
|
|
}
|
|
|
|
}, [bets])
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
if (bets === 'loading') {
|
|
|
|
return <></>
|
|
|
|
}
|
|
|
|
|
2021-12-17 23:07:08 +00:00
|
|
|
if (bets.length === 0)
|
2021-12-18 10:28:01 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
You have not made any bets yet.{' '}
|
|
|
|
<Link href="/">
|
|
|
|
<a className="text-green-500 hover:underline hover:decoration-2">
|
|
|
|
Find a prediction market!
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
)
|
2021-12-15 07:41:50 +00:00
|
|
|
|
2021-12-16 04:40:48 +00:00
|
|
|
// Decending creation time.
|
|
|
|
bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime)
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
const contractBets = _.groupBy(bets, 'contractId')
|
|
|
|
|
2021-12-16 03:04:38 +00:00
|
|
|
const [resolved, unresolved] = _.partition(
|
|
|
|
contracts,
|
|
|
|
(contract) => contract.isResolved
|
|
|
|
)
|
|
|
|
const currentBets = _.sumBy(unresolved, (contract) =>
|
|
|
|
_.sumBy(contractBets[contract.id], (bet) => bet.amount)
|
|
|
|
)
|
|
|
|
|
|
|
|
const currentBetsValue = _.sumBy(unresolved, (contract) =>
|
|
|
|
_.sumBy(contractBets[contract.id], (bet) => currentValue(contract, bet))
|
|
|
|
)
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
return (
|
2021-12-18 10:37:26 +00:00
|
|
|
<Col className="mt-6 gap-6">
|
2021-12-16 09:09:36 +00:00
|
|
|
<Row className="gap-8">
|
2021-12-16 03:04:38 +00:00
|
|
|
<Col>
|
|
|
|
<div className="text-sm text-gray-500">Active bets</div>
|
|
|
|
<div>{formatMoney(currentBets)}</div>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<div className="text-sm text-gray-500">Current value</div>
|
|
|
|
<div>{formatMoney(currentBetsValue)}</div>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
{[...unresolved, ...resolved].map((contract) => (
|
2021-12-15 22:57:40 +00:00
|
|
|
<MyContractBets
|
2021-12-16 03:04:38 +00:00
|
|
|
key={contract.id}
|
|
|
|
contract={contract}
|
2021-12-16 21:28:56 +00:00
|
|
|
bets={contractBets[contract.id] ?? []}
|
2021-12-15 07:41:50 +00:00
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 03:04:38 +00:00
|
|
|
function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
|
|
|
|
const { bets, contract } = props
|
2021-12-15 22:57:40 +00:00
|
|
|
const { resolution } = contract
|
|
|
|
|
2021-12-16 21:22:00 +00:00
|
|
|
const [collapsed, setCollapsed] = useState(true)
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
return (
|
2021-12-16 21:22:00 +00:00
|
|
|
<div
|
|
|
|
tabIndex={0}
|
|
|
|
className={clsx(
|
|
|
|
'p-6 bg-white card card-body shadow-xl collapse collapse-arrow cursor-pointer',
|
2021-12-17 04:27:22 +00:00
|
|
|
collapsed ? 'collapse-close' : 'collapse-open pb-2'
|
2021-12-16 21:22:00 +00:00
|
|
|
)}
|
|
|
|
onClick={() => setCollapsed((collapsed) => !collapsed)}
|
|
|
|
>
|
2021-12-16 21:51:47 +00:00
|
|
|
<Row className="flex-wrap gap-4">
|
2021-12-16 21:22:00 +00:00
|
|
|
<Col className="flex-[2] gap-1">
|
|
|
|
<div>
|
|
|
|
<Link href={path(contract)}>
|
2021-12-16 21:28:56 +00:00
|
|
|
<a
|
|
|
|
className="font-medium text-indigo-700 hover:underline hover:decoration-indigo-400 hover:decoration-2"
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
>
|
2021-12-16 09:03:41 +00:00
|
|
|
{contract.question}
|
2021-12-16 21:22:00 +00:00
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
</div>
|
2021-12-16 09:03:41 +00:00
|
|
|
|
|
|
|
<Row className="gap-2 text-gray-500 text-sm">
|
2021-12-16 02:04:36 +00:00
|
|
|
<div>
|
2021-12-18 07:27:29 +00:00
|
|
|
<UserLink username={contract.creatorUsername} />
|
2021-12-16 02:04:36 +00:00
|
|
|
</div>
|
2021-12-16 09:03:41 +00:00
|
|
|
{resolution && (
|
|
|
|
<>
|
|
|
|
<div>•</div>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="whitespace-nowrap">
|
2021-12-16 21:22:00 +00:00
|
|
|
Resolved <OutcomeLabel outcome={resolution} />
|
2021-12-16 09:03:41 +00:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Row>
|
|
|
|
</Col>
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-16 21:51:47 +00:00
|
|
|
<Row className="flex-nowrap">
|
|
|
|
<MyBetsSummary
|
|
|
|
className="flex-1 justify-end"
|
|
|
|
contract={contract}
|
|
|
|
bets={bets}
|
|
|
|
/>
|
|
|
|
|
|
|
|
{/* Show carrot for collapsing. Hack the positioning. */}
|
|
|
|
<div
|
|
|
|
className="collapse-title p-0 pr-8 relative w-0 h-0 min-h-0"
|
|
|
|
style={{ top: -10, right: -20 }}
|
|
|
|
/>
|
|
|
|
</Row>
|
2021-12-16 09:03:41 +00:00
|
|
|
</Row>
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-17 04:27:22 +00:00
|
|
|
<div className="collapse-content" style={{ backgroundColor: 'white' }}>
|
2021-12-16 21:22:00 +00:00
|
|
|
<Spacer h={8} />
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-16 21:22:00 +00:00
|
|
|
<ContractBetsTable contract={contract} bets={bets} />
|
|
|
|
</div>
|
2021-12-15 07:41:50 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 04:30:24 +00:00
|
|
|
export function MyBetsSummary(props: {
|
|
|
|
contract: Contract
|
|
|
|
bets: Bet[]
|
|
|
|
className?: string
|
|
|
|
}) {
|
|
|
|
const { bets, contract, className } = props
|
|
|
|
const { resolution } = contract
|
|
|
|
|
|
|
|
const betsTotal = _.sumBy(bets, (bet) => bet.amount)
|
|
|
|
|
|
|
|
const betsPayout = resolution
|
|
|
|
? _.sumBy(bets, (bet) => resolvedPayout(contract, bet))
|
|
|
|
: 0
|
|
|
|
|
|
|
|
const yesWinnings = _.sumBy(bets, (bet) =>
|
|
|
|
calculatePayout(contract, bet, 'YES')
|
|
|
|
)
|
|
|
|
const noWinnings = _.sumBy(bets, (bet) =>
|
|
|
|
calculatePayout(contract, bet, 'NO')
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2021-12-16 21:51:47 +00:00
|
|
|
<Row className={clsx('gap-6', className)}>
|
2021-12-16 04:30:24 +00:00
|
|
|
<Col>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="text-sm text-gray-500 whitespace-nowrap">
|
|
|
|
Total bets
|
|
|
|
</div>
|
|
|
|
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
|
2021-12-16 04:30:24 +00:00
|
|
|
</Col>
|
|
|
|
{resolution ? (
|
|
|
|
<>
|
|
|
|
<Col>
|
|
|
|
<div className="text-sm text-gray-500">Winnings</div>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="whitespace-nowrap">{formatMoney(betsPayout)}</div>
|
2021-12-16 04:30:24 +00:00
|
|
|
</Col>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<Col>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="text-sm text-gray-500 whitespace-nowrap">
|
2021-12-16 21:35:06 +00:00
|
|
|
Payout if <YesLabel />
|
2021-12-16 04:30:24 +00:00
|
|
|
</div>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
|
2021-12-16 04:30:24 +00:00
|
|
|
</Col>
|
|
|
|
<Col>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="text-sm text-gray-500 whitespace-nowrap">
|
2021-12-16 21:35:06 +00:00
|
|
|
Payout if <NoLabel />
|
2021-12-16 04:30:24 +00:00
|
|
|
</div>
|
2021-12-16 21:51:47 +00:00
|
|
|
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
|
2021-12-16 04:30:24 +00:00
|
|
|
</Col>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 21:22:00 +00:00
|
|
|
export function ContractBetsTable(props: {
|
|
|
|
contract: Contract
|
|
|
|
bets: Bet[]
|
|
|
|
className?: string
|
|
|
|
}) {
|
|
|
|
const { contract, bets, className } = props
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-16 02:27:09 +00:00
|
|
|
const { isResolved } = contract
|
|
|
|
|
2021-12-15 22:57:40 +00:00
|
|
|
return (
|
2021-12-16 21:22:00 +00:00
|
|
|
<div className={clsx('overflow-x-auto', className)}>
|
2021-12-15 22:57:40 +00:00
|
|
|
<table className="table table-zebra table-compact text-gray-500 w-full">
|
|
|
|
<thead>
|
|
|
|
<tr className="p-2">
|
2021-12-15 23:27:02 +00:00
|
|
|
<th>Date</th>
|
2021-12-15 22:57:40 +00:00
|
|
|
<th>Outcome</th>
|
|
|
|
<th>Bet</th>
|
|
|
|
<th>Probability</th>
|
2021-12-16 02:27:09 +00:00
|
|
|
{!isResolved && <th>Est. max payout</th>}
|
|
|
|
<th>{isResolved ? <>Payout</> : <>Current value</>}</th>
|
2021-12-15 22:57:40 +00:00
|
|
|
</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
|
2021-12-15 18:41:18 +00:00
|
|
|
const { amount, outcome, createdTime, probBefore, probAfter, dpmWeight } = bet
|
2021-12-16 02:27:09 +00:00
|
|
|
const { isResolved } = contract
|
2021-12-15 07:41:50 +00:00
|
|
|
|
|
|
|
return (
|
2021-12-15 18:41:18 +00:00
|
|
|
<tr>
|
2021-12-15 23:27:02 +00:00
|
|
|
<td>{dayjs(createdTime).format('MMM D, H:mma')}</td>
|
2021-12-16 21:22:00 +00:00
|
|
|
<td>
|
|
|
|
<OutcomeLabel outcome={outcome} />
|
|
|
|
</td>
|
2021-12-15 18:41:18 +00:00
|
|
|
<td>{formatMoney(amount)}</td>
|
|
|
|
<td>
|
|
|
|
{formatPercent(probBefore)} → {formatPercent(probAfter)}
|
|
|
|
</td>
|
2021-12-16 02:27:09 +00:00
|
|
|
{!isResolved && <td>{formatMoney(amount + dpmWeight)}</td>}
|
|
|
|
<td>
|
|
|
|
{formatMoney(
|
|
|
|
isResolved
|
|
|
|
? resolvedPayout(contract, bet)
|
|
|
|
: currentValue(contract, bet)
|
|
|
|
)}
|
|
|
|
</td>
|
2021-12-15 18:41:18 +00:00
|
|
|
</tr>
|
2021-12-15 07:41:50 +00:00
|
|
|
)
|
|
|
|
}
|
2021-12-16 02:27:09 +00:00
|
|
|
|
2021-12-16 21:22:00 +00:00
|
|
|
function OutcomeLabel(props: { outcome: 'YES' | 'NO' | 'CANCEL' }) {
|
|
|
|
const { outcome } = props
|
|
|
|
|
|
|
|
if (outcome === 'YES') return <YesLabel />
|
|
|
|
if (outcome === 'NO') return <NoLabel />
|
|
|
|
return <CancelLabel />
|
|
|
|
}
|
|
|
|
|
2021-12-16 02:27:09 +00:00
|
|
|
function YesLabel() {
|
|
|
|
return <span className="text-primary">YES</span>
|
|
|
|
}
|
|
|
|
|
|
|
|
function NoLabel() {
|
|
|
|
return <span className="text-red-400">NO</span>
|
|
|
|
}
|
|
|
|
|
|
|
|
function CancelLabel() {
|
|
|
|
return <span className="text-yellow-400">CANCEL</span>
|
|
|
|
}
|