How to send variable amount of ether to smart contract from React front end?

Question

I am trying to send a variable amount of ether from my React front end to my smart contract. In remix, I can do this no problem by just selecting the amount and sending it with the function

In my front end, this is the function where values.amount is 100wei

const sendEth = async(e) => {
  e.preventDefault()
  try {
    const { ethereum } = window;

    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, escrowAbi.abi, signer);
      let nftTxn = await connectedContract.depositEth(values.amount);
        
      console.log("Mining...please wait.", nftTxn)
      await nftTxn.wait();
      
      console.log(`Mined, see transaction: https://rinkeby.etherscan.io/tx/${nftTxn.hash}`);
      // console.log(connectedContract)

    } else {
      console.log("Ethereum object doesn't exist!");
    }
  } catch (error) {
    console.log(error)
  }

}

In my smart contract this is my depositEth function - however msg.value is argument i want to pass but I can't pass this as an argument to this function?

FYI in my app, once you they pay eth to the contract it will release an NFT.

 function depositEth() public payable hasToken(address(this), nftAddress)  {
        require(msg.value == amountOwed, 'You ow more money');
        buyerAddress = payable(msg.sender);

        if(walletHoldsToken(address(this),nftAddress)) {
         ERC721(nftAddress).safeTransferFrom(address(this), buyerAddress, tokenID);
        }
    }

So what I am asking is how do I send x amount of eth to a contract with that value defined in the front end?

Answer 1

In your smart contract define a function to return the amount that owed:

function getOwedAmount() public view returns (uint256) {
    // i  am assuming " amountOwed" is state variable, uint256
    return amountOwed;
  }

After creating the contract.

const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, escrowAbi.abi, signer)

get the owned amount

let owedAmount = await contract.getOwedAmount();
owedAmount=owedAmount.toString()
let transaction=await connectedContract.depositEth({value:owedAmount})
await transaction.wait();

since depositEth is payable we can pass last argument as an object specifying how much we send and solidity will automatically assign that amount to msg.value

Answer 2

Your depositEth() function takes 0 params, so the JS snippet also needs to pass 0 params.

There's the overrides object in ethers , always passed after the regular function params (in your case on the 1st place as there are 0 params), allowing to modify certain fields of the transaction invoking the function, including its value .

let nftTxn = await connectedContract.depositEth({
    value: values.amount
});