@rango-dev/widget-embedded 0.19.0 → 0.19.1-next.0

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -0,0 +1,172 @@
+import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
+import type { ConfirmSwapWarnings, Wallet } from '../../types';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType, QuoteUpdateType } from '../../types';
+import { numberToString } from '../../utils/numbers';
+import {
+  generateQuoteWarnings,
+  getPriceImpact,
+  isNumberOfSwapsChanged,
+  isQuoteChanged,
+  isQuoteInternalCoinsUpdated,
+  isQuoteSwappersUpdated,
+} from '../../utils/quote';
+import {
+  checkSlippageErrors,
+  generateBalanceWarnings,
+  getLimitErrorMessage,
+  getMinRequiredSlippage,
+  getQuoteOutputAmount,
+  hasLimitError,
+  isOutputAmountChangedALot,
+} from '../../utils/swap';
+
+/**
+ * A request can be successful but in body of the response, it can be some case which is considered as failed.
+ */
+export function throwErrorIfResponseIsNotValid(response: BestRouteResponse) {
+  if (!response.result) {
+    throw new Error(errorMessages().noResultError.title, {
+      cause: {
+        type: QuoteErrorType.NO_RESULT,
+        diagnosisMessage: response.diagnosisMessages?.[0],
+      },
+    });
+  }
+  const limitError = hasLimitError(response);
+  if (limitError) {
+    const { swap, recommendation, fromAmountRangeError } =
+      getLimitErrorMessage(response);
+
+    throw new Error('bridge limit error', {
+      cause: {
+        type: QuoteErrorType.BRIDGE_LIMIT,
+        swap: swap,
+        recommendation,
+        fromAmountRangeError,
+      },
+    });
+  }
+
+  const recommendedSlippages = checkSlippageErrors(response);
+
+  if (recommendedSlippages) {
+    const minRequiredSlippage = getMinRequiredSlippage(response);
+    throw new Error('', {
+      cause: {
+        type: QuoteErrorType.INSUFFICIENT_SLIPPAGE,
+        recommendedSlippages,
+        minRequiredSlippage,
+      },
+    });
+  }
+
+  return response;
+}
+
+export function generateWarnings(
+  previousQuote: BestRouteResponse | undefined,
+  currentQuote: BestRouteResponse,
+  params: {
+    fromToken: Token;
+    toToken: Token;
+    meta: { blockchains: BlockchainMeta[]; tokens: Token[] };
+    selectedWallets: Wallet[];
+    userSlippage: number;
+  }
+): ConfirmSwapWarnings {
+  let quoteChanged = false;
+  if (previousQuote) {
+    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  }
+  const output: ConfirmSwapWarnings = {
+    quote: null,
+    quoteUpdate: null,
+    balance: null,
+  };
+
+  const quoteWarning = generateQuoteWarnings(currentQuote, {
+    fromToken: params.fromToken,
+    toToken: params.toToken,
+    tokens: params.meta.tokens,
+    userSlippage: params.userSlippage,
+  });
+
+  if (quoteWarning) {
+    output.quote = quoteWarning;
+  }
+
+  if (previousQuote && quoteChanged) {
+    if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
+        newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
+        percentageChange: numberToString(
+          getPriceImpact(
+            getQuoteOutputAmount(previousQuote) ?? '',
+            getQuoteOutputAmount(currentQuote) ?? ''
+          ),
+          null,
+          2
+        ),
+      };
+    } else if (isNumberOfSwapsChanged(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_UPDATED,
+      };
+    } else if (isQuoteSwappersUpdated(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_SWAPPERS_UPDATED,
+      };
+    } else if (isQuoteInternalCoinsUpdated(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_COINS_UPDATED,
+      };
+    }
+  }
+
+  const balanceWarnings = generateBalanceWarnings(
+    currentQuote,
+    params.selectedWallets,
+    params.meta.blockchains
+  );
+  const enoughBalance = balanceWarnings.length === 0;
+
+  if (!enoughBalance) {
+    output.balance = {
+      messages: balanceWarnings,
+    };
+  }
+
+  return output;
+}
+
+export function handleQuoteErrors(error: any): ConfirmSwapFetchResult {
+  if (error?.code === 'ERR_CANCELED') {
+    return {
+      swap: null,
+      error: {
+        type: QuoteErrorType.REQUEST_CANCELED,
+      },
+      warnings: null,
+    };
+  }
+
+  if (error.cause) {
+    return {
+      swap: null,
+      error: error.cause,
+      warnings: null,
+    };
+  }
+
+  return {
+    swap: null,
+    error: {
+      type: QuoteErrorType.REQUEST_FAILED,
+    },
+    warnings: null,
+  };
+}

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -0,0 +1,137 @@
+import type { ConfirmSwap, Params } from './useConfirmSwap.types';
+import type { PendingSwapSettings } from '../../types';
+import type { BestRouteResponse } from 'rango-sdk';
+
+import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import { useEffect } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { useWalletsStore } from '../../store/wallets';
+import { isFeatureEnabled } from '../../utils/settings';
+import { createQuoteRequestBody, getWalletsForNewSwap } from '../../utils/swap';
+import { useFetchQuote } from '../useFetchQuote';
+
+import {
+  generateWarnings,
+  handleQuoteErrors,
+  throwErrorIfResponseIsNotValid,
+} from './useConfirmSwap.helpers';
+
+export function useConfirmSwap(): ConfirmSwap {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    setQuote,
+    quote: initialQuote,
+    customDestination: customDestinationFromStore,
+    setQuoteWarningsConfirmed,
+  } = useQuoteStore();
+
+  const {
+    slippage,
+    customSlippage,
+    affiliatePercent,
+    affiliateRef,
+    affiliateWallets,
+    disabledLiquiditySources,
+  } = useAppStore();
+  const { connectedWallets } = useWalletsStore();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const { features } = useAppStore().config;
+  const { enableNewLiquiditySources } = useAppStore().config;
+
+  const userSlippage = customSlippage || slippage;
+
+  const { fetch: fetchQuote, cancelFetch, loading } = useFetchQuote();
+
+  useEffect(() => cancelFetch, []);
+
+  const fetch: ConfirmSwap['fetch'] = async (params: Params) => {
+    const selectedWallets = params.selectedWallets;
+    const customDestination =
+      params?.customDestination ?? customDestinationFromStore;
+
+    if (!fromToken || !toToken || !inputAmount) {
+      return {
+        quote: null,
+        swap: null,
+        error: null,
+        warnings: null,
+      };
+    }
+
+    const requestBody = createQuoteRequestBody({
+      fromToken,
+      toToken,
+      inputAmount,
+      wallets: connectedWallets,
+      selectedWallets,
+      excludeLiquiditySources: enableNewLiquiditySources,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+      initialQuote: initialQuote ?? undefined,
+      destination: customDestination,
+    });
+    if (isFeatureEnabled('experimentalRoute', features)) {
+      requestBody.experimental = true;
+    }
+    let currentQuote: BestRouteResponse;
+    try {
+      currentQuote = await fetchQuote(requestBody).then((response) =>
+        throwErrorIfResponseIsNotValid(response)
+      );
+      setQuote(currentQuote);
+    } catch (error: any) {
+      const confirmSwapResult = handleQuoteErrors(error);
+      return confirmSwapResult;
+    }
+
+    const swapSettings: PendingSwapSettings = {
+      slippage: userSlippage.toString(),
+      disabledSwappersGroups: disabledLiquiditySources,
+    };
+    const swap = calculatePendingSwap(
+      inputAmount.toString(),
+      currentQuote,
+      getWalletsForNewSwap(selectedWallets),
+      swapSettings,
+      false,
+      { blockchains, tokens }
+    );
+
+    const confirmSwapWarnings = generateWarnings(
+      initialQuote ?? undefined,
+      currentQuote,
+      {
+        fromToken,
+        toToken,
+        meta: { blockchains, tokens },
+        selectedWallets,
+        userSlippage,
+      }
+    );
+
+    if (confirmSwapWarnings.quoteUpdate) {
+      setQuoteWarningsConfirmed(false);
+    }
+
+    return {
+      quote: currentQuote,
+      swap,
+      error: null,
+      warnings: confirmSwapWarnings,
+    };
+  };
+
+  return {
+    loading,
+    fetch,
+    cancelFetch,
+  };
+}

