support chain_id in db

src/components/ProjectCard.tsx

@@ -1,16 +1,16 @@
 import * as constants from '@ethersproject/constants'
 import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/24/solid'
 import { Skeleton } from 'antd'
-import { PV_V2 } from 'constants/pv'
+import { PV_V2, PV_V4 } from 'constants/pv'
 import { useProjectHandleText } from 'hooks/useProjectHandleText'
-import Link from 'next/link'
-import { isHardArchived } from 'utils/archived'
-import { formatDate } from 'utils/format/formatDate'
-
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useSubtitle } from 'hooks/useSubtitle'
 import { SubgraphQueryProject } from 'models/subgraphProjects'
+import Link from 'next/link'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
+import { v4ProjectRoute } from 'packages/v4/utils/routes'
+import { isHardArchived } from 'utils/archived'
+import { formatDate } from 'utils/format/formatDate'
 import { ArchivedBadge } from './ArchivedBadge'
 import Loading from './Loading'
 import ProjectLogo from './ProjectLogo'
@@ -29,12 +29,11 @@ export default function ProjectCard({
     handle: project?.handle,
     projectId: project?.projectId,
   })
-
   const subtitle = useSubtitle(metadata)
 
   if (!project) return null
 
-  const { volume, pv, handle, projectId, createdAt } = project
+  const { volume, pv, handle, projectId, createdAt, chainId } = project
   const tags = metadata?.tags
 
   // If the total paid is greater than 0, but less than 10 ETH, show two decimal places.
