@0xsquid/react-hooks 1.0.4 → 1.0.6

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

@@ -1,156 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,31 +0,0 @@
-// 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

@@ -1,52 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,21 +0,0 @@
-// 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

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

package/src/core/types/tokens.ts

@@ -1,30 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,83 +0,0 @@
-/* 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

@@ -1,66 +0,0 @@
-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,
-  };
-};