[Ethereum] How To Connect Web3 With MetaMask

metamasktruffleweb3js

No tutorial can help me, I have watched almost every major tutorial on Youtube and read a ton of results from Google…

I have on my HTML file imported the web3.min.js (copied from Truffle pet-shop because web3 does not come with this anymore!)

And then on a script tag below that, for testing, I manage to connect it with Metamask, I thin, with

    window.addEventListener('load', () => {
  if (typeof Web3 !== 'undefined') {
    web3js = new Web3(Web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!');
    web3js = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
  }
});

But still Web3.eth is undefined, so I can't connect to a contract or make calls.

Can anyone help me with the basic steps to interact with the contract from a front end?…

Best Answer

The Metamask interface has changed to enable privacy and consent from the user before allowing any access to the account information contained within Metamask. This is done by injecting an "ethereum" object to the browser window. You must now wait for the ethereum.enable() function to return true after prompting the user. More details here: https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

window.addEventListener('load', () => {
 // Wait for loading completion to avoid race conditions with web3 injection timing.
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.enable();
      // Accounts now exposed
      return web3;
    } catch (error) {
      console.error(error);
    }
  }
  // Legacy dapp browsers...
  else if (window.web3) {
    // Use MetaMask/Mist's provider.
    const web3 = window.web3;
    console.log('Injected web3 detected.');
    return web3;
  }
  // Fallback to localhost; use dev console port by default...
  else {
    const provider = new Web3.providers.HttpProvider('http://127.0.0.1:9545');
    const web3 = new Web3(provider);
    console.log('No web3 instance injected, using Local web3.');
    return web3;
  }
});
Related Topic