@0xsquid/react-hooks 1.0.0

package/src/services/internal/configService.ts

@@ -0,0 +1,261 @@
+import { defaultValues } from "@/core/constants";
+import type { AppConfig } from "@/core/types/config";
+import type { ChainData, Token } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import get from "lodash/get";
+import { shareSubgraphId } from "./assetsService";
+
+export const getConfigWithDefaults = (
+  config: AppConfig | undefined
+): AppConfig => {
+  return {
+    integratorId: get(
+      config,
+      "integratorId",
+      defaultValues.config.integratorId
+    ),
+    companyName: get(config, "companyName", defaultValues.config.companyName),
+    slippage: get(config, "slippage", defaultValues.config.slippage),
+    advanced: get(config, "advanced", defaultValues.config.advanced),
+    internalSameChainSwapAllowed: get(
+      config,
+      "internalSameChainSwapAllowed",
+      defaultValues.config.internalSameChainSwapAllowed
+    ),
+    hideAnimations: get(
+      config,
+      "hideAnimations",
+      defaultValues.config.hideAnimations
+    ),
+    infiniteApproval: get(
+      config,
+      "infiniteApproval",
+      defaultValues.config.infiniteApproval
+    ),
+    enableExpress: get(
+      config,
+      "enableExpress",
+      defaultValues.config.enableExpress
+    ),
+    collectFees: get(config, "collectFees", defaultValues.config.collectFees),
+    enableGetGasOnDestination: get(
+      config,
+      "enableGetGasOnDestination",
+      defaultValues.config.enableGetGasOnDestination
+    ),
+    apiUrl: get(config, "apiUrl", defaultValues.config.apiUrl),
+    showOnRampLink: get(
+      config,
+      "showOnRampLink",
+      defaultValues.config.showOnRampLink
+    ),
+    priceImpactWarnings: get(
+      config,
+      "priceImpactWarnings",
+      defaultValues.config.priceImpactWarnings
+    ),
+    initialAssets: get(
+      config,
+      "initialAssets",
+      defaultValues.config.initialAssets
+    ),
+    defaultTokensPerChain: get(
+      config,
+      "defaultTokensPerChain",
+      defaultValues.config.defaultTokensPerChain
+    ),
+    preferDex: get(config, "preferDex", defaultValues.config.preferDex),
+    favTokens: get(config, "favTokens", defaultValues.config.favTokens),
+    comingSoonChainIds: get(
+      config,
+      "comingSoonChainIds",
+      defaultValues.config.comingSoonChainIds
+    ),
+    availableChains: get(
+      config,
+      "availableChains",
+      defaultValues.config.availableChains
+    ),
+    onChainQuoting: get(
+      config,
+      "onChainQuoting",
+      defaultValues.config.onChainQuoting
+    ),
+    disabledChains: get(
+      config,
+      "disabledChains",
+      defaultValues.config.disabledChains
+    ),
+  };
+};
+
+export const randomIntFromInterval = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export const getTokensForChain = (
+  tokens: Token[],
+  chainId: number | string | undefined
+) => {
+  return chainId ? tokens.filter((t) => t.chainId === chainId) : tokens;
+};
+
+export const getFirstAvailableChainId = (
+  config: AppConfig,
+  direction: "from" | "to",
+  chains: ChainData[] | undefined = []
+) => {
+  // available chains are those that are not coming soon or disabled chains
+  const availableChains = chains.filter(
+    (c) =>
+      !config.comingSoonChainIds?.find((id) => id === c.chainId) &&
+      !config.disabledChains?.[
+        direction === "from" ? "source" : "destination"
+      ]?.some((id) => id === c.chainId)
+  );
+
+  if (
+    direction === "from" &&
+    config.initialAssets?.from &&
+    availableChains.some(
+      (c) => c.chainId === String(config.initialAssets?.from?.chainId)
+    )
+  ) {
+    return config.initialAssets.from.chainId;
+  }
+
+  if (
+    direction === "to" &&
+    config.initialAssets?.to &&
+    availableChains.some(
+      (c) => c.chainId === String(config.initialAssets?.to?.chainId)
+    )
+  ) {
+    return config.initialAssets.to.chainId;
+  }
+
+  return availableChains.length > 0 ? availableChains[0].chainId : undefined;
+};
+
+export const getDefaultTokenAddressForChain = (
+  tokens: Token[],
+  config: AppConfig,
+  chainId: number | string | undefined,
+  unavailableTokenAddress?: string
+): string | undefined => {
+  const chainIdDefaultToken = config.defaultTokensPerChain?.find(
+    (token) => token.chainId == chainId
+  );
+
+  if (
+    chainIdDefaultToken &&
+    chainIdDefaultToken.address !== unavailableTokenAddress
+  ) {
+    return chainIdDefaultToken.address;
+  }
+
+  const filteredTokens = chainId
+    ? tokens.filter(
+        (t) => t.chainId === chainId && t.address !== unavailableTokenAddress
+      )
+    : tokens;
+
+  return filteredTokens.length > 0 ? filteredTokens[0].address : undefined;
+};
+
+/**
+ * Retrieves the initial token address for a specific chain and direction.
+ * If no initial assets are set in config, returns the default token address for the chain.
+ *
+ * @param tokens - The list of tokens.
+ * @param config - The application configuration.
+ * @param chainId - The ID of the chain.
+ * @param direction - The direction ("from" or "to").
+ * @returns The initial token address if found; otherwise, the default token address.
+ */
+export const getInitialOrDefaultTokenAddressForChain = ({
+  chainId,
+  config,
+  direction,
+  tokens,
+  unavailableTokenAddress,
+}: {
+  tokens: Token[];
+  config: AppConfig;
+  chainId: number | string | undefined;
+  direction: "from" | "to";
+  unavailableTokenAddress?: string;
+}): string | undefined => {
+  if (
+    direction === "from" &&
+    config.initialAssets?.from &&
+    config.initialAssets.from.chainId === chainId
+  ) {
+    return config.initialAssets.from.address;
+  }
+
+  if (
+    direction === "to" &&
+    config.initialAssets?.to &&
+    config.initialAssets.to.chainId === chainId
+  ) {
+    return config.initialAssets.to.address;
+  }
+
+  return getDefaultTokenAddressForChain(
+    tokens,
+    config,
+    chainId,
+    unavailableTokenAddress
+  );
+};
+
+/**
+ * Filter tokens for destination chain
+ *
+ * Case 1: fromToken.bridgeOnly = true
+ * Destination token list shows only tokens with the same commonKey as fromToken
+ *
+ * Case 2: fromToken.bridgeOnly = false
+ * Destination token list shows all tokens with bridgeOnly = false
+ * OR Destination token list shows all tokens with the same commonKey as fromToken
+ * @param tokens
+ * @param selectedDestinationChain
+ * @param selectedSourceChainID
+ * @param selectedSourceToken
+ * @returns
+ */
+export const filterTokensForDestination = <T extends Token>(
+  tokens: T[],
+  selectedDestinationChain: ChainData | undefined,
+  selectedSourceToken: Token | undefined
+): T[] => {
+  let filteredTokens = [];
+
+  if (selectedSourceToken?.subGraphOnly) {
+    filteredTokens = tokens.filter(
+      (t) =>
+        shareSubgraphId(t, selectedSourceToken) &&
+        t.chainId === selectedDestinationChain?.chainId
+    );
+  }
+
+  filteredTokens = tokens.filter(
+    (t) => !t.subGraphOnly || shareSubgraphId(t, selectedSourceToken as Token)
+  );
+
+  // We don't want to show the same source token & chain in the destination list
+  // except for Cosmos swaps
+  return filteredTokens.filter((t) => {
+    const areSameToken =
+      t.address === selectedSourceToken?.address &&
+      t.chainId === selectedSourceToken.chainId;
+
+    // only return tokens that are on the same chain as the destination chain
+    const isValidChain = t.chainId === selectedDestinationChain?.chainId;
+    const isCosmosSwap =
+      selectedDestinationChain?.chainType === ChainType.COSMOS;
+
+    return isValidChain && (isCosmosSwap || !areSameToken);
+  });
+};

