Cómo detectar si la cuenta del usuario en Metamask está desconectada en la interfaz

Estoy tratando de construir una aplicación web3. En mi interfaz, quiero detectar si el usuario cambió su cuenta en la billetera Metamask o se desconectó y quiero mostrar este cambio en la interfaz. ¿Como lo puedo hacer?

  const [account, setaccount] = useState('0x0');
  window.ethereum.on('accountsChanged',async (accounts) =>{
    const changedAccounts =await window.ethereum.request({method: 'eth_requestAccounts'});
    setaccount(changedAccounts[0]);
    console.log('changedAccounts')
  })
  useEffect(async () => {
    if(!window.ethereum){
      window.alert('Please consider installing Metamask');
    }else{
      const accounts =await window.ethereum.request({method: 'eth_requestAccounts'});
      setaccount(accounts[0]);
    }
    if(!window.ethereum.isConnected()){
      console.log('Disconnected')
    }else{
      console.log('Connected')
    }
    console.log('useEffect')
  }, [account]);

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Respuestas (1)

Hay más eventos para escuchar para cubrir todos los casos de uso. Además, la suscripción a eventos y la limpieza se deben mover a useEffectpara detener las fugas de memoria.

Este es un ejemplo que podría ayudarlo a comenzar...

const [account, setaccount] = useState('0x0');
useEffect(() => {
  if (!window.ethereum) {
    // Nothing to do here... no ethereum provider found
    return;
  }
  const accountWasChanged = (accounts) => {
    setaccount(accounts[0]);
    console.log('accountWasChanged');
  }
  const getAndSetAccount = async () => {
    const changedAccounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    setaccount(changedAccounts[0]);
    console.log('getAndSetAccount');
  }
  const clearAccount = () => {
    setaccount('0x0');
    console.log('clearAccount');
  };
  window.ethereum.on('accountsChanged', accountWasChanged);
  window.ethereum.on('connect', getAndSetAccount);
  window.ethereum.on('disconnect', clearAccount);
  window.ethereum.request({ method: 'eth_requestAccounts' }).then(accounts => {
    console.log('accounts', accounts);
    // No need to set account here, it will be set by the event listener
  }, error => {
    // Handle any UI for errors here, e.g. network error, rejected request, etc.
    // Set state as needed 
  })
  return () => {
    // Return function of a non-async useEffect will clean up on component leaving screen, or from re-reneder to due dependency change
    window.ethereum.off('accountsChanged', accountWasChanged);
    window.ethereum.off('connect', getAndSetAccount);
    window.ethereum.off('disconnect', clearAccount);
  }
}, [/* empty array to avoid re-request on every render, but if you have state related to a connect button, put here */]);
Pero si conecto dos o más cuentas al sitio web y luego desconecto la que está actualmente activa. Luego, el estado accountserá igual al de la otra cuenta conectada y eso se reflejará en la interfaz. A pesar de que desconectamos la cuenta corriente. ¿Cómo manejar este caso?
Recibirá un accountsChangedevento que puede manejar para actualizar el estado de su aplicación
Cómo detectar si la cuenta del usuario en Metamask está desconectada en la interfaz
RespuestasAquíPolítica de privacidad1y, 0v