Add explore tab on home feed that shows random inactive markets.

web/components/contract-feed.tsx

@@ -790,3 +790,27 @@ export function ContractFeed(props: {
     </div>
   )
 }
+
+export function ContractSummaryFeed(props: {
+  contract: Contract
+  betRowClassName?: string
+}) {
+  const { contract, betRowClassName } = props
+  const { outcomeType } = contract
+  const isBinary = outcomeType === 'BINARY'
+
+  return (
+    <div className="flow-root pr-2 md:pr-0">
+      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
+        <div className="relative pb-8">
+          <div className="relative flex items-start space-x-3">
+            <FeedQuestion contract={contract} />
+          </div>
+        </div>
+      </div>
+      {isBinary && tradingAllowed(contract) && (
+        <BetRow contract={contract} className={clsx('mb-2', betRowClassName)} />
+      )}
+    </div>
+  )
+}

web/components/fast-fold-following.tsx

@@ -101,7 +101,7 @@ export const FastFoldFollowing = (props: {
         ]}
       />
 
-      <Spacer h={10} />
+      <Spacer h={5} />
     </>
   )
 }

web/hooks/use-contracts.ts

@@ -5,6 +5,7 @@ import {
   listenForActiveContracts,
   listenForContracts,
   listenForHotContracts,
+  listenForInactiveContracts,
 } from '../lib/firebase/contracts'
 import { listenForTaggedContracts } from '../lib/firebase/folds'
 
@@ -28,6 +29,16 @@ export const useActiveContracts = () => {
   return contracts
 }
 
