writeContractAsync Stuck and Fails to Retrieve Transaction Hash after Confirming via MetaMask

[leonelosz]

Hi, I'm encountering an issue with writeContractAsync. After calling this function, I'm not always receiving the transaction hash, and it seems like the transaction gets stuck indefinitely, even though I have already signed it.

Here is my code:

const handleWrite = async () => {
    console.log('WRITE!');
    onSubmit();

    let transactionHash = null;
    let notificationId = null;

    try {
      // Prepare the transaction parameters
      const params = {
        chainId,
        address: contractAddress,
        functionName: abiFunction.name,
        abi: [abiFunction],
        args: getParsedContractFunctionArgs(form),
      };

      console.log('Sending transaction with parameters:', params);

      notificationId = notification.loading(
        <TxnNotification message="Awaiting for user confirmation" />
      );

      // Send the transaction 
      transactionHash = await writeContractAsync(params); // Stucks awaiting for transaction here and never ends

      if (onProgress) {
        onProgress(transactionHash, params);
      }

      notification.remove(notificationId);

      console.log('Transaction sent, hash:', transactionHash);

      // Wait for transaction receipt
      const blockExplorerTxURL = chainId
        ? getBlockExplorerTxLink(chainId, transactionHash)
        : '';

      notificationId = notification.loading(
        <TxnNotification
          message="Waiting for transaction to complete."
          blockExplorerLink={blockExplorerTxURL}
        />
      );

      // Wait for the transaction confirmation
      const transactionReceipt = await waitForTransactionReceipt(wagmiConfig, {
        hash: transactionHash,
        confirmations: 2, // Number of required confirmations
        timeout: 120000, // Timeout in milliseconds (120 seconds)
      });

      notification.remove(notificationId);

      console.log('Transaction receipt:', transactionReceipt);

      // Check if the transaction was successful
      if (transactionReceipt.status === 'success') {
        onSuccess({
          chainId,
          address: contractAddress,
          functionName: abiFunction.name,
          abi: [abiFunction],
          args: getParsedContractFunctionArgs(form),
          hash: transactionHash,
          receipt: transactionReceipt,
        });

        notification.success(
          <TxnNotification
            message="Transaction completed successfully!"
            blockExplorerLink={blockExplorerTxURL}
          />,
          {
            icon: '🎉',
          }
        );
      }
    } catch (e) {
      const message = getParsedError(e);

      notification.remove(notificationId);
      notification.error(<TxnNotification message={message} />);
    }
  };

Issue Details:

As mentioned, sometimes I receive the transaction hash after confirming, but most of the time, the transaction seems to be stuck indefinitely, even though the transaction is confirmed on the blockchain.

NOTE: I'm using a free plan RPC from Infura, and my project dependencies are as follows:

{
  "scripts": {
    "dev": "next dev -p 80",
    "build": "next build",
    "start": "next start -p 80"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@heroicons/react": "^2.1.3",
    "@mui/icons-material": "^5.15.17",
    "@mui/material": "^5.15.17",
    "@mui/x-data-grid": "^7.3.2",
    "@nivo/line": "^0.86.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@rainbow-me/rainbowkit": "2.1.6",
    "@tanstack/react-query": "5.51.11",
    "@wagmi/chains": "^1.8.0",
    "@web3modal/wagmi": "^5.1.7",
    "autoprefixer": "^10.4.20",
    "axios": "^1.6.8",
    "blo": "^1.2.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "daisyui": "^4.11.1",
    "ethers": "^6.13.2",
    "formik": "^2.4.6",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.407.0",
    "moment": "^2.30.1",
    "next": "14.2.9",
    "node-forge": "^1.3.1",
    "postcss": "^8.4.47",
    "qrcode.react": "^3.1.0",
    "react": "18.3.1",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "18.3.1",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.3.0",
    "react-pro-sidebar": "^0.7.1",
    "react-use-wizard": "^2.3.0",
    "styled-components": "^6.1.10",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "viem": "2.17.0",
    "wagmi": "2.12.9",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.11",
    "typescript": "5.4.5"
  }
}