diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx index 3528a727..abee76f2 100644 --- a/web/components/contract-overview.tsx +++ b/web/components/contract-overview.tsx @@ -86,7 +86,7 @@ export const ContractOverview = (props: { <Spacer h={4} /> - <ContractProbGraph contract={contract} /> + <ContractProbGraph contract={contract} bets={bets} /> <Row className="hidden sm:flex justify-between items-center mt-6 ml-4 gap-4"> {folds.length === 0 ? ( diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx index fceffd97..13e6c48d 100644 --- a/web/components/contract-prob-graph.tsx +++ b/web/components/contract-prob-graph.tsx @@ -1,26 +1,26 @@ import { DatumValue } from '@nivo/core' import { ResponsiveLine } from '@nivo/line' import dayjs from 'dayjs' +import { Bet } from '../../common/bet' import { getProbability } from '../../common/calculate' -import { useBets } from '../hooks/use-bets' +import { useBetsWithoutAntes } from '../hooks/use-bets' import { useWindowSize } from '../hooks/use-window-size' -import { withoutAnteBets } from '../lib/firebase/bets' import { Contract } from '../lib/firebase/contracts' -export function ContractProbGraph(props: { contract: Contract }) { +export function ContractProbGraph(props: { contract: Contract; bets: Bet[] }) { const { contract } = props - const { id, phantomShares, resolutionTime, closeTime } = contract + const { phantomShares, resolutionTime, closeTime } = contract - let bets = useBets(id) ?? [] - bets = withoutAnteBets(contract, bets) + const bets = useBetsWithoutAntes(contract, props.bets) const startProb = getProbability(phantomShares) - const times = [ - contract.createdTime, - ...bets.map((bet) => bet.createdTime), - ].map((time) => new Date(time)) - const probs = [startProb, ...bets.map((bet) => bet.probAfter)] + const times = bets + ? [contract.createdTime, ...bets.map((bet) => bet.createdTime)].map( + (time) => new Date(time) + ) + : [] + const probs = bets ? [startProb, ...bets.map((bet) => bet.probAfter)] : [] const isClosed = !!closeTime && Date.now() > closeTime const latestTime = dayjs( diff --git a/web/hooks/use-bets.ts b/web/hooks/use-bets.ts index 6ab9eb21..4d892ff6 100644 --- a/web/hooks/use-bets.ts +++ b/web/hooks/use-bets.ts @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' -import { Bet, listenForBets } from '../lib/firebase/bets' +import { Contract } from '../../common/contract' +import { Bet, listenForBets, withoutAnteBets } from '../lib/firebase/bets' export const useBets = (contractId: string) => { const [bets, setBets] = useState<Bet[] | undefined>() @@ -10,3 +11,20 @@ export const useBets = (contractId: string) => { return bets } + +export const useBetsWithoutAntes = ( + contract: Contract, + initialBets?: Bet[] +) => { + const [bets, setBets] = useState<Bet[] | undefined>( + withoutAnteBets(contract, initialBets) + ) + + useEffect(() => { + return listenForBets(contract.id, (bets) => { + setBets(withoutAnteBets(contract, bets)) + }) + }, [contract]) + + return bets +}