package/src/services/internal/errorService.ts

@@ -0,0 +1,124 @@
+import type {
+  SquidRouteError,
+  SquidStatusError,
+  TransactionError,
+  TransactionErrorWithMessage,
+} from "@/core/types/error";
+import { TransactionErrorType } from "@/core/types/error";
+
+export const transactionErrorCode: Record<string, TransactionErrorWithMessage> =
+  {
+    // Metamask
+    ACTION_REJECTED: {
+      type: TransactionErrorType.REJECTED_BY_USER,
+      message: "Return to the swap page and try again.",
+    },
+    // Keplr
+    "Request rejected": {
+      type: TransactionErrorType.REJECTED_BY_USER,
+      message: "Return to the swap page and try again.",
+    },
+    // Metamask
+    4001: {
+      type: TransactionErrorType.REJECTED_BY_USER,
+      message: "Return to the swap page and try again.",
+    },
+    CALL_EXCEPTION: {
+      type: TransactionErrorType.CALL_EXCEPTION,
+      message:
+        "Swap failed on the source chain. Please let us know by submitting a ticket here.",
+    },
+    UNKNOWN: {
+      type: TransactionErrorType.UNKNOWN,
+      message: "The transaction could not be initiated.",
+    },
+  };
+
+/**
+ * Check if the error is an EVM transaction error
+ * Because Typescript supports casting but that's only for compilation time,
+ * We need it at runtime since we're getting the error object from the wallet
+ * @param error
+ * @returns boolean
+ */
+export const isTransactionError = (error: any): error is TransactionError => {
+  return (
+    error &&
+    (typeof error.code === "string" ||
+      typeof error.code === "number" ||
+      typeof error.message === "string" ||
+      typeof error.reason === "string" ||
+      typeof error.action === "string")
+  );
+};
+
+/**
+ * Return the error from enum entry
+ * @param error
+ * @returns boolean
+ */
+export const getTransactionError = (
+  error: any
+): TransactionErrorWithMessage => {
+  if (isTransactionError(error)) {
+    const castError = error as TransactionError;
+    if (castError.code) return transactionErrorCode[castError.code];
+    if (castError.message) return transactionErrorCode[castError.message];
+    return transactionErrorCode.UNKNOWN;
+  }
+  return transactionErrorCode.UNKNOWN;
+};
+
+// --------------------
+// SQUID ROUTE ERRORS
+// --------------------
+// TODO: Components will be handled outside hooks lib
+// const squidRouteErrorMapping: Record<
+//   SquidRouteErrorType,
+//   string | JSX.Element
+// > = {
+//   Unknown: RouteDefaultErrorMsg(),
+//   UnknownError: RouteDefaultErrorMsg(),
+//   SquidServiceError: RouteDefaultErrorMsg(),
+// };
+
+/**
+ * Check if the error is an Squid route error
+ * Because Typescript supports casting but that's only for compilation time,
+ * We need it at runtime since we're getting the error object from the wallet
+ * @param error
+ * @returns boolean
+ */
+export const isSwapRouteError = (error: any): error is SquidRouteError => {
+  return (
+    error &&
+    (typeof error.code === "string" || typeof error.errorType === "string")
+  );
+};
+
+export const isStatusError = (error: any): error is SquidStatusError => {
+  return error && typeof error.errorType === "string";
+};
+
+/**
+ * Tries to parse as SquidRouteError Type & Return the error from Record entries
+ * @param error
+ * @returns string error message
+ */
+// TODO: move this outside hooks
+// export const getSquidRouteErrorMessage = (error: any): string | JSX.Element => {
+//   if (isSwapRouteError(error)) {
+//     // Try to get the error message from the error code
+//     const codeMsg =
+//       error.code || error.errorType
+//         ? squidRouteErrorMapping[
+//             (error.code ?? error.errorType) as SquidRouteErrorType
+//           ]
+//         : undefined;
+
+//     if (codeMsg) return codeMsg;
+//     // If there is no error code, try to get the error message from backend
+//     if (error.message) return error.message;
+//   }
+//   return squidRouteErrorMapping.Unknown;
+// };

