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 = ({ 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 = ({ children, message }) => { {message || 'You need to connect your Web3 wallet to access this content.'} + {!connectedToCorrectNetwork && ( + + Please connect to the correct network. {defaultChain.name} is required. + + )} 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; 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 { 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 {children};