@0xsquid/react-hooks 1.0.0

package/src/hooks/transaction/useSingleTransaction.ts

@@ -0,0 +1,155 @@
+import type { StatusResponse } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+
+import {
+  axelarEndStatuses,
+  axelarSuccessStatuses,
+  backendVersion,
+} from "@/core/constants";
+import { keys } from "@/core/queries/queries-keys";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import axios from "axios";
+import { useMemo, useState } from "react";
+
+import type { TransactionParams } from "@/core/types/transaction";
+import { TransactionStatus } from "@/core/types/transaction";
+import { usePersistStore, useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSquidRouter } from "@/hooks/webapp-router/useSquidRouter";
+import { getQueryHeaders } from "@/services/internal/apiService";
+import { WidgetEvents } from "@/services/internal/eventService";
+import {
+  findHistoryItem,
+  isCCTPBridge,
+  updateTransactionHistoryStatus,
+} from "@/services/internal/transactionService";
+
+export const useSingleTransaction = (
+  transaction: TransactionParams | undefined
+) => {
+  const { config } = useSquidStore();
+  const { currentRoute } = useSquidRouter();
+  const [refetchInterval, setRefetchInterval] = useState(10000);
+
+  const currentHistoryItem = useMemo(
+    () => findHistoryItem(transaction?.transactionId),
+    [transaction?.transactionId]
+  );
+
+  // TODO: Might need to be outside the hooks library
+  const isTransactionPage = useMemo(
+    // () => currentRoute?.path === routes.transaction.path,
+    // TODO: Update this to use the correct route
+    () => true,
+    [currentRoute?.path]
+  );
+
+  /**
+   * Transaction status endpoint
+   * Squid api is using axelar endpoint and parsing the response
+   * @returns {StatusResponse} Status response
+   */
+  const transactionStatusQuery = useQuery(
+    keys({ apiUrl: config.apiUrl }).transactionStatus(transaction),
+    async () => {
+      const statusEndpoint = `${config.apiUrl}/${backendVersion}/status`;
+      const response = await axios
+        .get<StatusResponse>(statusEndpoint, {
+          params: {
+            transactionId: transaction?.transactionId,
+            fromChainId: transaction?.fromChain?.chainId,
+            toChainId: transaction?.toChain?.chainId,
+            ...(isCCTPBridge(transaction) ? { bridgeType: "cctp" } : {}),
+          },
+          headers: getQueryHeaders(
+            config.integratorId,
+            useSquidStore.getState().currentRequestId ?? ""
+          ),
+        })
+        ?.catch((error: AxiosError) => {
+          throw new Error("Fetch transaction status failed", {
+            cause: error,
+          });
+        });
+      return response.data;
+    },
+
+    {
+      enabled:
+        !!transaction?.transactionId &&
+        transaction !== undefined &&
+        currentHistoryItem?.status !== "error" &&
+        currentHistoryItem?.status !== "success",
+      refetchInterval(data, _) {
+        const statusResponse = data;
+        // If the status response is something telling that the transaction
+        // is finished, then store transaction history state if success
+        // And return false to indicate refetcher to stop
+        if (
+          statusResponse &&
+          axelarEndStatuses.includes(statusResponse.status ?? "")
+        ) {
+          return false;
+        }
+        return refetchInterval; // Had to handle a variable here because after onError, we want the interval to stop
+      },
+
+      // At the moment Cosmos indexing takes more time, so need more time between retries
+      retryDelay:
+        transaction?.fromChain?.chainType === ChainType.COSMOS ? 5000 : 3000, // Will wait some seconds before retrying after an error, until max errors (retry below) has been reached
+      retry:
+        transaction?.fromChain?.chainType === ChainType.COSMOS
+          ? 6
+          : currentRoute.id === "transaction"
+            ? 25
+            : 1, // Will retry failed requests x times before displaying an error
+      refetchOnWindowFocus: isTransactionPage ? "always" : false,
+
+      onSuccess: (data) => {
+        const statusResponse = data;
+
+        // Dispatch event
+        WidgetEvents.getInstance().dispatchSwapStatus(
+          statusResponse.squidTransactionStatus ?? ""
+        );
+
+        if (
+          statusResponse &&
+          axelarSuccessStatuses.includes(statusResponse.status ?? "") &&
+          currentHistoryItem?.status !== "success"
+        ) {
+          usePersistStore.setState({
+            transactionsHistory: updateTransactionHistoryStatus(
+              transaction?.transactionId,
+              TransactionStatus.SUCCESS,
+              usePersistStore.getState().transactionsHistory,
+              statusResponse
+            ),
+          });
+        }
+      },
+      onError: (error: Error | AxiosError) => {
+        // Check if axios error and if it's a 404
+        const is404 = (error.cause as AxiosError)?.response?.status === 404;
+        setRefetchInterval(-1);
+        usePersistStore.setState({
+          transactionsHistory: updateTransactionHistoryStatus(
+            transaction?.transactionId,
+            is404 ? TransactionStatus.NOT_FOUND : TransactionStatus.ERROR,
+            usePersistStore.getState().transactionsHistory,
+            undefined
+          ),
+        });
+      },
+    }
+  );
+
+  return {
+    transactionStatusQuery,
+    latestStatus:
+      (transactionStatusQuery.data
+        ?.squidTransactionStatus as TransactionStatus) ??
+      transaction?.status ??
+      currentHistoryItem?.status,
+  };
+};