import { Bet } from 'common/bet' import { Contract, CPMMBinaryContract } from 'common/contract' import { DOMAIN } from 'common/envs/constants' import { AnswersGraph } from 'web/components/answers/answers-graph' import BetRow from 'web/components/bet-row' import { BinaryResolutionOrChance, FreeResponseResolutionOrChance, NumericResolutionOrExpectation, PseudoNumericResolutionOrExpectation, } from 'web/components/contract/contract-card' import { ContractDetails } from 'web/components/contract/contract-details' import { ContractProbGraph } from 'web/components/contract/contract-prob-graph' import { NumericGraph } from 'web/components/contract/numeric-graph' import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { Spacer } from 'web/components/layout/spacer' import { SiteLink } from 'web/components/site-link' import { useContractWithPreload } from 'web/hooks/use-contract' import { useMeasureSize } from 'web/hooks/use-measure-size' import { fromPropz, usePropz } from 'web/hooks/use-propz' import { useWindowSize } from 'web/hooks/use-window-size' import { listAllBets } from 'web/lib/firebase/bets' import { contractPath, getContractFromSlug, tradingAllowed, } from 'web/lib/firebase/contracts' import Custom404 from '../../404' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { params: { username: string; contractSlug: string } }) { const { username, contractSlug } = props.params const contract = (await getContractFromSlug(contractSlug)) || null const contractId = contract?.id const bets = contractId ? await listAllBets(contractId) : [] return { props: { contract, username, slug: contractSlug, bets, }, revalidate: 60, // regenerate after a minute } } export async function getStaticPaths() { return { paths: [], fallback: 'blocking' } } export default function ContractEmbedPage(props: { contract: Contract | null username: string bets: Bet[] slug: string }) { props = usePropz(props, getStaticPropz) ?? { contract: null, username: '', bets: [], slug: '', } const contract = useContractWithPreload(props.contract) const { bets } = props bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime) if (!contract) { return <Custom404 /> } return <ContractEmbed contract={contract} bets={bets} /> } export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) { const { contract, bets } = props const { question, outcomeType } = contract const isBinary = outcomeType === 'BINARY' const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' const href = `https://${DOMAIN}${contractPath(contract)}` const { height: windowHeight } = useWindowSize() const { setElem, height: topSectionHeight } = useMeasureSize() const paddingBottom = 8 const graphHeight = windowHeight && topSectionHeight ? windowHeight - topSectionHeight - paddingBottom : 0 return ( <Col className="w-full flex-1 bg-white"> <div className="relative flex flex-col pt-2" ref={setElem}> <div className="px-3 text-xl text-indigo-700 md:text-2xl"> <SiteLink href={href}>{question}</SiteLink> </div> <Spacer h={3} /> <Row className="items-center justify-between gap-4 px-2"> <ContractDetails contract={contract} bets={bets} isCreator={false} disabled /> {isBinary && ( <Row className="items-center gap-4"> {tradingAllowed(contract) && ( <BetRow contract={contract as CPMMBinaryContract} betPanelClassName="scale-75" /> )} <BinaryResolutionOrChance contract={contract} /> </Row> )} {isPseudoNumeric && ( <Row className="items-center gap-4"> {tradingAllowed(contract) && ( <BetRow contract={contract} betPanelClassName="scale-75" /> )} <PseudoNumericResolutionOrExpectation contract={contract} /> </Row> )} {outcomeType === 'FREE_RESPONSE' && ( <FreeResponseResolutionOrChance contract={contract} truncate="long" /> )} {outcomeType === 'NUMERIC' && ( <NumericResolutionOrExpectation contract={contract} /> )} </Row> <Spacer h={2} /> </div> <div className="mx-1" style={{ paddingBottom }}> {(isBinary || isPseudoNumeric) && ( <ContractProbGraph contract={contract} bets={bets} height={graphHeight} /> )} {outcomeType === 'FREE_RESPONSE' && ( <AnswersGraph contract={contract} bets={bets} height={graphHeight} /> )} {outcomeType === 'NUMERIC' && ( <NumericGraph contract={contract} height={graphHeight} /> )} </div> </Col> ) }