How do you input the `msg.value` in frontend?

Question

How on earth do you input the value of a transaction? I have my entire frontend working because they all require 0 value, but my last function requires 0.02 ether and I can't get it to input in react.js. I've tried many things and I'll get errors for too many inputs. I'm using ethers.js.

I can also successfully add a value to my transaction on etherscan and remix IDE with no issue, this is only an issue with building my frontend.

Answer 1

With ethers.js, you give the value in the overrides object with the value parameter. Here's the full documentation: https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall

So for example you can do: contractInstance.myFunc(someParam, { value: someValue });. Note that the someValue should be a BigNumber instance, so you can initialize it for example: const someValue = BigNumber.from(123);

Answer 2

Since, we already have ethers library, we won't have to deal with BigInt.

{value: ethers.utils.parseEther('1000.0')}
// "1000000000000000000000

To tackle BigInt, one may refer to: Ethereum Stackexchange Question