@0xsquid/deposit-widget 0.1.0-beta.0

package/src/views/transaction-progress/use-transaction-progress.ts

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+import {
+  getBridgeType,
+  simplifyRouteAction,
+  TransactionErrorType,
+  TransactionStatus,
+  useEstimate,
+  useSwap,
+  useSwapTransactionStatus,
+  useTransactionStore,
+} from "@0xsquid/react-hooks";
+import { useDepositRoute } from "../../hooks/use-deposit-route";
+import { getMainExplorerUrl } from "../../services/wallet-history/get-main-explorer-url";
+import { useDepositStore } from "../../store/use-deposit-store";
+
+export enum DepositStatus {
+  CONFIRMING,
+  PROCESSING,
+  COMPLETED,
+  PARTIAL_SUCCESS,
+  REJECTED,
+  FAILED,
+}
+
+export function useTransactionProgress() {
+  const currentTransaction = useTransactionStore(
+    (state) => state.currentTransaction,
+  );
+
+  const { routeData } = useDepositRoute();
+  const { fromChain } = useSwap();
+  const { estimatedRouteDuration } = useEstimate(routeData);
+  const config = useDepositStore((s) => s.config);
+
+  const { latestStatus, transactionStatusQuery } = useSwapTransactionStatus({
+    transaction: {
+      fromAddress: currentTransaction?.fromAddress ?? "",
+      fromChain: currentTransaction?.fromChain?.chainId ?? "",
+      toChain: currentTransaction?.toChain?.chainId ?? "",
+      transactionId: currentTransaction?.transactionId ?? "",
+      status: currentTransaction?.status ?? TransactionStatus.PENDING,
+      bridgeType: getBridgeType(routeData?.estimate.actions),
+      actions: routeData?.estimate.actions,
+      transactionIdForStatus: currentTransaction?.transactionIdForStatus,
+      quoteId: currentTransaction?.quoteId,
+      depositTxVerificationSignature:
+        currentTransaction?.depositTxVerificationSignature,
+    },
+  });
+
+  const status = useMemo<DepositStatus>(() => {
+    if (currentTransaction === undefined) {
+      return DepositStatus.CONFIRMING;
+    }
+
+    if (
+      currentTransaction.error?.type === TransactionErrorType.REJECTED_BY_USER
+    ) {
+      return DepositStatus.REJECTED;
+    }
+
+    if (currentTransaction.sourceStatus === "error") {
+      return DepositStatus.FAILED;
+    }
+
+    if (latestStatus === TransactionStatus.SUCCESS) {
+      return DepositStatus.COMPLETED;
+    }
+
+    if (
+      latestStatus === TransactionStatus.PARTIAL_SUCCESS ||
+      latestStatus === TransactionStatus.REFUNDED
+    ) {
+      return DepositStatus.PARTIAL_SUCCESS;
+    }
+
+    if (latestStatus === TransactionStatus.ERROR) {
+      return DepositStatus.FAILED;
+    }
+
+    if (
+      latestStatus === TransactionStatus.ONGOING ||
+      latestStatus === TransactionStatus.INITIAL_LOADING ||
+      latestStatus === TransactionStatus.PENDING
+    ) {
+      return DepositStatus.PROCESSING;
+    }
+
+    return DepositStatus.CONFIRMING;
+  }, [currentTransaction, latestStatus]);
+
+  const explorerLink = getMainExplorerUrl({
+    routeType: currentTransaction?.routeType,
+    transactionId: currentTransaction?.transactionId,
+    sourceTxExplorerUrl: currentTransaction?.sourceTxExplorerUrl,
+    statusResponse: transactionStatusQuery.data,
+    actions: routeData?.estimate.actions?.map(simplifyRouteAction),
+    sourceChain: fromChain,
+  });
+
+  return {
+    status,
+    explorerLink,
+    estimatedTime: estimatedRouteDuration
+      ? `~${estimatedRouteDuration.format()}`
+      : undefined,
+    recipient: {
+      name: config?.integrator.name ?? "Recipient",
+      address: config?.destinationAddress ?? "",
+    },
+  };
+}