2022-05-09 13:04:36 +00:00
|
|
|
import { Bet } from 'common/bet'
|
2022-07-10 18:05:44 +00:00
|
|
|
import { Contract, CPMMBinaryContract } from 'common/contract'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { DOMAIN } from 'common/envs/constants'
|
|
|
|
import { AnswersGraph } from 'web/components/answers/answers-graph'
|
2022-05-17 17:31:19 +00:00
|
|
|
import BetRow from 'web/components/bet-row'
|
2022-03-20 21:05:16 +00:00
|
|
|
import {
|
2022-04-18 23:02:40 +00:00
|
|
|
BinaryResolutionOrChance,
|
2022-04-19 02:44:31 +00:00
|
|
|
FreeResponseResolutionOrChance,
|
2022-05-19 17:42:03 +00:00
|
|
|
NumericResolutionOrExpectation,
|
2022-07-02 19:37:59 +00:00
|
|
|
PseudoNumericResolutionOrExpectation,
|
2022-05-09 13:04:36 +00:00
|
|
|
} from 'web/components/contract/contract-card'
|
|
|
|
import { ContractDetails } from 'web/components/contract/contract-details'
|
|
|
|
import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
|
2022-05-23 03:03:05 +00:00
|
|
|
import { NumericGraph } from 'web/components/contract/numeric-graph'
|
2022-05-09 13:04:36 +00:00
|
|
|
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 } from 'web/lib/firebase/contracts'
|
2022-03-20 17:45:17 +00:00
|
|
|
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
|
|
|
|
|
2022-03-20 21:05:16 +00:00
|
|
|
const bets = contractId ? await listAllBets(contractId) : []
|
2022-03-20 17:45:17 +00:00
|
|
|
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
contract,
|
|
|
|
username,
|
|
|
|
slug: contractSlug,
|
|
|
|
bets,
|
|
|
|
},
|
|
|
|
|
|
|
|
revalidate: 60, // regenerate after a minute
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export async function getStaticPaths() {
|
|
|
|
return { paths: [], fallback: 'blocking' }
|
|
|
|
}
|
|
|
|
|
2022-03-20 21:05:16 +00:00
|
|
|
export default function ContractEmbedPage(props: {
|
2022-03-20 17:45:17 +00:00
|
|
|
contract: Contract | null
|
|
|
|
username: string
|
|
|
|
bets: Bet[]
|
|
|
|
slug: string
|
|
|
|
}) {
|
|
|
|
props = usePropz(props, getStaticPropz) ?? {
|
|
|
|
contract: null,
|
|
|
|
username: '',
|
|
|
|
bets: [],
|
|
|
|
slug: '',
|
|
|
|
}
|
|
|
|
|
2022-04-06 17:32:57 +00:00
|
|
|
const contract = useContractWithPreload(props.contract)
|
2022-03-20 21:05:16 +00:00
|
|
|
const { bets } = props
|
2022-03-20 17:45:17 +00:00
|
|
|
|
|
|
|
bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
|
|
|
|
|
|
|
|
if (!contract) {
|
|
|
|
return <Custom404 />
|
|
|
|
}
|
|
|
|
|
2022-03-20 21:05:16 +00:00
|
|
|
return <ContractEmbed contract={contract} bets={bets} />
|
|
|
|
}
|
|
|
|
|
|
|
|
function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
|
|
|
|
const { contract, bets } = props
|
2022-06-10 17:23:27 +00:00
|
|
|
const { question, outcomeType } = contract
|
2022-03-20 21:05:16 +00:00
|
|
|
|
|
|
|
const isBinary = outcomeType === 'BINARY'
|
2022-07-02 19:37:59 +00:00
|
|
|
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-03-20 23:12:33 +00:00
|
|
|
const href = `https://${DOMAIN}${contractPath(contract)}`
|
|
|
|
|
2022-03-24 17:03:08 +00:00
|
|
|
const { height: windowHeight } = useWindowSize()
|
|
|
|
const { setElem, height: topSectionHeight } = useMeasureSize()
|
|
|
|
const paddingBottom = 8
|
|
|
|
|
|
|
|
const graphHeight =
|
|
|
|
windowHeight && topSectionHeight
|
|
|
|
? windowHeight - topSectionHeight - paddingBottom
|
|
|
|
: 0
|
|
|
|
|
2022-03-20 17:45:17 +00:00
|
|
|
return (
|
2022-03-24 17:03:08 +00:00
|
|
|
<Col className="w-full flex-1 bg-white">
|
2022-04-06 17:32:57 +00:00
|
|
|
<div className="relative flex flex-col pt-2" ref={setElem}>
|
|
|
|
<div className="px-3 text-xl text-indigo-700 md:text-2xl">
|
2022-05-17 17:31:19 +00:00
|
|
|
<SiteLink href={href}>{question}</SiteLink>
|
2022-03-20 23:17:37 +00:00
|
|
|
</div>
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-03-20 23:17:37 +00:00
|
|
|
<Spacer h={3} />
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-03-20 23:17:37 +00:00
|
|
|
<Row className="items-center justify-between gap-4 px-2">
|
2022-03-21 20:23:21 +00:00
|
|
|
<ContractDetails
|
|
|
|
contract={contract}
|
2022-04-13 19:11:49 +00:00
|
|
|
bets={bets}
|
2022-03-21 20:23:21 +00:00
|
|
|
isCreator={false}
|
2022-05-17 17:31:19 +00:00
|
|
|
disabled
|
2022-03-21 20:23:21 +00:00
|
|
|
/>
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-05-17 17:31:19 +00:00
|
|
|
{isBinary && (
|
|
|
|
<Row className="items-center gap-4">
|
2022-07-10 18:05:44 +00:00
|
|
|
<BetRow
|
|
|
|
contract={contract as CPMMBinaryContract}
|
|
|
|
betPanelClassName="scale-75"
|
|
|
|
/>
|
2022-05-17 17:31:19 +00:00
|
|
|
<BinaryResolutionOrChance contract={contract} />
|
|
|
|
</Row>
|
|
|
|
)}
|
2022-04-18 23:02:40 +00:00
|
|
|
|
2022-07-02 19:37:59 +00:00
|
|
|
{isPseudoNumeric && (
|
|
|
|
<Row className="items-center gap-4">
|
|
|
|
<BetRow contract={contract} betPanelClassName="scale-75" />
|
|
|
|
<PseudoNumericResolutionOrExpectation contract={contract} />
|
|
|
|
</Row>
|
|
|
|
)}
|
|
|
|
|
2022-05-23 03:03:05 +00:00
|
|
|
{outcomeType === 'FREE_RESPONSE' && (
|
2022-04-19 02:44:31 +00:00
|
|
|
<FreeResponseResolutionOrChance
|
2022-04-18 23:02:40 +00:00
|
|
|
contract={contract}
|
|
|
|
truncate="long"
|
|
|
|
/>
|
2022-03-20 23:17:37 +00:00
|
|
|
)}
|
2022-05-19 17:42:03 +00:00
|
|
|
|
2022-05-23 03:03:05 +00:00
|
|
|
{outcomeType === 'NUMERIC' && (
|
2022-06-01 02:42:35 +00:00
|
|
|
<NumericResolutionOrExpectation contract={contract} />
|
2022-05-19 17:42:03 +00:00
|
|
|
)}
|
2022-03-20 23:17:37 +00:00
|
|
|
</Row>
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-03-20 23:17:37 +00:00
|
|
|
<Spacer h={2} />
|
2022-03-24 17:03:08 +00:00
|
|
|
</div>
|
2022-03-20 21:05:16 +00:00
|
|
|
|
2022-03-24 17:03:08 +00:00
|
|
|
<div className="mx-1" style={{ paddingBottom }}>
|
2022-07-02 19:37:59 +00:00
|
|
|
{(isBinary || isPseudoNumeric) && (
|
2022-03-24 17:03:08 +00:00
|
|
|
<ContractProbGraph
|
|
|
|
contract={contract}
|
|
|
|
bets={bets}
|
|
|
|
height={graphHeight}
|
|
|
|
/>
|
2022-05-23 03:03:05 +00:00
|
|
|
)}
|
|
|
|
|
|
|
|
{outcomeType === 'FREE_RESPONSE' && (
|
2022-06-01 02:42:35 +00:00
|
|
|
<AnswersGraph contract={contract} bets={bets} height={graphHeight} />
|
2022-03-20 17:45:17 +00:00
|
|
|
)}
|
2022-05-23 03:03:05 +00:00
|
|
|
|
|
|
|
{outcomeType === 'NUMERIC' && (
|
2022-06-01 02:42:35 +00:00
|
|
|
<NumericGraph contract={contract} height={graphHeight} />
|
2022-05-23 03:03:05 +00:00
|
|
|
)}
|
2022-03-20 21:05:16 +00:00
|
|
|
</div>
|
2022-03-20 17:45:17 +00:00
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|