Order bets in Firestore instead of on client

web/components/contract/contract-overview.tsx

@@ -140,7 +140,7 @@ export const ContractOverview = (props: {
       </Col>
       <div className={'my-1 md:my-2'}></div>
       {(isBinary || isPseudoNumeric) && (
-        <ContractProbGraph contract={contract} bets={bets} />
+        <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
       )}{' '}
       {(outcomeType === 'FREE_RESPONSE' ||
         outcomeType === 'MULTIPLE_CHOICE') && (

web/lib/firebase/bets.ts

@@ -28,9 +28,9 @@ function getBetsCollection(contractId: string) {
 }
 
 export async function listAllBets(contractId: string) {
-  const bets = await getValues<Bet>(getBetsCollection(contractId))
+  return await getValues<Bet>(
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc'))
-  return bets
+  )
 }
 
 const DAY_IN_MS = 24 * 60 * 60 * 1000
@@ -64,10 +64,10 @@ export function listenForBets(
   contractId: string,
   setBets: (bets: Bet[]) => void
 ) {
-  return listenForValues<Bet>(getBetsCollection(contractId), (bets) => {
+  return listenForValues<Bet>(
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc')),
-    setBets(bets)
+    setBets
-  })
+  )
 }
 
 export async function getUserBets(
@@ -147,12 +147,10 @@ export function listenForUserContractBets(
 ) {
   const betsQuery = query(
     collection(db, 'contracts', contractId, 'bets'),
-    where('userId', '==', userId)
+    where('userId', '==', userId),
+    orderBy('createdTime', 'desc')
   )
-  return listenForValues<Bet>(betsQuery, (bets) => {
+  return listenForValues<Bet>(betsQuery, setBets)
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
 }
 
 export function listenForUnfilledBets(
@@ -162,12 +160,10 @@ export function listenForUnfilledBets(
   const betsQuery = query(
     collection(db, 'contracts', contractId, 'bets'),
     where('isFilled', '==', false),
-    where('isCancelled', '==', false)
+    where('isCancelled', '==', false),
+    orderBy('createdTime', 'desc')
   )
-  return listenForValues<LimitBet>(betsQuery, (bets) => {
+  return listenForValues<LimitBet>(betsQuery, setBets)
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
 }
 
 export function withoutAnteBets(contract: Contract, bets?: Bet[]) {

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

@@ -71,8 +71,6 @@ export default function ContractEmbedPage(props: {
   const contract = useContractWithPreload(props.contract)
   const { bets } = props
 
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-
   if (!contract) {
     return <Custom404 />
   }