Feed: Send only contracts with bets in last 24 hours. Instead of all contracts: 2.2MB => 0.8MB

web/components/contract-feed.tsx

@@ -747,7 +747,7 @@ export function ContractFeed(props: {
     <div className="flow-root pr-2 md:pr-0">
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         {items.map((activityItem, activityItemIdx) => (
-          <div className="relative pb-8">
+          <div key={activityItem.id} className="relative pb-8">
             {activityItemIdx !== items.length - 1 ? (
               <span
                 className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"

web/hooks/use-active-contracts.ts

@@ -6,17 +6,17 @@ import { User } from '../../common/user'
 import { filterDefined } from '../../common/util/array'
 import { Bet, getRecentBets } from '../lib/firebase/bets'
 import { Comment, getRecentComments } from '../lib/firebase/comments'
-import { Contract, listAllContracts } from '../lib/firebase/contracts'
+import { Contract, getActiveContracts } from '../lib/firebase/contracts'
 import { listAllFolds } from '../lib/firebase/folds'
 import { findActiveContracts } from '../pages/activity'
-import { useContracts } from './use-contracts'
+import { useActiveContracts } from './use-contracts'
 import { useFollowedFolds } from './use-fold'
 import { useUserBetContracts } from './use-user-bets'
 
 // used in static props
 export const getAllContractInfo = async () => {
   let [contracts, folds] = await Promise.all([
-    listAllContracts().catch((_) => []),
+    getActiveContracts().catch((_) => []),
     listAllFolds().catch(() => []),
   ])
 
@@ -28,7 +28,7 @@ export const getAllContractInfo = async () => {
   return { contracts, recentBets, recentComments, folds }
 }
 
-export const useActiveContracts = (
+export const useFindActiveContracts = (
   props: {
     contracts: Contract[]
     folds: Fold[]
@@ -38,7 +38,7 @@ export const useActiveContracts = (
   user: User | undefined | null
 ) => {
   const { recentBets, recentComments } = props
-  const contracts = useContracts() ?? props.contracts
+  const contracts = useActiveContracts() ?? props.contracts
 
   const followedFoldIds = useFollowedFolds(user)
 

web/hooks/use-contracts.ts

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import {
   Contract,
+  listenForActiveContracts,
   listenForContracts,
   listenForHotContracts,
 } from '../lib/firebase/contracts'
@@ -17,6 +18,16 @@ export const useContracts = () => {
   return contracts
 }
 
+export const useActiveContracts = () => {
+  const [contracts, setContracts] = useState<Contract[] | undefined>()
+
+  useEffect(() => {
+    return listenForActiveContracts(setContracts)
+  }, [])
+
+  return contracts
+}
+
 export const useUpdatedContracts = (initialContracts: Contract[]) => {
   const [contracts, setContracts] = useState(initialContracts)
 

web/lib/firebase/contracts.ts

@@ -115,6 +115,23 @@ export function listenForContracts(
   return listenForValues<Contract>(q, setContracts)
 }
 
+const activeContracts = query(
+  contractCollection,
+  where('isResolved', '==', false),
+  where('visibility', '==', 'public'),
+  where('volume24Hours', '>', 0)
+)
+
+export function getActiveContracts() {
+  return getValues<Contract>(activeContracts)
+}
+
+export function listenForActiveContracts(
+  setContracts: (contracts: Contract[]) => void
+) {
+  return listenForValues<Contract>(activeContracts, setContracts)
+}
+
 export function listenForContract(
   contractId: string,
   setContract: (contract: Contract | null) => void

web/pages/home.tsx

@@ -17,7 +17,7 @@ import { SparklesIcon } from '@heroicons/react/solid'
 import { FastFoldFollowing } from '../components/fast-fold-following'
 import {
   getAllContractInfo,
-  useActiveContracts,
+  useFindActiveContracts,
 } from '../hooks/use-active-contracts'
 import { useGetRecentBets } from '../hooks/use-bets'
 
@@ -46,7 +46,7 @@ const Home = (props: {
     activeBets,
     activeComments,
     initialFollowedFoldSlugs,
-  } = useActiveContracts(
+  } = useFindActiveContracts(
     { contracts, folds, recentBets: recentBets ?? [], recentComments },
     user
   )