import React from 'react' import { useContractWithPreload } from '../../hooks/use-contract' import { ContractOverview } from '../../components/contract-overview' import { BetPanel } from '../../components/bet-panel' import { Col } from '../../components/layout/col' import { useUser } from '../../hooks/use-user' import { ResolutionPanel } from '../../components/resolution-panel' import { ContractBetsTable, MyBetsSummary } from '../../components/bets-list' import { useBets } from '../../hooks/use-bets' import { Title } from '../../components/title' import { Spacer } from '../../components/layout/spacer' import { User } from '../../lib/firebase/users' import { contractMetrics, Contract, getContractFromSlug, tradingAllowed, } from '../../lib/firebase/contracts' import { SEO } from '../../components/SEO' import { Page } from '../../components/page' import { contractTextDetails } from '../../components/contract-card' import { Bet, listAllBets } from '../../lib/firebase/bets' import { Comment, listAllComments } from '../../lib/firebase/comments' import Custom404 from '../404' import { getFoldsByTags } from '../../lib/firebase/folds' import { Fold } from '../../../common/fold' export async function getStaticProps(props: { params: { username: string; contractSlug: string } }) { const { username, contractSlug } = props.params const contract = (await getContractFromSlug(contractSlug)) || null const contractId = contract?.id const foldsPromise = getFoldsByTags(contract?.tags ?? []) const [bets, comments] = await Promise.all([ contractId ? listAllBets(contractId) : [], contractId ? listAllComments(contractId) : [], ]) const folds = await foldsPromise return { props: { contract, username, slug: contractSlug, bets, comments, folds, }, revalidate: 60, // regenerate after a minute } } export async function getStaticPaths() { return { paths: [], fallback: 'blocking' } } export default function ContractPage(props: { contract: Contract | null username: string bets: Bet[] comments: Comment[] slug: string folds: Fold[] }) { const user = useUser() const contract = useContractWithPreload(props.slug, props.contract) const { bets, comments, folds } = props if (!contract) { return } const { creatorId, isResolved, resolution, question } = contract const isCreator = user?.id === creatorId const allowTrade = tradingAllowed(contract) const allowResolve = !isResolved && isCreator && !!user const { probPercent } = contractMetrics(contract) const description = resolution ? `Resolved ${resolution}. ${contract.description}` : `${probPercent} chance. ${contract.description}` const ogCardProps = { question, probability: probPercent, metadata: contractTextDetails(contract), creatorName: contract.creatorName, creatorUsername: contract.creatorUsername, } return (
{(allowTrade || allowResolve) && ( <>
{allowTrade && ( )} {allowResolve && ( )} )} ) } function BetsSection(props: { contract: Contract; user: User | null }) { const { contract, user } = props const bets = useBets(contract.id) if (!bets || bets.length === 0) return <> // Decending creation time. bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) const userBets = user && bets.filter((bet) => bet.userId === user.id) if (!userBets || userBets.length === 0) return <> return (
<MyBetsSummary className="px-2" contract={contract} bets={userBets} showMKT /> <Spacer h={6} /> <ContractBetsTable contract={contract} bets={userBets} /> <Spacer h={12} /> </div> ) }