Require the correct chain

src/components/wallet/RequireWallet.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 
 import { ConnectWalletButton, FMPTypography } from '@/components';
+import { defaultChain } from '@/config/web3modal';
 import { useWallet } from '@/hooks/useWallet';
 
 interface RequireWalletProps {
@@ -12,7 +13,9 @@ interface RequireWalletProps {
 const RequireWallet: React.FC<RequireWalletProps> = ({ children, message }) => {
   const { selectedWallet, selectedAccount } = useWallet();
 
-  if (selectedAccount && selectedWallet) {
+  const connectedToCorrectNetwork = selectedWallet.chainId === defaultChain.chainId;
+
+  if (selectedAccount && selectedWallet && connectedToCorrectNetwork) {
     return <>{children}</>;
   }
 
@@ -31,6 +34,11 @@ const RequireWallet: React.FC<RequireWalletProps> = ({ children, message }) => {
         <FMPTypography variant="h6" gutterBottom>
           {message || 'You need to connect your Web3 wallet to access this content.'}
         </FMPTypography>
+        {!connectedToCorrectNetwork && (
+          <FMPTypography variant="body1" color="error">
+            Please connect to the correct network. {defaultChain.name} is required.
+          </FMPTypography>
+        )}
         <ConnectWalletButton />
       </Box>
     </Box>

src/config/web3modal.ts

@@ -39,6 +39,8 @@ const chains = {
   production: zkSyncSepoliaTestnet,
 };
 
+export const defaultChain = chains[nodeEnv];
+
 if (!chains[nodeEnv]) {
   throw new Error(`Chain not found for node env: ${nodeEnv}`);
 }
@@ -58,10 +60,10 @@ const Web3ModalConfig = {
   projectId,
   siweConfig,
   ethersConfig,
+  defaultChain,
   enableAnalytics: true,
-  chains: [chains[nodeEnv]],
+  chains: [defaultChain],
   allowUnsupportedChain: false,
-  defaultChain: chains[nodeEnv],
 };
 
 export default Web3ModalConfig;

src/contexts/WalletContext.tsx

@@ -9,6 +9,7 @@ import { ethers } from 'ethers';
 import { createContext, ReactNode } from 'react';
 
 export interface WalletDetail {
+  chainId?: number;
   provider?: ethers.Eip1193Provider;
   info?: { name?: string; icon?: string };
 }
@@ -32,16 +33,17 @@ export const WalletProviderContext = createContext<WalletProviderContextType | u
 export const WalletProvider = ({ children }: WalletProviderProps) => {
   const { open: connectWallet } = useWeb3Modal();
   const { disconnect } = useDisconnect();
-  const { isConnected, address } = useWeb3ModalAccount();
+  const { isConnected, address, chainId: selectedChainId } = useWeb3ModalAccount();
   const { walletProvider } = useWeb3ModalProvider();
   const { walletInfo } = useWalletInfo();
 
   const contextValue: WalletProviderContextType = {
     isConnected,
+    selectedAccount: address,
+    selectedWallet: { provider: walletProvider, info: walletInfo, chainId: selectedChainId },
+
     connectWallet,
     disconnectWallet: disconnect,
-    selectedAccount: address,
-    selectedWallet: { provider: walletProvider, info: walletInfo },
   };
 
   return <WalletProviderContext.Provider value={contextValue}>{children}</WalletProviderContext.Provider>;