Detecting and Blocking MetaMask Account Changes Using 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 MetaMask user account has been changed or blocked.
Problem: window.ethereum.on('accountsChanged', function (accounts) { ... }); is 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 state of 'accounts' with the current list of accounts in MetaMask
setAccounts(accounts);
// Check for changes in the account list and update the display accordingly
checkChangesInAccounts(accounts);
};
}, []);
asynchronous 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;
}
asynchronous function checkForChangesInAccounts(accounts) {
const newAccounts = [];
const oldAccounts = [...accounts];
accounts.forEach((newAccount, index) => {
if (oldAccounts[index] !== newAccount) {
console.log(Account ${newAccount} modified or blocked!);
// 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 modified or blocked. Please check the status of your wallet.);
}
}
useMetaMaskAccounts();
return (
{accounts.map((account) => (
{account}))}
{checkForChangesInAccounts(accounts)}
);
}
What’s changed?
- We added a “useEffect” hook to update the state of the accounts each time a new account list is retrieved from MetaMask.
- We define two functions: “getAccountList”, which returns the original array of accounts (encoded in this example), and “checkForChangesInAccounts”.
- In CheckForChangesInAccounts, we review the updated list of accounts to detect changes. If a new account is detected 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 will discuss later.
- The “getAccountList” function should be implemented according to your specific use case. For demonstration purposes, it returns an encoded 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 been modified or locked. Don’t forget to replace the hard-coded array of “account1”, “account2”, and “account3” in the “getAccountList” function with a reliable method for retrieving the current list of accounts from MetaMask.