0

currently, I'm struggling to solve an error that occurs when a user deposits funds into a contract from the react.js interface.

●Environment

Solidity Compiler 0.6.0
Blockchain: Ganache 2.4.0
Web3: web3@1.2.11 
React: 2.0.5

●The error message is here: Unhandled Rejection (Error): while converting number to string, invalid number value '', should be a number matching (^-?[0-9.]+).

・screenshot when it occurs enter image description here

I assume that the problem is about the difference between number and string(or maybe object) so I tried to change the way to write "amount" in the value part.

For example, I tried ・amount.toString() ・String(amount) ・or even make "amount" string before the deposits method in this function such as adding let _amount = amount.String() and then put _amount in the value part. But None of them worked well.

●Contract Code(short version)

pragma solidity ^0.6.0;

import { ERC20 } from "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import { IERC20 } from "@openzeppelin/contracts/token/ERC20/IERC20.sol";

import "./interfaces/IWETH.sol";

contract CollateralPool is ERC20 {

IERC20 public token;

        constructor(
        address _token
        ) public {
        token = IERC20(_token); //WETH or tBTC, renBTC
    } 

    function getETHBalance(address _address) view public returns(uint) {
        uint ETHbalance = address(_address).balance / 1e18;
        return ETHbalance;
    }

    function depositCol2ETH() public payable {
        require(msg.value <= msg.sender.balance, "insufficient ETH balance");
        IWETH(address(token)).deposit.value(msg.value)();
    }

    receive() external payable {
    }

}

I could deploy this contract and connect it with ganache, truffle and metamask without any problem. And depositing does work if I replaced amount +"" with 1(or any number).

so I don't think the problem is caused by the solidity part and please check the front-end react code below.

●Front-end Code(React.js)

import React, { Component } from "react";
import getWeb3 from "./getWeb3.js";
import "./App.css";
import { poolAddress, poolAbi } from "./config.js";

class App extends Component {
  constructor(props) {
    super(props)
  this.state = { 
    web3: null, 
    accounts: null, 
    contract: null, 
    address: "", 
    amount: "",
    balance: null
  };}

  componentDidMount = async () => {
    try {
     
      const web3 = await getWeb3();
      
      const accounts = await web3.eth.getAccounts();
      const instance = new web3.eth.Contract(poolAbi, poolAddress);
      this.setState({web3, accounts, contract: instance});
    } catch (error) {
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`,
      );
      console.error(error);
    }
};


getETHBalance = async() => {
  const { contract, address } = this.state;
  const result = await contract.methods.getETHBalance(address).call();
  console.log(result);
  const balance = result;
  this.setState({ balance });
}

// This is the function the error happens.
depositLpCol = async() => {
  const { web3, contract, accounts, amount} = this.state;
  await contract.methods.depositCol2ETH().send({
    from:accounts[0],
    to:contract,
    value: web3.utils.toWei(amount+"", "ether")});
}

handleChange = name => event => {
  this.setState({ [name]: event.target.value });
};


render() {
  if (!this.state.web3) {
    return <div>Loading Web3, accounts, and contract...</div>;
  }

  return(
    <div className="App">
      <h1>Kataly is a new decentralized stablecoin system. </h1>
      <p>Your account : {this.state.accounts} </p>

      <input onChange={this.handleChange("address")} />
      <button onClick={this.getETHBalance}>Check ETH Balance</button>    
      {this.state.balance? <p>ETH: {this.state.balance}</p>: <p></p>}

     //this is HTML interface(JSX) where user interact with this app. 
      <input onChnage={this.handleChange("amount")} />
      <button onClick={this.depositLpCol}>[Liquidity Provider] Deposit ETH</button>

     </div>
    );
}

}
export default App;

that's all. I would really appreciate you if you could answer this question! Feel free to ask me anything about this issue.

1
  • What exactly is require(msg.value <= msg.sender.balance, "insufficient ETH balance") for??? It's not within the responsibility of the contract function to make sure that the sender account has enough ether. If it doesn't, then the transaction will simply not get executed (i.e., it will never reach this point in the contract function's code). – goodvibration Oct 31 '20 at 16:53

Your Answer

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

Browse other questions tagged or ask your own question.