How To Connect Web3 With MetaMask?

Question

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?...

Answer 1

You are mixing capital case Web3 with small case web3. Web3.eth does not exits.

Try following:

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

now you can write something like web3.eth

Answer 2

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();
      // Acccounts now exposed
      return web3;
    } catch (error) {
      console.error(error);
    }
  }
  // Legacy dapp browsers...
  else if (window.web3) {
    // Use Mist/MetaMask'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;
  }
});

Answer 3

MetaMask is not only kind of the wallet anymore. There is now more generic Web3modal solution that allows e.g. mobile wallets to connect with your dApp. It supports both web MetaMask and MetaMask mobile via WalletConnect protocol:

https://ethereum.stackexchange.com/a/82532/620