Wait until the minting is done

Question

I'm building the front end of my NFT Minting DApp using React.

I'm trying to print in the console the URL to etherscan/hash once the transaction has been minted, but rather I got the log when the transaction has started, so, it isn't already available in etherscan.

I've checked other sites but no one is conclusive enough.

How to get the transaction receipt once the minting process has been done?

try {
      ethereum
        .request({
          method: "eth_sendTransaction",
          params: [tx],
        })
        .then(
          
          async (result) => 
          {
          let nftTxn = await nftContract.safeMint;
          console.log("Minting... please wait");
          web3.eth.getTransactionReceipt(result)
          .then(console.log(`Mined, see transaction: https://ropsten.etherscan.io/tx/${result}`));
          }
        )

Answer 1

Isn't there a listener you can subscribe to?

web3.eth.subscribe("alchemy_fullPendingTransactions")

Answer 2

The way I do that in web3js is like this, transactionHash will be logged out pretty quickly then the receipt will arrive.

myContract.methods
  .myMethod(123)
  .send({ from: "0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe" })
  .on("transactionHash", function (hash) {
    console.log("transactionHash", hash);
  })
  .on("confirmation", function (confirmationNumber, receipt) {
    console.log("confirmationNumber", confirmationNumber);
    console.log("receipt", receipt);
  })
  .on("receipt", function (receipt) {
    // receipt example
    console.log(receipt);
  })
  .on("error", function (error, receipt) {
    // If the transaction was rejected by the network with a receipt, the second parameter will be the receipt.
    console.log("error", error);
    console.log("receipt", receipt);
  });

https://web3js.readthedocs.io/en/v1.7.0/web3-eth-contract.html#id37