@0xsquid/react-hooks 1.0.0

package/src/services/internal/transactionService.ts

@@ -0,0 +1,255 @@
+import type {
+  TransactionHistoryStore,
+  TransactionParams,
+  TransactionStatus,
+} from "@/core/types/transaction";
+import { TransactionType } from "@/core/types/transaction";
+import { usePersistStore } from "@/hooks/store/useSquidStore";
+import type { ChainData } from "@0xsquid/sdk/dist/types";
+
+/**
+ * Helper to find the desired transaction history in array
+ * @param transactionID
+ * @returns
+ */
+export const findHistoryItem = (
+  transactionID: string | undefined
+): TransactionHistoryStore | undefined => {
+  // TODO: This works but could be improved, persistStore shouldnt be used directly
+  // Or move this inside a callback hook
+  return usePersistStore
+    .getState()
+    .transactionsHistory?.find((th) => th.transactionId === transactionID);
+};
+
+/**
+ * Will return the same object but with the desired transaction history
+ * Status changed
+ * @param transactionID
+ * @param status
+ * @param transactionsHistory
+ * @param statusResponse
+ * @returns
+ */
+export const updateTransactionHistoryStatus = (
+  transactionID: string | undefined,
+  status: TransactionStatus,
+  transactionsHistory: TransactionHistoryStore[] | undefined,
+  statusResponse: any | undefined
+): TransactionHistoryStore[] => {
+  return (
+    transactionsHistory?.map((th) => {
+      // Use the status response from the query if available, if not, use the one from the store
+      statusResponse = statusResponse ?? th.statusResponse;
+
+      // If the transaction is already in the store and had a different status, update status
+      if (th.transactionId === transactionID && th.status !== status) {
+        return {
+          ...th,
+          status,
+          statusResponse,
+          axelarUrl: statusResponse?.axelarTransactionUrl,
+          sourceTxExplorerUrl: statusResponse?.fromChain?.transactionUrl,
+        };
+      }
+      return {
+        ...th,
+        axelarUrl: statusResponse?.axelarTransactionUrl,
+        sourceTxExplorerUrl: statusResponse?.fromChain?.transactionUrl,
+      };
+    }) ?? []
+  );
+};
+
+export const replaceTransactionAtNonce = (
+  nonce: number,
+  fromAddress: string,
+  transactionsHistory: TransactionHistoryStore[] | undefined,
+  TransactionHistoryStore: TransactionHistoryStore
+): TransactionHistoryStore[] => {
+  const newTransactionsHistory: TransactionHistoryStore[] =
+    transactionsHistory ?? [];
+  // Find the transaction with the same nonce and from address
+  const transactionIndex = transactionsHistory?.findIndex(
+    (th) => th.nonce === nonce && th.fromAddress === fromAddress
+  );
+  // If found, replace it with the new transaction
+  if (transactionIndex !== undefined && transactionIndex !== -1) {
+    newTransactionsHistory[transactionIndex] = TransactionHistoryStore;
+  }
+
+  return newTransactionsHistory;
+};
+
+export const formatTransactionHistoryDate = (
+  transaction: TransactionHistoryStore | undefined
+): { month: string; day: string } | undefined => {
+  if (!transaction?.timestamp) return undefined;
+
+  try {
+    const date = new Date(Number(transaction.timestamp));
+
+    // Format date to: MMM DD. Examples:
+    // Jan 01
+    // May 12
+    const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+      date
+    );
+    const day = date.toLocaleString("en-US", { day: "2-digit" });
+
+    return { month, day };
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return undefined;
+  }
+};
+
+export const getAxelarExplorerTxUrl = (
+  urlPrefix: string | undefined,
+  routeType: string | undefined,
+  txID: string
+): string | undefined => {
+  if (!urlPrefix) {
+    return undefined;
+  }
+  const txType = (routeType as TransactionType) ?? TransactionType.BRIDGE;
+  if (
+    txType === TransactionType.CALL_BRIDGE ||
+    txType === TransactionType.BRIDGE
+  ) {
+    return `${urlPrefix}transfer/${txID}`;
+  }
+  return `${urlPrefix}gmp/${txID}`;
+};
+
+export const getSourceExplorerTxUrl = (
+  chain: ChainData | undefined,
+  txID: string
+): string | undefined => {
+  if (!chain || !chain.blockExplorerUrls[0]) {
+    return undefined;
+  }
+
+  let txSuffix: string;
+
+  switch (chain.chainId) {
+    case "agoric-3":
+      txSuffix = "/transactions/";
+      break;
+    default:
+      txSuffix = "/tx/";
+  }
+
+  if (chain.blockExplorerUrls[0].endsWith("/")) {
+    txSuffix = txSuffix.slice(1);
+  }
+
+  return `${chain.blockExplorerUrls[0]}${txSuffix}${txID}`;
+};
+
+export const getMainExplorerUrl = (transaction?: TransactionParams) => {
+  // The most accurate one is coming from squid /status api
+  if (transaction?.statusResponse?.axelarTransactionUrl) {
+    return transaction?.statusResponse.axelarTransactionUrl;
+  }
+
+  // If not, we can try to get it from the source chain
+  if (transaction?.sourceTxExplorerUrl) {
+    return transaction?.sourceTxExplorerUrl;
+  }
+
+  // If not, we can try to guess it from the transaction type
+  if (transaction && transaction?.transactionId) {
+    return getAxelarExplorerTxUrl(
+      transaction.statusResponse?.axelarTransactionUrl,
+      transaction.routeType,
+      transaction.transactionId
+    );
+  }
+
+  return undefined;
+};
+
+/**
+ * A CCTP Transaction is one that is not using Axelar, but using Circle Mint & Burn mechanism
+ * Squid API is using a different status endpoint to track status of CCTP transactions
+ * @param transaction
+ * @returns
+ */
+export const isCCTPBridge = (transaction: TransactionParams | undefined) => {
+  return (
+    transaction?.fromChain?.chainId.includes("noble") ||
+    transaction?.toChain?.chainId.includes("noble")
+  );
+};
+
+export const formatDistance = (
+  date: number | Date,
+  baseDate: number | Date,
+  options?: {
+    includeSeconds?: boolean | undefined;
+    addSuffix?: boolean | undefined;
+    locale?: Locale | undefined;
+  }
+): string => {
+  const {
+    includeSeconds = false,
+    addSuffix = false,
+    locale = { locale: "en-US" },
+  } = options || {};
+
+  const elapsedMilliseconds = Math.abs(
+    new Date(date).getTime() - new Date(baseDate).getTime()
+  );
+
+  const seconds = Math.round(elapsedMilliseconds / 1000);
+  const minutes = Math.round(seconds / 60);
+  const hours = Math.round(minutes / 60);
+  const days = Math.round(hours / 24);
+  const months = Math.round(days / 30.44);
+  const years = Math.round(days / 365.25);
+
+  const rtf = new Intl.RelativeTimeFormat(locale.locale, { numeric: "auto" });
+
+  let formatted = "";
+
+  if (includeSeconds && seconds < 45) {
+    const unit = addSuffix ? "second" : "seconds";
+    formatted = rtf.format(-seconds, unit);
+  } else if (minutes < 60) {
+    formatted = rtf.format(-minutes, "minutes");
+  } else if (hours < 24) {
+    formatted = rtf.format(-hours, "hours");
+  } else if (days < 30) {
+    formatted = rtf.format(-days, "days");
+  } else if (months < 12) {
+    formatted = rtf.format(-months, "months");
+  } else {
+    formatted = rtf.format(-years, "years");
+  }
+
+  // remove "ago" from the string
+  // before: "2 minutes ago"
+  // after: "2 minutes"
+  return addSuffix ? formatted : formatted.replace(/\b(?:ago)\b/, "").trim();
+};
+
+export const formatSeconds = (
+  seconds: number,
+  secondsTemplate: string = " seconds",
+  minutesTemplate: string = " minutes"
+) => {
+  let duration = "";
+  if (seconds < 60) {
+    duration = `${seconds.toString()}${secondsTemplate}`;
+  } else {
+    duration = formatDistance(0, seconds * 1000, { includeSeconds: true });
+  }
+  return duration
+    .replace(" minutes", minutesTemplate)
+    .replace(" minute", minutesTemplate);
+};
+
+interface Locale {
+  locale?: string;
+}

