Refactor to load bets once on market page

web/components/answers/answers-graph.tsx

@@ -7,7 +7,6 @@ import { memo } from 'react'
 import { Bet } from 'common/bet'
 import { FreeResponseContract } from 'common/contract'
 import { getOutcomeProbability } from 'common/calculate'
-import { useBets } from 'web/hooks/use-bets'
 import { useWindowSize } from 'web/hooks/use-window-size'
 
 const NUM_LINES = 6
@@ -17,11 +16,9 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
   bets: Bet[]
   height?: number
 }) {
-  const { contract, height } = props
+  const { contract, bets, height } = props
   const { createdTime, resolutionTime, closeTime, answers } = contract
 
-  const bets = useBets(contract.id) ?? props.bets
-
   const { probsByOutcome, sortedOutcomes } = computeProbsByOutcome(
     bets,
     contract

web/components/contract/contract-info-dialog.tsx

@@ -30,7 +30,10 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
   const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
 
   const { createdTime, closeTime, resolutionTime } = contract
-  const tradersCount = uniqBy(bets, 'userId').length
+  const tradersCount = uniqBy(
+    bets.filter((bet) => !bet.isAnte),
+    'userId'
+  ).length
 
   return (
     <>

web/components/contract/contract-prob-graph.tsx

@@ -5,7 +5,6 @@ import { memo } from 'react'
 import { Bet } from 'common/bet'
 import { getInitialProbability } from 'common/calculate'
 import { BinaryContract } from 'common/contract'
-import { useBetsWithoutAntes } from 'web/hooks/use-bets'
 import { useWindowSize } from 'web/hooks/use-window-size'
 
 export const ContractProbGraph = memo(function ContractProbGraph(props: {
@@ -16,9 +15,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
   const { contract, height } = props
   const { resolutionTime, closeTime } = contract
 
-  const bets = useBetsWithoutAntes(contract, props.bets).filter(
-    (b) => !b.isRedemption
-  )
+  const bets = props.bets.filter((bet) => !bet.isAnte && !bet.isRedemption)
 
   const startProb = getInitialProbability(contract)
 

web/components/contract/contract-tabs.tsx

@@ -2,7 +2,6 @@ import { Bet } from 'common/bet'
 import { Contract } from 'common/contract'
 import { Comment } from 'web/lib/firebase/comments'
 import { User } from 'common/user'
-import { useBets } from 'web/hooks/use-bets'
 import { ContractActivity } from '../feed/contract-activity'
 import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
@@ -15,12 +14,9 @@ export function ContractTabs(props: {
   bets: Bet[]
   comments: Comment[]
 }) {
-  const { contract, user, comments } = props
+  const { contract, user, bets, comments } = props
   const { outcomeType } = contract
 
-  const bets = useBets(contract.id) ?? props.bets
-  // Decending creation time.
-  bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime)
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
 
   const betActivity = (

web/pages/[username]/[contractSlug].tsx

@@ -38,6 +38,7 @@ import { FeedComment } from 'web/components/feed/feed-comments'
 import { FeedBet } from 'web/components/feed/feed-bets'
 import { useIsIframe } from 'web/hooks/use-is-iframe'
 import ContractEmbedPage from '../embed/[username]/[contractSlug]'
+import { useBets } from 'web/hooks/use-bets'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -84,42 +85,44 @@ export default function ContractPage(props: {
     bets: [],
     slug: '',
   }
-  return <ContractPageContent {...props} />
-}
-
-export function ContractPageContent(props: Parameters<typeof ContractPage>[0]) {
-  const { backToHome } = props
-
-  const user = useUser()
-  const { width, height } = useWindowSize()
 
   const contract = useContractWithPreload(props.contract)
-  const { bets, comments } = props
-  const [showConfetti, setShowConfetti] = useState(false)
-
-  useEffect(() => {
-    const shouldSeeConfetti = !!(
-      user &&
-      contract &&
-      contract.creatorId === user.id &&
-      Date.now() - contract.createdTime < 10 * 1000
-    )
-    setShowConfetti(shouldSeeConfetti)
-  }, [contract, user])
 
   const inIframe = useIsIframe()
   if (inIframe) {
     return <ContractEmbedPage {...props} />
   }
 
-  // Sort for now to see if bug is fixed.
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-
   if (!contract) {
     return <Custom404 />
   }
 
+  return <ContractPageContent {...{ ...props, contract }} />
+}
+
+export function ContractPageContent(
+  props: Parameters<typeof ContractPage>[0] & { contract: Contract }
+) {
+  const { contract, backToHome, comments } = props
+
+  const bets = useBets(contract.id) ?? props.bets
+  // Sort for now to see if bug is fixed.
+  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+
+  const user = useUser()
+  const { width, height } = useWindowSize()
+
+  const [showConfetti, setShowConfetti] = useState(false)
+
+  useEffect(() => {
+    const shouldSeeConfetti = !!(
+      user &&
+      contract.creatorId === user.id &&
+      Date.now() - contract.createdTime < 10 * 1000
+    )
+    setShowConfetti(shouldSeeConfetti)
+  }, [contract, user])
+
   const { creatorId, isResolved, question, outcomeType } = contract
 
   const isCreator = user?.id === creatorId
@@ -181,7 +184,7 @@ export function ContractPageContent(props: Parameters<typeof ContractPage>[0]) {
 
         <ContractOverview
           contract={contract}
-          bets={bets ?? []}
+          bets={bets}
           comments={comments ?? []}
         />
 

web/pages/embed/[username]/[contractSlug].tsx

@@ -76,7 +76,7 @@ export default function ContractEmbedPage(props: {
 
 function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
-  const { question, resolution, outcomeType } = contract
+  const { question, outcomeType } = contract
 
   const isBinary = outcomeType === 'BINARY'