Callback After Dapp Approval

Question

I have had a contract made for me, and a dapp set up by a developer.

My question is how can i produce an event on my website when the user has approved spend of a certain token?

Can i use a javascript code to pick up that user has approved a certain contract/token via metamask and then display a pop up "You have successfully connected your BEP-20 Token"

I have tried the following.

async function connect_wallet(redirect_url) {
  /** Checking if a metamask extension is available and trying to access it.....of course with the user's permission */
  let web3_obj = get_web3_object();

  try {
   
    var accounts = await web3_obj.eth.requestAccounts();

    // redirects the user to the home page.
    if (accounts) {
      // showing a success message to the user and update wallet balance
      window.alert(`${accounts} Connected Successfully`)
      // show_wallet_info(accounts[0]);

      // saving the account in local storage
      localStorage.setItem('account', accounts[0]);
    }
  } catch (error) {
    if (error["message"] == "Already processing eth_requestAccounts. Please wait.") {
      // start_loader("")
      window.alert("You seem to have denied access to a previous attempt to access your wallet, please clarify that.")
    } else {
      // start_loader("")
      console.log("An Error Occured.")
      console.log(error)
      // window.alert("An Error Occured.")
    }
  }
}

async function checkconnect_wallet {

web3.eth.on('approval', async (from, spender, amount, token) => {
  // Check if the approved token address and amount match your criteria
  if (token === '0x55d398326f99059fF775485246999027B3197955' && amount >= 1000000) {
    // Display a pop-up message using JavaScript
    alert('You have successfully connected your BEP-20 Token!');
  }
});
}

Answer 1

Yes, you can use JavaScript along with the Web3.js library to listen for a 'Approval' event emitted by your BEP-20 token contract. Once the event is detected, you can trigger a pop-up on your website.

web3.eth.on('approval', async (from, spender, amount, token) => {
  // Check if the approved token address and amount match your criteria
  if (token === '0xYourTokenAddress' && amount >= 100) {
    // Display a pop-up message using JavaScript
    alert('You have successfully connected your BEP-20 Token!');
  }
});

Answer 2

The best approach is using wagmi on your dapp. It makes pretty easy to watch transaction confirmation and straight forward. Here is an example using wagmi react. There are several hooks assist your transactions.

const { data, isLoading, isSuccess, write } = useContractWrite({
   address: <ERC20 Address>,
   abi: <ERC20 ABI>,
   functionName: 'approve',
})

const approve = () => {
    write({
      args: [<Amount>],
      from: <Callee>,
    });
}

Now you can use isLoading, isSuccess, data inside your compenents. In here you can use isSuccess boolean value to show the message.

Ref: https://wagmi.sh/react/hooks/useContractWrite