+export const useInactiveContracts = () => {
+  const [contracts, setContracts] = useState<Contract[] | undefined>()
+
+  useEffect(() => {
+    return listenForInactiveContracts(setContracts)
+  }, [])
+
+  return contracts
+}
+
 export const useUpdatedContracts = (initialContracts: Contract[]) => {
   const [contracts, setContracts] = useState(initialContracts)
 

web/hooks/use-find-active-contracts.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 import { Fold } from '../../common/fold'
 import { User } from '../../common/user'
@@ -9,7 +9,7 @@ import { Comment, getRecentComments } from '../lib/firebase/comments'
 import { Contract, getActiveContracts } from '../lib/firebase/contracts'
 import { listAllFolds } from '../lib/firebase/folds'
 import { findActiveContracts } from '../pages/activity'
-import { useActiveContracts } from './use-contracts'
+import { useInactiveContracts } from './use-contracts'
 import { useFollowedFolds } from './use-fold'
 import { useUserBetContracts } from './use-user-bets'
 
@@ -28,24 +28,15 @@ export const getAllContractInfo = async () => {
   return { contracts, recentBets, recentComments, folds }
 }
 
-export const useFindActiveContracts = (
+export const useFilterYourContracts = (
-  props: {
+  user: User | undefined | null,
+  folds: Fold[],
   contracts: Contract[]
-    folds: Fold[]
-    recentBets: Bet[]
-    recentComments: Comment[]
-  },
-  user: User | undefined | null
 ) => {
-  const { recentBets, recentComments } = props
-  const contracts = useActiveContracts() ?? props.contracts
-
   const followedFoldIds = useFollowedFolds(user)
 
   const followedFolds = filterDefined(
-    (followedFoldIds ?? []).map((id) =>
+    (followedFoldIds ?? []).map((id) => folds.find((fold) => fold.id === id))
-      props.folds.find((fold) => fold.id === id)
-    )
   )
 
   // Save the initial followed fold slugs.
@@ -64,20 +55,33 @@ export const useFindActiveContracts = (
     : undefined
 
   // Show no contracts before your info is loaded.
-  let feedContracts: Contract[] = []
+  let yourContracts: Contract[] = []
   if (yourBetContracts && followedFoldIds) {
     // Show all contracts if no folds are followed.
-    if (followedFoldIds.length === 0) feedContracts = contracts
+    if (followedFoldIds.length === 0) yourContracts = contracts
     else
-      feedContracts = contracts.filter(
+      yourContracts = contracts.filter(
         (contract) =>
           contract.lowercaseTags.some((tag) => tagSet.has(tag)) ||
           yourBetContracts.has(contract.id)
       )
   }
 
+  return {
+    yourContracts,
+    initialFollowedFoldSlugs,
+  }
+}
+
+export const useFindActiveContracts = (props: {
+  contracts: Contract[]
+  recentBets: Bet[]
+  recentComments: Comment[]
+}) => {
+  const { contracts, recentBets, recentComments } = props
+
   const activeContracts = findActiveContracts(
-    feedContracts,
+    contracts,
     recentComments,
     recentBets
   )
@@ -101,6 +105,24 @@ export const useFindActiveContracts = (
     activeContracts,
     activeBets,
     activeComments,
-    initialFollowedFoldSlugs,
   }
 }
+
+export const useExploreContracts = (maxContracts = 75) => {
+  const inactiveContracts = useInactiveContracts()
+
+  const contractsDict = _.fromPairs(
+    (inactiveContracts ?? []).map((c) => [c.id, c])
+  )
+
+  // Preserve random ordering once inactiveContracts loaded.
+  const exploreContractIds = useMemo(
+    () => _.shuffle(Object.keys(contractsDict)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!inactiveContracts]
+  ).slice(0, maxContracts)
+
+  if (!inactiveContracts) return undefined
+
+  return filterDefined(exploreContractIds.map((id) => contractsDict[id]))
+}

web/lib/firebase/contracts.ts

@@ -115,7 +115,7 @@ export function listenForContracts(
   return listenForValues<Contract>(q, setContracts)
 }
 
-const activeContracts = query(
+const activeContractsQuery = query(
   contractCollection,
   where('isResolved', '==', false),
   where('visibility', '==', 'public'),
@@ -123,13 +123,31 @@ const activeContracts = query(
 )
 
 export function getActiveContracts() {
-  return getValues<Contract>(activeContracts)
+  return getValues<Contract>(activeContractsQuery)
 }
 
 export function listenForActiveContracts(
   setContracts: (contracts: Contract[]) => void
 ) {
-  return listenForValues<Contract>(activeContracts, setContracts)
+  return listenForValues<Contract>(activeContractsQuery, setContracts)
+}
+
+const inactiveContractsQuery = query(
+  contractCollection,
+  where('isResolved', '==', false),
+  where('closeTime', '>', Date.now()),
+  where('visibility', '==', 'public'),
+  where('volume24Hours', '==', 0)
+)
+
+export function getInactiveContracts() {
+  return getValues<Contract>(inactiveContractsQuery)
+}
+
+export function listenForInactiveContracts(
+  setContracts: (contracts: Contract[]) => void
+) {
+  return listenForValues<Contract>(inactiveContractsQuery, setContracts)
 }
 
 export function listenForContract(

web/pages/activity.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { ContractFeed } from '../components/contract-feed'
+import { ContractFeed, ContractSummaryFeed } from '../components/contract-feed'
 import { Page } from '../components/page'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
@@ -99,6 +99,24 @@ export function ActivityFeed(props: {
   )
 }
 
+export function SummaryActivityFeed(props: { contracts: Contract[] }) {
+  const { contracts } = props
+
+  return (
+    <Col className="items-center">
+      <Col className="w-full max-w-3xl">
+        <Col className="w-full divide-y divide-gray-300 self-center bg-white">
+          {contracts.map((contract) => (
+            <div key={contract.id} className="py-6 px-2 sm:px-4">
+              <ContractSummaryFeed contract={contract} />
+            </div>
+          ))}
+        </Col>
+      </Col>
+    </Col>
+  )
+}
+
 export default function ActivityPage() {
   return (
     <Page>

web/pages/home.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Router from 'next/router'
+import { SparklesIcon, GlobeAltIcon } from '@heroicons/react/solid'
+import clsx from 'clsx'
+import _ from 'lodash'
 
 import { Contract } from '../lib/firebase/contracts'
 import { Page } from '../components/page'
-import { ActivityFeed } from './activity'
+import { ActivityFeed, SummaryActivityFeed } from './activity'
 import { Comment } from '../lib/firebase/comments'
 import { Bet } from '../lib/firebase/bets'
 import FeedCreate from '../components/feed-create'
@@ -13,13 +16,15 @@ import { useUser } from '../hooks/use-user'
 import { Fold } from '../../common/fold'
 import { LoadingIndicator } from '../components/loading-indicator'
 import { Row } from '../components/layout/row'
-import { SparklesIcon } from '@heroicons/react/solid'
 import { FastFoldFollowing } from '../components/fast-fold-following'
 import {
   getAllContractInfo,
+  useExploreContracts,
+  useFilterYourContracts,
   useFindActiveContracts,
-} from '../hooks/use-active-contracts'
+} from '../hooks/use-find-active-contracts'
 import { useGetRecentBets } from '../hooks/use-bets'
+import { useActiveContracts } from '../hooks/use-contracts'
 
 export async function getStaticProps() {
   const contractInfo = await getAllContractInfo()
@@ -36,21 +41,28 @@ const Home = (props: {
   recentBets: Bet[]
   recentComments: Comment[]
 }) => {
-  const { contracts, folds, recentComments } = props
+  const { folds, recentComments } = props
   const user = useUser()
 
-  const recentBets = useGetRecentBets()
+  const contracts = useActiveContracts() ?? props.contracts
-
+  const { yourContracts, initialFollowedFoldSlugs } = useFilterYourContracts(
-  const {
+    user,
-    activeContracts,
+    folds,
-    activeBets,
+    contracts
-    activeComments,
-    initialFollowedFoldSlugs,
-  } = useFindActiveContracts(
-    { contracts, folds, recentBets: recentBets ?? [], recentComments },
-    user
   )
 
+  const recentBets = useGetRecentBets()
+  const { activeContracts, activeBets, activeComments } =
+    useFindActiveContracts({
+      contracts: yourContracts,
+      recentBets: recentBets ?? [],
+      recentComments,
+    })
+
+  const exploreContracts = useExploreContracts()
+
+  const [feedMode, setFeedMode] = useState<'activity' | 'explore'>('activity')
+
   if (user === null) {
     Router.replace('/')
     return <></>
@@ -71,14 +83,37 @@ const Home = (props: {
               />
             )}
 
+          <Spacer h={5} />
+
           <Col className="mx-3 mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
             <Row className="gap-2">
+              <div className="tabs">
+                <div
+                  className={clsx(
+                    'tab tab-bordered gap-2',
+                    feedMode === 'activity' && 'tab-active'
+                  )}
+                  onClick={() => setFeedMode('activity')}
+                >
                   <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
-              <span className="whitespace-nowrap">Recent activity</span>
+                  Recent activity
+                </div>
+                <div
+                  className={clsx(
+                    'tab tab-bordered gap-2',
+                    feedMode === 'explore' && 'tab-active'
+                  )}
+                  onClick={() => setFeedMode('explore')}
+                >
+                  <GlobeAltIcon className="inline h-5 w-5" aria-hidden="true" />
+                  Explore
+                </div>
+              </div>
             </Row>
           </Col>
 
-          {activeContracts && recentBets ? (
+          {feedMode === 'activity' &&
+            (recentBets ? (
               <ActivityFeed
                 contracts={activeContracts}
                 contractBets={activeBets}
@@ -86,7 +121,14 @@ const Home = (props: {
               />
             ) : (
               <LoadingIndicator className="mt-4" />
-          )}
+            ))}
+
+          {feedMode === 'explore' &&
+            (exploreContracts ? (
+              <SummaryActivityFeed contracts={exploreContracts} />
+            ) : (
+              <LoadingIndicator className="mt-4" />
+            ))}
         </Col>
       </Col>
     </Page>