Handling 'Switch Network', 'Wrong Network' & 'Switch Account' using Moralis in React Dapp

Moralis General
#1

My React Minting Dapp is for Avalanche. I have implemented safeguards for ‘User on Wrong Network (wrong chain)’ simply using the useChain() hook in the following manner:

In my App.jsx:

const { switchNetwork, chainId, chain } = useChain();
useEffect(() => {
    const connectorId = window.localStorage.getItem("connectorId");
    if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading){
        enableWeb3({ provider: connectorId });}
    if (chainId != '0xa86a') {
      if (window.confirm("You're on the wrong network! Click OK to switch to Avalanche C-chain!")) {
              switchNetwork("0xa86a")
            } else {
              alert("You're on the wrong network & will result in loss of funds due to failed transaction!
Switch to Avalance C-chain manually in your Metamask Wallet!");
            }
    }  
  }, [isAuthenticated, isWeb3Enabled, chain]);

This way, while logging in if the user is on any network other than Avalanche c-chain, a pop-up appears, and on clicking **ok** the Moralis switchNetwork function switches metamask to Avalanche chain. On clicking cancel a second warning appears. Same if the user switches networks mid-way after logging in for any reason.

Similarly,
I am using const { account } = useMoralis(); to handle any user account switches. The user address displayed in my navbar + all traits obtained from the wallet immediately change automatically when user switches from one account to another.

My question is: Is there any negative side to my method? I see almost everyone else uses event listeners in their React dapps to handle these things. However my app responds to the above changes and handles them flawlessly without event listeners. Am I missing something?

1 Like
#2

i mean if it works and you havent came across any bugs then its fine. I personally prefer to do it with the change chain event. the only thing here is that if you decode to support more networks in the futrue the if statement you have will be a problem. if you do ever want to do this you should make an enum of the supported chains and use this as the check that the current chain is in the enum. something like this if your using typescript

export enum SupportedChainId {
  MAINNET = 1,
  ROPSTEN = 3,
  RINKEBY = 4,
  GOERLI = 5,
  KOVAN = 42,

  ARBITRUM_ONE = 42161,
  ARBITRUM_RINKEBY = 421611,

  OPTIMISM = 10,
  OPTIMISTIC_KOVAN = 69,

  POLYGON = 137,
  POLYGON_MUMBAI = 80001,
}

export const CHAIN_IDS_TO_NAMES = {
  [SupportedChainId.MAINNET]: 'mainnet',
  [SupportedChainId.ROPSTEN]: 'ropsten',
  [SupportedChainId.RINKEBY]: 'rinkeby',
  [SupportedChainId.GOERLI]: 'goerli',
  [SupportedChainId.KOVAN]: 'kovan',
  [SupportedChainId.POLYGON]: 'polygon',
  [SupportedChainId.POLYGON_MUMBAI]: 'polygon_mumbai',
  [SupportedChainId.ARBITRUM_ONE]: 'arbitrum',
  [SupportedChainId.ARBITRUM_RINKEBY]: 'arbitrum_rinkeby',
  [SupportedChainId.OPTIMISM]: 'optimism',
  [SupportedChainId.OPTIMISTIC_KOVAN]: 'optimistic_kovan',
}

if your using just normal javascript with react you can change the enum to an object but its way more difficult to work with. but to awnser your question if it works and no bugs are found then yeah do it this way, on chai change event soultion is just a nice one liner so less things can potentially go wrong

1 Like
#3

Thanks! I will keep this in mind for implementing a multi-chain compatible dapp. What do you mean by on chain change event solution? The one I have implemented here?
I guess since any change in chain or user causes a change in state and hence causes a re-render this works. I guess in a vanilla javascript/html app one would need event listeners. Am I correct?

1 Like
#4

sorry i meant the event handler for it sorry. yeah exactly its the change of state that gets it working

1 Like