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'
|
2022-01-05 18:23:58 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
|
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'
|
2021-12-31 20:13:06 +00:00
|
|
|
import {
|
|
|
|
formatMoney,
|
|
|
|
formatPercent,
|
|
|
|
formatWithCommas,
|
2022-01-30 21:51:30 +00:00
|
|
|
} from '../../common/util/format'
|
2021-12-15 07:41:50 +00:00
|
|
|
import { Col } from './layout/col'
|
2021-12-15 18:41:18 +00:00
|
|
|
import { Spacer } from './layout/spacer'
|
2022-01-12 19:01:04 +00:00
|
|
|
import {
|
|
|
|
Contract,
|
|
|
|
getContractFromId,
|
|
|
|
contractPath,
|
2022-02-09 04:52:09 +00:00
|
|
|
contractMetrics,
|
2022-01-12 19:01:04 +00:00
|
|
|
} 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 {
|
2022-02-14 02:20:46 +00:00
|
|
|
calculateCancelPayout,
|
2021-12-16 02:27:09 +00:00
|
|
|
calculatePayout,
|
2021-12-24 21:06:01 +00:00
|
|
|
calculateSaleAmount,
|
2022-02-14 02:20:46 +00:00
|
|
|
getProbability,
|
2021-12-16 02:27:09 +00:00
|
|
|
resolvedPayout,
|
2022-01-10 21:07:57 +00:00
|
|
|
} from '../../common/calculate'
|
2022-01-05 18:23:58 +00:00
|
|
|
import { sellBet } from '../lib/firebase/api-call'
|
2021-12-24 21:06:01 +00:00
|
|
|
import { ConfirmationButton } from './confirmation-button'
|
2022-02-14 02:20:46 +00:00
|
|
|
import { OutcomeLabel, YesLabel, NoLabel } from './outcome-label'
|
2021-12-15 07:41:50 +00:00
|
|
|
|
2022-02-09 05:28:20 +00:00
|
|
|
type BetSort = 'newest' | 'profit'
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
export function BetsList(props: { user: User }) {
|
|
|
|
const { user } = props
|
2022-02-04 00:13:04 +00:00
|
|
|
const bets = useUserBets(user.id)
|
2021-12-15 07:41:50 +00:00
|
|
|
|
2021-12-16 03:04:38 +00:00
|
|
|
const [contracts, setContracts] = useState<Contract[]>([])
|
|
|
|
|
2022-02-09 05:28:20 +00:00
|
|
|
const [sort, setSort] = useState<BetSort>('profit')
|
|
|
|
|
2021-12-16 03:04:38 +00:00
|
|
|
useEffect(() => {
|
2022-02-04 00:13:04 +00:00
|
|
|
const loadedBets = bets ? bets : []
|
2021-12-16 03:04:38 +00:00
|
|
|
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])
|
|
|
|
|
2022-02-04 00:13:04 +00:00
|
|
|
if (!bets) {
|
2021-12-15 07:41:50 +00:00
|
|
|
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')
|
|
|
|
|
2022-02-09 05:28:20 +00:00
|
|
|
const contractsCurrentValue = _.mapValues(
|
|
|
|
contractBets,
|
|
|
|
(bets, contractId) => {
|
|
|
|
return _.sumBy(bets, (bet) => {
|
|
|
|
if (bet.isSold || bet.sale) return 0
|
2021-12-24 21:06:01 +00:00
|
|
|
|
2022-02-09 05:28:20 +00:00
|
|
|
const contract = contracts.find((c) => c.id === contractId)
|
|
|
|
return contract ? calculatePayout(contract, bet, 'MKT') : 0
|
|
|
|
})
|
|
|
|
}
|
|
|
|
)
|
|
|
|
const contractsInvestment = _.mapValues(contractBets, (bets) => {
|
|
|
|
return _.sumBy(bets, (bet) => {
|
2021-12-24 21:06:01 +00:00
|
|
|
if (bet.isSold || bet.sale) return 0
|
|
|
|
return bet.amount
|
|
|
|
})
|
2022-02-09 05:28:20 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
let sortedContracts = contracts
|
|
|
|
if (sort === 'profit') {
|
|
|
|
sortedContracts = _.sortBy(
|
|
|
|
contracts,
|
|
|
|
(c) => -1 * (contractsCurrentValue[c.id] - contractsInvestment[c.id])
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const [resolved, unresolved] = _.partition(
|
|
|
|
sortedContracts,
|
|
|
|
(c) => c.isResolved
|
2021-12-16 03:04:38 +00:00
|
|
|
)
|
|
|
|
|
2022-02-09 05:28:20 +00:00
|
|
|
const currentInvestment = _.sumBy(
|
|
|
|
unresolved,
|
|
|
|
(c) => contractsInvestment[c.id]
|
|
|
|
)
|
|
|
|
|
|
|
|
const currentBetsValue = _.sumBy(
|
|
|
|
unresolved,
|
|
|
|
(c) => contractsCurrentValue[c.id]
|
2021-12-16 03:04:38 +00:00
|
|
|
)
|
|
|
|
|
2022-02-14 19:00:20 +00:00
|
|
|
const totalPortfolio = currentBetsValue + user.balance
|
|
|
|
|
2022-02-14 23:29:29 +00:00
|
|
|
const totalPnl = totalPortfolio - user.totalDeposits
|
|
|
|
const totalProfit = (totalPnl / user.totalDeposits) * 100
|
|
|
|
const investedProfit =
|
|
|
|
((currentBetsValue - currentInvestment) / currentInvestment) * 100
|
2022-02-14 22:00:35 +00:00
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
return (
|
2022-02-14 23:39:59 +00:00
|
|
|
<Col className="mt-6 gap-4 sm:gap-6">
|
2022-02-11 18:40:22 +00:00
|
|
|
<Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
|
2022-02-09 05:28:20 +00:00
|
|
|
<Row className="gap-8">
|
2022-02-14 19:00:20 +00:00
|
|
|
<Col>
|
2022-02-14 23:29:29 +00:00
|
|
|
<div className="text-sm text-gray-500">Invested</div>
|
|
|
|
<div className="text-lg">
|
|
|
|
{formatMoney(currentBetsValue)}{' '}
|
|
|
|
<ProfitBadge profitPercent={investedProfit} />
|
2022-02-14 19:00:20 +00:00
|
|
|
</div>
|
|
|
|
</Col>
|
2022-02-09 05:28:20 +00:00
|
|
|
<Col>
|
2022-02-14 23:29:29 +00:00
|
|
|
<div className="text-sm text-gray-500">Balance</div>
|
|
|
|
<div className="whitespace-nowrap text-lg">
|
|
|
|
{formatMoney(user.balance)}{' '}
|
|
|
|
</div>
|
2022-02-09 05:28:20 +00:00
|
|
|
</Col>
|
|
|
|
<Col>
|
2022-02-14 23:29:29 +00:00
|
|
|
<div className="text-sm text-gray-500">Total portfolio</div>
|
|
|
|
<div className="text-lg">
|
|
|
|
{formatMoney(totalPortfolio)}{' '}
|
|
|
|
<ProfitBadge profitPercent={totalProfit} />
|
|
|
|
</div>
|
2022-02-09 05:28:20 +00:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
<select
|
|
|
|
className="select select-bordered self-start"
|
|
|
|
value={sort}
|
|
|
|
onChange={(e) => setSort(e.target.value as BetSort)}
|
|
|
|
>
|
|
|
|
<option value="profit">By profit</option>
|
|
|
|
<option value="newest">Newest</option>
|
|
|
|
</select>
|
|
|
|
</Col>
|
2021-12-16 03:04:38 +00:00
|
|
|
|
|
|
|
{[...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)
|
2022-02-09 04:52:09 +00:00
|
|
|
const { probPercent } = contractMetrics(contract)
|
2021-12-15 07:41:50 +00:00
|
|
|
return (
|
2021-12-16 21:22:00 +00:00
|
|
|
<div
|
|
|
|
tabIndex={0}
|
|
|
|
className={clsx(
|
2022-02-11 18:40:22 +00:00
|
|
|
'card card-body collapse collapse-arrow relative cursor-pointer bg-white p-6 shadow-xl',
|
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)}
|
|
|
|
>
|
2022-02-14 23:39:59 +00:00
|
|
|
<Row className="flex-wrap gap-2">
|
2021-12-16 21:22:00 +00:00
|
|
|
<Col className="flex-[2] gap-1">
|
2022-02-14 23:39:59 +00:00
|
|
|
<Row className="mr-2 max-w-lg">
|
2022-01-12 19:01:04 +00:00
|
|
|
<Link href={contractPath(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>
|
2021-12-18 23:40:39 +00:00
|
|
|
|
|
|
|
{/* Show carrot for collapsing. Hack the positioning. */}
|
|
|
|
<div
|
2022-02-11 18:40:22 +00:00
|
|
|
className="collapse-title absolute h-0 min-h-0 w-0 p-0"
|
2021-12-19 00:11:40 +00:00
|
|
|
style={{ top: -10, right: 4 }}
|
2021-12-18 23:40:39 +00:00
|
|
|
/>
|
|
|
|
</Row>
|
2021-12-16 09:03:41 +00:00
|
|
|
|
2022-02-11 18:40:22 +00:00
|
|
|
<Row className="items-center gap-2 text-sm text-gray-500">
|
2022-02-09 04:52:09 +00:00
|
|
|
{resolution ? (
|
|
|
|
<div>
|
|
|
|
Resolved <OutcomeLabel outcome={resolution} />
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div className="text-primary text-lg">{probPercent}</div>
|
|
|
|
)}
|
|
|
|
<div>•</div>
|
2022-01-13 21:16:47 +00:00
|
|
|
<UserLink
|
|
|
|
name={contract.creatorName}
|
|
|
|
username={contract.creatorUsername}
|
|
|
|
/>
|
2021-12-16 09:03:41 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-18 23:40:39 +00:00
|
|
|
<MyBetsSummary
|
2022-02-14 23:39:59 +00:00
|
|
|
className="mr-5 justify-end sm:mr-8"
|
2021-12-18 23:40:39 +00:00
|
|
|
contract={contract}
|
|
|
|
bets={bets}
|
2022-02-14 22:00:35 +00:00
|
|
|
onlyMKT
|
2021-12-18 23:40:39 +00:00
|
|
|
/>
|
2021-12-16 09:03:41 +00:00
|
|
|
</Row>
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2021-12-19 05:27:52 +00:00
|
|
|
<div
|
|
|
|
className="collapse-content !px-0"
|
|
|
|
style={{ backgroundColor: 'white' }}
|
|
|
|
>
|
2021-12-16 21:22:00 +00:00
|
|
|
<Spacer h={8} />
|
2021-12-15 22:57:40 +00:00
|
|
|
|
2022-02-14 22:00:35 +00:00
|
|
|
<MyBetsSummary
|
|
|
|
className="mr-5 flex-1 sm:mr-8"
|
|
|
|
contract={contract}
|
|
|
|
bets={bets}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Spacer h={8} />
|
|
|
|
|
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[]
|
2022-02-14 22:00:35 +00:00
|
|
|
onlyMKT?: boolean
|
2021-12-16 04:30:24 +00:00
|
|
|
className?: string
|
|
|
|
}) {
|
2022-02-14 22:00:35 +00:00
|
|
|
const { bets, contract, onlyMKT, className } = props
|
2021-12-16 04:30:24 +00:00
|
|
|
const { resolution } = contract
|
2022-02-14 02:20:46 +00:00
|
|
|
calculateCancelPayout
|
2021-12-16 04:30:24 +00:00
|
|
|
|
2021-12-24 21:06:01 +00:00
|
|
|
const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
|
|
|
|
const betsTotal = _.sumBy(excludeSales, (bet) => bet.amount)
|
2021-12-16 04:30:24 +00:00
|
|
|
|
|
|
|
const betsPayout = resolution
|
2022-01-02 06:27:58 +00:00
|
|
|
? _.sumBy(excludeSales, (bet) => resolvedPayout(contract, bet))
|
2021-12-16 04:30:24 +00:00
|
|
|
: 0
|
|
|
|
|
2021-12-24 21:06:01 +00:00
|
|
|
const yesWinnings = _.sumBy(excludeSales, (bet) =>
|
2021-12-16 04:30:24 +00:00
|
|
|
calculatePayout(contract, bet, 'YES')
|
|
|
|
)
|
2021-12-24 21:06:01 +00:00
|
|
|
const noWinnings = _.sumBy(excludeSales, (bet) =>
|
2021-12-16 04:30:24 +00:00
|
|
|
calculatePayout(contract, bet, 'NO')
|
|
|
|
)
|
|
|
|
|
2022-01-04 05:44:54 +00:00
|
|
|
const marketWinnings = _.sumBy(excludeSales, (bet) =>
|
|
|
|
calculatePayout(contract, bet, 'MKT')
|
|
|
|
)
|
|
|
|
|
2022-02-14 22:00:35 +00:00
|
|
|
const currentValue = resolution ? betsPayout : marketWinnings
|
|
|
|
const pnl = currentValue - betsTotal
|
2022-02-14 23:29:29 +00:00
|
|
|
const profit = (pnl / betsTotal) * 100
|
2022-02-14 22:00:35 +00:00
|
|
|
|
2022-02-14 23:29:29 +00:00
|
|
|
const valueCol = (
|
2022-02-14 22:00:35 +00:00
|
|
|
<Col>
|
2022-02-14 23:29:29 +00:00
|
|
|
<div className="whitespace-nowrap text-right text-lg">
|
|
|
|
{formatMoney(currentValue)}
|
2022-02-14 22:00:35 +00:00
|
|
|
</div>
|
2022-02-14 23:29:29 +00:00
|
|
|
<div className="text-right">
|
|
|
|
<ProfitBadge profitPercent={profit} />
|
2022-02-14 22:00:35 +00:00
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
|
|
|
|
const payoutCol = (
|
|
|
|
<Col>
|
|
|
|
<div className="text-sm text-gray-500">Payout</div>
|
|
|
|
<div className="whitespace-nowrap">
|
2022-02-14 23:29:29 +00:00
|
|
|
{formatMoney(betsPayout)} <ProfitBadge profitPercent={profit} />
|
2022-02-14 22:00:35 +00:00
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
|
2021-12-16 04:30:24 +00:00
|
|
|
return (
|
2022-01-04 05:44:54 +00:00
|
|
|
<Row
|
|
|
|
className={clsx(
|
|
|
|
'gap-4 sm:gap-6',
|
2022-02-14 22:00:35 +00:00
|
|
|
!onlyMKT && 'flex-wrap sm:flex-nowrap',
|
2022-01-04 05:44:54 +00:00
|
|
|
className
|
|
|
|
)}
|
|
|
|
>
|
2022-02-14 22:00:35 +00:00
|
|
|
{onlyMKT ? (
|
2022-02-14 23:29:29 +00:00
|
|
|
<Row className="gap-4 sm:gap-6">{valueCol}</Row>
|
2021-12-16 04:30:24 +00:00
|
|
|
) : (
|
2022-01-04 05:44:54 +00:00
|
|
|
<Row className="gap-4 sm:gap-6">
|
2021-12-16 04:30:24 +00:00
|
|
|
<Col>
|
2022-02-11 18:40:22 +00:00
|
|
|
<div className="whitespace-nowrap text-sm text-gray-500">
|
2022-02-14 22:00:35 +00:00
|
|
|
Invested
|
2021-12-16 04:30:24 +00:00
|
|
|
</div>
|
2022-02-14 22:00:35 +00:00
|
|
|
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
|
2021-12-16 04:30:24 +00:00
|
|
|
</Col>
|
2022-02-14 22:00:35 +00:00
|
|
|
{resolution ? (
|
|
|
|
payoutCol
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<Col>
|
|
|
|
<div className="whitespace-nowrap text-sm text-gray-500">
|
|
|
|
Payout if <YesLabel />
|
|
|
|
</div>
|
|
|
|
<div className="whitespace-nowrap">
|
|
|
|
{formatMoney(yesWinnings)}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<div className="whitespace-nowrap text-sm text-gray-500">
|
|
|
|
Payout if <NoLabel />
|
|
|
|
</div>
|
|
|
|
<div className="whitespace-nowrap">
|
|
|
|
{formatMoney(noWinnings)}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<div className="whitespace-nowrap text-sm text-gray-500">
|
|
|
|
Payout at{' '}
|
|
|
|
<span className="text-blue-400">
|
|
|
|
{formatPercent(getProbability(contract.totalShares))}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="whitespace-nowrap">
|
|
|
|
{formatMoney(marketWinnings)}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
</>
|
2022-01-04 05:44:54 +00:00
|
|
|
)}
|
|
|
|
</Row>
|
2021-12-16 04:30:24 +00:00
|
|
|
)}
|
|
|
|
</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-24 21:06:01 +00:00
|
|
|
const [sales, buys] = _.partition(bets, (bet) => bet.sale)
|
|
|
|
const salesDict = _.fromPairs(
|
|
|
|
sales.map((sale) => [sale.sale?.betId ?? '', sale])
|
|
|
|
)
|
|
|
|
|
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)}>
|
2022-02-11 18:40:22 +00:00
|
|
|
<table className="table-zebra table-compact table w-full text-gray-500">
|
2021-12-15 22:57:40 +00:00
|
|
|
<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>
|
2021-12-24 21:06:01 +00:00
|
|
|
<th>Amount</th>
|
2021-12-15 22:57:40 +00:00
|
|
|
<th>Probability</th>
|
2021-12-31 20:13:06 +00:00
|
|
|
<th>Shares</th>
|
2022-01-03 06:57:22 +00:00
|
|
|
<th>{isResolved ? <>Payout</> : <>Sale price</>}</th>
|
2021-12-24 21:06:01 +00:00
|
|
|
<th></th>
|
2021-12-15 22:57:40 +00:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2021-12-24 21:06:01 +00:00
|
|
|
{buys.map((bet) => (
|
|
|
|
<BetRow
|
|
|
|
key={bet.id}
|
|
|
|
bet={bet}
|
2022-01-15 22:51:09 +00:00
|
|
|
saleBet={salesDict[bet.id]}
|
2021-12-24 21:06:01 +00:00
|
|
|
contract={contract}
|
|
|
|
/>
|
2021-12-15 22:57:40 +00:00
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-01-15 22:51:09 +00:00
|
|
|
function BetRow(props: { bet: Bet; contract: Contract; saleBet?: Bet }) {
|
|
|
|
const { bet, saleBet, contract } = props
|
2021-12-24 21:06:01 +00:00
|
|
|
const {
|
|
|
|
amount,
|
|
|
|
outcome,
|
|
|
|
createdTime,
|
|
|
|
probBefore,
|
|
|
|
probAfter,
|
|
|
|
shares,
|
|
|
|
isSold,
|
2022-01-19 22:36:55 +00:00
|
|
|
isAnte,
|
2021-12-24 21:06:01 +00:00
|
|
|
} = bet
|
2022-01-19 22:36:55 +00:00
|
|
|
|
2022-01-10 16:32:20 +00:00
|
|
|
const { isResolved, closeTime } = contract
|
|
|
|
const isClosed = closeTime && Date.now() > closeTime
|
2021-12-15 07:41:50 +00:00
|
|
|
|
2022-01-19 22:36:55 +00:00
|
|
|
const saleAmount = saleBet?.sale?.amount
|
|
|
|
|
|
|
|
const saleDisplay = bet.isAnte ? (
|
|
|
|
'ANTE'
|
|
|
|
) : saleAmount !== undefined ? (
|
|
|
|
<>{formatMoney(saleAmount)} (sold)</>
|
|
|
|
) : (
|
|
|
|
formatMoney(
|
|
|
|
isResolved
|
|
|
|
? resolvedPayout(contract, bet)
|
|
|
|
: calculateSaleAmount(contract, bet)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
2021-12-15 07:41:50 +00:00
|
|
|
return (
|
2021-12-15 18:41:18 +00:00
|
|
|
<tr>
|
2021-12-24 21:06:01 +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-31 20:13:06 +00:00
|
|
|
<td>{formatWithCommas(shares)}</td>
|
2022-01-19 22:36:55 +00:00
|
|
|
<td>{saleDisplay}</td>
|
2021-12-24 21:06:01 +00:00
|
|
|
|
2022-01-19 22:36:55 +00:00
|
|
|
{!isResolved && !isClosed && !isSold && !isAnte && (
|
2022-01-03 18:56:02 +00:00
|
|
|
<td className="text-neutral">
|
|
|
|
<SellButton contract={contract} bet={bet} />
|
|
|
|
</td>
|
2021-12-24 21:06:01 +00:00
|
|
|
)}
|
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-24 21:06:01 +00:00
|
|
|
function SellButton(props: { contract: Contract; bet: Bet }) {
|
2022-01-05 18:23:58 +00:00
|
|
|
useEffect(() => {
|
|
|
|
// warm up cloud function
|
|
|
|
sellBet({}).catch()
|
|
|
|
}, [])
|
|
|
|
|
2021-12-24 21:06:01 +00:00
|
|
|
const { contract, bet } = props
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConfirmationButton
|
|
|
|
id={`sell-${bet.id}`}
|
|
|
|
openModelBtn={{
|
|
|
|
className: clsx('btn-sm', isSubmitting && 'btn-disabled loading'),
|
|
|
|
label: 'Sell',
|
|
|
|
}}
|
|
|
|
submitBtn={{ className: 'btn-primary' }}
|
|
|
|
onSubmit={async () => {
|
|
|
|
setIsSubmitting(true)
|
|
|
|
await sellBet({ contractId: contract.id, betId: bet.id })
|
|
|
|
setIsSubmitting(false)
|
|
|
|
}}
|
|
|
|
>
|
2022-02-11 18:40:22 +00:00
|
|
|
<div className="mb-4 text-2xl">
|
2022-01-03 06:57:22 +00:00
|
|
|
Sell <OutcomeLabel outcome={bet.outcome} />
|
|
|
|
</div>
|
2021-12-24 21:06:01 +00:00
|
|
|
<div>
|
2022-01-03 06:57:22 +00:00
|
|
|
Do you want to sell {formatWithCommas(bet.shares)} shares of{' '}
|
2021-12-24 21:06:01 +00:00
|
|
|
<OutcomeLabel outcome={bet.outcome} /> for{' '}
|
|
|
|
{formatMoney(calculateSaleAmount(contract, bet))}?
|
|
|
|
</div>
|
|
|
|
</ConfirmationButton>
|
|
|
|
)
|
|
|
|
}
|
2022-02-14 23:29:29 +00:00
|
|
|
|
|
|
|
function ProfitBadge(props: { profitPercent: number }) {
|
|
|
|
const { profitPercent } = props
|
|
|
|
if (!profitPercent) return null
|
|
|
|
const colors =
|
|
|
|
profitPercent > 0
|
|
|
|
? 'bg-green-100 text-green-800'
|
|
|
|
: 'bg-red-100 text-red-800'
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span
|
|
|
|
className={clsx(
|
|
|
|
'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
|
|
|
|
colors
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'}
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|