2

I am writing a dApp/UI for my ERC721 smart contract and facing a recurring issue.

My contract has been deployed to the Rinkeby test network and the contract has been verified on Etherscan, allowing me to test the functionality and specifically, in this case, the minting. Via Etherscan I was successfully able to mint a token, where the transaction value was accurate when my MetaMask prompt appeared.

Unfortunately, when calling the same method and subsequently MetaMask prompt in my UI, the value inputed is inflated by an extreme amount. In this instance, the value is 0.0888 ETH (8.88 * 10 ^16 in WEI) yet the prompt shows 157 ETH, and is throwing a warning that I have insufficient funds (no surprise). This means that I cannot test the minting through the UI, and I fear that the same issue would come up when deployed to the mainnet. I am having a difficult time figuring out what exactly the issue is here, but since both the smart contract and metamask are working together through Etherscan I imagine that it's my code, unless ofcourse, there's some quirk when developing that MetaMask/Web3 have set.

This is what my function looks like when hitting the mint button in JavaScript (Drizzle/React):

async function mint() {      
  const tx = {
      from: account, 
      to: contract_address, 
      value: '88800000000000000',
      data: contract.methods.mint(account, count).encodeABI() 
  };

  const txHash = await window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [tx],
  });
}

The prompt that appears looks like this:

enter image description here

With any luck, you might just know what this is all about and I appreciate any help or insight you could give. Thanks!

1 Answer 1

2

After doing a lot of digging, I was able to solve the issue. For anybody facing the same problem, here is how I approached it.

The fundamental problem is that JavaScript doesn't handle big numbers very well if at all. Writing the value (transaction cost) as a string with the entire number won't be interpreted as it should behind the scenes, and so reads the number incorrectly for the prompt.

There are a few big number packages for JavaScript, but the easiest and most relevant way to do it is by using the "Ethers" package and its parser.

npm install ethers

Once ethers is installed (you may be using this already, and not web3 as I did) you should be able to include it in your project and do the following instead of just putting a basic string/number.

value: ethers.utils.parseEther(PRICE_IN_ETH)['_hex']

This takes your price in Eth and converts it to a big number object as WEI. Since it won't be able to interoperate an object, I tried using .toString, but this simply returned the number itself. You need to access the "_hex" attribute in the object that it returns, and it will provide you with the correct format.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.