CODEWITHSUNDEEP
javascriptethereumsmartcontractsweb3js
Pro Girl
Pro Girl

Reputation: 962

How to have an input and button to send money from smart contract with web3?

I am trying to have a input field in the front end with a button after to send funds to the smart contract from the user.

This is my contract on the chain: https://snowtrace.io/address/0x98608c1e3ae104e7a11ea2879b44669a1c38b73d

This is my HTMLcode:

<!DOCTYPE html>
<html>
<head>
    <title>Send Money</title>
    <script src='node_modules/web3/dist/web3.min.js'></script>
</head>
<body>
    <input type="Amount">
    <button onclick="getFunds();">Send Money</button>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

This is my index.js:

// Check metamask installation and connect to site
async function loadWeb3() {
    if (window.ethereum) {
        window.web3 = new Web3(window.ethereum);
        window.ethereum.enable();
    }
}

// This function links to the smart contract for interactions
async function loadContract() {
return await new window.web3.eth.Contract([{"inputs": [],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"constant":false,"inputs":[{"internalType":"address payable","name":"_liquitdateTo","type":"address"}],"name":"destroySmartContract","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"fundsReceived","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"getCurrentBalance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"getFunds","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"internalType":"bool","name":"_bool","type":"bool"}],"name":"pause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"paused","outputs":[{"internalType":"bool","name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"smartContractAddress","outputs":[{"internalType":"address","name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"tresury","outputs":[{"internalType":"address payable","name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"}], '0x98608C1e3ae104E7A11EA2879b44669a1c38b73D');
} 

// This is the main program function that calls all the previous ones
async function load() {
    await loadWeb3();
    window.contract = await loadContract();
}

async function getFunds() {
    const getFunds = await window.contract.methods.getFunds().send({ from: ""}); 
} // How do I complete this function so that it recognizes the amount to send from the input field in the index.html and that it also fills in the from: "" automatically?

How do I fix the code so that it lets the user send funds by simply filling the input amount and clicking the send button?

Upvotes: 0

Views: 642

Answers (1)

Pro Girl
Pro Girl

Reputation: 962

the easiest solution that I have found is the following:

In the html file in the body insert:

<input id="amount" step="0.01" type="number" placeholder="AVAX Amount...." ref="input" required>
<button onclick="getFunds();">Deposit</button>

In the index.js insert the following in the function to send money:

async function getFunds() {
    const accounts = await ethereum.request({ method: 'eth_accounts' });
    console.log(accounts[0]);
    let amount = await document.getElementById("amount").value;
    amount = amount * 10**18;
    console.log(amount);
    const getFunds = await window.contract.methods.getFunds().send({value: amount, from: accounts[0]});
}

This works just fine. Make sure you have enough funds to do the transaction.

Upvotes: 1

Related Questions