@0xsquid/react-hooks 1.0.0

package/src/core/queries/queries-keys.ts

@@ -0,0 +1,156 @@
+import type { SlippageOption } from "@/core/types/config";
+import type { SwapRoute } from "@/core/types/swap";
+import type { TransactionParams } from "@/core/types/transaction";
+import type { RouteResponse } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+
+/**
+ * Cache keys implementation for react-query caching / invalidating
+ * For example if you invalidate a top level query, all its child will be invalidated, e.g "all" key
+ * @returns Query Keys array
+ */
+export const keys = ({
+  address,
+  apiUrl,
+}: {
+  address?: string;
+  apiUrl?: string;
+}) => ({
+  all: [address, apiUrl, "all"],
+  // Chains
+  chains: () => [...keys({ apiUrl, address }).all, apiUrl, "chains"],
+
+  // Tokens
+  tokens: () => [...keys({ apiUrl, address }).all, apiUrl, "tokens"],
+  tokensForChain: (chainId?: number | string) => [
+    ...keys({ apiUrl, address }).tokens(),
+    chainId,
+    "tokensForChain",
+  ],
+  tokensPrice: (swapRoute: SwapRoute | undefined) => [
+    ...keys({ apiUrl, address }).tokens(),
+    swapRoute?.fromChainId,
+    swapRoute?.toChainId,
+    swapRoute?.toTokenAddress,
+    swapRoute?.fromTokenAddress,
+    "tokensPrice",
+  ],
+  singleTokenPrice: (tokenAddress?: string, chainId?: number | string) => [
+    ...keys({ apiUrl, address }).tokens(),
+    tokenAddress,
+    chainId,
+    "singleTokenPrice",
+  ],
+  axelarTokens: () => [...keys({ apiUrl }).tokens(), "axelarTokens"],
+
+  // Balances
+  balances: () => [...keys({ apiUrl, address }).all, "balances"],
+  balance: (
+    chainId?: number | string,
+    tokenAddress?: string,
+    userAddress?: string,
+    chainType: ChainType = ChainType.EVM
+  ) => [
+    ...keys({ apiUrl, address }).balances(),
+    address,
+    chainId,
+    tokenAddress,
+    chainType,
+    userAddress,
+    "balance",
+  ],
+  nativeBalanceBigNumber: (
+    chainId?: number | string,
+    tokenAddress?: string,
+    chainType: ChainType = ChainType.EVM
+  ) => [
+    ...keys({ apiUrl, address }).balances(),
+    address,
+    chainId,
+    tokenAddress,
+    chainType,
+    "nativeBalance",
+  ],
+  tokensBalanceForChain: (chainType?: ChainType, chainId?: number | string) => [
+    ...keys({ apiUrl, address }).balances(),
+    address,
+    chainId,
+    chainType,
+    "tokensBalanceForChain",
+  ],
+
+  allTokensBalance: (direction: "from" | "to") => [
+    ...keys({ apiUrl, address }).balances(),
+    address,
+    direction,
+    "allTokensBalance",
+  ],
+
+  allTokensPriceUSDAndBalance: () => [
+    ...keys({ apiUrl, address }).balances(),
+    address,
+    "allTokensPriceUSDAndBalance",
+  ],
+
+  // Transactions
+  transactions: () => [...keys({ apiUrl, address }).all, "transactions"],
+  transaction: (
+    swapDirection: SwapRoute | undefined,
+    price: string | undefined,
+    slippage: SlippageOption | undefined,
+    infiniteApproval: boolean | undefined,
+    getGasOnDestination: boolean | undefined,
+    expressEnabled: boolean | undefined,
+    sourceUserAddress: string | undefined
+  ) => [
+    ...keys({ apiUrl, address }).transactions(),
+    swapDirection?.fromChainId,
+    swapDirection?.toChainId,
+    swapDirection?.toTokenAddress,
+    swapDirection?.fromTokenAddress,
+    price,
+    slippage,
+    infiniteApproval,
+    getGasOnDestination,
+    expressEnabled,
+    sourceUserAddress,
+    "transaction",
+  ],
+  transactionStatus: (currentTransaction?: TransactionParams) => [
+    ...keys({ apiUrl, address }).transactions(),
+    currentTransaction?.routeType,
+    currentTransaction?.transactionId,
+    currentTransaction?.status,
+    currentTransaction?.fromChain?.chainId,
+    currentTransaction?.toChain?.chainId,
+    "transactionStatus",
+  ],
+  transactionStatusRefetcher: (currentTransaction?: TransactionParams) => [
+    ...keys({ apiUrl, address }).transactions(),
+    currentTransaction?.routeType,
+    currentTransaction?.transactionId,
+    currentTransaction?.status,
+    "transactionStatusRefetcher",
+  ],
+  routeApproved: (
+    swapDirection: SwapRoute | undefined,
+    sender: string | undefined,
+    routeData: RouteResponse["route"] | undefined
+  ) => [
+    ...keys({ apiUrl, address }).transactions(),
+    swapDirection?.fromChainId,
+    swapDirection?.toChainId,
+    swapDirection?.toTokenAddress,
+    swapDirection?.fromTokenAddress,
+    swapDirection?.destinationAddress,
+    sender,
+    routeData?.estimate?.fromAmount,
+    "routeApproved",
+  ],
+  aproveRoute: (tokenAddress?: string, amount?: string) => [
+    ...keys({ apiUrl, address }).transactions(),
+    tokenAddress,
+    amount,
+    "aproveRoute",
+  ],
+});

