So erkennen Sie, ob das Benutzerkonto auf Metamask im Frontend getrennt ist

Ich versuche, eine Web3-Anwendung zu erstellen. In meinem Frontend möchte ich erkennen, ob der Benutzer sein Konto in der Metamask-Brieftasche geändert oder die Verbindung getrennt hat, und diese Änderung im Frontend anzeigen. Wie kann ich das tun?

  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]);

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Antworten (1)

Es gibt weitere Ereignisse zum Anhören, um alle Anwendungsfälle abzudecken. Außerdem sollten das Event-Abonnement und die Bereinigung in einen verschoben werden, useEffectum Speicherlecks zu stoppen.

Dies ist ein Beispiel, das Ihnen den Einstieg erleichtern könnte ...

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 */]);
Aber wenn ich zwei oder mehr Konten mit der Website verbinde und dann das aktuell aktive trenne. Dann ist der Status accountgleich dem des anderen verbundenen Kontos und das wird im Frontend widergespiegelt. Obwohl wir das Girokonto getrennt haben. Wie geht man mit diesem Fall um?
Sie erhalten ein accountsChangedEreignis, das Sie verarbeiten können, um Ihren Anwendungsstatus zu aktualisieren
So erkennen Sie, ob das Benutzerkonto auf Metamask im Frontend getrennt ist
AntwortenHierDatenschutz-Bestimmungen1y, 0v