Need Help Hash Always Empty {}

[Widiskel]

Hello, im try to do approve token spend tx, but i when writeContracts executed, i can't get the hash. im use this kind of hook

useReadContracts,
useWriteContract,
useWaitForTransactionReceipt,

Viem: ^2.22.23,
Wagmi : ^2.14.12,
Node Js : v22.1.0,
Framework : Next JS

piece of code

import { useEffect } from "react";
import {
  useReadContracts,
  useWriteContract,
  useWaitForTransactionReceipt,
} from "wagmi"; 
import { Address } from "viem"; 
import { AvailableContracts } from "@/app/interfaces/available-contracts";
import { Token } from "@/app/interfaces/token";
import {
  amountToWei,
  getReasonFromError,
  humanReadableAmount,
} from "@/app/lib/utils/utils";
import { TxStatus } from "@/app/interfaces/tx-status";

interface UseTokenApprovalProps {
  tokenA: Token;
  tokenB: Token;
  amountA: string;
  amountB: string;
  address: Address;
  availableContracts: AvailableContracts;
  currentStep: number;
  setCurrentStep: (step: number) => void;
  setErrorMessage: (message: string) => void;
  updateStepStatus: (index: number, status: TxStatus) => void;
}

export const useTokenApproval = ({
  tokenA,
  tokenB,
  amountA,
  amountB,
  address,
  availableContracts,
  currentStep,
  setCurrentStep,
  setErrorMessage,
  updateStepStatus,
}: UseTokenApprovalProps) => {
  const {
    data: allowances,
    isFetching: isAllowanceFetching,
    isSuccess: isAllowanceSuccess,
    isError: isAllowanceError,
    error: allowanceError,
    refetch: getAllowance,
  } = useReadContracts({
    contracts: [
      {
        address: tokenA.address,
        abi: tokenA.abi,
        functionName: "allowance",
        args: [
          address as Address,
          availableContracts.NONFUNGIBLEPOSITIONMANAGER.address,
        ],
      },
      {
        address: tokenB.address,
        abi: tokenB.abi,
        functionName: "allowance",
        args: [
          address as Address,
          availableContracts.NONFUNGIBLEPOSITIONMANAGER.address,
        ],
      },
    ],
  });

  const {
    data: approveHash,
    writeContract: executeApprove,
    error: errorApprove,
    isIdle: isIdleApprove,
    isPending: isPendingApprove,
    isSuccess: isSuccessApprove,
    isError: isErrorApprove,
  } = useWriteContract();

  useEffect(() => {
    if (isIdleApprove) {
      console.log("Waiting for Approval call...");
      updateStepStatus(1, TxStatus.IDLE);
    }
    if (isPendingApprove) {
      console.log("Approval Confirmation pending...");
      updateStepStatus(1, TxStatus.PENDING);
    }
    if (isSuccessApprove) {
      console.log("Approval Confirmation Success...");
      console.log("HASH", approveHash);
      updateStepStatus(1, TxStatus.PENDING);
    }

    if (isErrorApprove) {
      console.error("Approval Confirmation failed:", errorApprove);
      updateStepStatus(1, TxStatus.ERROR);
      setErrorMessage(
        getReasonFromError(errorApprove.message) ||
          "Approval transaction failed."
      );
    }
  }, [isPendingApprove, isErrorApprove, isSuccessApprove, isIdleApprove]);

  const handleApprove = async (token: Token) => {
    setCurrentStep(1);
    console.log(
      "SPENDER : ",
      availableContracts.NONFUNGIBLEPOSITIONMANAGER.address
    );
    executeApprove({
      address: token.address,
      abi: token.abi,
      functionName: "approve",
      args: [
        availableContracts.NONFUNGIBLEPOSITIONMANAGER.address,
        token == tokenA ? amountToWei(amountA) : amountToWei(amountB),
      ],
    });
  };

  useEffect(() => {
    if (isAllowanceFetching) {
      updateStepStatus(0, TxStatus.PENDING);
      console.log("Fetching allowance...");
      return;
    }

    if (isAllowanceError) {
      console.error("Error fetching allowance:", allowanceError);
      setErrorMessage(
        getReasonFromError(allowanceError?.message) ||
          "Failed to check allowance."
      );
      updateStepStatus(0, TxStatus.ERROR);
      return;
    }

    if (isAllowanceSuccess && allowances) {
      console.log("Allowance fetched successfully:", allowances);

      const allowanceTokenA = allowances[0]?.result || 0;
      const allowanceTokenB = allowances[1]?.result || 0;
      console.log("");
      console.log("ALLOWANCE TOKEN A ", humanReadableAmount(allowanceTokenA));
      console.log("ALLOWANCE TOKEN B ", humanReadableAmount(allowanceTokenB));
      console.log("REQUEST AMOUNT A", amountA);
      console.log("REQUEST AMOUNT B", amountB);
      console.log("");

      if (currentStep === 0) {
        if (
          Number(allowanceTokenA) >= amountToWei(amountA) &&
          Number(allowanceTokenB) >= amountToWei(amountB)
        ) {
          updateStepStatus(0, TxStatus.SUCCESS);
          updateStepStatus(1, TxStatus.SUCCESS);
          setCurrentStep(2);
        } else {
          if (Number(allowanceTokenA) >= amountToWei(amountA)) {
            console.log("CALL APPROVE TOKEN A");
            handleApprove(tokenA);
          } else if (Number(allowanceTokenB) >= amountToWei(amountB)) {
            console.log("CALL APPROVE TOKEN B");
            handleApprove(tokenB);
          } else {
            handleApprove(tokenA);
            handleApprove(tokenB);
          }
        }
      }
    }
  }, [isAllowanceFetching, isAllowanceError, isAllowanceSuccess]);

  const {
    isFetching: isApprovalTxPending,
    isLoading: isApprovalTxConfirming,
    isSuccess: isApprovalTxConfirmed,
    isError: isApprovalTxError,
    error: approvalTxError,
  } = useWaitForTransactionReceipt({
    hash: approveHash,
    query: { enabled: !!isSuccessApprove },
  });

  useEffect(() => {
    if (isApprovalTxPending) {
      console.log("Approval transaction pending...");
      updateStepStatus(1, TxStatus.PENDING);
    }
    if (isApprovalTxConfirming) {
      console.log("Approval transaction is confirming...", approveHash);
      updateStepStatus(1, TxStatus.PENDING);
    }

    if (isApprovalTxConfirmed) {
      console.log("Approval transaction confirmed successful!", approveHash);
      updateStepStatus(1, TxStatus.PENDING);
      setCurrentStep(2);
    }

    if (isApprovalTxError) {
      console.error("Approval transaction failed:", approvalTxError);
      updateStepStatus(1, TxStatus.ERROR);
      setErrorMessage(
        getReasonFromError(approvalTxError?.message) ||
          "Approval transaction failed."
      );
    }
  }, [
    isApprovalTxPending,
    isApprovalTxConfirming,
    isApprovalTxConfirmed,
    isApprovalTxError,
  ]);

  return { getAllowance, approveHash };
};