package/src/core/queries/react-query-config.ts

@@ -0,0 +1,13 @@
+import type { DefaultOptions } from "@tanstack/react-query";
+
+// Prevent fetching too soon after the first successful request.
+export const DEFAULT_STALE_TIME = 8000;
+
+export const defaultOptions: DefaultOptions = {
+  queries: {
+    staleTime: DEFAULT_STALE_TIME,
+    refetchOnWindowFocus: false,
+    retry: false, // Prevent refetching everytime a query fails, will do manually when needed
+    retryOnMount: false,
+  },
+};

package/src/core/types/components.ts

@@ -0,0 +1,16 @@
+export type ComponentSize = "xs" | "sm" | "md" | "lg";
+
+export interface SkeletonConfig {
+  hasRandomWidth?: boolean;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  animate?: boolean;
+  title?: string;
+  speed?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface LoadingComponentProps {
+  isLoading?: boolean;
+}

package/src/core/types/config.ts

@@ -0,0 +1,52 @@
+import type { DexName } from "./dex";
+
+export type SlippageOption = 0.5 | 1 | 1.5 | 3;
+
+export type TokenConfig = {
+  address: string;
+  chainId: number | string;
+};
+
+export interface AppConfig {
+  integratorId: string; // The integrator ID, this way we'll be able to provide data about volume to integrators
+  companyName?: string;
+  slippage?: SlippageOption;
+  enableExpress?: boolean;
+  enableGetGasOnDestination?: boolean;
+  infiniteApproval?: boolean;
+  apiUrl?: string;
+  internalSameChainSwapAllowed?: boolean; // Will display a message indicating that the swap is possible on the website
+  hideAnimations?: boolean;
+  preferDex?: DexName[] | string[]; // Can select a preferred dex to route transactions, will be sent to the sdk when executing route
+  advanced?: {
+    shareOnTwitter?: boolean;
+    disableTradeLimit?: boolean; // Will probably disappear in the future, when we remove the trade limit by default
+  };
+  priceImpactWarnings?: {
+    warning: number;
+    critical: number;
+  };
+  favTokens?: TokenConfig[];
+  comingSoonChainIds?: any[]; // number | string chain ids. If set to [], will show all chains
+  // The initial from and to assets when widget loads
+  initialAssets?: {
+    from?: TokenConfig;
+    to?: TokenConfig;
+  };
+  defaultTokensPerChain?: TokenConfig[]; // When chain is changed, this allow to chose the first token that will be selected
+  availableChains?: {
+    source?: (number | string)[];
+    destination?: (number | string)[];
+  }; // If set to [] or undefined, will show all chains
+  collectFees?: {
+    integratorAddress: string; // The EVM address of the integrator that will receive the fee
+    fee: number; // The amount in "basis points" for the fee. 50 = 0.05%. there is currently soft limit of 1% fee allowed for each tx.
+  };
+  showOnRampLink?: boolean; // If set to true, will show the default onramp link in the widget
+  onChainQuoting?: boolean; // Will pass this param to API when doing a quote. if true, then rpc calls for quoting instead of off chain calls
+  // Allows to disable chains for a specific direction (source or destination)
+  disabledChains?: {
+    source?: string[];
+    destination?: string[];
+  };
+}

package/src/core/types/dex.ts

@@ -0,0 +1,31 @@
+// This is a temporary list to help integrator
+// Selecting the right name, this enum will evolve in api side
+// This enum was not available in the sdk
+export enum DexName {
+  UNISWAP_V2 = "UniswapV2",
+  UNISWAP_V3 = "UniswapV3",
+  UBESWAP = "Ubeswap",
+  SPOOKYSWAP = "Spookyswap",
+  SUSHISWAP = "Sushiswap",
+  STELLASWAP = "Stellaswap",
+  PANGOLIN = "Pangolin",
+  CURVE_V2 = "Curve_v2",
+  CURVE_V2_CELO = "Curve_v2_celo",
+  ELLIPSIS = "Ellipsis",
+  QUICKSWAP = "Quickswap",
+  STELLASWAP_SADDLE = "Stellaswap_Saddle",
+  QUICKSWAP_V3 = "Quickswap_v3",
+  PANCAKESWAP = "Pancakeswap",
+  PANCAKESWAP_V3 = "Pancakeswap_v3",
+  PANCAKESWAP_STABLE = "Pancakeswap_stable",
+  TRADERJOE = "TraderJoe",
+  TRIDENT = "Trident",
+  PLATYPUS = "Platypus",
+  WOMBAT = "Wombat",
+  ZYBERSWAP = "Zyberswap",
+  KYBERSWAP = "KyberSwap",
+  KYBERSWAP_AGGREGATOR = "KyberSwap_Aggregator",
+  GMX = "GMX",
+  APESWAP = "Apeswap",
+  OPENOCEAN = "OpenOcean",
+}

package/src/core/types/error.ts

@@ -0,0 +1,52 @@
+import type { TransactionResponse } from "@ethersproject/providers";
+import type { BigNumber } from "ethers";
+
+export enum TransactionErrorType {
+  REJECTED_BY_USER,
+  CALL_EXCEPTION,
+  UNKNOWN,
+  WARNING,
+}
+
+export type TransactionErrorWithMessage = {
+  type: TransactionErrorType;
+  message: string;
+};
+
+export interface TransactionReplacedError extends Error {
+  code: string;
+  replacement: TransactionResponse;
+}
+
+export interface TransactionError {
+  reason: string;
+  code: string;
+  action: string;
+  message: string;
+  transaction: {
+    to: string;
+    data: string;
+    gasLimit: number;
+    value: { type: BigNumber; hex: string };
+    from: string;
+  };
+}
+
+export interface SquidRouteError {
+  code?: string;
+  errorType?: string;
+  message?: string;
+}
+
+export interface SquidStatusError {
+  errorType?: string;
+}
+
+export type SquidRouteErrorType =
+  | "Unknown"
+  | "UnknownError"
+  | "SquidServiceError";
+
+export enum SquidStatusErrorType {
+  NotFoundError = "NotFoundError",
+}

package/src/core/types/event.ts

@@ -0,0 +1,16 @@
+import type { RouteResponse } from "@0xsquid/sdk/dist/types";
+
+export interface WidgetEventMap {
+  swapStatus: { status: string };
+  swap: { route: RouteResponse["route"]; txHash: string };
+  swapParamsChanged: {
+    fromChainId?: string;
+    toChainId?: string;
+    fromTokenAddress?: string;
+    toTokenAddress?: string;
+  };
+}
+
+export type EventListenerFunction<T extends keyof WidgetEventMap> = (
+  event: CustomEvent<WidgetEventMap[T]>
+) => void;

package/src/core/types/route.ts

@@ -0,0 +1,21 @@
+// TODO: Might not be needed in this file
+// Could be on widget code only
+
+export type Routes =
+  | "swap"
+  | "settings"
+  | "wallets"
+  | "tokens"
+  | "chains"
+  | "history"
+  | "transaction"
+  | "allTokens"
+  | "destination";
+
+type HeaderButton = "back" | "settings" | "history";
+export interface WidgetRoute {
+  id: Routes;
+  path: string;
+  title: string;
+  headerButtons?: HeaderButton[];
+}

package/src/core/types/swap.ts

@@ -0,0 +1,8 @@
+export interface SwapRoute {
+  fromChainId?: number | string;
+  toChainId?: number | string;
+  fromTokenAddress?: string;
+  toTokenAddress?: string;
+  destinationAddress?: string;
+  fallbackAddress?: string;
+}

package/src/core/types/tokens.ts

@@ -0,0 +1,30 @@
+import type { Token } from "@0xsquid/sdk/dist/types";
+
+export type TokenWithBalance = Token & {
+  balance: string;
+  priceUSD?: string;
+  isFavorite?: boolean;
+};
+
+export type AxelarTokenData = {
+  id: string;
+  common_key: object;
+  native_chain: string;
+  fully_supported: boolean;
+  decimals: number;
+  chain_aliases: {
+    [key: string]: {
+      assetSymbol: string;
+      assetName: string;
+      minDepositAmt: number;
+      ibcDenom: string;
+      fullDenomPath: string;
+      tokenAddress: string;
+      mintLimit: number;
+    };
+  };
+};
+
+export type AxelarTokensData = {
+  assets: { [key: string]: AxelarTokenData };
+};

package/src/core/types/transaction.ts

@@ -0,0 +1,84 @@
+import type {
+  ChainData,
+  RouteResponse,
+  // StatusResponse,
+  Token,
+} from "@0xsquid/sdk/dist/types";
+import type { UseQueryResult } from "@tanstack/react-query";
+import type { TransactionErrorWithMessage } from "./error";
+
+export enum TransactionType {
+  BRIDGE = "BRIDGE",
+  BRIDGE_CALL = "BRIDGE_CALL",
+  CALL_BRIDGE = "CALL_BRIDGE",
+  CALL_BRIDGE_CALL = "CALL_BRIDGE_CALL",
+}
+
+export enum AxelarStatusResponseType {
+  GAS_PAID_NOT_ENOUGH_GAS = "gas_paid_not_enough_gas",
+  DESTINATION_EXECUTED = "destination_executed",
+  EXPRESS_EXECUTED = "express_executed",
+  CROSS_MULTICALL_EXECUTED = "CrossMulticallExecuted",
+  CROSS_MULTICALL_FAILED = "CrossMulticallFailed",
+  SRC_GATEWAY_CALLED = "source_gateway_called",
+  DEST_GATEWAY_APPROVED = "destination_gateway_approved",
+  DESTINATION_EXECUTE_ERROR = "destination_execute_error",
+  DESTINATION_EXECUTING = "executing",
+  UNKNOWN_ERROR = "unknown_error",
+  CANNOT_FETCH_STATUS = "cannot_fetch_status",
+  ERROR = "error",
+}
+
+export enum TransactionStatus {
+  // Submitted transaction, returned by squid axelar
+  SUCCESS = "success",
+  NEEDS_GAS = "needs_gas",
+  ONGOING = "ongoing",
+  PARTIAL_SUCCESS = "partial_success",
+  NOT_FOUND = "not_found",
+  // Unsubmitted Transaction, can be status from wallet
+  INITIAL_LOADING = "initialLoading",
+  ERROR = "error",
+  WARNING = "warning",
+  PENDING = "pending",
+  REJECTED = "rejected",
+}
+
+export interface TransactionParams {
+  routeType: string;
+  fromChain?: ChainData;
+  toChain?: ChainData;
+  nonce?: number;
+  transactionId: string | undefined;
+  timestamp?: number;
+  sourceStatus?: TransactionStatus; // The source / wallet transaction status
+  status: TransactionStatus; // Cross chain Transaction Status
+  error?: TransactionErrorWithMessage;
+  fromAddress?: string;
+  statusResponse?: any;
+  axelarUrl?: string;
+  sourceTxExplorerUrl?: string;
+  sourceExplorerImgUrl?: string;
+}
+
+export type TransactionHistoryStore = TransactionParams &
+  Pick<RouteResponse["route"], "params" | "estimate">;
+
+export interface TransactionStepsProps {
+  currentTransaction?: TransactionParams;
+  sourceExplorerUrl?: string;
+  fromToken?: Token;
+  toToken?: Token;
+  toChain?: ChainData;
+  fromChain?: ChainData;
+}
+
+export type TransactionStepProps = TransactionStepsProps & {
+  statusResponse?: UseQueryResult<any, unknown>;
+};
+
+export interface StepStatusGetterProps {
+  transaction?: TransactionParams;
+  statusResponse?: UseQueryResult<any, unknown>;
+  onlyFullStatusStep?: boolean;
+}

package/src/core/types/types.ts

@@ -0,0 +1,37 @@
+import type { Token } from "@0xsquid/sdk/dist/types";
+
+export type SwapDirection = "from" | "to";
+
+export type NextJsImg = {
+  src: string;
+}; // On nextjs the image will be of type {src: "/_next/static/media/metamask.8a0fd576.svg", width: number, height: number}
+export type ImgType = string | NextJsImg;
+
+// TODO: BELOW Are temporary types taken from api for development because SDK wasn't up to date
+export enum FeeType {
+  AXELAR_FEE = "Axelar Fee",
+  GAS_RECEIVER_FEE = "Cross-chain gas fees",
+}
+
+export type FeeCost = {
+  name: FeeType;
+  description: string;
+  percentage: string;
+  token: Token;
+  amount: string;
+  amountUSD: string;
+};
+
+export type ApiBasicResponse = {
+  error?: string;
+  errorType?: any;
+};
+
+export type TimeSpent = {
+  send_vote?: number;
+  type?: string;
+  destination_chain_type?: string;
+  source_chain_type?: string;
+  total?: number;
+  vote_ibc?: number;
+};

package/src/core/types/wallet.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
+import type { ChainType } from "@0xsquid/sdk/dist/types";
+import type { Chain } from "wagmi";
+
+export type TypedWindow = Window &
+  typeof globalThis & {
+    [key in WindowWalletFlag]?: any;
+  };
+
+export enum WindowWalletFlag {
+  Binance = "bbcSignTx",
+  Coinbase = "isCoinbaseWallet",
+  MetaMask = "isMetaMask",
+  WalletConnect = "walletConnect",
+  CosmostationEVM = "cosmostation",
+  BlockchainDotCom = "blockchaindotcom",
+  CosmostationCosmos = "cosmostation.providers.keplr",
+  Keplr = "keplr",
+  Leap = "leap",
+  Xdefi = "xfi",
+  XdefiCosmos = "xfi.keplr",
+  BitGet = "bitkeep",
+  TrustWallet = "trustwallet",
+  FetchAi = "keplr", // Sadly the same as the real Keplr wallet
+  Coin98 = "coin98",
+  Rabby = "isRabby",
+  OKX = "okxwallet",
+  Injected = "injected",
+  DefiConnect = "deficonnectProvider", // From crypto.com: https://github.com/crypto-com/deficonnect-monorepo/wiki/Chrome-Extension-Wallet-Integration
+  Zerion = "isZerion",
+  Snapper = "cosmos",
+  Exodus = "exodus",
+}
+
+export type ConnectorID =
+  | "metaMask"
+  | "walletConnect"
+  | "blockchaindotcom"
+  | "coinbaseWallet"
+  | "keplr"
+  | "cosmostation"
+  | "cosmostationCosmos"
+  | "leap"
+  | "xdefi"
+  | "xdeficosmos"
+  | "bitget"
+  | "fetchai"
+  | "coin98"
+  | "rabby"
+  | "okx"
+  | "injected"
+  | "zerion"
+  | "deficonnect"
+  | "snapper"
+  | "trustwallet"
+  | "exodus";
+
+export interface Wallet {
+  name: string;
+  type: ChainType;
+  connectorId: ConnectorID;
+  connectorName: string;
+  connector?: (chains?: Chain[]) => any; // For evm chains only
+  icon: string | undefined;
+  windowFlag: string; // Wallet identitiy attached to window object
+  canSwitchWallets: boolean;
+  direction?: "from" | "to";
+  connectedAddress?: string;
+}
+
+export interface AddEthereumChainParameter {
+  chainId: string; // A 0x-prefixed hexadecimal string
+  chainName: string;
+  nativeCurrency: {
+    name: string;
+    symbol: string; // 2-6 characters long
+    decimals: number;
+    icon: string;
+  };
+  rpcUrls: string[];
+  blockExplorerUrls?: string[];
+  iconUrls?: string[]; // Currently ignored.
+}

package/src/hooks/chains/useSquidChains.ts

@@ -0,0 +1,66 @@
+import { keys } from "@/core/queries/queries-keys";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const useSquidChains = () => {
+  const { squid, config } = useSquidStore();
+
+  const fuseSearchOptions = {
+    isCaseSensitive: false,
+    includeScore: false,
+    minMatchCharLength: 1,
+    threshold: 0.1,
+    keys: ["networkName", "chainName", "nativeCurrency.symbol"],
+  };
+
+  const supportedChains = useQuery(
+    keys({ apiUrl: config.apiUrl }).chains(),
+    () => {
+      return squid?.chains ?? [];
+    },
+    {
+      enabled: squid !== undefined,
+      // cacheTime: 1000 * 60 * 60 * 24,
+      // staleTime: 1000 * 60 * 60 * 24,
+    }
+  );
+
+  const chains = useMemo(
+    () => supportedChains.data ?? [],
+    [supportedChains.data]
+  );
+
+  const supportedSourceChains = useMemo(() => {
+    if (
+      config.availableChains &&
+      config.availableChains?.source &&
+      config.availableChains.source.length > 0
+    ) {
+      return chains.filter((c) =>
+        config.availableChains?.source?.includes(c.chainId)
+      );
+    }
+    return chains;
+  }, [chains, config.availableChains]);
+
+  const supportedDestinationChains = useMemo(() => {
+    if (
+      config.availableChains &&
+      config.availableChains?.destination &&
+      config.availableChains.destination.length > 0
+    ) {
+      return chains.filter((c) =>
+        config.availableChains?.destination?.includes(c.chainId)
+      );
+    }
+    return chains;
+  }, [chains, config.availableChains]);
+
+  return {
+    supportedSourceChains,
+    supportedDestinationChains,
+    chains,
+    fuseSearchOptions,
+  };
+};