How can I detect metamask accounts changed and locked?

Question

I use react !

useEffect(() => {
    window.ethereum.on('accountsChanged', function (accounts) {
      console.log(accounts[0]);
    });
  }, []);

It did not work. there is no console.log.

I think browser doesn't know account changed.

and is there anyway that I can notice when my wallet locked ? window.ethereum._metamask.isUnlocked() is deprecated function :(

---

const checkIfAccountChanged = async () => {
    try {
      ethereum.on('accontsChanged', accounts => {
        console.log('connected', accounts[0]);
        saveWalletAddress(accounts[0]);
      });
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    checkIfAccountChanged();
  }, []);

I update code !

---

I connect one wallet.

Hi my dapp doesn't detect when metamask account changed or locked.

I click '연결' means not connected. browser doesnt know

---

This is full code

const App = () => {
  const { value: isLoading, setValue: setIsLoading } = useValue(true);
  const { walletAddress, saveWalletAddress, clearWalletAddress } = useWalletAddressStore();

  const checkIfAccountChanged = async () => {
    try {
      ethereum.on('accontsChanged', accounts => {
        console.log('connected', accounts[0]);
        saveWalletAddress(accounts[0]);
      });
    } catch (error) {
      console.log(error);
    }
  };

 useEffect(() => {
   const walletCompany = getLocalStorage('wallet');
    const connectMetamaskAuto = async () => {
      const res = await connetMetamask();
      res.address && saveWalletAddress(res.address);
      setIsLoading(false);
    };
    const connectCoinbaseAuto = async () => {
      const res = await connectCoinbase();
      res.address && saveWalletAddress(res.address);
      setIsLoading(false);
    };
    if (walletCompany) {
      walletCompany === 'metamask' ? connectMetamaskAuto() : connectCoinbaseAuto();
    } else setIsLoading(false);
  }, []);

  useEffect(() => {
    checkIfAccountChanged();
  }, []);

---

const { value: isLoading, setValue: setIsLoading } = useValue(true);
  const [wallet, setWallet] = useState<string>('');
  // const { walletAddress, saveWalletAddress, clearWalletAddress } = useWalletAddressStore();

  const checkIfAccountChanged = async () => {
    try {
      ethereum.on('accontsChanged', accounts => {
        console.log('connected', accounts[0]);
        setWallet(accounts[0]);
      });
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
   const walletCompany = getLocalStorage('wallet');
    const connectMetamaskAuto = async () => {
      const res = await connetMetamask();
      res.address && saveWalletAddress(res.address);
      setIsLoading(false);
    };
    const connectCoinbaseAuto = async () => {
      const res = await connectCoinbase();
      res.address && saveWalletAddress(res.address);
      setIsLoading(false);
    };
    if (walletCompany) {
      walletCompany === 'metamask' ? connectMetamaskAuto() : connectCoinbaseAuto();
    } else setIsLoading(false);
  }, []);

  useEffect(() => {
    checkIfAccountChanged();
  }, []);

Answer 1

It is almost similar to your answer. Because you forgot to update the state of an account.

const [currentAccount, setCurrentAccount] = useState("");    

const checkIfAccountChanged = async () => {
        try {
          const {ethereum} = window;
          ethereum.on('accountsChanged', (accounts) => {
            console.log("Account changed to:", accounts[0]);
            setCurrentAccount(accounts[0]);
          });
    
        } catch (error) {
          console.log(error);
        }
      }

  useEffect(() => {
    checkIfAccountChanged();
  }, []);

In the checkIfAccountChanged function, when the account changes, you need to update the state. If you log the details into the console, it will be shown only in your console.

Tell me if it helps!

EDIT:

Also remember, when you are changing the account, you should connect before changing it.

Like this:

In the first image, even though I have changed the account, it is not connected so it is not changed.

In the second image, you can see there is something called connect, you should click on it to really change the account.

EDIT2:

APP.js

import React, { useState, useEffect } from "react";
import { ethers } from "ethers";

export default function App() {
  const [currentAccount, setCurrentAccount] = useState("");

  const checkIfMetamaskIsInstalled = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        console.log(`Install Metamask wallet`);
      } else {
        console.log(`we have ethereum object ${ethereum}`);
      }

      const accounts = await ethereum.request({ method: "eth_accounts" });

      if (accounts.length !== 0) {
        const account = accounts[0];
        console.log("Found an authorized account:", account);
        setCurrentAccount(account);
      } else {
        console.log("No authorized account found");
      }
    } catch (error) {
      console.log(error);
    }
  };

  const checkIfAccountChanged = async () => {
    try {
      const {ethereum} = window;
      ethereum.on("accountsChanged", (accounts) => {
        console.log("Account changed to:", accounts[0]);
        setCurrentAccount(accounts[0]);
      });
    } catch (error) {
      console.log(error);
    }
  };

  const connectWallet = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        alert("get metamask!");
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });
      console.log("connected!", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };



  useEffect(() => {
    checkIfMetamaskIsInstalled();
    checkIfAccountChanged();
  }, []);

  return (
    <div className="mainContainer">
      {!currentAccount ? (
        <button className="waveButton" onClick={connectWallet}>
          Connect Wallet
        </button>
      ) : (
        <button className="waveButton" onClick={connectWallet}>
          {currentAccount}
        </button>
      )}
    </div>
  );
}

Main.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

This is simple connect to wallet application. Check if it works in your browser.

Link's here

Answer 2

This is how I handle account change inside class component.

componentDidUpdate(prevProps) {
if (typeof window.ethereum !== 'undefined') {
    // detect Network account change
    window.ethereum.on('chainChanged', networkId => {
        console.log('chainChanged', networkId);
    });

    window.ethereum.on('accountsChanged', async(accounts) => {          
        //console.log('accountChanged', accounts);
        if(accounts.length > 0){
          // connected              
        } else {
          // not connected              
        }
    });

    window.ethereum.on('disconnect', (error) => {

    });
}

}