import Link from 'next/link' import _ from 'lodash' import dayjs from 'dayjs' import { useEffect, useState } from 'react' import clsx from 'clsx' import { useUserBets } from '../hooks/use-user-bets' import { Bet } from '../lib/firebase/bets' import { User } from '../lib/firebase/users' import { formatMoney, formatPercent, formatWithCommas, } from '../lib/util/format' import { Col } from './layout/col' import { Spacer } from './layout/spacer' import { Contract, getContractFromId, path } from '../lib/firebase/contracts' import { Row } from './layout/row' import { UserLink } from './user-page' import { calculatePayout, calculateSaleAmount, resolvedPayout, } from '../lib/calculate' import { sellBet } from '../lib/firebase/api-call' import { ConfirmationButton } from './confirmation-button' import { OutcomeLabel, YesLabel, NoLabel, MarketLabel } from './outcome-label' export function BetsList(props: { user: User }) { const { user } = props const bets = useUserBets(user?.id ?? '') const [contracts, setContracts] = useState<Contract[]>([]) useEffect(() => { const loadedBets = bets === 'loading' ? [] : bets const contractIds = _.uniq(loadedBets.map((bet) => bet.contractId)) let disposed = false Promise.all(contractIds.map((id) => getContractFromId(id))).then( (contracts) => { if (!disposed) setContracts(contracts.filter(Boolean) as Contract[]) } ) return () => { disposed = true } }, [bets]) if (bets === 'loading') { return <></> } if (bets.length === 0) 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> ) // Decending creation time. bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) const contractBets = _.groupBy(bets, 'contractId') const [resolved, unresolved] = _.partition( contracts, (contract) => contract.isResolved ) const currentBets = _.sumBy(unresolved, (contract) => _.sumBy(contractBets[contract.id], (bet) => { if (bet.isSold || bet.sale) return 0 return bet.amount }) ) const currentBetsValue = _.sumBy(unresolved, (contract) => _.sumBy(contractBets[contract.id], (bet) => { if (bet.isSold || bet.sale) return 0 return calculatePayout(contract, bet, 'MKT') }) ) return ( <Col className="mt-6 gap-6"> <Row className="gap-8"> <Col> <div className="text-sm text-gray-500">Currently invested</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) => ( <MyContractBets key={contract.id} contract={contract} bets={contractBets[contract.id] ?? []} /> ))} </Col> ) } function MyContractBets(props: { contract: Contract; bets: Bet[] }) { const { bets, contract } = props const { resolution } = contract const [collapsed, setCollapsed] = useState(true) return ( <div tabIndex={0} className={clsx( 'p-6 bg-white card card-body shadow-xl collapse collapse-arrow cursor-pointer relative', collapsed ? 'collapse-close' : 'collapse-open pb-2' )} onClick={() => setCollapsed((collapsed) => !collapsed)} > <Row className="flex-wrap gap-4"> <Col className="flex-[2] gap-1"> <Row className="mr-6"> <Link href={path(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. */} <div className="collapse-title p-0 absolute w-0 h-0 min-h-0" style={{ top: -10, right: 4 }} /> </Row> <Row className="gap-2 text-gray-500 text-sm"> <div> <UserLink username={contract.creatorUsername} /> </div> {resolution && ( <> <div>•</div> <div className="whitespace-nowrap"> Resolved <OutcomeLabel outcome={resolution} /> </div> </> )} </Row> </Col> <MyBetsSummary className="flex-1 justify-end mr-5 sm:mr-8" contract={contract} bets={bets} /> </Row> <div className="collapse-content !px-0" style={{ backgroundColor: 'white' }} > <Spacer h={8} /> <ContractBetsTable contract={contract} bets={bets} /> </div> </div> ) } export function MyBetsSummary(props: { contract: Contract bets: Bet[] showMKT?: boolean className?: string }) { const { bets, contract, showMKT, className } = props const { resolution } = contract const excludeSales = bets.filter((b) => !b.isSold && !b.sale) const betsTotal = _.sumBy(excludeSales, (bet) => bet.amount) const betsPayout = resolution ? _.sumBy(excludeSales, (bet) => resolvedPayout(contract, bet)) : 0 const yesWinnings = _.sumBy(excludeSales, (bet) => calculatePayout(contract, bet, 'YES') ) const noWinnings = _.sumBy(excludeSales, (bet) => calculatePayout(contract, bet, 'NO') ) const marketWinnings = _.sumBy(excludeSales, (bet) => calculatePayout(contract, bet, 'MKT') ) return ( <Row className={clsx( 'gap-4 sm:gap-6', showMKT && 'flex-wrap sm:flex-nowrap', className )} > <Col> <div className="text-sm text-gray-500 whitespace-nowrap">Invested</div> <div className="whitespace-nowrap">{formatMoney(betsTotal)}</div> </Col> {resolution ? ( <Col> <div className="text-sm text-gray-500">Payout</div> <div className="whitespace-nowrap">{formatMoney(betsPayout)}</div> </Col> ) : ( <Row className="gap-4 sm:gap-6"> <Col> <div className="text-sm text-gray-500 whitespace-nowrap"> Payout if <YesLabel /> </div> <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div> </Col> <Col> <div className="text-sm text-gray-500 whitespace-nowrap"> Payout if <NoLabel /> </div> <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div> </Col> {showMKT && ( <Col> <div className="text-sm text-gray-500 whitespace-nowrap"> Payout if <MarketLabel /> </div> <div className="whitespace-nowrap"> {formatMoney(marketWinnings)} </div> </Col> )} </Row> )} </Row> ) } export function ContractBetsTable(props: { contract: Contract bets: Bet[] className?: string }) { const { contract, bets, className } = props const [sales, buys] = _.partition(bets, (bet) => bet.sale) const salesDict = _.fromPairs( sales.map((sale) => [sale.sale?.betId ?? '', sale]) ) const { isResolved } = contract return ( <div className={clsx('overflow-x-auto', className)}> <table className="table table-zebra table-compact text-gray-500 w-full"> <thead> <tr className="p-2"> <th>Date</th> <th>Outcome</th> <th>Amount</th> <th>Probability</th> <th>Shares</th> <th>{isResolved ? <>Payout</> : <>Sale price</>}</th> <th></th> </tr> </thead> <tbody> {buys.map((bet) => ( <BetRow key={bet.id} bet={bet} sale={salesDict[bet.id]} contract={contract} /> ))} </tbody> </table> </div> ) } function BetRow(props: { bet: Bet; contract: Contract; sale?: Bet }) { const { bet, sale, contract } = props const { amount, outcome, createdTime, probBefore, probAfter, shares, isSold, } = bet const { isResolved } = contract return ( <tr> <td>{dayjs(createdTime).format('MMM D, h:mma')}</td> <td> <OutcomeLabel outcome={outcome} /> </td> <td>{formatMoney(amount)}</td> <td> {formatPercent(probBefore)} → {formatPercent(probAfter)} </td> <td>{formatWithCommas(shares)}</td> <td> {sale ? ( <>{formatMoney(Math.abs(sale.amount))} (sold)</> ) : ( formatMoney( isResolved ? resolvedPayout(contract, bet) : calculateSaleAmount(contract, bet) ) )} </td> {!isResolved && !isSold && ( <td className="text-neutral"> <SellButton contract={contract} bet={bet} /> </td> )} </tr> ) } function SellButton(props: { contract: Contract; bet: Bet }) { useEffect(() => { // warm up cloud function sellBet({}).catch() }, []) 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) }} > <div className="text-2xl mb-4"> Sell <OutcomeLabel outcome={bet.outcome} /> </div> <div> Do you want to sell {formatWithCommas(bet.shares)} shares of{' '} <OutcomeLabel outcome={bet.outcome} /> for{' '} {formatMoney(calculateSaleAmount(contract, bet))}? </div> </ConfirmationButton> ) }