From 87bf4966ead71a053575c707ca93efe6bda574cf Mon Sep 17 00:00:00 2001
From: Ben Schwartz <schwartz.ben0@gmail.com>
Date: Tue, 20 Aug 2024 16:40:08 -0300
Subject: [PATCH 1/2] chore(chain): set up defaultChain

---
 src/config/web3modal.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/config/web3modal.ts b/src/config/web3modal.ts
index 745ba46..87911c8 100644
--- a/src/config/web3modal.ts
+++ b/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;

From 3ce598132e85c18ab9fb1fb5ba65a8f92acb6492 Mon Sep 17 00:00:00 2001
From: Ben Schwartz <schwartz.ben0@gmail.com>
Date: Tue, 20 Aug 2024 16:46:25 -0300
Subject: [PATCH 2/2] feat(chain): require the default chain or do not connect

---
 src/components/wallet/RequireWallet.tsx | 10 +++++++++-
 src/contexts/WalletContext.tsx          |  8 +++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/wallet/RequireWallet.tsx b/src/components/wallet/RequireWallet.tsx
index a6907b1..7f6b65c 100644
--- a/src/components/wallet/RequireWallet.tsx
+++ b/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>
diff --git a/src/contexts/WalletContext.tsx b/src/contexts/WalletContext.tsx
index 1f3c8ac..7862949 100644
--- a/src/contexts/WalletContext.tsx
+++ b/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>;