Render graph with bets from static props immediately

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 ? (

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(

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
+}