package/src/hooks/useConfirmSwap/useConfirmSwap.types.ts

@@ -0,0 +1,19 @@
+import type { ConfirmSwapWarnings, QuoteError, Wallet } from '../../types';
+import type { PendingSwap } from 'rango-types';
+
+export type ConfirmSwapFetchResult = {
+  swap: PendingSwap | null;
+  error: QuoteError | null;
+  warnings: ConfirmSwapWarnings | null;
+};
+
+export type ConfirmSwap = {
+  loading: boolean;
+  fetch: (params: Params) => Promise<ConfirmSwapFetchResult>;
+  cancelFetch: () => void;
+};
+
+export type Params = {
+  selectedWallets: Wallet[];
+  customDestination?: string;
+};

package/src/hooks/{useFetchBestRoute.ts → useFetchQuote.ts}

@@ -4,18 +4,18 @@ import { useRef, useState } from 'react';
 
 import { httpService } from '../services/httpService';
 
-interface UseFetchBestRoute {
+interface UseFetchQuote {
   fetch: (requestBody: BestRouteRequest) => Promise<BestRouteResponse>;
   cancelFetch: () => void;
   loading: boolean;
 }
 
-export function useFetchBestRoute(): UseFetchBestRoute {
+export function useFetchQuote(): UseFetchQuote {
   const [loading, setLoading] = useState(false);
   const abortController = useRef<AbortController | null>(null);
   const cancel = () => abortController.current?.abort();
 
-  const fetch: UseFetchBestRoute['fetch'] = async (requestBody) => {
+  const fetch: UseFetchQuote['fetch'] = async (requestBody) => {
     cancel();
     abortController.current = new AbortController();
 

package/src/hooks/useForceAutoConnect.ts

@@ -0,0 +1,27 @@
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef } from 'react';
+
+import { SearchParams } from '../constants/searchParams';
+import { useAppStore } from '../store/AppStore';
+
+export function useForceAutoConnect(): void {
+  const { connect, state } = useWallets();
+  const initiated = useRef<{ [key: string]: boolean }>({});
+  const { fetchStatus } = useAppStore();
+  const walletType =
+    new URLSearchParams(location.search).get(SearchParams.AUTO_CONNECT) || '';
+  const walletState = state(walletType);
+
+  useEffect(() => {
+    const shouldTryConnect =
+      fetchStatus === 'success' &&
+      walletType &&
+      walletState.installed &&
+      !walletState.connecting &&
+      !walletState.connected;
+    if (shouldTryConnect && !initiated.current[walletType]) {
+      initiated.current[walletType] = true;
+      void connect(walletType);
+    }
+  }, [walletState, fetchStatus]);
+}

package/src/hooks/useLanguage.ts

@@ -3,18 +3,17 @@ import type { LanguageItem } from '../constants/languages';
 import { type Language } from '@rango-dev/ui';
 
 import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants/languages';
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
 
 interface UseLanguage {
   languages: LanguageItem[];
   defaultLanguage: Language;
   activeLanguage: Language;
-  changeLanguage: (language: Language) => void;
+  changeLanguage: (language?: Language) => void;
 }
 
 export function useLanguage(): UseLanguage {
-  const language = useSettingsStore.use.language();
-  const setLanguage = useSettingsStore.use.setLanguage();
+  const { setLanguage, language } = useAppStore();
   const languages = LANGUAGES;
   const defaultLanguage = DEFAULT_LANGUAGE;
 
@@ -22,6 +21,6 @@ export function useLanguage(): UseLanguage {
     activeLanguage: language,
     languages,
     defaultLanguage,
-    changeLanguage: setLanguage,
+    changeLanguage: (language) => setLanguage(language || DEFAULT_LANGUAGE),
   };
 }

package/src/hooks/useNavigateBack.ts

@@ -1,55 +1,6 @@
-import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useBestRouteStore } from '../store/bestRoute';
-
-export function useNavigateBack() {
-  const isRouterInContext = useInRouterContext();
+export function useNavigateBack(): () => void {
   const navigate = useNavigate();
-  const routeWalletsConfirmed = useBestRouteStore.use.routeWalletsConfirmed();
-
-  navigationRoutes;
-
-  const navigateBackFrom = (currentRoute: string) => {
-    if (currentRoute === navigationRoutes.swapDetails) {
-      return navigate('/' + navigationRoutes.swaps, { replace: true });
-    }
-
-    if (
-      !isRouterInContext ||
-      (window.history.state && window.history.state.idx > 0)
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      navigate(-1);
-    } else {
-      if (
-        [navigationRoutes.settings, navigationRoutes.wallets].includes(
-          currentRoute
-        ) &&
-        routeWalletsConfirmed
-      ) {
-        return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
-      }
-      if (
-        [
-          navigationRoutes.fromSwap,
-          navigationRoutes.toSwap,
-          navigationRoutes.settings,
-          navigationRoutes.wallets,
-          navigationRoutes.swaps,
-          navigationRoutes.confirmSwap,
-        ].includes(currentRoute)
-      ) {
-        navigate(navigationRoutes.home, { replace: true });
-      } else if (currentRoute === navigationRoutes.fromBlockchain) {
-        navigate('/' + navigationRoutes.fromSwap, { replace: true });
-      } else if (currentRoute === navigationRoutes.toBlockchain) {
-        navigate('/' + navigationRoutes.fromSwap, { replace: true });
-      } else if (currentRoute === navigationRoutes.liquiditySources) {
-        navigate('/' + navigationRoutes.settings, { replace: true });
-      }
-    }
-  };
-
-  return { navigateBackFrom };
+  return () => navigate(-1);
 }

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -1 +1 @@
-export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];
+export const MOST_USED_BLOCKCHAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -1,13 +1,16 @@
-import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type {
+  PrepareListOptions,
+  PrepareOutput,
+} from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 
 export function prepare(
   blockchains: BlockchainMeta[],
   preferredBlockchains: string[],
   options?: PrepareListOptions
-) {
+): PrepareOutput {
   /*
    * TODO:
    * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
@@ -25,17 +28,37 @@ export function prepare(
     let preferredBlockchainsWithoutMainList = preferredBlockchains;
 
     if (preferredBlockchains.length <= options.limit) {
-      /*
-       * For first X (limit) numbers, we need to remove them from preferred if exists.
+      /**
+       *
+       * if we want to show 10 items (aka `options.limit`)
+       * and have these items as our preferred list: [x,y,z]
+       * and these as our main list: [A, B, C, D, E, F, G, H, I, J]
+       * the final list will be like this: [...preferred, ...mainList].
+       *
+       * Since we have a limit (e.g. 10) on our list (preferred + mainList),
+       * we only should check those items from main list that will be in final list.
+       *
+       * finalListWithoutLimit = [x,y,z, A, B, C, D, E, F, G, H, I, J]
+       * finalListWithLimit = [x,y,z, A, B, C, D, E, F, G]
+       *
+       * As you can see, [H, I, J] will not be in our list.
+       *
+       * The following code only check preffred blockchain
+       * shouldn't be in first 7 of 10 items in main list. (Since, the last 3 items will not be in the final list and we should check those.)
        */
-      for (let i = 0; i < options.limit; i++) {
+      const howManyItemsShouldBeCheckedFromMainList =
+        options.limit - preferredBlockchains.length;
+
+      for (let i = 0; i <= howManyItemsShouldBeCheckedFromMainList; i++) {
         const blockchain = list[i];
+
         preferredBlockchainsWithoutMainList =
           preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
             return blockchain.name !== preferredBlockchain;
           });
       }
     }
+
     list.sort(
       generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
     );
@@ -57,7 +80,7 @@ export function sortByMostUsedBlockchains(
   a: BlockchainMeta,
   b: BlockchainMeta
 ) {
-  const mostUsed = MOST_USED_BLOCKChAINS;
+  const mostUsed = MOST_USED_BLOCKCHAINS;
   const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
   const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
   const aIsMostUsed = aIndexInMostUsed > -1;
@@ -106,3 +129,10 @@ export function generateSortByPreferredBlockchainsFor(
     return 0;
   };
 }
+
+export function isInVisibleList(
+  blockchain: string,
+  prepareOutput: PrepareOutput
+): boolean {
+  return !!prepareOutput.list.find((item) => item.name === blockchain);
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts

@@ -2,6 +2,66 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { TransactionType } from 'rango-sdk';
 
+export const sampleDefaultBlockchainNames = [
+  'ETH',
+  'COSMOS',
+  'OSMOSIS',
+  'BSC',
+  'ARBITRUM',
+  'POLYGON',
+  'ZKSYNC',
+  'STARKNET',
+  'OPTIMISM',
+  'AVAX_CCHAIN',
+  'POLYGONZK',
+  'LINEA',
+  'TRON',
+  'BTC',
+  'NEUTRON',
+  'NOBLE',
+  'SOLANA',
+  'CRONOS',
+  'BNB',
+  'AURORA',
+  'MAYA',
+  'THOR',
+  'BOBA',
+  'MOONBEAM',
+  'MOONRIVER',
+  'OKC',
+  'BOBA_AVALANCHE',
+  'LTC',
+  'BCH',
+  'HECO',
+  'STARGAZE',
+  'CRYPTO_ORG',
+  'CHIHUAHUA',
+  'BANDCHAIN',
+  'COMDEX',
+  'REGEN',
+  'IRIS',
+  'EMONEY',
+  'JUNO',
+  'STRIDE',
+  'MARS',
+  'TERRA',
+  'BITSONG',
+  'AKASH',
+  'KI',
+  'PERSISTENCE',
+  'MEDIBLOC',
+  'KUJIRA',
+  'SENTINEL',
+  'INJECTIVE',
+  'SECRET',
+  'KONSTELLATION',
+  'STARNAME',
+  'BITCANNA',
+  'UMEE',
+  'DESMOS',
+  'LUMNETWORK',
+];
+
 export const sampleBlockchains: BlockchainMeta[] = [
   {
     name: 'ETH',