EatTheBlocks Forum

Having issues with metamask

I’m using the implementation of web3/metamask in dapp30 day3 where web3 is connected in frontend

I get this error sometimes on metamask

When I try to set the gas manually it gives

ALERT: [ethjs-rpc] rpc error with payload {"id":8431606484706,"jsonrpc":"2.0","params":["0xf8690c861319718a5000825208949768df7a48b1f8e30771133aca1c42cf71b7d7a88084ff2f86d629a0a611ec97c2aead002146c77b02a2fd5e05dd1f48cb1dc1f2eeefa6e791be3e6aa06c9297764ff722782f11ccbc399cdde388e50605b23f23ffab7dc6f1ebd93ba4"],"method":"eth_sendRawTransaction"} [object Object]

Most times metamask works well but this is giving issues and making it had for users to interact with dapp.

Heres my code

let web3;
let staking;
let un;

const initWeb3 = () => {

return new Promise((resolve, reject) => {

    if(window.ethereum) {

      const web3 = new Web3(window.ethereum);

      ethereum.request({ method: 'eth_requestAccounts' })

        .then(() => {

          resolve(web3);

        })

        .catch(e => {

          reject(e);

        });

      return;

    }

    resolve(new Web3(alert(`You are currently not logged in! Please login to your metamask account and switch to infura testnet then try again. Don't have a metamask? Click here (https://metamask.io/download.html)`)));

  });    

}  

const initContract = () => {
  const contractAddress ='0x687...6e9e6340'
  return new web3.eth.Contract(
    stakingAbi,
    contractAddress
  );
};

const initContract2 = () => {
    const contractAddress ='0x6f53C2a....2A0973E1'
    return new web3.eth.Contract(
      unAbi,
      contractAddress
    );
  };

const initApp = () => {
   web3.eth.net.getNetworkType()
.then(result => {
  if(result == 'main'){}
    else{
      alert('please use mainnet')
    };
});

  const stakes = document.getElementById('stakes');
  const stakesResult = document.getElementById('stakes-result');
  // I removed others so code wouldn't b too long
  
  let accounts;
  let accountInterval = setInterval(function() {
  web3.eth.getAccounts().then(_accounts => {
  accounts = _accounts;
  });
   }, 100);

 stakes.addEventListener('click', (e) => {
    e.preventDefault();
        staking.methods.totalStakes().call()
    .then(result => {
      stakesResult.innerHTML = `${web3.utils.fromWei(result.toString(), 'ether')} URE`;
    })
    .catch(() => {
      stakesResult.innerHTML = `error`;
    });
  });

  // I removed others so code wouldn't b too long

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

HTML Code

<html>

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="index.css">

    <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>

    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>

    <script src="web3.js"></script>

    <script src="inde.js"></script>

    <script src="stakingAb.js"></script>

    <script src="unAbi.js"></script>

  </head>

  <body>
...

I’d appreciate a better way to implement metamask kindly help thanks

1 Like

mm, seems like a typo where you set a gasLimit too low.

This is just the beginning of the course where we do things in a very primitive way.

From Day10 we use React and setup web3 in a different way, you can check this.