当 metamask 手动连接时 web3js 拦截

Question

目前我有以下代码在浏览器中连接metamask钱包（使用reactjs和web3js）：

function App() {
  const [contract, setContract] = useState();
    const [account, setAccount] = useState();
    const[web3Obj, setWeb3Obj]=useState();

  useEffect(()=>{

    async function load(){
        const web3 = new Web3(Web3.givenProvider || 'http://http://localhost:7545');
        setWeb3Obj(web3);
        const accounts = await web3.eth.requestAccounts();
        console.log(accounts[0] + " is the account");
        setAccount(accounts[0]);
       $.get( "getcontractaddress")
          .done(  function( data ) {


              const _contract = new web3.eth.Contract(abi, data);
              _contract.address = data;
              console.log(_contract.address + " is the contract");
              setContract(_contract);

          });



    }
     load();
  },[])

  return(
  
  );

}

我删除了 return();摘自片段，因为它与问题无关。

每当我在 metamask 中切换到不同的帐户时，“帐户”对象都不会更新。如何拦截metamask切换账户事件自动重置账户对象到新账户？

Answer 1

您的组件不知道您何时在 Metamask 中切换帐户。为了检测帐户更改，Metamask 提供了 accountsChanged 事件。

ethereum.on('accountsChanged', handler: (accounts: Array<string>) => void);

您可以将事件添加到您的加载函数或创建另一个 useEffect。您还可以在使用 ethereum.removeListener.

卸载组件时删除该事件

useEffect(() => {
    const { ethereum } = window;
    if (ethereum && ethereum.on) {
    
      const handleAccountsChanged = (accounts) => {
        console.log("accountsChanged", accounts);
        setAccount(accounts[0])
      };

      ethereum.on('connect', handleConnect);

      return () => {
        if (ethereum.removeListener) {
          ethereum.removeListener('accountsChanged', handleAccountsChanged);
        }
      };
    }
  }, []);

当 metamask 手动连接时 web3js 拦截

web3js intercepting when metamask connects manually

javascript

reactjs

blockchain

web3js

metamask