Replace some useChainIds

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

@@ -13,19 +13,19 @@ import useMobile from 'hooks/useMobile'
 import Link from 'next/link'
 import { ProjectHeaderPopupMenu } from 'packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu'
 import V4ProjectHandleLink from 'packages/v4/components/V4ProjectHandleLink'
+import { useCurrentRouteChainId } from 'packages/v4/hooks/useCurrentRouteChainId'
 import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
 import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
 import { settingsPagePath, v4ProjectRoute } from 'packages/v4/utils/routes'
 import { twMerge } from 'tailwind-merge'
-import { useChainId } from 'wagmi'
 import { useV4ProjectHeader } from './hooks/useV4ProjectHeader'
 import { ProjectHeaderStats } from './ProjectHeaderStats'
 
 export type SocialLink = 'twitter' | 'discord' | 'telegram' | 'website'
 
 export const V4ProjectHeader = ({ className }: { className?: string }) => {
   const socialLinks = useSocialLinks()
-  const chainId = useChainId()
+  const chainId = useCurrentRouteChainId()
 
   const {
     title,
@@ -103,13 +103,14 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
         </div>
         <div className="flex flex-col justify-between gap-8 md:flex-row md:gap-12">
           <div className="flex min-w-0 flex-col gap-3">
-            {subtitle &&
-              (subtitle.type === 'tagline' ? (
-                <TruncatedText
-                  className="text-grey-700 dark:text-slate-50 md:text-lg"
-                  text={subtitle.text}
-                />
-              ) : null)
+            {
+              subtitle &&
+                (subtitle.type === 'tagline' ? (
+                  <TruncatedText
+                    className="text-grey-700 dark:text-slate-50 md:text-lg"
+                    text={subtitle.text}
+                  />
+                ) : null)
               // <Subtitle subtitle={subtitle.text} />
             }
             <div className="text-grey-500 dark:text-slate-200">
@@ -129,7 +130,11 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                 {gnosisSafe && projectId && (
                   <GnosisSafeBadge
                     safe={gnosisSafe}
-                    href={`${v4ProjectRoute({ projectId, chainId })}/safe`}
+                    href={
+                      chainId
+                        ? `${v4ProjectRoute({ projectId, chainId })}/safe`
+                        : undefined
+                    }
                   />
                 )}
               </span>

src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/V4TokensPanel.tsx

@@ -11,13 +11,12 @@ import { SettingOutlined } from '@ant-design/icons'
 import { Button, Tooltip } from 'antd'
 import { AddTokenToMetamaskButton } from 'components/buttons/AddTokenToMetamaskButton'
 import { ISSUE_ERC20_EXPLANATION } from 'components/strings'
-import { useJBContractContext } from 'juice-sdk-react'
+import { useJBChainId, useJBContractContext } from 'juice-sdk-react'
 import { V4TokenHoldersModal } from 'packages/v4/components/modals/V4TokenHoldersModal/V4TokenHoldersModal'
 import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { v4ProjectRoute } from 'packages/v4/utils/routes'
 import { useCallback, useState } from 'react'
 import { reloadWindow } from 'utils/windowUtils'
-import { useChainId } from 'wagmi'
 import { useV4BalanceMenuItemsUserFlags } from './hooks/useV4BalanceMenuItemsUserFlags'
 import { useV4TokensPanel } from './hooks/useV4TokensPanel'
 import { useV4YourBalanceMenuItems } from './hooks/useV4YourBalanceMenuItems'
@@ -181,7 +180,7 @@ export const V4TokensPanel = () => {
 }
 
 const ProjectTokenCard = () => {
-  const chainId = useChainId()
+  const chainId = useJBChainId()
   const { projectId: projectIdBig } = useJBContractContext()
   const projectId = Number(projectIdBig)
 

src/packages/v4/views/V4ProjectSettings/ProjectSettingsLayout.tsx

@@ -2,15 +2,15 @@ import { Cog6ToothIcon, XMarkIcon } from '@heroicons/react/24/solid'
 import { Trans } from '@lingui/macro'
 import { useJBContractContext } from 'juice-sdk-react'
 import Link from 'next/link'
+import { useCurrentRouteChainId } from 'packages/v4/hooks/useCurrentRouteChainId'
 import { v4ProjectRoute } from 'packages/v4/utils/routes'
-import { useChainId } from 'wagmi'
 
 export const ProjectSettingsLayout: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const { projectId } = useJBContractContext()
-  const chainId = useChainId()
-  
+  const chainId = useCurrentRouteChainId()
+
   return (
     <>
       <header className="sticky top-0 right-0 z-10 mb-8 border-b border-solid border-b-grey-100 bg-white dark:border-b-slate-500 dark:bg-slate-900">
@@ -21,7 +21,11 @@ export const ProjectSettingsLayout: React.FC<React.PropsWithChildren> = ({
           </h1>
 
           <Link
-            href={v4ProjectRoute({ projectId: Number(projectId), chainId })}
+            href={
+              chainId
+                ? v4ProjectRoute({ projectId: Number(projectId), chainId })
+                : undefined
+            }
             className="text-secondary"
           >
             <XMarkIcon className="h-6 w-6" />

src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts

@@ -1,11 +1,13 @@
 import { useJBContractContext } from 'juice-sdk-react'
+import { useCurrentRouteChainId } from 'packages/v4/hooks/useCurrentRouteChainId'
 import { settingsPagePath } from 'packages/v4/utils/routes'
-import { useChainId } from 'wagmi'
 import { SettingsPageKey } from '../ProjectSettingsDashboard'
-
 export function useSettingsPagePath(key?: SettingsPageKey) {
   const { projectId } = useJBContractContext()
-  const chainId = useChainId()
+  const chainId = useCurrentRouteChainId()
+  if (!chainId) {
+    return undefined
+  }
 
-  return settingsPagePath({ projectId: Number(projectId), chainId }, key, )
+  return settingsPagePath({ projectId: Number(projectId), chainId }, key)
 }