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

Question

I'm quite new to Web3 and React development. I want to call the contract function and get a loading screen until the transaction is minted:

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

How would I call setLoadingScreen(1) after the request is submitted, and setLoadingScreen(0) after the transaction has been minted?

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 resolves when the transaction receipt is available. Enable the loading screen once the user needs to submit the transaction, and disable it on error or when the receipt is available.

Answer 2

this should help you:

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