package/src/services/internal/transactionStatusService.ts

@@ -0,0 +1,293 @@
+import { SquidStatusErrorType } from "@/core/types/error";
+import type {
+  StepStatusGetterProps,
+  TransactionParams,
+} from "@/core/types/transaction";
+import {
+  AxelarStatusResponseType,
+  TransactionStatus,
+  TransactionType,
+} from "@/core/types/transaction";
+import type { ChainData, StatusResponse, Token } from "@0xsquid/sdk/dist/types";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { isStatusError } from "./errorService";
+import { getMainExplorerUrl } from "./transactionService";
+
+/**
+ * Get the steps for a transaction
+ * First step and second step are always the same
+ * @param transaction
+ * @param statusResponse
+ * @returns {TransactionStepStatus[]}
+ */
+export const getStepStatuses = ({
+  transaction,
+  statusResponse,
+  onlyFullStatusStep,
+}: StepStatusGetterProps): TransactionStatus[] => {
+  let firstStepStatus: TransactionStatus;
+
+  // "warning" state is a custom one indicating that
+  // the user is taking too much time to validate the transaction
+  // And can be set to loading
+  switch (transaction?.sourceStatus) {
+    case "error":
+    case "success":
+    case "ongoing":
+      firstStepStatus = transaction.sourceStatus;
+      break;
+    case "warning":
+      firstStepStatus = TransactionStatus.ONGOING;
+      break;
+    default:
+      firstStepStatus = TransactionStatus.PENDING;
+  }
+
+  let middleStepStatus: TransactionStatus =
+    !onlyFullStatusStep && firstStepStatus !== "success"
+      ? TransactionStatus.PENDING
+      : middleStepChecker(statusResponse);
+
+  const lastStepStatus = getLastStepStatus(firstStepStatus, middleStepStatus);
+
+  // Once we have the last step status,
+  // we have to override the middle step for some states
+  middleStepStatus =
+    middleStepStatus === "needs_gas" || middleStepStatus === "partial_success"
+      ? TransactionStatus.SUCCESS
+      : middleStepStatus;
+
+  return onlyFullStatusStep
+    ? [middleStepStatus]
+    : [firstStepStatus, middleStepStatus, lastStepStatus];
+};
+
+const getLastStepStatus = (
+  first: TransactionStatus,
+  middle: TransactionStatus
+): TransactionStatus => {
+  if (
+    first === TransactionStatus.PENDING ||
+    first === "ongoing" ||
+    first === "error"
+  ) {
+    return TransactionStatus.PENDING;
+  }
+
+  switch (middle) {
+    case "initialLoading":
+    case "ongoing":
+      return TransactionStatus.PENDING;
+    default:
+      return middle;
+  }
+};
+
+export const getHalfSuccessState = (
+  status?: TransactionStatus
+): TransactionStatus | undefined => {
+  switch (status) {
+    case "success":
+      return TransactionStatus.SUCCESS;
+    case "partial_success": // Received axlUSDC
+      return TransactionStatus.PARTIAL_SUCCESS;
+    case "needs_gas":
+      return TransactionStatus.NEEDS_GAS;
+    default:
+      return undefined;
+  }
+};
+
+const middleStepChecker = (
+  statusResponse?: UseQueryResult<any, unknown>
+): TransactionStatus => {
+  const squidStatus = statusResponse?.data;
+  const successState = getHalfSuccessState(
+    squidStatus?.squidTransactionStatus as TransactionStatus | undefined
+  );
+  if (successState) {
+    return successState;
+  }
+  if (squidStatus?.status === AxelarStatusResponseType.ERROR) {
+    const { error } = squidStatus;
+    if (isStatusError(error)) {
+      if (error.errorType === SquidStatusErrorType.NotFoundError) {
+        return TransactionStatus.ERROR;
+      }
+    }
+    return TransactionStatus.ERROR;
+  }
+
+  if (statusResponse?.isInitialLoading) {
+    return TransactionStatus.INITIAL_LOADING;
+  }
+
+  return TransactionStatus.ONGOING;
+};
+
+export const getStepsInfos = ({
+  fromChain,
+  toChain,
+  fromToken,
+  toToken,
+  amount,
+  txType,
+  transaction,
+  statusResponse,
+}: {
+  txType: TransactionType;
+  amount: string;
+  fromChain?: ChainData;
+  toChain?: ChainData;
+  fromToken?: Token;
+  toToken?: Token;
+  transaction?: TransactionParams;
+  statusResponse?: UseQueryResult<StatusResponse, unknown>;
+}): {
+  label: string;
+  status: TransactionStatus;
+  subTitle?: string;
+  link?: string;
+}[] => {
+  const [firstStepStatus, middleStepStatus, lastStepStatus] = getStepStatuses({
+    transaction,
+    statusResponse,
+  });
+
+  const payLabel = `Pay ${amount} ${fromToken?.symbol} on ${fromChain?.networkName}`;
+  const swapForUSDCLabel = `Swap ${fromToken?.symbol} for axlUSDC`;
+  const sendUSDCLabel = `Send axlUSDC to ${toChain?.networkName}`;
+  const swapUSDCLabel = `Swap axlUSDC for ${toToken?.symbol}`;
+  const receiveLabel = `Receive ${toToken?.symbol} on ${toChain?.networkName}`;
+  const axelarUrl = getMainExplorerUrl(transaction);
+  const sourceExplorerUrl = transaction?.sourceTxExplorerUrl;
+  const destinationExplorerUrl = statusResponse?.data?.toChain?.transactionUrl;
+
+  switch (txType) {
+    case TransactionType.CALL_BRIDGE_CALL:
+      return [
+        {
+          label: payLabel,
+          status: firstStepStatus,
+          link: sourceExplorerUrl,
+          subTitle: "View on explorer",
+        },
+        {
+          label: swapForUSDCLabel,
+          status:
+            firstStepStatus !== "success"
+              ? TransactionStatus.PENDING
+              : firstStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: sendUSDCLabel,
+          status: middleStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: swapUSDCLabel,
+          status:
+            middleStepStatus !== "success"
+              ? TransactionStatus.PENDING
+              : middleStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: receiveLabel,
+          status: lastStepStatus,
+          link: destinationExplorerUrl,
+          subTitle: "View on explorer",
+        },
+      ];
+    case TransactionType.CALL_BRIDGE:
+      return [
+        {
+          label: payLabel,
+          status: firstStepStatus,
+          link: sourceExplorerUrl,
+          subTitle: "View on explorer",
+        },
+        {
+          label: swapForUSDCLabel,
+          status:
+            firstStepStatus !== "success"
+              ? TransactionStatus.PENDING
+              : firstStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: sendUSDCLabel,
+          status: middleStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: receiveLabel,
+          status: lastStepStatus,
+          link: destinationExplorerUrl,
+          subTitle: "View on explorer",
+        },
+      ];
+    case TransactionType.BRIDGE:
+      return [
+        {
+          label: payLabel,
+          status: firstStepStatus,
+          link: sourceExplorerUrl,
+          subTitle: "View on explorer",
+        },
+        {
+          label: sendUSDCLabel,
+          status:
+            firstStepStatus !== "success"
+              ? TransactionStatus.PENDING
+              : firstStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: receiveLabel,
+          status: lastStepStatus,
+          link: destinationExplorerUrl,
+          subTitle: "View on explorer",
+        },
+      ];
+    case TransactionType.BRIDGE_CALL:
+      return [
+        {
+          label: payLabel,
+          status: firstStepStatus,
+          link: sourceExplorerUrl,
+          subTitle: "View on explorer",
+        },
+        {
+          label: sendUSDCLabel,
+          status:
+            firstStepStatus !== "success"
+              ? TransactionStatus.PENDING
+              : firstStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: swapUSDCLabel,
+          status: middleStepStatus,
+          link: axelarUrl,
+          subTitle: "View on Axelarscan",
+        },
+        {
+          label: receiveLabel,
+          status: lastStepStatus,
+          link: destinationExplorerUrl,
+          subTitle: "View on explorer",
+        },
+      ];
+    default:
+      return [];
+  }
+};

