feat: v4 projects on proejcts page

jbx-protocol · Sep 18, 2024 · 5cf4610 · 5cf4610
1 parent 8cbd43e
commit 5cf4610
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/src/components/Projects/ProjectsFilterAndSort.tsx b/src/components/Projects/ProjectsFilterAndSort.tsx
@@ -21,8 +21,13 @@ export type CheckboxOnChange = (checked: boolean) => void
 export default function ProjectsFilterAndSort({
   includeV1,
   setIncludeV1,
+
   includeV2,
   setIncludeV2,
+
+  includeV4,
+  setIncludeV4,
+
   showArchived,
   setShowArchived,
   searchTags,
@@ -34,8 +39,13 @@ export default function ProjectsFilterAndSort({
 }: {
   includeV1: boolean
   setIncludeV1: CheckboxOnChange
+
   includeV2: boolean
   setIncludeV2: CheckboxOnChange
+
+  includeV4: boolean
+  setIncludeV4: CheckboxOnChange
+
   showArchived: boolean
   setShowArchived: CheckboxOnChange
   searchTags: ProjectTagName[]
@@ -67,10 +77,7 @@ export default function ProjectsFilterAndSort({
   return (
     <div className="flex max-w-[100vw] flex-wrap items-center whitespace-pre">
       <Collapse
-        className={classNames(
-          `projects-filter-collapse`,
-          'my-0 border-none bg-transparent',
-        )}
+        className="projects-filter-collapse my-0 border-none bg-transparent"
         activeKey={tagsIsOpen ? 0 : undefined}
       >
         <CollapsePanel
@@ -161,6 +168,11 @@ export default function ProjectsFilterAndSort({
               checked={includeV2}
               onChange={setIncludeV2}
             />
+            <FilterCheckboxItem
+              label={t`V4`}
+              checked={includeV4}
+              onChange={setIncludeV4}
+            />
             <FilterCheckboxItem
               label={t`Archived`}
               checked={showArchived}

diff --git a/src/components/Projects/ProjectsView.tsx b/src/components/Projects/ProjectsView.tsx
@@ -3,7 +3,7 @@ import { Button } from 'antd'
 import Search from 'antd/lib/input/Search'
 import { Footer } from 'components/Footer/Footer'
 import { PROJECTS_PAGE } from 'constants/fathomEvents'
-import { PV_V1, PV_V2 } from 'constants/pv'
+import { PV_V1, PV_V2, PV_V4 } from 'constants/pv'
 import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
 import { DBProjectQueryOpts } from 'models/dbProject'
@@ -65,15 +65,18 @@ export function ProjectsView() {
   const [orderBy, setOrderBy] = useState<OrderByOption>('volume')
   const [includeV1, setIncludeV1] = useState<boolean>(true)
   const [includeV2, setIncludeV2] = useState<boolean>(true)
+  const [includeV4, setIncludeV4] = useState<boolean>(true)
   const [showArchived, setShowArchived] = useState<boolean>(false)
   const [reversed, setReversed] = useState<boolean>(false)
 
   const pv: PV[] | undefined = useMemo(() => {
     const _pv: PV[] = []
     if (includeV1) _pv.push(PV_V1)
     if (includeV2) _pv.push(PV_V2)
-    return _pv.length ? _pv : [PV_V1, PV_V2]
-  }, [includeV1, includeV2])
+    if (includeV4) _pv.push(PV_V4)
+
+    return _pv.length ? _pv : [PV_V1, PV_V2, PV_V4]
+  }, [includeV1, includeV2, includeV4])
 
   function updateRoute(
     _searchTags: ProjectTagName[],
@@ -137,8 +140,10 @@ export function ProjectsView() {
                 <ProjectsFilterAndSort
                   includeV1={includeV1}
                   includeV2={includeV2}
+                  includeV4={includeV4}
                   setIncludeV1={setIncludeV1}
                   setIncludeV2={setIncludeV2}
+                  setIncludeV4={setIncludeV4}
                   showArchived={showArchived}
                   setShowArchived={setShowArchived}
                   reversed={reversed}

diff --git a/src/lib/api/supabase/projects/api.ts b/src/lib/api/supabase/projects/api.ts
@@ -4,15 +4,19 @@ import { PV_V4 } from 'constants/pv'
 import {
   DbProjectsDocument,
   DbProjectsQuery,
-  Dbv4ProjectsDocument,
   Project,
   QueryProjectsArgs,
 } from 'generated/graphql'
+
 import { paginateDepleteQuery } from 'lib/apollo/paginateDepleteQuery'
 import { serverClient, v4ServerClient } from 'lib/apollo/serverClient'
 import { DBProject, DBProjectQueryOpts, SGSBCompareKey } from 'models/dbProject'
 import { Json } from 'models/json'
 import { NextApiRequest, NextApiResponse } from 'next'
+import {
+  Dbv4ProjectsDocument,
+  Dbv4ProjectsQuery,
+} from 'packages/v4/graphql/client/graphql'
 import { Database } from 'types/database.types'
 import { isHardArchived } from 'utils/archived'
 import { getSubgraphIdForProject } from 'utils/graph'
@@ -31,7 +35,7 @@ export async function queryAllSGProjectsForServer() {
       client: serverClient,
       document: DbProjectsDocument,
     }),
-    paginateDepleteQuery<DbProjectsQuery, QueryProjectsArgs>({
+    paginateDepleteQuery<Dbv4ProjectsQuery, QueryProjectsArgs>({
       client: v4ServerClient,
       document: Dbv4ProjectsDocument,
     }),
@@ -43,7 +47,8 @@ export async function queryAllSGProjectsForServer() {
     return {
       ...p,
       id: getSubgraphIdForProject(PV_V4, p.projectId), // Patch in the subgraph ID for V4 projects (to be consitent with legacy subgraph)
-      pv: PV_V4, // Patch in the PV for V4 projects
+      pv: PV_V4, // Patch in the PV for V4 projects,
+      metadataUri: p.metadata,
     }
   }) as unknown as Json<Pick<Project, SGSBCompareKey>>[]
 
@@ -109,7 +114,6 @@ export async function queryDBProjects(
   const pageSize = opts.pageSize ?? 20
   // Only sort ascending if orderBy is defined and orderDirection is 'asc'
   const ascending = opts.orderBy ? opts.orderDirection === 'asc' : false
-
   const searchFilter = createSearchFilter(opts.text)
 
   const supabase = createServerSupabaseClient<Database>({ req, res })

diff --git a/src/graphql/projects/dbV4Projects.graphql → ...s/v4/graphql/queries/dbV4Projects.graphql b/src/graphql/projects/dbV4Projects.graphql → ...s/v4/graphql/queries/dbV4Projects.graphql
@@ -3,7 +3,7 @@ query DBV4Projects($first: Int, $skip: Int) {
     id
     projectId
     handle
-    # uri
+    metadata
     currentBalance
     volume
     volumeUSD