Add closing soon section to home

web/components/contract-card.tsx

@@ -12,15 +12,16 @@ import {
 import { Col } from './layout/col'
 import { parseTags } from '../lib/util/parse'
 import dayjs from 'dayjs'
-import { TrendingUpIcon } from '@heroicons/react/solid'
+import { TrendingUpIcon, ClockIcon } from '@heroicons/react/solid'
 import { DateTimeTooltip } from './datetime-tooltip'
 
 export function ContractCard(props: {
   contract: Contract
   showHotVolume?: boolean
+  showCloseTime?: boolean
   className?: string
 }) {
-  const { contract, showHotVolume, className } = props
+  const { contract, showHotVolume, showCloseTime, className } = props
   const { question, resolution } = contract
   const { probPercent } = contractMetrics(contract)
 
@@ -42,7 +43,11 @@ export function ContractCard(props: {
           probPercent={probPercent}
         />
       </Row>
-      <AbbrContractDetails contract={contract} showHotVolume={showHotVolume} />
+      <AbbrContractDetails
+        contract={contract}
+        showHotVolume={showHotVolume}
+        showCloseTime={showCloseTime}
+      />
     </div>
   )
 }
@@ -99,9 +104,10 @@ export function ResolutionOrChance(props: {
 export function AbbrContractDetails(props: {
   contract: Contract
   showHotVolume?: boolean
+  showCloseTime?: boolean
 }) {
-  const { contract, showHotVolume } = props
-  const { volume24Hours, creatorName, creatorUsername } = contract
+  const { contract, showHotVolume, showCloseTime } = props
+  const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
   const { truePool } = contractMetrics(contract)
 
   return (
@@ -118,6 +124,11 @@ export function AbbrContractDetails(props: {
             <TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}
             {formatMoney(volume24Hours)}
           </div>
+        ) : showCloseTime ? (
+          <div className="whitespace-nowrap">
+            <ClockIcon className="h-5 w-5 text-gray-400 inline" />{' '}
+            {dayjs(closeTime).format('MMM D')}
+          </div>
         ) : (
           <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
         )}

web/components/contracts-list.tsx

@@ -18,8 +18,9 @@ import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
 export function ContractsGrid(props: {
   contracts: Contract[]
   showHotVolume?: boolean
+  showCloseTime?: boolean
 }) {
-  const { showHotVolume } = props
+  const { showHotVolume, showCloseTime } = props
 
   const [resolvedContracts, activeContracts] = _.partition(
     props.contracts,
@@ -51,6 +52,7 @@ export function ContractsGrid(props: {
           contract={contract}
           key={contract.id}
           showHotVolume={showHotVolume}
+          showCloseTime={showCloseTime}
         />
       ))}
     </ul>

web/lib/firebase/contracts.ts

@@ -14,6 +14,7 @@ import {
   updateDoc,
   limit,
 } from 'firebase/firestore'
+import _ from 'lodash'
 
 import { app } from './init'
 import { getValues, listenForValues } from './utils'
@@ -123,6 +124,13 @@ export function listenForContract(
   })
 }
 
+function chooseRandomSubset(contracts: Contract[], count: number) {
+  const fiveMinutes = 5 * 60 * 1000
+  const seed = Math.round(Date.now() / fiveMinutes).toString()
+  shuffle(contracts, createRNG(seed))
+  return contracts.slice(0, count)
+}
+
 const hotContractsQuery = query(
   contractCollection,
   where('isResolved', '==', false),
@@ -131,21 +139,38 @@ const hotContractsQuery = query(
   limit(16)
 )
 
-function chooseHotContracts(contracts: Contract[]) {
-  const fiveMinutes = 5 * 60 * 1000
-  const seed = Math.round(Date.now() / fiveMinutes).toString()
-  shuffle(contracts, createRNG(seed))
-  return contracts.slice(0, 4)
-}
-
 export function listenForHotContracts(
   setHotContracts: (contracts: Contract[]) => void
 ) {
-  return listenForValues<Contract>(hotContractsQuery, (contracts) =>
-    setHotContracts(chooseHotContracts(contracts))
+  return listenForValues<Contract>(hotContractsQuery, (contracts) => {
+    const hotContracts = _.sortBy(
+      chooseRandomSubset(contracts, 4),
+      (contract) => contract.volume24Hours
+    )
+    setHotContracts(hotContracts)
+  })
+}
+
+export async function getHotContracts() {
+  const contracts = await getValues<Contract>(hotContractsQuery)
+  return _.sortBy(
+    chooseRandomSubset(contracts, 4),
+    (contract) => -1 * contract.volume24Hours
   )
 }
 
-export function getHotContracts() {
-  return getValues<Contract>(hotContractsQuery).then(chooseHotContracts)
+const closingSoonQuery = query(
+  contractCollection,
+  where('isResolved', '==', false),
+  where('closeTime', '>', Date.now()),
+  orderBy('closeTime', 'asc'),
+  limit(6)
+)
+
+export async function getClosingSoonContracts() {
+  const contracts = await getValues<Contract>(closingSoonQuery)
+  return _.sortBy(
+    chooseRandomSubset(contracts, 2),
+    (contract) => contract.closeTime
+  )
 }

web/pages/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import _ from 'lodash'
 import {
   Contract,
+  getClosingSoonContracts,
   getHotContracts,
   listAllContracts,
 } from '../lib/firebase/contracts'
@@ -14,14 +15,15 @@ import {
   Comment,
   listAllComments,
 } from '../lib/firebase/comments'
-import { Col } from '../components/layout/col'
-import { ContractCard } from '../components/contract-card'
 import { Bet, listAllBets } from '../lib/firebase/bets'
+import { ContractsGrid } from '../components/contracts-list'
 
 export async function getStaticProps() {
-  const [contracts, hotContracts, recentComments] = await Promise.all([
+  const [contracts, hotContracts, closingSoonContracts, recentComments] =
+    await Promise.all([
       listAllContracts().catch((_) => []),
       getHotContracts().catch(() => []),
+      getClosingSoonContracts().catch(() => []),
       getRecentComments().catch(() => []),
     ])
 
@@ -39,6 +41,7 @@ export async function getStaticProps() {
       activeContractBets,
       activeContractComments,
       hotContracts,
+      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -50,17 +53,21 @@ const Home = (props: {
   activeContractBets: Bet[][]
   activeContractComments: Comment[][]
   hotContracts: Contract[]
+  closingSoonContracts: Contract[]
 }) => {
   const {
     activeContracts,
     activeContractBets,
     activeContractComments,
     hotContracts,
+    closingSoonContracts,
   } = props
 
   return (
     <Page>
-      <HotMarkets hotContracts={hotContracts} />
+      <HotMarkets contracts={hotContracts} />
+      <Spacer h={10} />
+      <ClosingSoonMarkets contracts={closingSoonContracts} />
       <Spacer h={10} />
       <ActivityFeed
         contracts={activeContracts}
@@ -71,25 +78,26 @@ const Home = (props: {
   )
 }
 
-const HotMarkets = (props: { hotContracts: Contract[] }) => {
-  const { hotContracts } = props
-  if (hotContracts.length < 4) return <></>
-
-  const [c1, c2, c3, c4] = hotContracts
+const HotMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
 
   return (
     <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
       <Title className="mt-0" text="🔥 Markets" />
-      <Col className="gap-6">
-        <Col className="md:flex-row items-start gap-6">
-          <ContractCard className="flex-1" contract={c1} showHotVolume />
-          <ContractCard className="flex-1" contract={c2} showHotVolume />
-        </Col>
-        <Col className="md:flex-row items-start gap-6">
-          <ContractCard className="flex-1" contract={c3} showHotVolume />
-          <ContractCard className="flex-1" contract={c4} showHotVolume />
-        </Col>
-      </Col>
+      <ContractsGrid contracts={contracts} showHotVolume />
+    </div>
+  )
+}
+
+const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
+
+  return (
+    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
+      <Title className="mt-0" text="⏰ Closing soon" />
+      <ContractsGrid contracts={contracts} showCloseTime />
     </div>
   )
 }