• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

233
Views
web3js intercepting when metamask connects manually

Currently I have the following code to connect the metamask wallet in the browser (using reactjs and 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(
  
  );

}

I deleted the return(); part from the snippet because its irrelevant to the question.

Whenever I switch to a different account in metamask, the "account" object is not being updated. How can I intercept the event of metamask switching accounts to automatically reset the account object to the new account?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Your component does not know when you switch accounts in Metamask. To detect account changes, Metamask provides the accountsChanged event.

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

You can add the event to your load function or make another useEffect. You can also remove the event when your component unmounts using 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);
        }
      };
    }
  }, []);
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error