Store hotContracts as static props

web/components/feed-create.tsx

@@ -5,14 +5,14 @@ import Textarea from 'react-expanding-textarea'
 import { useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
-import { firebaseLogin } from '../lib/firebase/users'
+import { firebaseLogin, User } from '../lib/firebase/users'
 import { useHotContracts } from '../hooks/use-contracts'
 import { ContractsGrid } from './contracts-list'
 import { SiteLink } from './site-link'
+import { Contract } from '../../common/contract'
 
-export function FeedPromo() {
+export function FeedPromo(props: { hotContracts: Contract[] }) {
-  // TODO: Encode in static props
+  const contracts = useHotContracts() ?? props.hotContracts
-  const hotContracts = useHotContracts()
 
   return (
     <>
@@ -42,10 +42,7 @@ export function FeedPromo() {
         </div>
         <Spacer h={4} />
 
-        <ContractsGrid
+        <ContractsGrid contracts={contracts?.slice(0, 2) || []} showHotVolume />
-          contracts={hotContracts?.slice(0, 2) || []}
-          showHotVolume
-        />
       </div>
 
       <div className="text-gray-800 text-lg mb-0 mt-6 mx-6">
@@ -66,15 +63,10 @@ function Hashtag(props: { tag: string }) {
   )
 }
 
-export default function FeedCreate() {
+export default function FeedCreate(props: { user: User }) {
-  const user = useUser()
+  const { user } = props
   const [question, setQuestion] = useState('')
 
-  if (!user) {
-    // TODO: Improve logged-out experience
-    return <FeedPromo />
-  }
-
   const placeholders = [
     'Will I make a new friend this week?',
     'Will we discover that the world is a simulation?',

web/pages/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import _ from 'lodash'
-import { Contract, listAllContracts } from '../lib/firebase/contracts'
+import {
+  Contract,
+  getHotContracts,
+  listAllContracts,
+} from '../lib/firebase/contracts'
 import { Page } from '../components/page'
 import { ActivityFeed, findActiveContracts } from './activity'
 import {
@@ -9,14 +13,16 @@ import {
   listAllComments,
 } from '../lib/firebase/comments'
 import { Bet, listAllBets } from '../lib/firebase/bets'
-import FeedCreate from '../components/feed-create'
+import FeedCreate, { FeedPromo } from '../components/feed-create'
 import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
+import { useUser } from '../hooks/use-user'
 
 export async function getStaticProps() {
-  const [contracts, recentComments] = await Promise.all([
+  const [contracts, recentComments, hotContracts] = await Promise.all([
     listAllContracts().catch((_) => []),
     getRecentComments().catch(() => []),
+    getHotContracts().catch(() => []),
   ])
 
   const activeContracts = findActiveContracts(contracts, recentComments)
@@ -32,6 +38,7 @@ export async function getStaticProps() {
       activeContracts,
       activeContractBets,
       activeContractComments,
+      hotContracts,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -42,15 +49,27 @@ const Home = (props: {
   activeContracts: Contract[]
   activeContractBets: Bet[][]
   activeContractComments: Comment[][]
+  hotContracts: Contract[]
 }) => {
-  const { activeContracts, activeContractBets, activeContractComments } = props
+  const {
+    activeContracts,
+    activeContractBets,
+    activeContractComments,
+    hotContracts,
+  } = props
+
+  const user = useUser()
 
   return (
     <Page>
       <Col className="items-center">
         <Col className="max-w-3xl">
           <div className="-mx-2 sm:mx-0">
-            <FeedCreate />
+            {user ? (
+              <FeedCreate user={user} />
+            ) : (
+              <FeedPromo hotContracts={hotContracts} />
+            )}
             <Spacer h={4} />
             <ActivityFeed
               contracts={activeContracts}