[Ethereum] Can’t send Ether to smart contract using Ethers.js

ethers.jshardhatjavascriptreactsolidity

I'm using Ethers.js Hardhat, & React. Whenever I try to send Ethereum to the smart contract, I get an error. I've tried using etherjs's ether.util to convert it but still get errors. The error looks like this.

Unhandled Rejection (Error): invalid BigNumber string (argument="value", value="1.0", code=INVALID_ARGUMENT, version=bignumber/5.4.2)

My smart contract accepts the amount of Ether as an argument. Then, the users enter how much Ether they want to send.

the wager is a state variable

      const [wager, setWager] = useState() // amount of ether to send to Eth coin flip

  async function startCoinFlip() {

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(ECFAddress, EtherCoinFlip.abi, signer);
      const updatedWager = ethers.utils.formatEther(ethers.utils.parseEther(wager));

      await coinFlippeth.wait();
      console.log(`You started the wager with ${wager} ETH`);
    }

Then, I use it in the JSX like this.

<header className="App-header">
  <h1>Ether Coin Flip</h1>
  <h3>Send your ETH to this contract with a 50/50 shot to double it!</h3>
  <button onClick={startCoinFlip}>Start the coin flip!</button>
  <input onChange={e => setWager(e.target.value)} placeholder="Send your ETH"/>
  <br />
        <h2>End a wager</h2>
  <h3>Send ETH to a coin flip that has already begun</h3>
  <p>Make sure to send an equal amount of ETH as the person who started the Coin Flip</p>
  <button onClick={endCoinFlip} >End the coin flip!</button>
  <input  placeholder="End the wager" />
  <input  placeholder="Eth Coin Flip ID" /> 
</header>

Is there another way to do this within Ethersjs or is there another way to send Ether to the smart contract without using it as a function parameter?

Best Answer

here is the error:

<input onChange={e => setWager(e.target.value)} placeholder="Send your ETH"/>

there is no "value" prop. you should have

<input 
value={wager}
onChange={e => setWager(e.target.value)} placeholder="Send your ETH"/>

You are not passing a valid input, that is why you are getting that error

Related Topic