使用 web3 从智能合约发送资金的输入和按钮最简单和最短的方法是什么?

What is the easiest and shortest way to have an input and button to send money from smart contract with web3?

我试图在前端有一个输入字段,之后有一个按钮,用于从用户向智能合约发送资金。

这是我的链上合约:https://snowtrace.io/address/0x98608c1e3ae104e7a11ea2879b44669a1c38b73d

这是我的 html 代码:

<!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>

这是我的 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?

如何修改代码,让用户只需填写输入的金额并单击发送按钮即可发送资金?

我找到的最简单的解决方案如下:

在 html 文件正文中插入:

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

在 index.js 函数中插入以下内容以汇款:

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]});
}

这很好用。请确保您有足够的资金进行交易。