import Link from 'next/link' import { keyBy, groupBy, mapValues, sortBy, partition, sumBy } from 'lodash' import dayjs from 'dayjs' import { useMemo, useState } from 'react' import clsx from 'clsx' import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid' import { Bet } from 'web/lib/firebase/bets' import { User } from 'web/lib/firebase/users' import { formatMoney, formatPercent, formatWithCommas, } from 'common/util/format' import { Col } from './layout/col' import { Spacer } from './layout/spacer' import { Contract, contractPath, getBinaryProbPercent, } from 'web/lib/firebase/contracts' import { Row } from './layout/row' import { sellBet } from 'web/lib/firebase/api' import { ConfirmationButton } from './confirmation-button' import { OutcomeLabel, YesLabel, NoLabel } from './outcome-label' import { LoadingIndicator } from './loading-indicator' import { SiteLink } from './site-link' import { calculatePayout, calculateSaleAmount, getOutcomeProbability, getProbabilityAfterSale, getContractBetMetrics, resolvedPayout, getContractBetNullMetrics, } from 'common/calculate' import { NumericContract } from 'common/contract' import { formatNumericProbability } from 'common/pseudo-numeric' import { useUser } from 'web/hooks/use-user' import { useUserBets } from 'web/hooks/use-user-bets' import { SellSharesModal } from './sell-modal' import { useUnfilledBets } from 'web/hooks/use-bets' import { LimitBet } from 'common/bet' import { floatingEqual } from 'common/util/math' import { Pagination } from './pagination' import { LimitOrderTable } from './limit-bets' import { UserLink } from 'web/components/user-link' import { useUserBetContracts } from 'web/hooks/use-contracts' type BetSort = 'newest' | 'profit' | 'closeTime' | 'value' type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all' const CONTRACTS_PER_PAGE = 50 const JUNE_1_2022 = new Date('2022-06-01T00:00:00.000Z').valueOf() export function BetsList(props: { user: User }) { const { user } = props const signedInUser = useUser() const isYourBets = user.id === signedInUser?.id const hideBetsBefore = isYourBets ? 0 : JUNE_1_2022 const userBets = useUserBets(user.id) // Hide bets before 06-01-2022 if this isn't your own profile // NOTE: This means public profits also begin on 06-01-2022 as well. const bets = useMemo( () => userBets?.filter( (bet) => !bet.isAnte && bet.createdTime >= (hideBetsBefore ?? 0) ), [userBets, hideBetsBefore] ) const contractList = useUserBetContracts(user.id) const contractsById = useMemo(() => { return contractList ? keyBy(contractList, 'id') : undefined }, [contractList]) const [sort, setSort] = useState<BetSort>('newest') const [filter, setFilter] = useState<BetFilter>('open') const [page, setPage] = useState(0) const start = page * CONTRACTS_PER_PAGE const end = start + CONTRACTS_PER_PAGE if (!bets || !contractsById) { return <LoadingIndicator /> } if (bets.length === 0) return <NoBets user={user} /> // Decending creation time. bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) const contractBets = groupBy(bets, 'contractId') // Keep only contracts that have bets. const contracts = Object.values(contractsById).filter( (c) => contractBets[c.id] ) const contractsMetrics = mapValues(contractBets, (bets, contractId) => { const contract = contractsById[contractId] if (!contract) return getContractBetNullMetrics() return getContractBetMetrics(contract, bets) }) const FILTERS: Record<BetFilter, (c: Contract) => boolean> = { resolved: (c) => !!c.resolutionTime, closed: (c) => !FILTERS.resolved(c) && (c.closeTime ?? Infinity) < Date.now(), open: (c) => !(FILTERS.closed(c) || FILTERS.resolved(c)), all: () => true, sold: () => true, limit_bet: (c) => FILTERS.open(c), } const SORTS: Record<BetSort, (c: Contract) => number> = { profit: (c) => contractsMetrics[c.id].profit, value: (c) => contractsMetrics[c.id].payout, newest: (c) => Math.max(...contractBets[c.id].map((bet) => bet.createdTime)), closeTime: (c) => // This is in fact the intuitive sort direction. (filter === 'open' ? -1 : 1) * (c.resolutionTime ?? c.closeTime ?? Infinity), } const filteredContracts = sortBy(contracts, SORTS[sort]) .reverse() .filter(FILTERS[filter]) .filter((c) => { if (filter === 'all') return true const { hasShares } = contractsMetrics[c.id] if (filter === 'sold') return !hasShares if (filter === 'limit_bet') return (contractBets[c.id] ?? []).some( (b) => b.limitProb !== undefined && !b.isCancelled && !b.isFilled ) return hasShares }) const displayedContracts = filteredContracts.slice(start, end) const unsettled = contracts.filter( (c) => !c.isResolved && contractsMetrics[c.id].invested !== 0 ) const currentInvested = sumBy( unsettled, (c) => contractsMetrics[c.id].invested ) const currentBetsValue = sumBy( unsettled, (c) => contractsMetrics[c.id].payout ) const currentNetInvestment = sumBy( unsettled, (c) => contractsMetrics[c.id].netPayout ) const totalPnl = user.profitCached.allTime const totalProfitPercent = (totalPnl / user.totalDeposits) * 100 const investedProfitPercent = ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100 return ( <Col> <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0"> <Row className="gap-8"> <Col> <div className="text-sm text-gray-500">Investment value</div> <div className="text-lg"> {formatMoney(currentNetInvestment)}{' '} <ProfitBadge profitPercent={investedProfitPercent} /> </div> </Col> <Col> <div className="text-sm text-gray-500">Total profit</div> <div className="text-lg"> {formatMoney(totalPnl)}{' '} <ProfitBadge profitPercent={totalProfitPercent} /> </div> </Col> </Row> <Row className="gap-8"> <select className="select select-bordered self-start" value={filter} onChange={(e) => setFilter(e.target.value as BetFilter)} > <option value="open">Open</option> <option value="limit_bet">Limit orders</option> <option value="sold">Sold</option> <option value="closed">Closed</option> <option value="resolved">Resolved</option> <option value="all">All</option> </select> <select className="select select-bordered self-start" value={sort} onChange={(e) => setSort(e.target.value as BetSort)} > <option value="newest">Recent</option> <option value="value">Value</option> <option value="profit">Profit</option> <option value="closeTime">Close date</option> </select> </Row> </Col> <Col className="mt-6 divide-y"> {displayedContracts.length === 0 ? ( <NoMatchingBets /> ) : ( <> {displayedContracts.map((contract) => ( <ContractBets key={contract.id} contract={contract} bets={contractBets[contract.id] ?? []} metric={sort === 'profit' ? 'profit' : 'value'} isYourBets={isYourBets} /> ))} <Pagination page={page} itemsPerPage={CONTRACTS_PER_PAGE} totalItems={filteredContracts.length} setPage={setPage} /> </> )} </Col> </Col> ) } const NoBets = ({ user }: { user: User }) => { const me = useUser() return ( <div className="mx-4 py-4 text-gray-500"> {user.id === me?.id ? ( <> You have not made any bets yet.{' '} <SiteLink href="/home" className="underline"> Find a prediction market! </SiteLink> </> ) : ( <>{user.name} has not made any public bets yet.</> )} </div> ) } const NoMatchingBets = () => ( <div className="mx-4 py-4 text-gray-500"> No bets matching the current filter. </div> ) function ContractBets(props: { contract: Contract bets: Bet[] metric: 'profit' | 'value' isYourBets: boolean }) { const { bets, contract, metric, isYourBets } = props const { resolution, outcomeType } = contract const limitBets = bets.filter( (bet) => bet.limitProb !== undefined && !bet.isCancelled && !bet.isFilled ) as LimitBet[] const resolutionValue = (contract as NumericContract).resolutionValue const [collapsed, setCollapsed] = useState(true) const isBinary = outcomeType === 'BINARY' const { payout, profit, profitPercent } = getContractBetMetrics( contract, bets ) return ( <div tabIndex={0} className="relative bg-white p-4 pr-6"> <Row className="cursor-pointer flex-wrap gap-2" onClick={() => setCollapsed((collapsed) => !collapsed)} > <Col className="flex-[2] gap-1"> <Row className="mr-2 max-w-lg"> <Link href={contractPath(contract)}> <a className="font-medium text-indigo-700 hover:underline hover:decoration-indigo-400 hover:decoration-2" onClick={(e) => e.stopPropagation()} > {contract.question} </a> </Link> {/* Show carrot for collapsing. Hack the positioning. */} {collapsed ? ( <ChevronDownIcon className="absolute top-5 right-4 h-6 w-6" /> ) : ( <ChevronUpIcon className="absolute top-5 right-4 h-6 w-6" /> )} </Row> <Row className="flex-1 items-center gap-2 text-sm text-gray-500"> {resolution ? ( <> <div> Resolved{' '} <OutcomeLabel outcome={resolution} value={resolutionValue} contract={contract} truncate="short" /> </div> <div>•</div> </> ) : isBinary ? ( <> <div className="text-primary text-lg"> {getBinaryProbPercent(contract)} </div> <div>•</div> </> ) : null} <UserLink name={contract.creatorName} username={contract.creatorUsername} /> </Row> </Col> <Col className="mr-5 sm:mr-8"> <div className="whitespace-nowrap text-right text-lg"> {formatMoney(metric === 'profit' ? profit : payout)} </div> <ProfitBadge className="text-right" profitPercent={profitPercent} /> </Col> </Row> {!collapsed && ( <div className="bg-white"> <BetsSummary className="mt-8 mr-5 flex-1 sm:mr-8" contract={contract} bets={bets} isYourBets={isYourBets} /> {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && ( <div className="max-w-md"> <div className="mt-4 bg-gray-50 px-4 py-2">Limit orders</div> <LimitOrderTable contract={contract} limitBets={limitBets} isYou={isYourBets} /> </div> )} <div className="mt-4 bg-gray-50 px-4 py-2">Bets</div> <ContractBetsTable contract={contract} bets={bets} isYourBets={isYourBets} /> </div> )} </div> ) } export function BetsSummary(props: { contract: Contract bets: Bet[] isYourBets: boolean className?: string }) { const { contract, isYourBets, className } = props const { resolution, closeTime, outcomeType, mechanism } = contract const isBinary = outcomeType === 'BINARY' const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' const isCpmm = mechanism === 'cpmm-1' const isClosed = closeTime && Date.now() > closeTime const bets = props.bets.filter((b) => !b.isAnte) const { hasShares, invested, profitPercent, payout, profit, totalShares } = getContractBetMetrics(contract, bets) const excludeSales = bets.filter((b) => !b.isSold && !b.sale) const yesWinnings = sumBy(excludeSales, (bet) => calculatePayout(contract, bet, 'YES') ) const noWinnings = sumBy(excludeSales, (bet) => calculatePayout(contract, bet, 'NO') ) const [showSellModal, setShowSellModal] = useState(false) const user = useUser() const sharesOutcome = floatingEqual(totalShares.YES ?? 0, 0) ? floatingEqual(totalShares.NO ?? 0, 0) ? undefined : 'NO' : 'YES' const canSell = isYourBets && isCpmm && (isBinary || isPseudoNumeric) && !isClosed && !resolution && hasShares && sharesOutcome && user return ( <Col className={clsx(className, 'gap-4')}> <Row className="flex-wrap gap-4 sm:flex-nowrap sm:gap-6"> <Col> <div className="whitespace-nowrap text-sm text-gray-500"> Invested </div> <div className="whitespace-nowrap">{formatMoney(invested)}</div> </Col> <Col> <div className="whitespace-nowrap text-sm text-gray-500">Profit</div> <div className="whitespace-nowrap"> {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} /> </div> </Col> {canSell && ( <> <button className="btn btn-sm self-end" onClick={() => setShowSellModal(true)} > Sell </button> {showSellModal && ( <SellSharesModal contract={contract} user={user} userBets={bets} shares={totalShares[sharesOutcome]} sharesOutcome={sharesOutcome} setOpen={setShowSellModal} /> )} </> )} </Row> <Row className="flex-wrap-none gap-4"> {resolution ? ( <Col> <div className="text-sm text-gray-500">Payout</div> <div className="whitespace-nowrap"> {formatMoney(payout)}{' '} <ProfitBadge profitPercent={profitPercent} /> </div> </Col> ) : isBinary ? ( <> <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"> Expected value </div> <div className="whitespace-nowrap">{formatMoney(payout)}</div> </Col> )} </Row> </Col> ) } export function ContractBetsTable(props: { contract: Contract bets: Bet[] isYourBets: boolean }) { const { contract, isYourBets } = props const bets = sortBy( props.bets.filter((b) => !b.isAnte && b.amount !== 0), (bet) => bet.createdTime ).reverse() const [sales, buys] = partition(bets, (bet) => bet.sale) const salesDict = Object.fromEntries( sales.map((sale) => [sale.sale?.betId ?? '', sale]) ) const [redemptions, normalBets] = partition( contract.mechanism === 'cpmm-1' ? bets : buys, (b) => b.isRedemption ) const amountRedeemed = Math.floor(-0.5 * sumBy(redemptions, (b) => b.shares)) const amountLoaned = sumBy( bets.filter((bet) => !bet.isSold && !bet.sale), (bet) => bet.loanAmount ?? 0 ) const { isResolved, mechanism, outcomeType } = contract const isCPMM = mechanism === 'cpmm-1' const isNumeric = outcomeType === 'NUMERIC' const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' const unfilledBets = useUnfilledBets(contract.id) ?? [] return ( <div className="overflow-x-auto"> {amountRedeemed > 0 && ( <> <div className="pl-2 text-sm text-gray-500"> {amountRedeemed} {isPseudoNumeric ? 'HIGHER' : 'YES'} shares and{' '} {amountRedeemed} {isPseudoNumeric ? 'LOWER' : 'NO'} shares automatically redeemed for {formatMoney(amountRedeemed)}. </div> <Spacer h={4} /> </> )} {!isResolved && amountLoaned > 0 && ( <> <div className="pl-2 text-sm text-gray-500"> You currently have a loan of {formatMoney(amountLoaned)}. </div> <Spacer h={4} /> </> )} <table className="table-zebra table-compact table w-full text-gray-500"> <thead> <tr className="p-2"> <th></th> {isCPMM && <th>Type</th>} <th>Outcome</th> <th>Amount</th> {!isCPMM && !isNumeric && ( <th>{isResolved ? <>Payout</> : <>Sale price</>}</th> )} {!isCPMM && !isResolved && <th>Payout if chosen</th>} <th>Shares</th> {!isPseudoNumeric && <th>Probability</th>} <th>Date</th> </tr> </thead> <tbody> {normalBets.map((bet) => ( <BetRow key={bet.id} bet={bet} saleBet={salesDict[bet.id]} contract={contract} isYourBet={isYourBets} unfilledBets={unfilledBets} /> ))} </tbody> </table> </div> ) } function BetRow(props: { bet: Bet contract: Contract saleBet?: Bet isYourBet: boolean unfilledBets: LimitBet[] }) { const { bet, saleBet, contract, isYourBet, unfilledBets } = props const { amount, outcome, createdTime, probBefore, probAfter, shares, isSold, isAnte, } = bet const { isResolved, closeTime, mechanism, outcomeType } = contract const isClosed = closeTime && Date.now() > closeTime const isCPMM = mechanism === 'cpmm-1' const isNumeric = outcomeType === 'NUMERIC' const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' const saleAmount = saleBet?.sale?.amount const saleDisplay = isAnte ? ( 'ANTE' ) : saleAmount !== undefined ? ( <>{formatMoney(saleAmount)} (sold)</> ) : ( formatMoney( isResolved ? resolvedPayout(contract, bet) : calculateSaleAmount(contract, bet, unfilledBets) ) ) const payoutIfChosenDisplay = bet.isAnte && outcomeType === 'FREE_RESPONSE' && bet.outcome === '0' ? 'N/A' : formatMoney(calculatePayout(contract, bet, bet.outcome)) const hadPoolMatch = (bet.limitProb === undefined || bet.fills?.some((fill) => fill.matchedBetId === null)) ?? false const ofTotalAmount = bet.limitProb === undefined || bet.orderAmount === undefined ? '' : ` / ${formatMoney(bet.orderAmount)}` return ( <tr> <td className="text-neutral"> {isYourBet && !isCPMM && !isResolved && !isClosed && !isSold && !isAnte && !isNumeric && ( <SellButton contract={contract} bet={bet} unfilledBets={unfilledBets} /> )} </td> {isCPMM && <td>{shares >= 0 ? 'BUY' : 'SELL'}</td>} <td> {bet.isAnte ? ( 'ANTE' ) : ( <OutcomeLabel outcome={outcome} value={(bet as any).value} contract={contract} truncate="short" /> )} {isPseudoNumeric && ' than ' + formatNumericProbability(bet.probAfter, contract)} </td> <td> {formatMoney(Math.abs(amount))} {ofTotalAmount} </td> {!isCPMM && !isNumeric && <td>{saleDisplay}</td>} {!isCPMM && !isResolved && <td>{payoutIfChosenDisplay}</td>} <td>{formatWithCommas(Math.abs(shares))}</td> {!isPseudoNumeric && ( <td> {outcomeType === 'FREE_RESPONSE' || hadPoolMatch ? ( <> {formatPercent(probBefore)} → {formatPercent(probAfter)} </> ) : ( formatPercent(bet.limitProb ?? 0) )} </td> )} <td>{dayjs(createdTime).format('MMM D, h:mma')}</td> </tr> ) } function SellButton(props: { contract: Contract bet: Bet unfilledBets: LimitBet[] }) { const { contract, bet, unfilledBets } = props const { outcome, shares, loanAmount } = bet const [isSubmitting, setIsSubmitting] = useState(false) const initialProb = getOutcomeProbability( contract, outcome === 'NO' ? 'YES' : outcome ) const outcomeProb = getProbabilityAfterSale( contract, outcome, shares, unfilledBets ) const saleAmount = calculateSaleAmount(contract, bet, unfilledBets) const profit = saleAmount - bet.amount return ( <ConfirmationButton openModalBtn={{ className: clsx('btn-sm', isSubmitting && 'btn-disabled loading'), label: 'Sell', }} submitBtn={{ className: 'btn-primary', label: 'Sell' }} onSubmit={async () => { setIsSubmitting(true) await sellBet({ contractId: contract.id, betId: bet.id }) setIsSubmitting(false) }} > <div className="mb-4 text-xl"> Sell {formatWithCommas(shares)} shares of{' '} <OutcomeLabel outcome={outcome} contract={contract} truncate="long" />{' '} for {formatMoney(saleAmount)}? </div> {!!loanAmount && ( <div className="mt-2"> You will also pay back {formatMoney(loanAmount)} of your loan, for a net of {formatMoney(saleAmount - loanAmount)}. </div> )} <div className="mt-2 mb-1 text-sm"> {profit > 0 ? 'Profit' : 'Loss'}: {formatMoney(profit).replace('-', '')} <br /> Market probability: {formatPercent(initialProb)} →{' '} {formatPercent(outcomeProb)} </div> </ConfirmationButton> ) } export function ProfitBadge(props: { profitPercent: number round?: boolean className?: string }) { const { profitPercent, round, className } = 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, className )} > {(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(round ? 0 : 1) + '%'} </span> ) }