i use ganache-cli for operate node in local environment. after that I wrote Smart contract solidity code in remix. And then, deployed in my ganache node. And deployed log was successful in my ganache.

and then connect with web using web3.js ( connection was successful )

input my account address and private Key , and contract address

for check the connection with that addresses so i checked the balance of that address.

and then balance was visible, and i check it. (connection was successful )

problem is from now.

What i want to do was send my eth to that contract method [becomeTarget()]

this method is payable, so can receive ethers from transactions.

But I tried over 50 times... all failed with error

ERROR

Transaction has been reverted by the EVM
TransactionRevertInstructionError: Transaction has been reverted by the EVM
    at http://localhost:3000/static/js/bundle.js:121218:15
    at Generator.next (<anonymous>)
    at http://localhost:3000/static/js/bundle.js:121198:67
    at new Promise (<anonymous>)
    at __awaiter (http://localhost:3000/static/js/bundle.js:121180:10)
    at getTransactionError (http://localhost:3000/static/js/bundle.js:121205:10)
    at Module.<anonymous> (http://localhost:3000/static/js/bundle.js:119956:120)
    at Generator.next (<anonymous>)
    at fulfilled (http://localhost:3000/static/js/bundle.js:119486:24)

I know something with transaction object field is wrong, i guess maybe gas problem..

but to fix that i tried web3.eth.getGasPrice and then put it.

But same error..

please help me. I cannot go forward if i cannot solve this... please help me..

solidity code

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.10;

contract WithdrawalContract {
    address public target;
    uint public mostSent;
    address owner_address;
    // { address : uint }
    mapping (address => uint) public pendingWithdrawals;

    constructor(){
        owner_address = msg.sender;
    }

    modifier ownerCheck(){
        require(msg.sender==owner_address);
        _;
    }

    event senderBalance(address indexed withdrawer, uint balance);    

    // 이건 외부에서만 호출할 수 있고, 돈을 받을 수 있는 함수인데 bool을 반환하는 이유는?
    function becomeTarget() external payable returns(bool){
        pendingWithdrawals[target] = msg.value;
        target = msg.sender;
        mostSent = msg.value;
        return true;
    }

    function withdraw() public{
        uint amount = pendingWithdrawals[msg.sender];
        pendingWithdrawals[msg.sender] = 0;
        payable (msg.sender).transfer(amount);
        emit senderBalance(msg.sender, amount);
    }

}

webcode

import React, { useEffect, useState } from "react";
import {
  Chunk,
  ColumnFlexBox,
  CustomBtn,
  EContainer,
  RowFlexBox,
  UContainer,
  Word,
} from "../../customComponent/customComponent";
import { Header } from "../../customComponent/Header";
import Web3 from "web3";
import { asset } from "../../asset/asset";
import { Input, useToast } from "@chakra-ui/react";

export const web3 = new Web3(
  new Web3.providers.HttpProvider("http://localhost:8545")
);

function ILP_Page() {
  const temp = {
    address: "0x221F2b2C7F0e874C0bA02E962cBd79C2169d1A46",
    privateKey:
      "0x66675567f9e8545aec502c1658db69e0f31866974c901220683df60c76f5e31b",
    contractaddress: "0x1039fdaadb3c2e9d45d9ef173c4e7d6920d5a28a",
  };
  const toast = useToast();

  const [senderAddress, setSenderAddress] = useState(temp.address);
  const [senderPrivateKey, setPrivateKey] = useState(temp.privateKey);
  const [contractAddress, setContractAddress] = useState(temp.contractaddress);
  const [sendValue, setSendValue] = useState(1000000000000000000);
  const [balance, setBalance] = useState(0);

  console.log(balance);
  useEffect(() => {
    if (senderAddress.length === 42) {
      const fetchBalance = async () => {
        console.log("42");
        const accBalance = await web3.eth.getBalance(senderAddress);

        const ethBalance = await web3.utils.fromWei(accBalance, "ether");

        setBalance(ethBalance);
      };
      fetchBalance();
    }
  }, [senderAddress]);

  return ( ... front codes... );
}

export default ILP_Page;

async function connectContract(
  contractAddress,
  senderAddress,
  senderPrivateKey,
  value
) {
  const CA = contractAddress;
  const from = senderAddress;
  const pk = senderPrivateKey;
  const ABI = asset.abi;

  let Contract = new web3.eth.Contract(ABI, CA);
  let byteddata = await Contract.methods.becomeTarget().encodeABI();
  let GasPrice_wei = await web3.eth.getGasPrice();

  const tx = {
    from: from, //
    to: CA, // 트랜잭션 수신자 : 여기서는 계약 주소
    gas: 6721975, // 트랜잭션에서 사용되는 가스의 상한선
    gasPrice: 20000000000, // 이 트랜잭션에 의해서 설정된 가스 가격, 비어있으면 web3.eth.getGasPrice()를 사용한다
    data: byteddata, // 트랜잭션 호출 데이터 (단순 값 전송을 위해 비어있을 수 있음)
    value: web3.utils.toHex("20000000000000000000"), // 송금액 (wei)
  };

  const account = web3.eth.accounts.privateKeyToAccount(pk); // privatekey가져와서 넣으주고
  
  const signedTransaction = await web3.eth.accounts.signTransaction(tx, pk);
  const receipt = await web3.eth
    .sendSignedTransaction(
      // 보내자.
      signedTransaction.rawTransaction,
      // 바이트코드
      async (err, data) => {
        if (err) {
          console.error("sendsignedTransaction error", err);
        }
      }
    )
    .on("receipt", (receipt) => console.log("recept", receipt));

  console.log(
    `contract Address : ${contractAddress}
type ${typeof contractAddress}
`
  );
  console.log(`sentTx ${receipt}
`);
  console.log(`GasPrice ${GasPrice_wei}wei`);
  console.log(`send value wei ${value}WEI`);
}

what i expect was send transaction with values to that solidity function...