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

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;
  }
});