Activity feed on home page! All markets navbar option.

web/components/nav-bar.tsx

@@ -35,6 +35,30 @@ export function NavBar(props: {
         <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
           {children}
 
+          <Link href="/about">
+            <a
+              className={clsx(
+                'text-base hidden md:block whitespace-nowrap',
+                themeClasses
+              )}
+            >
+              About
+            </a>
+          </Link>
+
+          {!isLandingPage && (
+            <Link href="/markets">
+              <a
+                className={clsx(
+                  'text-base hidden md:block whitespace-nowrap',
+                  themeClasses
+                )}
+              >
+                All markets
+              </a>
+            </Link>
+          )}
+
           {user ? (
             <SignedInHeaders user={user} themeClasses={themeClasses} />
           ) : (
@@ -51,17 +75,6 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
 
   return (
     <>
-      <Link href="/about">
-        <a
-          className={clsx(
-            'text-base hidden md:block whitespace-nowrap',
-            themeClasses
-          )}
-        >
-          About
-        </a>
-      </Link>
-
       <Link href="/create">
         <a
           className={clsx(

web/components/profile-menu.tsx

@@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User }) {
       />
 
       <MenuButton
-        className="md:hidden"
+        className="md:hidden mr-2"
         menuItems={getNavigationOptions(user, { mobile: true })}
         buttonContent={<ProfileSummary user={user} />}
       />
@@ -33,7 +33,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
     },
     ...(mobile
       ? [
-          { name: 'About', href: '/about' },
+          {
+            name: 'All markets',
+            href: '/markets',
+          },
           {
             name: 'Create a market',
             href: '/create',
@@ -56,6 +59,7 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
       name: 'Discord',
       href: 'https://discord.gg/eHQBNBqXuh',
     },
+    ...(mobile ? [{ name: 'About', href: '/about' }] : []),
     {
       name: 'Sign out',
       href: '#',

web/pages/activity.tsx

@@ -69,11 +69,15 @@ function findActiveContracts(
   return contracts
 }
 
-export function ActivityFeed() {
+export function ActivityFeed(props: {
-  const contracts = useContracts() || []
+  contracts: Contract[]
-  const recentComments = useRecentComments() || []
+  recentComments: Comment[]
+}) {
+  const contracts = useContracts() ?? props.contracts
+  const recentComments = useRecentComments() ?? props.recentComments
   // TODO: Handle static props correctly?
   const activeContracts = findActiveContracts(contracts, recentComments)
+
   return contracts.length > 0 ? (
     <>
       <Title text="Recent Activity" />
@@ -91,7 +95,7 @@ export function ActivityFeed() {
 export default function ActivityPage() {
   return (
     <Page>
-      <ActivityFeed />
+      <ActivityFeed contracts={[]} recentComments={[]} />
     </Page>
   )
 }

web/pages/create.tsx

@@ -212,7 +212,7 @@ export default function NewContract() {
 
       <Spacer h={6} />
 
-      <ActivityFeed />
+      <ActivityFeed contracts={[]} recentComments={[]} />
     </Page>
   )
 }

web/pages/index.tsx

@@ -1,41 +1,63 @@
 import React from 'react'
 import _ from 'lodash'
 import { useUser } from '../hooks/use-user'
-import Markets from './markets'
-import LandingPage from './landing-page'
 import {
   Contract,
   getHotContracts,
   listAllContracts,
 } from '../lib/firebase/contracts'
+import LandingPage from './landing-page'
+import { ContractsGrid } from '../components/contracts-list'
+import { Spacer } from '../components/layout/spacer'
+import { Page } from '../components/page'
+import { Title } from '../components/title'
+import { ActivityFeed } from './activity'
+import { getRecentComments, Comment } from '../lib/firebase/comments'
 
 export async function getStaticProps() {
-  const [contracts, hotContracts] = await Promise.all([
+  const [contracts, hotContracts, recentComments] = await Promise.all([
     listAllContracts().catch((_) => []),
     getHotContracts().catch(() => []),
+    getRecentComments().catch(() => []),
   ])
 
   return {
     props: {
       contracts,
       hotContracts,
+      recentComments,
     },
 
     revalidate: 60, // regenerate after a minute
   }
 }
 
-const Home = (props: { contracts: Contract[]; hotContracts: Contract[] }) => {
+const Home = (props: {
+  contracts: Contract[]
+  hotContracts: Contract[]
+  recentComments: Comment[]
+}) => {
   const user = useUser()
 
   if (user === undefined) return <></>
 
-  const { contracts, hotContracts } = props
+  const { contracts, hotContracts, recentComments } = props
 
-  return user ? (
+  if (user === null) {
-    <Markets contracts={contracts} hotContracts={hotContracts} />
+    return <LandingPage hotContracts={hotContracts} />
-  ) : (
+  }
-    <LandingPage hotContracts={hotContracts} />
+
+  return (
+    <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={hotContracts} showHotVolume />
+      </div>
+
+      <Spacer h={10} />
+
+      <ActivityFeed contracts={contracts} recentComments={recentComments} />
+    </Page>
   )
 }
 

web/pages/landing-page.tsx

@@ -34,14 +34,7 @@ const scrollToAbout = () => {
 function Hero() {
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <NavBar isLandingPage darkBackground>
+      <NavBar isLandingPage darkBackground />
-        <div
-          className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
-          onClick={scrollToAbout}
-        >
-          About
-        </div>
-      </NavBar>
       <main>
         <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
           <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">

web/pages/markets.tsx

@@ -1,54 +1,30 @@
 import _ from 'lodash'
-import { ContractsGrid, SearchableGrid } from '../components/contracts-list'
+import { SearchableGrid } from '../components/contracts-list'
-import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
-import { Title } from '../components/title'
+import { useContracts } from '../hooks/use-contracts'
-import { useContracts, useHotContracts } from '../hooks/use-contracts'
 import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-import {
+import { Contract, listAllContracts } from '../lib/firebase/contracts'
-  Contract,
-  getHotContracts,
-  listAllContracts,
-} from '../lib/firebase/contracts'
 
 export async function getStaticProps() {
-  const [contracts, hotContracts] = await Promise.all([
+  const contracts = await listAllContracts().catch((_) => {})
-    listAllContracts().catch((_) => []),
-    getHotContracts().catch(() => []),
-  ])
 
   return {
     props: {
       contracts,
-      hotContracts,
     },
 
     revalidate: 60, // regenerate after a minute
   }
 }
 
-export default function Markets(props: {
+export default function Markets(props: { contracts: Contract[] }) {
-  contracts: Contract[]
+  const contracts = useContracts() ?? props.contracts
-  hotContracts: Contract[]
-}) {
-  const contracts = useContracts()
-  const hotContracts = useHotContracts()
   const { query, setQuery, sort, setSort } = useQueryAndSortParams()
 
-  const readyHotContracts = hotContracts ?? props.hotContracts
-  const readyContracts = contracts ?? props.contracts
-
   return (
     <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} showHotVolume />
-      </div>
-
-      <Spacer h={10} />
-
       <SearchableGrid
-        contracts={readyContracts}
+        contracts={contracts}
         query={query}
         setQuery={setQuery}
         sort={sort}