feat: new v4 routing

package.json

@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^1.0.3-beta",
-    "juice-sdk-react": "^1.0.3-beta",
+    "juice-sdk-core": "^1.5.1-beta",
+    "juice-sdk-react": "^1.5.1-beta",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
@@ -131,6 +131,7 @@
     "react-stop-propagation": "^0.2.0",
     "recharts": "^2.12.7",
     "rehype-sanitize": "^5.0.1",
+    "revnet-sdk": "^1.0.1-beta",
     "sass": "^1.77.6",
     "swiper": "^9.2.3",
     "tailwind-merge": "^2.3.0",

src/components/ProjectPageSEO.tsx

@@ -1,4 +1,5 @@
 import { SiteBaseUrl } from 'constants/url'
+import { JBChainId, toJbUrn } from 'juice-sdk-core'
 import { ProjectMetadata } from 'models/projectMetadata'
 import { cidFromUrl, ipfsPublicGatewayUrl } from 'utils/ipfs'
 import { stripHtmlTags } from 'utils/string'
@@ -40,13 +41,11 @@ export const V2V3ProjectSEO: React.FC<{
 
 export const V4ProjectSEO: React.FC<{
   metadata?: ProjectMetadata
-  chainName: string
+  chainId: JBChainId
   projectId: number
-}> = ({ metadata, chainName, projectId }) => {
+}> = ({ metadata, chainId, projectId }) => {
+  const urn = toJbUrn(chainId, BigInt(projectId))
   return (
-    <ProjectPageSEO
-      metadata={metadata}
-      url={`${SiteBaseUrl}v4/${chainName}/p/${projectId}`}
-    />
+    <ProjectPageSEO metadata={metadata} url={`${SiteBaseUrl}v4/p/${urn}`} />
   )
 }

src/constants/networks.ts

@@ -40,15 +40,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.infura.io/v3/${infuraId}`,
     token: 'SepETH',
   },
-  // 42161: {
-  //   name: NetworkName.arbitrum,
-  //   label: 'Arbitrum',
-  //   color: '#28a0f0',
-  //   chainId: 42161,
-  //   token: 'ArbETH',
-  //   rpcUrl: `https://arbitrum-mainnet.infura.io/v3/${infuraId}`,
-  //   blockExplorer: 'https://arbiscan.io',
-  // },
+  42161: {
+    name: NetworkName.arbitrum,
+    label: 'Arbitrum',
+    color: '#28a0f0',
+    chainId: 42161,
+    token: 'ArbETH',
+    rpcUrl: `https://arbitrum-mainnet.infura.io/v3/${infuraId}`,
+    blockExplorer: 'https://arbiscan.io',
+  },
   421614: {
     name: NetworkName.arbitrumSepolia,
     label: 'Arbitrum Sepolia Testnet',
@@ -58,15 +58,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia-rollup.arbitrum.io/rpc`,
     blockExplorer: 'https://sepolia-explorer.arbitrum.io',
   },
-  // 10: {
-  //   name: NetworkName.optimism,
-  //   label: 'Optimism',
-  //   color: '#ff0420',
-  //   chainId: 10,
-  //   token: 'OpETH',
-  //   rpcUrl: `https://optimism-mainnet.infura.io/v3/${infuraId}`,
-  //   blockExplorer: 'https://optimistic.etherscan.io',
-  // },
+  10: {
+    name: NetworkName.optimism,
+    label: 'Optimism',
+    color: '#ff0420',
+    chainId: 10,
+    token: 'OpETH',
+    rpcUrl: `https://optimism-mainnet.infura.io/v3/${infuraId}`,
+    blockExplorer: 'https://optimistic.etherscan.io',
+  },
   11155420: {
     name: NetworkName.optimismSepolia,
     label: 'Optimism Sepolia Testnet',
@@ -76,15 +76,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.optimism.io`,
     blockExplorer: 'https://optimism-sepolia.blockscout.com',
   },
-  // 8453: {
-  //   name: NetworkName.base,
-  //   label: 'Base',
-  //   color: '#00d395',
-  //   chainId: 8453,
-  //   token: 'BaseETH',
-  //   rpcUrl: `https://mainnet.base.org`,
-  //   blockExplorer: 'https://basescan.org',
-  // },
+  8453: {
+    name: NetworkName.base,
+    label: 'Base',
+    color: '#00d395',
+    chainId: 8453,
+    token: 'BaseETH',
+    rpcUrl: `https://mainnet.base.org`,
+    blockExplorer: 'https://basescan.org',
+  },
   84532: {
     name: NetworkName.baseSepolia,
     label: 'Base Sepolia',

src/packages/v4/utils/routes.ts

@@ -9,7 +9,7 @@ export const v4ProjectRoute = ({
   projectId?: number
 }) => {
   const chainSlug = getChainSlug(chainId)
-  return `/v4/${chainSlug}/p/${projectId?.toString()}`
+  return `/v4/${chainSlug}:${projectId?.toString()}`
 }
 
 export const settingsPagePath = (

src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx

@@ -1,6 +1,5 @@
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { OPEN_IPFS_GATEWAY_HOSTNAME } from 'constants/ipfs'
-import { JB_CHAIN_SLUGS } from 'juice-sdk-core'
 import { JBChainId, JBProjectProvider } from 'juice-sdk-react'
 import { ReduxProjectCartProvider } from 'packages/v4/components/ProjectDashboard/ReduxProjectCartProvider'
 import store from 'packages/v4/components/ProjectDashboard/redux/store'
@@ -12,11 +11,10 @@ import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import React, { PropsWithChildren } from 'react'
 import { Provider } from 'react-redux'
 import { WagmiProvider } from 'wagmi'
-const V4ProjectProviders: React.FC<
-  PropsWithChildren & { chainName: string; projectId: bigint }
-> = ({ chainName, projectId, children }) => {
-  const chainId = JB_CHAIN_SLUGS[chainName].chain.id as JBChainId
 
+const V4ProjectProviders: React.FC<
+  PropsWithChildren & { chainId: JBChainId; projectId: bigint }
+> = ({ chainId, projectId, children }) => {
   return (
     <AppWrapper txHistoryProvider="wagmi">
       <WagmiProvider config={wagmiConfig}>

src/pages/v4/[chainName]/p/[projectId]/index.tsx → src/pages/v4/[jbUrn]/index.tsx

@@ -1,6 +1,7 @@
 import { V4ProjectSEO } from 'components/ProjectPageSEO'
 import { FEATURE_FLAGS } from 'constants/featureFlags'
 import { PV_V4 } from 'constants/pv'
+import { jbUrn } from 'juice-sdk-core'
 import { loadCatalog } from 'locales/utils'
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
 import dynamic from 'next/dynamic'
@@ -49,12 +50,12 @@ export const getStaticProps: GetStaticProps<
 
   if (!context.params) throw new Error('params not supplied')
 
-  const projectId = parseInt(context.params.projectId as string)
-  const chainName = context.params.chainName as string
+  const { projectId, chainId } = jbUrn(context.params.jbUrn as string) ?? {}
+
   const props = (await getProjectStaticProps(
-    projectId,
+    Number(projectId),
     PV_V4,
-    chainName,
+    chainId,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   )) as any
   if (props?.props) {
@@ -92,21 +93,21 @@ const _Wrapper: React.FC<PropsWithChildren> = ({ children }) => {
 export default function V4ProjectPage({
   metadata,
   projectId,
-  chainName,
+  chainId,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  if (!chainName || !projectId) {
+  if (!chainId || !projectId) {
     return <div>Invalid URL</div>
   }
 
   return (
     <>
       <V4ProjectSEO
         metadata={metadata}
-        chainName={chainName}
+        chainId={chainId}
         projectId={projectId}
       />
       <_Wrapper>
-        <V4ProjectProviders chainName={chainName} projectId={BigInt(projectId)}>
+        <V4ProjectProviders chainId={chainId} projectId={BigInt(projectId)}>
           <V4ProjectDashboard />
         </V4ProjectProviders>
       </_Wrapper>

src/utils/server/metadata.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { PV_V1, PV_V2, PV_V4 } from 'constants/pv'
+import { JBChainId } from 'juice-sdk-core'
 import { PV } from 'models/pv'
 import { findProjectMetadata } from './ipfs'
 
@@ -9,7 +10,7 @@ import { findProjectMetadata } from './ipfs'
 export const getProjectMetadata = async (
   projectId: string | number,
   pv: PV = PV_V2,
-  chain?: string | undefined,
+  chainId?: JBChainId | undefined,
 ) => {
   if (typeof projectId === 'string') {
     projectId = Number(projectId)
@@ -25,6 +26,6 @@ export const getProjectMetadata = async (
       return findProjectMetadata({ metadataCid })
     case PV_V4:
       const { getV4ProjectMetadata } = await import('./v4Metadata')
-      return getV4ProjectMetadata(projectId, chain)
+      return getV4ProjectMetadata(projectId, chainId)
   }
 }

src/utils/server/pages/props.ts

@@ -1,4 +1,5 @@
 import { PV_V2 } from 'constants/pv'
+import { JBChainId } from 'juice-sdk-core'
 import { ProjectMetadata } from 'models/projectMetadata'
 import { PV } from 'models/pv'
 import { GetStaticPropsResult } from 'next'
@@ -7,16 +8,16 @@ import { getProjectMetadata } from '../metadata'
 export interface ProjectPageProps {
   metadata?: ProjectMetadata
   projectId: number
-  chainName?: string | null
+  chainId?: JBChainId | null
 }
 
 export async function getProjectStaticProps(
   projectId: number,
   pv: PV = PV_V2,
-  chainName?: string | undefined,
+  chainId?: JBChainId | undefined,
 ): Promise<GetStaticPropsResult<ProjectPageProps>> {
   try {
-    const metadata = await getProjectMetadata(projectId, pv, chainName)
+    const metadata = await getProjectMetadata(projectId, pv, chainId)
     if (!metadata) {
       return { notFound: true }
     }
@@ -25,7 +26,7 @@ export async function getProjectStaticProps(
       props: {
         metadata,
         projectId,
-        chainName: chainName ?? null,
+        chainId: chainId ?? null,
       },
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/utils/server/v4Metadata.ts

@@ -2,31 +2,31 @@
 import { getPublicClient } from '@wagmi/core'
 import { OPEN_IPFS_GATEWAY_HOSTNAME } from 'constants/ipfs'
 import {
-  JB_CHAIN_SLUGS,
   readJbDirectoryControllerOf,
   getProjectMetadata as sdkGetProjectMetadata,
 } from 'juice-sdk-core'
 import { JBChainId } from 'juice-sdk-react'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import { PublicClient } from 'viem'
+
 export const getV4ProjectMetadata = async (
   projectId: string | number,
-  chain?: string | undefined,
+  chainId?: JBChainId | undefined,
 ) => {
   if (typeof projectId === 'string') {
     projectId = Number(projectId)
   }
+
   if (isNaN(projectId)) return undefined
+  if (!chainId) throw new Error('Chain ID is required for V4 projects')
 
-  if (!chain) throw new Error('Chain is required for V4 projects')
-  return await V4GetMetadataCidFromContract(projectId, chain)
+  return await V4GetMetadataCidFromContract(projectId, chainId)
 }
 
 const V4GetMetadataCidFromContract = async (
   projectId: number,
-  chainName: string,
+  chainId: JBChainId,
 ) => {
-  const chainId = JB_CHAIN_SLUGS[chainName].chain.id as JBChainId | undefined
   if (!chainId) throw new Error('Chain id not found for chain')
   const jbControllerAddress = await readJbDirectoryControllerOf(wagmiConfig, {
     chainId,

yarn.lock

@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^1.0.3-beta:
-  version "1.0.3-beta"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-1.0.3-beta.tgz#fa8fb21cdf2e291d09a4d5687119315ce4573663"
-  integrity sha512-f812f9e6EPYRWvVLb3+UaUcIKihMBqaPI0Zq9ar+30WUMAi9ePRNYSTK09C2yBqIs3RBtIcDaGoeqUcSYfJm4g==
+juice-sdk-core@^1.5.1-beta:
+  version "1.5.1-beta"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-1.5.1-beta.tgz#80992bd7ca6eff3b7f07d94fbdec0a6845849fae"
+  integrity sha512-24e0270ghPuyN9gCrL+1Jn8g1RTondkp+RcdxEtkrPcDtdlI490uuyDxnfJyJKl13RS6hMNNq8lMomBx2s9SFw==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^1.0.3-beta:
-  version "1.0.3-beta"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-1.0.3-beta.tgz#046a4e036805587d171179d07123451bc051c953"
-  integrity sha512-/9x+rut6On3GdroNdVicCx2Z+nnadJC7PGgnRSn+85gLN4BgEVJfSLZW+xCmX0W5626gsvqacz0lwaGKPFIZOw==
+juice-sdk-react@^1.5.1-beta:
+  version "1.5.1-beta"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-1.5.1-beta.tgz#6dd66100eaf4c4a3a6f68a0dadc50795269cebf6"
+  integrity sha512-nV1CAm5PpGztcqTfNPl1AumJMDXXu5cWJJrMg96AwCTVoAExJpW4jQxnBtEZQA7jv6yUOCejGfoxqAUPYlFsnw==
 
 juice@^10.0.0:
   version "10.0.0"
@@ -16331,6 +16331,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+revnet-sdk@^1.0.1-beta:
+  version "1.0.1-beta"
+  resolved "https://registry.yarnpkg.com/revnet-sdk/-/revnet-sdk-1.0.1-beta.tgz#d83a5ccf7b57baf9190b3182a80b27c32b63d3f7"
+  integrity sha512-jdTnVqZ3RohlWI83y0E1LtoLnt47JZHKRHc7kbucv5zdR/uL7/o7SrXrk92OBT+6TGiV5Tx2XgMwfnaAyW92Ng==
+
 rfdc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"