Show hot market 24 hour volume instead of pool

web/components/contract-card.tsx

@@ -9,8 +9,11 @@ import { Col } from './layout/col'
 import { parseTags } from '../lib/util/parse'
 import dayjs from 'dayjs'
 
-export function ContractCard(props: { contract: Contract }) {
-  const { contract } = props
+export function ContractCard(props: {
+  contract: Contract
+  showHotVolume?: boolean
+}) {
+  const { contract, showHotVolume } = props
   const { question, resolution } = contract
   const { probPercent } = compute(contract)
 
@@ -28,7 +31,10 @@ export function ContractCard(props: { contract: Contract }) {
                   probPercent={probPercent}
                 />
               </Row>
-              <AbbrContractDetails contract={contract} />
+              <AbbrContractDetails
+                contract={contract}
+                showHotVolume={showHotVolume}
+              />
             </div>
           </div>
         </li>
@@ -86,8 +92,12 @@ export function ResolutionOrChance(props: {
   )
 }
 
-export function AbbrContractDetails(props: { contract: Contract }) {
-  const { contract } = props
+export function AbbrContractDetails(props: {
+  contract: Contract
+  showHotVolume?: boolean
+}) {
+  const { contract, showHotVolume } = props
+  const { volume24Hours } = contract
   const { truePool } = compute(contract)
 
   return (
@@ -96,8 +106,14 @@ export function AbbrContractDetails(props: { contract: Contract }) {
         <div className="whitespace-nowrap">
           <UserLink username={contract.creatorUsername} />
         </div>
-        <div className="">•</div>
+        <div>•</div>
+        {showHotVolume ? (
+          <div className="whitespace-nowrap">
+            {formatMoney(volume24Hours)} 🔥
+          </div>
+        ) : (
           <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+        )}
       </Row>
     </Col>
   )

web/components/contracts-list.tsx

@@ -11,7 +11,12 @@ import { parseTags } from '../lib/util/parse'
 import { ContractCard } from './contract-card'
 import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
 
-export function ContractsGrid(props: { contracts: Contract[] }) {
+export function ContractsGrid(props: {
+  contracts: Contract[]
+  showHotVolume?: boolean
+}) {
+  const { showHotVolume } = props
+
   const [resolvedContracts, activeContracts] = _.partition(
     props.contracts,
     (c) => c.isResolved
@@ -35,7 +40,11 @@ export function ContractsGrid(props: { contracts: Contract[] }) {
   return (
     <ul role="list" className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {contracts.map((contract) => (
-        <ContractCard contract={contract} key={contract.id} />
+        <ContractCard
+          contract={contract}
+          key={contract.id}
+          showHotVolume={showHotVolume}
+        />
       ))}
     </ul>
   )

web/pages/markets.tsx

@@ -42,7 +42,7 @@ export default function Markets(props: {
     <Page>
       <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
         <Title className="mt-0" text="🔥 Markets" />
-        <ContractsGrid contracts={readyHotContracts} />
+        <ContractsGrid contracts={readyHotContracts} showHotVolume />
       </div>
 
       <Spacer h={10} />