Actualmente tengo el siguiente código para conectar la billetera metamask en el navegador (usando reactjs y 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( ); }Eliminé el retorno (); parte del fragmento porque es irrelevante para la pregunta.
Cada vez que cambio a una cuenta diferente en metamask, el objeto "cuenta" no se actualiza. ¿Cómo puedo interceptar el evento de metamask cambiando de cuenta para restablecer automáticamente el objeto de la cuenta a la nueva cuenta?
Su componente no sabe cuándo cambia de cuenta en Metamask. Para detectar cambios en la cuenta, Metamask proporciona el evento accountsChanged .
ethereum.on('accountsChanged', handler: (accounts: Array<string>) => void); Puede agregar el evento a su función de carga o hacer otro useEffect . También puede eliminar el evento cuando su componente se desmonte usando 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); } }; } }, []);