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