Detecting Metamask Account Changes and Lockouts with React
As a React developer, you probably know how important it is to keep track of changes to user accounts and wallet balances. In this article, we will explore how to detect when a user’s MetaMask account has been changed or locked.
Problem: window.ethereum.on('accountsChanged', function (accounts) { ... }); Not Working
Your approach using the “accountsChanged” event is a good start, but there are a few additional steps you need to take to achieve what you are looking for. Here is 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
checkChangesInAccounts(accounts);
};
}, []);
async function getAccountList() {
// Implement a function to retrieve the current list of accounts from MetaMask
// For demonstration purposes, let's 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 blocked!);
// You can also update the display to indicate this change
// For example, show a red fill effect on the old account
alert(Account ${newAccount} has been changed or blocked. Please check the status of your wallet.);
}
}
useMetaMaskAccounts();
return (
{accounts.map((account) => (
{account}))}
{checkForChangesInAccounts(accounts)}
);
}
What’s changed?
- We’ve added a “useEffect” hook to update the state of the accounts whenever a new account list is retrieved from MetaMask.
- We define two functions: “getAccountList”, which returns the original array of accounts (hardcoded in this example), and “checkForChangesInAccounts”.
- In CheckForChangesInAccounts, we iterate over the updated list of accounts to detect changes. If a new account is found that is 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 talk about next.
- The “getAccountList” function should be implemented according to your specific use case. For demonstration purposes, it returns a hardcoded array of accounts.
- You may want to consider a more robust approach, such as interacting with the MetaMask API or implementing a custom hook that retrieves the list of accounts and handles changes accordingly.
Following this updated example, you should now be able to detect when your users’ MetaMask accounts have changed or been locked. Don’t forget to replace the hard-coded “account1”, “account2”, and “account3” in the getAccountList function with a reliable method for retrieving the current list of accounts from MetaMask.