@@ -58,7 +57,12 @@ export default function ProjectCard({
       : `/p/${handle}`
 
   const projectCardUrl =
-    pv === PV_V2
+    pv === PV_V4
+      ? v4ProjectRoute({
+          projectId,
+          chainId,
+        })
+      : pv === PV_V2
       ? v2v3ProjectRoute({
           projectId,
           handle,

src/lib/api/supabase/projects/api.ts

@@ -9,7 +9,7 @@ import {
 } from 'generated/graphql'
 
 import { paginateDepleteQuery } from 'lib/apollo/paginateDepleteQuery'
-import { serverClient, v4ServerClient } from 'lib/apollo/serverClient'
+import { serverClient, v4SepoliaServerClient } from 'lib/apollo/serverClient'
 import { DBProject, DBProjectQueryOpts, SGSBCompareKey } from 'models/dbProject'
 import { Json } from 'models/json'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -25,34 +25,36 @@ import {
   formatSGProjectForDB,
   parseDBProjectsRow,
 } from 'utils/sgDbProjects'
+import { sepolia } from 'viem/chains'
 import { dbProjects } from '../clients'
 /**
  * Query all projects from subgraph using apollo serverClient which is safe to use in edge runtime.
  */
 export async function queryAllSGProjectsForServer() {
-  const [res, resV4] = await Promise.all([
+  const [res, resSepoliaV4] = await Promise.all([
     paginateDepleteQuery<DbProjectsQuery, QueryProjectsArgs>({
       client: serverClient,
       document: DbProjectsDocument,
     }),
     paginateDepleteQuery<Dbv4ProjectsQuery, QueryProjectsArgs>({
-      client: v4ServerClient,
+      client: v4SepoliaServerClient,
       document: Dbv4ProjectsDocument,
     }),
   ])
 
   // Response must be retyped with Json<>, because the serverClient does not perform the parsing expected by generated types
   const _res = res as unknown as Json<Pick<Project, SGSBCompareKey>>[]
-  const _resV4 = resV4.map(p => {
+  const _resSepoliaV4 = resSepoliaV4.map(p => {
     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,
       metadataUri: p.metadata,
+      chainId: sepolia.id,
     }
   }) as unknown as Json<Pick<Project, SGSBCompareKey>>[]
 
-  return [..._res, ..._resV4].map(formatSGProjectForDB)
+  return [..._res, ..._resSepoliaV4].map(formatSGProjectForDB)
 }
 
 /**

src/lib/apollo/serverClient.ts

@@ -1,20 +1,21 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client'
 
+import { sepolia } from 'viem/chains'
 import { subgraphUri, v4SubgraphUri } from './subgraphUri'
 
 /**
  * Unlike `client`, `serverClient` is safe to use in the edge runtime.
- * However, this client does not perform parsing on the response, 
+ * However, this client does not perform parsing on the response,
  * meaning returned objects may not match the auto-generated types.
  */
 const serverClient = new ApolloClient({
   uri: subgraphUri(),
   cache: new InMemoryCache(),
 })
 
-const v4ServerClient = new ApolloClient({
-  uri: v4SubgraphUri(),
+const v4SepoliaServerClient = new ApolloClient({
+  uri: v4SubgraphUri(sepolia.id),
   cache: new InMemoryCache(),
 })
 
-export { serverClient, v4ServerClient }
+export { serverClient, v4SepoliaServerClient }

src/lib/apollo/subgraphUri.ts

@@ -1,4 +1,7 @@
+import { JBChainId } from 'juice-sdk-react'
+import process from 'process'
 import { isBrowser } from 'utils/isBrowser'
+import { sepolia } from 'viem/chains'
 
 export const subgraphUri = () => {
   let uri: string | undefined
@@ -24,17 +27,30 @@ export const subgraphUri = () => {
   return url.href
 }
 
-export const v4SubgraphUri = () => {
+export const v4SubgraphUri = (chainId: JBChainId) => {
   let uri: string | undefined
+
+  const env: {
+    [k in JBChainId]?: {
+      browser?: string
+      server?: string
+    }
+  } = {
+    [sepolia.id]: {
+      browser: process.env.NEXT_PUBLIC_V4_SEPOLIA_SUBGRAPH_URL,
+      server: process.env.V4_SEPOLIA_SUBGRAPH_URL,
+    },
+  } as const
+
   if (isBrowser()) {
-    uri = process.env.NEXT_PUBLIC_V4_SUBGRAPH_URL
+    uri = env?.[chainId]?.browser
     if (!uri) {
       throw new Error(
         'NEXT_PUBLIC_V4_SUBGRAPH_URL environment variable not defined',
       )
     }
   } else {
-    uri = process.env.V4_SUBGRAPH_URL
+    uri = env?.[chainId]?.server
     if (!uri) {
       throw new Error('V4_SUBGRAPH_URL environment variable not defined')
     }

src/locales/messages.pot

@@ -3104,6 +3104,9 @@ msgstr ""
 msgid "Unwatch"
 msgstr ""
 
+msgid "V4"
+msgstr ""
+
 msgid "Locked until <0>{value}</0>"
 msgstr ""
 

src/models/dbProject.ts

@@ -36,6 +36,7 @@ export type DBProject = {
   projectId: number
   createdAt: number
   pv: PV
+  chainId: number
   handle: string | null
   metadataUri: string | null
 

src/packages/v4/graphql/codegen.yml

@@ -1,5 +1,5 @@
 overwrite: true
-schema: ${NEXT_PUBLIC_V4_SUBGRAPH_URL}
+schema: ${NEXT_PUBLIC_V4_SEPOLIA_SUBGRAPH_URL}
 documents: 'src/packages/v4/graphql/queries/**/*.graphql'
 generates:
   src/packages/v4/graphql/client/:

src/packages/v4/hooks/useV4ProjectRoute.ts

@@ -0,0 +1,11 @@
+import { useChainId } from 'wagmi'
+import { v4ProjectRoute } from '../utils/routes'
+
+export function useV4ProjectRoute(projectId: number) {
+  const chainId = useChainId()
+
+  return v4ProjectRoute({
+    chainId,
+    projectId,
+  })
+}

src/types/database.types.ts

@@ -191,6 +191,7 @@ export type Database = {
           payments_count: number
           project_id: number
           pv: string
+          chain_id: number
           redeem_count: number
           redeem_volume: string
           redeem_voume_usd: string
@@ -224,6 +225,7 @@ export type Database = {
           payments_count: number
           project_id: number
           pv: string
+          chain_id: number
           redeem_count: number
           redeem_volume: string
           redeem_voume_usd: string
@@ -257,6 +259,7 @@ export type Database = {
           payments_count?: number
           project_id?: number
           pv?: string
+          chain_id?: number
           redeem_count?: number
           redeem_volume?: string
           redeem_voume_usd?: string

src/utils/sgDbProjects.ts

@@ -122,6 +122,7 @@ export function formatDBProjectRow(
     payments_count: p.paymentsCount,
     project_id: p.projectId,
     pv: p.pv,
+    chain_id: p.chainId,
     redeem_count: p.redeemCount,
     redeem_volume: p.redeemVolume,
     redeem_voume_usd: p.redeemVolumeUSD,

supabase/migrations/20240913212505_project_pv_v4_drop.sql

@@ -0,0 +1,2 @@
+ALTER TABLE public.projects
+add COLUMN "chain_id" int