package/src/services/internal/walletService.ts

@@ -0,0 +1,158 @@
+import { walletStoreLinks, wallets } from "@/core/constants";
+import type { ConnectorID, TypedWindow, Wallet } from "@/core/types/wallet";
+import type { ChainData, CosmosChain } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { fromBech32 } from "@cosmjs/encoding";
+import type { ChainInfo } from "@keplr-wallet/types";
+import { ethers } from "ethers";
+import getProperty from "lodash/get";
+import type { Chain } from "wagmi";
+
+export const formatWalletAddress = (
+  walletAddress: string | undefined,
+  trimLength: number = 5
+) => {
+  return walletAddress
+    ? walletAddress?.length > trimLength
+      ? `${walletAddress.slice(0, trimLength)}...${walletAddress.slice(
+          walletAddress.length - (trimLength - 2), // -2 here because the start of wallet is 0x
+          walletAddress.length
+        )}`.toLowerCase()
+      : walletAddress
+    : "";
+};
+
+export const isCosmosAddressValid = (chainPrefix: string, address: string) => {
+  try {
+    if (!address.toLowerCase().startsWith(chainPrefix)) {
+      throw new Error("Invalid address for this chain");
+    }
+    fromBech32(address);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const isWalletAddressValid = (
+  chainData?: ChainData,
+  address?: string
+) => {
+  if (address) {
+    if (chainData?.chainType === ChainType.EVM) {
+      return ethers.utils.isAddress(address);
+    }
+    if (chainData?.chainType === ChainType.COSMOS) {
+      return isCosmosAddressValid(
+        (chainData as CosmosChain).bech32Config.bech32PrefixAccAddr,
+        address
+      );
+    }
+  }
+  return false;
+};
+
+export const getWalletByConnectorID = (
+  connectorID: ConnectorID
+): Wallet | undefined => {
+  return wallets.find((w) => w.connectorId === connectorID);
+};
+
+export const getCosmosChainInfosObject = (chain: ChainData): ChainInfo => {
+  const cosmosChain = chain as CosmosChain;
+  return {
+    ...cosmosChain,
+    chainName: cosmosChain.networkName,
+    chainId: cosmosChain.chainId.toString(),
+    rpc: cosmosChain.rpc.split("?chain")[0],
+    feeCurrencies: cosmosChain.feeCurrencies.map((c) => ({
+      ...c,
+      gasPriceStep: cosmosChain.gasPriceStep,
+    })),
+  };
+};
+
+export const isWalletExtensionInstalled = (wallet: Wallet) => {
+  if (
+    (wallet.connectorId === "metaMask" && !window.ethereum) ||
+    (wallet.connectorId === "keplr" && !(window as TypedWindow).keplr) ||
+    (wallet.connectorId === "leap" && !(window as TypedWindow).leap) ||
+    // Cosmostation has two different connectors for different extensions
+    ((wallet.connectorId === "cosmostationCosmos" ||
+      wallet.connectorId === "cosmostation") &&
+      !(window as TypedWindow).cosmostation) ||
+    (wallet.connectorId === "xdefi" && !(window as TypedWindow).xfi) ||
+    (wallet.connectorId === "bitget" && !(window as TypedWindow).bitkeep) ||
+    (wallet.connectorId === "exodus" && !(window as TypedWindow).exodus)
+  ) {
+    return false;
+  }
+  return true;
+};
+
+export const redirectExtensionStoreIfNotInstalled = (wallet: Wallet) => {
+  const { userAgent } = navigator;
+  let link;
+
+  if (!isWalletExtensionInstalled(wallet)) {
+    if (userAgent.indexOf("Firefox") > -1) {
+      link = walletStoreLinks[wallet.connectorId].firefox;
+    } else if (userAgent.indexOf("Chrome") > -1) {
+      link = walletStoreLinks[wallet.connectorId].chrome;
+    }
+
+    if (link && link !== "") {
+      (window as any)?.open(link, "_blank").focus();
+    }
+  }
+};
+
+/**
+ * Get the value of an object property using a string path
+ * E.G. window["cosmostation.providers.keplr"]
+ * @param obj
+ * @param path
+ * @returns
+ */
+export const getDescendantProp = (obj: any, path: string) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+
+export const formatChainsForWagmi = (chains: ChainData[]): Chain[] => {
+  return chains
+    ?.filter((c) => c.chainType === ChainType.EVM)
+    .map(
+      (c) =>
+        ({
+          id: +c.chainId,
+          name: c.networkName,
+          network: c.networkName,
+          contracts: {
+            multicall3: {
+              address: "0xcA11bde05977b3631167028862bE2a173976CA11",
+            },
+          },
+          nativeCurrency: c.nativeCurrency,
+          rpcUrls: { public: { http: [c.rpc] }, default: { http: [c.rpc] } },
+        }) as Chain
+    );
+};
+
+/**
+ * Dynamically accesses a nested property of an object based on a dot-separated string path.
+ * Returns the value of the property if found, otherwise undefined.
+ * e.g. "xfi.keplr" will return window.xfi.keplr
+ */
+export const accessProperty = (
+  object: Record<string, any>,
+  path: string
+): any => {
+  const value = getProperty(object, path);
+  if (value === undefined) {
+    console.error(`Property "${path}" not found while reading object`, object);
+  }
+  return value;
+};
+
+export const metamaskIcon = getWalletByConnectorID("metaMask")?.icon;
+export const EVMnetworkNotSupportedErrorCode = 4902;