EatTheBlocks Forum

Day 6 MetaMask Saying there is a contract error

I am doing the front end for Day 6 and I keep getting this error

This is my index.js code so far :

import Web3 from 'web3';
import EtherWallet from '../build/contracts/EtherWallet.json';

let web3;
let etherWallet;

//Initialize Web3
const initWeb3 = () => {
  return new Promise((resolve, reject) => {
if(typeof window.ethereum !== 'undefined') {
  const web3 = new Web3(window.ethereum);
  window.ethereum.enable()
    .then(() => {
      resolve(
        new Web3(window.ethereum)
      );
    })
    .catch(e => {
      reject(e);
    });
  return;
}
if(typeof window.web3 !== 'undefined') {
  return resolve(
    new Web3(window.web3.currentProvider)
  );
}
resolve(new Web3('http://localhost:9545'));
  });
};

const initContract = async () => {
  const networkId = await web3.eth.net.getId();
  return new web3.eth.Contract(
EtherWallet.abi, 
EtherWallet
  .networks[networkId]
  .address
  );
};

const initApp = () => {

const $deposit = document.getElementById('deposit');
const $depositResult = document.getElementById('deposit-result');

const $send = document.getElementById('send');
const $sendResult = document.getElementById('send-result');

const $balance = document.getElementById('balance');

let accounts = [];
  web3.eth.getAccounts().then(_accounts =>{
accounts = _accounts;
  });


  $deposit.addEventListener('submit', e => {
//prevent form from submitting otherwise page will reload
e.preventDefault();
//list of all inputs being submitted
const amount  = e.target.elements[0].value;
etherWallet.methods
.deposit()
.call()
 .then(() => {
    $depositResult.innerHTML = `The amount of ${amount} was successfully deposited`;
  
  })
  .catch(() => {
   $depositResult.innerHTML = 'Ooops... there was an error while trying to deposit';
  });
  });


$send.addEventListener('submit', e => {
  e.preventDefault();
  const address = e.target.elements[0].value;
  const amount =  e.target.elements[1].value;

  etherWallet.methods
  .send(address,amount)
  .send({from: accounts[0]})
  .then(()  => {
  $sendResult.innerHTML =`$The address of ${address} and amount of ${amount} was successfully sent`;


  }).catch(()=> {
$sendResult.innerHTML = `The address is ${address} and the amount is ${amount}` ;


  });



});


$balance.addEventListener('submit', e => {
  e.preventDefault();
  
  etherWallet.methods
  .balanceOF()
  .send({from: accounts[0]})
  .then(()   => {

$balance.innerHTML = `You have a balance of ${balanceOF}`;


  });





});



};

document.addEventListener('DOMContentLoaded', () => {
  initWeb3()
.then(_web3 => {
  web3 = _web3;
  return initContract();
})
.then(_etherWallet => {
  etherWallet = _etherWallet;
  initApp(); 
})
.catch(e => console.log(e.message));
});

Which action are you trying to do?

Also:

  • is Metamask pointing to correct network?
  • Have you reset accounts in Metamask?
  • Is the smart contract in the correct state?

I am trying to do the action of sending Ether to an Address.

  • Yes MetaMask Is pointing to my Ganache Instance
  • Yes I reset accounts in metamask
  • I am not sure, I think it should be. How do I check for correct state ?

now I get this error

mmm… can you try to git clone the end folder of the repo and try to run it?

Also, have you synchronized the private keys of Ganache and Metamask? If no, the addresses of Metamask will have no fake ether on Ganache and you wont be able to use them to send any transaction.

By the way, by checking the state, I just mean to make sure that you have run your migration and that it put the right data in the smart contract. For example some smart contracts have some initialization logic, like setting an admin address that protect access to some function, etc…

1 Like

ok will do ! Thank you

There seems to be a bug in the Send function.
When we try to send gwei to any metamask account (apart from account #1), it does not refresh the balance of that account in metamask rather the balance of wallet is decreased.
I mean what we test on remix, the same is not replicated via the front end

I thought we were using Ropsten?

Ropsten is only for show you how to deploy to testnet/mainnet in day5.
Otherwise its always more clunky to use testnet for development, so we use local ganache after.

1 Like

@jay3183, do you still face the issue " run out of gas" ?