Handling Multiple Injected Extensions

If a user has both Metamask and Coinbase Wallet extensions installed, connecting to the injected provider can lead to a situation where both extensions raise a pop-up window to connect wallet.

If you are using window.ethereum to support Metamask on your dapp, you can prevent this scenario with the following code snippet, which specifies that your injected provider option only works with Metamask:

const connectWallet = async () => {
  if (typeof window.ethereum !== "undefined") {
    let provider = window.ethereum;
    // edge case if MM and CBW are both installed
    if (window.ethereum.providers?.length) {
      window.ethereum.providers.forEach(async (p) => {
        if (p.isMetaMask) provider = p;
      });
    }
    await provider.request({
      method: "eth_requestAccounts",
      params: [],
    });
  }
};

Use this pattern to access your provider throughout the dapp. If you are using a headless third-party library such as web3-react or wagmi hooks, please refer to the InjectedConnector as "Injected" on your dapp.