Detecting Metamask Account Changes and Locks with React

As a React developer, you’re likely familiar with the importance of staying up-to-date with changes to your users’ accounts and wallet balances. In this article, we’ll explore how to detect when a user’s MetaMask account has changed or been locked.

The Issue: window.ethereum.on('accountsChanged', function (accounts) { ... }); Not Working

Your approach using the accountsChanged event is a good start, but it requires a few extra steps to achieve what you’re looking for. Here’s an updated example that should help:

import React from 'react';


function MetamaskDetector() {

  const accounts = useMetaMaskAccounts();

  

  useEffect(() => {

    return async () => {

      const accounts = await getAccountList();

      

      // Update the accounts state with the current list of MetaMask accounts

      setAccounts(accounts);

      

      // Check for changes in the account list and update the display accordingly

      checkForChangesInAccounts(accounts);

    };

  }, []);


  async function getAccountList() {

    // Implement a function to retrieve the current account list from MetaMask

    // For demonstration purposes, assume this function returns an array of accounts

    const accounts = ['account1', 'account2', 'account3'];

    

    return accounts;

  }


  async function checkForChangesInAccounts(accounts) {

    const newAccounts = [];

    const oldAccounts = [...accounts];

    

    accounts.forEach((newAccount, index) => {

      if (oldAccounts[index] !== newAccount) {

        console.log(Account ${newAccount} changed or locked!);

        // You can also update the display to indicate this change

        // e.g., show a red fill effect on the old account

        alert(Account ${newAccount} has been changed or locked. Please check your wallet status.);

      }

    });

  }


  useMetaMaskAccounts();

  

  return (

    

      {accounts.map((account) => (

        
{account}

      ))}

      

      {checkForChangesInAccounts(accounts)}

    

  );

}

What’s Changed?

• We’ve added an useEffect hook to update the accounts state whenever a new account list is retrieved from MetaMask.

• We define two functions: getAccountList, which returns an initial array of accounts (in this example, it’s hardcoded), and checkForChangesInAccounts.

• In checkForChangesInAccounts, we iterate through the updated accounts list to detect changes. If a new account is found that’s different from the previous one, we log a message and update the display accordingly.

Important Notes:

• This example uses the useMetaMaskAccounts hook, which we’ll discuss next.

• The getAccountList function should be implemented according to your specific use case. For demonstration purposes, it returns an array of hardcoded accounts.

• You may want to consider using a more robust approach, such as interacting with MetaMask’s API or implementing a custom hook that retrieves the account list and handles changes accordingly.

By following this updated example, you should now be able to detect when your users’ MetaMask accounts have changed or been locked. Remember to replace the hardcoded account1, account2, and account3 array in the getAccountList function with a reliable method of retrieving the current account list from MetaMask.

Ethereum Sync Certain