package/src/services/internal/eventService.ts

@@ -0,0 +1,93 @@
+import type { EventListenerFunction, WidgetEventMap } from "@/core/types/event";
+import type { RouteResponse } from "@0xsquid/sdk/dist/types";
+
+export class WidgetEvents extends EventTarget {
+  private static instance: WidgetEvents;
+
+  private constructor() {
+    super();
+  }
+
+  // Singleton, because we need to access this service outside the widget
+  public static getInstance(): WidgetEvents {
+    if (!WidgetEvents.instance) {
+      WidgetEvents.instance = new WidgetEvents();
+    }
+    return WidgetEvents.instance;
+  }
+
+  /**
+   * Overriding the addEventListener method to make it easier to use with typescript
+   * @param type
+   * @param listener
+   * @param options
+   */
+  listenToWidget<T extends keyof WidgetEventMap>(
+    type: T,
+    listener: EventListenerFunction<T>,
+    options?: boolean | AddEventListenerOptions
+  ) {
+    super.addEventListener(type, listener as unknown as EventListener, options);
+  }
+
+  /**
+   * Overriding the removeEventListener method to make it easier to use with typescript
+   * @param type
+   * @param listener
+   * @param options
+   */
+  removeWidgetListener<T extends keyof WidgetEventMap>(
+    type: T,
+    listener: EventListenerFunction<T>,
+    options?: boolean | EventListenerOptions
+  ) {
+    super.removeEventListener(
+      type,
+      listener as unknown as EventListener,
+      options
+    );
+  }
+
+  /**
+   * Dispatch an event of the widget
+   * To be listened from an integrator website
+   * For example to display a success message when transaction is done
+   * @param name
+   * @param data
+   */
+  dispatch<T extends keyof WidgetEventMap>(name: T, data: WidgetEventMap[T]) {
+    this.dispatchEvent(new CustomEvent(name, { detail: data }));
+  }
+
+  /**
+   * Will dispatch the main axelar status of transaction
+   * This will be called every time the status is received by backend
+   * (Using interval to check status)
+   * @param status
+   */
+  dispatchSwapStatus(status: string) {
+    this.dispatch("swapStatus", { status });
+  }
+
+  /**
+   * Dispatch event when user executes a swap
+   * Only when we have the tx hash received
+   * @param route
+   */
+  dispatchSwapExecuteCall(route: RouteResponse["route"], txHash: string) {
+    this.dispatch("swap", { route, txHash });
+  }
+
+  /**
+   * Dispatch event when user changes chain/token
+   * @param swapParams
+   */
+  dispatchSwapParamsChanged(swapParams: {
+    fromChainId?: string;
+    toChainId?: string;
+    fromTokenAddress?: string;
+    toTokenAddress?: string;
+  }) {
+    this.dispatch("swapParamsChanged", { ...swapParams });
+  }
+}

package/src/services/internal/priceService.ts

@@ -0,0 +1,10 @@
+import { BigNumber as BN } from "bignumber.js";
+
+export const convertTokenAmountToUSD = (
+  tokenAmount: string,
+  priceUSD?: string
+) => {
+  return BN(tokenAmount)
+    .multipliedBy(priceUSD ?? "0")
+    .toFixed();
+};