如何設置加載屏幕，直到在 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);
    }
}