Set limits on bets and contracts loaded for portfolio page. Show warning if limit is hit

web/components/bets-list.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { useMemo, useState } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 
-import { Bet } from 'web/lib/firebase/bets'
+import { Bet, MAX_USER_BETS_LOADED } from 'web/lib/firebase/bets'
 import { User } from 'web/lib/firebase/users'
 import {
   formatMoney,
@@ -17,6 +17,7 @@ import {
   Contract,
   contractPath,
   getBinaryProbPercent,
+  MAX_USER_BET_CONTRACTS_LOADED,
 } from 'web/lib/firebase/contracts'
 import { Row } from './layout/row'
 import { sellBet } from 'web/lib/firebase/api'
@@ -50,6 +51,7 @@ import {
   usePersistentState,
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
+import { ExclamationIcon } from '@heroicons/react/outline'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -80,6 +82,10 @@ export function BetsList(props: { user: User }) {
     return contractList ? keyBy(contractList, 'id') : undefined
   }, [contractList])
 
+  const loadedPartialData =
+    userBets?.length === MAX_USER_BETS_LOADED ||
+    contractList?.length === MAX_USER_BET_CONTRACTS_LOADED
+
   const [sort, setSort] = usePersistentState<BetSort>('newest', {
     key: 'bets-list-sort',
     store: storageStore(safeLocalStorage()),
@@ -167,6 +173,13 @@ export function BetsList(props: { user: User }) {
 
   return (
     <Col>
+      {loadedPartialData && (
+        <Row className="my-4 items-center gap-2 self-start rounded bg-yellow-50 p-4">
+          <ExclamationIcon className="h-5 w-5" />
+          <div>Partial trade data only</div>
+        </Row>
+      )}
+
       <Col className="justify-between gap-4 sm:flex-row">
         <Row className="gap-4">
           <Col>

web/lib/firebase/bets.ts

@@ -74,11 +74,13 @@ export async function getUserBets(userId: string) {
   return getValues<Bet>(getUserBetsQuery(userId))
 }
 
+export const MAX_USER_BETS_LOADED = 10000
 export function getUserBetsQuery(userId: string) {
   return query(
     collectionGroup(db, 'bets'),
     where('userId', '==', userId),
-    orderBy('createdTime', 'desc')
+    orderBy('createdTime', 'desc'),
+    limit(MAX_USER_BETS_LOADED)
   ) as Query<Bet>
 }
 

web/lib/firebase/contracts.ts

@@ -168,10 +168,12 @@ export function getUserBetContracts(userId: string) {
   return getValues<Contract>(getUserBetContractsQuery(userId))
 }
 
+export const MAX_USER_BET_CONTRACTS_LOADED = 1000
 export function getUserBetContractsQuery(userId: string) {
   return query(
     contracts,
-    where('uniqueBettorIds', 'array-contains', userId)
+    where('uniqueBettorIds', 'array-contains', userId),
+    limit(MAX_USER_BET_CONTRACTS_LOADED)
   ) as Query<Contract>
 }