Add /markets for fold

web/components/fold-back.tsx

@@ -0,0 +1,14 @@
+import { ArrowCircleLeftIcon } from '@heroicons/react/outline'
+import { Fold } from '../../common/fold'
+import { foldPath } from '../lib/firebase/folds'
+import { SiteLink } from './site-link'
+
+export function FoldBack(props: { fold: Fold }) {
+  const { fold } = props
+  return (
+    <SiteLink href={foldPath(fold)}>
+      <ArrowCircleLeftIcon className="h-5 w-5 text-gray-500 inline mr-1" />{' '}
+      {fold.name}
+    </SiteLink>
+  )
+}

web/lib/firebase/folds.ts

@@ -6,7 +6,10 @@ import { getValues } from './utils'
 
 const foldCollection = collection(db, 'folds')
 
-export function foldPath(fold: Fold, subpath?: 'edit' | 'leaderboards') {
+export function foldPath(
+  fold: Fold,
+  subpath?: 'edit' | 'markets' | 'leaderboards'
+) {
   return `/fold/${fold.slug}${subpath ? `/${subpath}` : ''}`
 }
 

web/pages/fold/[foldSlug]/index.tsx

@@ -90,14 +90,10 @@ export default function FoldPage(props: {
           <Title text={fold.name} />
 
           <Row className="items-center gap-2 mb-2 flex-wrap">
-            {isCurator && (
-              <>
-                <SiteLink className="text-sm " href={foldPath(fold, 'edit')}>
-                  Edit
+            <SiteLink className="text-sm" href={foldPath(fold, 'markets')}>
+              Markets
             </SiteLink>
             <div className="text-gray-500">•</div>
-              </>
-            )}
             <SiteLink className="text-sm" href={foldPath(fold, 'leaderboards')}>
               Leaderboards
             </SiteLink>
@@ -110,6 +106,14 @@ export default function FoldPage(props: {
                 username={curator.username}
               />
             </Row>
+            {isCurator && (
+              <>
+                <div className="text-gray-500">•</div>
+                <SiteLink className="text-sm " href={foldPath(fold, 'edit')}>
+                  Edit
+                </SiteLink>
+              </>
+            )}
           </Row>
 
           <TagsList tags={tags.map((tag) => `#${tag}`)} />

web/pages/fold/[foldSlug]/markets.tsx

@@ -0,0 +1,59 @@
+import _ from 'lodash'
+import { Contract } from '../../../../common/contract'
+import { Fold } from '../../../../common/fold'
+import { SearchableGrid } from '../../../components/contracts-list'
+import { FoldBack } from '../../../components/fold-back'
+import { Spacer } from '../../../components/layout/spacer'
+import { Page } from '../../../components/page'
+import { SEO } from '../../../components/SEO'
+import { useQueryAndSortParams } from '../../../hooks/use-sort-and-query-params'
+import { getFoldBySlug, getFoldContracts } from '../../../lib/firebase/folds'
+
+export async function getStaticProps(props: { params: { foldSlug: string } }) {
+  const { foldSlug } = props.params
+
+  const fold = await getFoldBySlug(foldSlug)
+  const contracts = fold ? await getFoldContracts(fold) : []
+
+  return {
+    props: {
+      fold,
+      contracts,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+export default function Markets(props: { fold: Fold; contracts: Contract[] }) {
+  const { fold, contracts } = props
+  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
+    defaultSort: 'most-traded',
+  })
+
+  return (
+    <Page>
+      <SEO
+        title={`${fold.name}'s markets`}
+        description={`Explore or search all the markets of ${fold.name}`}
+        url="/markets"
+      />
+
+      <FoldBack fold={fold} />
+
+      <Spacer h={4} />
+
+      <SearchableGrid
+        contracts={contracts}
+        query={query}
+        setQuery={setQuery}
+        sort={sort}
+        setSort={setSort}
+      />
+    </Page>
+  )
+}