如何设置加载屏幕，直到在 react web3js 上确认交易

Question

我对 Web3 和 React 开发还很陌生。 我想调用合约 function 并获取加载屏幕，直到交易完成：

let transactions = await TokenContract.methods.buy().send({
    from: account,
    value: web3.utils.toWei(inputBuyQty, 'ether')
}, function (err, transactionHash) {
    if (!err) {
        console.log(transactionHash);
        setLoadingScreen(1);
        let receipt = web3.eth.getTransactionReceipt(transactionHash);
        console.log(receipt);
        setLoadingScreen(0);
    }
});

我将如何在提交请求后调用setLoadingScreen(1) ，并在交易生成后调用 setLoadingScreen setLoadingScreen(0) ？

Answer 1

setLoadingScreen(1);
let reciept;
try {
    reciept = await TokenContract.methods.buy().send({
        from: account,
        value: web3.utils.toWei(inputBuyQty, 'ether')
    });
} catch (err) {
    setLoadingScreen(0);
    // Print error stuff
    return;
}
setLoadingScreen(0);

contract.send在交易收据可用时解决。 一旦用户需要提交交易就启用加载屏幕，并在错误或收据可用时禁用它。

Answer 2

这应该可以帮助您：

const hangle = () =>{
    setLoadingScreen(1);
    try {
       let reciept = await TokenContract.methods.buy().send({
            from: account,
            value: web3.utils.toWei(inputBuyQty, 'ether')
        });
    } catch (err) {
       console.log(err)
    } finally{
       setLoadingScreen(0);
    }
}