Metamask: when does actually `accountChanged` event emits?

If you are an Ethereum application developer and are looking for information about accountChanged event, you will find that there is no much useful information available out there. I will also share some useful tips about building a dApp intergrating with Metamask.

accountsChanged will be emitted whenever the user's exposed account address changes.

☝️ This is how Metamask define the behavior of accountsChanged event. Let's start exploring when actually user's exposed account address changes.

First thing to know is either eth_accounts or eth_requestAccounts will always return an array with utmost one element. Yes, even though if you have linked two or more accounts, Metamask will only return the currently selected account in Metamask. Metamask may return multiple accounts in future and they have mentioned this in their docs.

☝️ If you have more than one Ethereum accounts linked in your Metamask wallet, you will prompt to select accounts which you need to connect with the dApp.

Still eth_accounts or eth_requestAccounts will provide you only one account. I will share two scenarios where this event will emit.

1) Switch between accounts which are connected with the dApp.

Let's assume that you have three accounts A,B,C in Metamask. Only A and B is connected with your dApp. If you switch from A to B, accountsChanged event will be emitted with account B in the array. The reason is Metamask has to change the exposed account to the dApp in this case. Important thing to note here is if you switch from B to C in Metamask, accountsChanged event will not be emitted as C is not exposed to your dApp.

2) Disconnect the currently selected account.

When you disconnect the currently selected account, obviously Metamask has to change the account address that it can expose to the dApp. So the accountsChanged event will be called with the next Ethereum account linked with the dApp or will be called with an empty array.

Sample code which you can inspired from

You can try this React code snippet and modify it according to your requirements.

useEffect(() => {
    if (window.ethereum) {
      window.ethereum.on("accountsChanged", (accounts) => {
        if (accounts.length > 0) {
          setAdress(accounts[0]);
        } else {
          // setWallet("");
          // setStatus("🦊 Connect to Metamask using the top right button.");
        }
      });
    }
  }, []);

⭐ Feel free to have a look into this repo. I have implemented most frequently used Metamask events and methods here.