diff --git a/web/components/fold-back.tsx b/web/components/fold-back.tsx
new file mode 100644
index 00000000..374e13e3
--- /dev/null
+++ b/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 (
+
+ {' '}
+ {fold.name}
+
+ )
+}
diff --git a/web/lib/firebase/folds.ts b/web/lib/firebase/folds.ts
index f1da0444..2e64b1d8 100644
--- a/web/lib/firebase/folds.ts
+++ b/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}` : ''}`
}
diff --git a/web/pages/fold/[foldSlug]/index.tsx b/web/pages/fold/[foldSlug]/index.tsx
index 07408fec..647000e8 100644
--- a/web/pages/fold/[foldSlug]/index.tsx
+++ b/web/pages/fold/[foldSlug]/index.tsx
@@ -90,14 +90,10 @@ export default function FoldPage(props: {
- {isCurator && (
- <>
-
- Edit
-
- •
- >
- )}
+
+ Markets
+
+ •
Leaderboards
@@ -110,6 +106,14 @@ export default function FoldPage(props: {
username={curator.username}
/>
+ {isCurator && (
+ <>
+ •
+
+ Edit
+
+ >
+ )}
`#${tag}`)} />
diff --git a/web/pages/fold/[foldSlug]/markets.tsx b/web/pages/fold/[foldSlug]/markets.tsx
new file mode 100644
index 00000000..667cb68a
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ )
+}