@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/constants/errors.ts

@@ -1,8 +1,8 @@
-import type { QuoteError } from '../types';
+import type { ConfirmSwapError } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { QuoteErrorType } from '../types';
+import { ConfirmSwapErrorTypes } from '../types';
 
 export const errorMessages = () => {
   return {
@@ -10,22 +10,18 @@ export const errorMessages = () => {
     liquiditySourcesError: {
       title: i18n.t('Please reset your liquidity sources.'),
       description: i18n.t(
-        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources.'
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
       ),
     },
-    noResultError: {
-      title: i18n.t('No Routes Found.'),
+    noRoutesError: {
+      title: i18n.t('No Routes Found'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
       ),
     },
     bridgeLimitErrors: {
-      increaseAmount: i18n.t(
-        'Bridge Limit Error: Please increase your amount.'
-      ),
-      decreaseAmount: i18n.t(
-        'Bridge Limit Error: Please decrease your amount.'
-      ),
+      increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
+      decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
     },
     highValueLossError: {
       impactTitle: i18n.t('High Price Impact'),
@@ -33,9 +29,9 @@ export const errorMessages = () => {
       description: i18n.t(
         'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
       ),
-      confirmMessage: i18n.t('Confirm high price impact'),
+      confirmMessage: i18n.t('Confirm High price impact'),
     },
-    quoteUpdatedWithHighValueLoss: {
+    routeUpdatedWithHighValueLoss: {
       title: i18n.t(
         'Route updated and price impact is too high, try again later!'
       ),
@@ -51,12 +47,14 @@ export const errorMessages = () => {
   };
 };
 
-export function getQuoteErrorMessage(error: QuoteError) {
+export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
   switch (error.type) {
-    case QuoteErrorType.NO_RESULT:
-      return error.diagnosisMessage ?? errorMessages().noResultError.title;
-    case QuoteErrorType.REQUEST_FAILED:
+    case ConfirmSwapErrorTypes.NO_ROUTE:
+      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
+    case ConfirmSwapErrorTypes.REQUEST_FAILED:
       return errorMessages().genericServerError;
+    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/index.ts

@@ -1,2 +1 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-export const DEFAULT_BASE_URL = 'https://api.rango.exchange';

package/src/constants/messages.ts

@@ -5,6 +5,6 @@ export const swapButtonTitles = () => {
     connectWallet: i18n.t('Connect Wallet'),
     swap: i18n.t('Swap'),
     swapAnyway: i18n.t('Swap anyway'),
-    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
+    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
   };
 };

package/src/constants/navigationRoutes.ts

@@ -1,16 +1,17 @@
 export const navigationRoutes = {
   home: '/',
   fromSwap: 'from-swap',
+  fromBlockchain: '/from-swap/blockchains',
+  toBlockchain: '/to-swap/blockchains',
   toSwap: 'to-swap',
-  blockchains: 'blockchains',
   settings: 'settings',
-  liquiditySources: 'liquidity-sources',
-  themes: 'themes',
-  bridges: 'bridges',
-  exchanges: 'exchanges',
-  languages: 'languages',
+  liquiditySources: '/settings/liquidity-sources',
+  themes: '/settings/themes',
+  bridges: '/settings/bridges',
+  exchanges: '/settings/exchanges',
+  languages: '/settings/languages',
   swaps: 'swaps',
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',
-  swapDetails: ':requestId',
+  swapDetails: 'swaps/:requestId',
 };

package/src/constants/searchParams.ts

@@ -4,5 +4,4 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
 }

package/src/constants/warnings.ts

@@ -1,14 +1,14 @@
-import type { QuoteUpdateWarning } from '../types';
+import type { RouteWarning } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { QuoteUpdateType } from '../types';
+import { RouteWarningType } from '../types';
 
-export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
+export function getRouteWarningMessage(warning: RouteWarning) {
   switch (warning.type) {
-    case QuoteUpdateType.QUOTE_UPDATED:
+    case RouteWarningType.ROUTE_UPDATED:
       return i18n.t('Route has been updated.');
-    case QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED:
+    case RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
       return i18n.t(
         'Output amount changed to {newOutputAmount} ({percentageChange}% change).',
         {
@@ -16,9 +16,9 @@ export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
           percentageChange: warning.percentageChange,
         }
       );
-    case QuoteUpdateType.QUOTE_SWAPPERS_UPDATED:
+    case RouteWarningType.ROUTE_SWAPPERS_UPDATED:
       return i18n.t('Route swappers has been updated.');
-    case QuoteUpdateType.QUOTE_COINS_UPDATED:
+    case RouteWarningType.ROUTE_COINS_UPDATED:
       return i18n.t('Route internal coins has been updated.');
     default:
       return '';

package/src/hooks/useConfirmSwap.ts

@@ -0,0 +1,303 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  ConfirmSwapError,
+  ConfirmSwapWarnings,
+  PendingSwapSettings,
+  Wallet,
+} from '../types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { BestRouteResponse } from 'rango-sdk';
+
+import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import BigNumber from 'bignumber.js';
+import { useEffect } from 'react';
+
+import { errorMessages } from '../constants/errors';
+import { HIGH_SLIPPAGE } from '../constants/swapSettings';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { useWalletsStore } from '../store/wallets';
+import {
+  ConfirmSwapErrorTypes,
+  RouteWarningType,
+  SlippageWarningType,
+} from '../types';
+import { numberToString } from '../utils/numbers';
+import {
+  isNumberOfSwapsChanged,
+  isRouteChanged,
+  isRouteInternalCoinsUpdated,
+  isRouteSwappersUpdated,
+} from '../utils/routing';
+import {
+  createBestRouteRequestBody,
+  getBalanceWarnings,
+  getMinRequiredSlippage,
+  getOutputRatio,
+  getPercentageChange,
+  getRouteOutputAmount,
+  getWalletsForNewSwap,
+  hasProperSlippage,
+  isOutputAmountChangedALot,
+  outputRatioHasWarning,
+} from '../utils/swap';
+
+import { useFetchBestRoute } from './useFetchBestRoute';
+
+export type ConfirmSwapFetchResult = {
+  swap: PendingSwap | null;
+  error: ConfirmSwapError | null;
+  warnings: ConfirmSwapWarnings | null;
+};
+
+export type ConfirmSwap = {
+  loading: boolean;
+  fetch: (params: Params) => Promise<ConfirmSwapFetchResult>;
+  cancelFetch: () => void;
+};
+
+type Params = {
+  selectedWallets: Wallet[];
+  customDestination?: string;
+};
+
+/**
+ * A request can be successful but in body of the response, it can be some case which is considered as failed.
+ */
+function throwErrorIfResponseIsNotValid(
+  response: BestRouteResponse,
+  params: { inputUsdValue: BigNumber | null; outputUsdValue: number | null }
+) {
+  if (!response.result) {
+    throw new Error(errorMessages().noRoutesError.title, {
+      cause: {
+        type: ConfirmSwapErrorTypes.NO_ROUTE,
+        diagnosisMessage: response.diagnosisMessages?.[0],
+      },
+    });
+  }
+
+  const newRouteOutputUsdValue = new BigNumber(
+    response.result?.outputAmount || '0'
+  ).multipliedBy(params.outputUsdValue || 0);
+
+  const outputRatio = getOutputRatio(
+    params.inputUsdValue,
+    newRouteOutputUsdValue
+  );
+  const highValueLoss = outputRatioHasWarning(
+    params.inputUsdValue,
+    outputRatio
+  );
+
+  if (highValueLoss) {
+    throw new Error('High value loss for route', {
+      cause: {
+        type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+      },
+    });
+  }
+
+  return response;
+}
+
+function generateWarnings(
+  previousRoute: BestRouteResponse,
+  currentRoute: BestRouteResponse,
+  params: {
+    selectedWallets: Wallet[];
+    userSlippage: number;
+  }
+): ConfirmSwapWarnings {
+  const routeChanged = isRouteChanged(previousRoute, currentRoute);
+  const output: ConfirmSwapWarnings = {
+    balance: null,
+    route: null,
+    slippage: null,
+  };
+
+  if (routeChanged) {
+    if (isOutputAmountChangedALot(previousRoute, currentRoute)) {
+      output.route = {
+        type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+        newOutputAmount: numberToString(getRouteOutputAmount(currentRoute)),
+        percentageChange: numberToString(
+          getPercentageChange(
+            getRouteOutputAmount(previousRoute),
+            getRouteOutputAmount(currentRoute)
+          ),
+          null,
+          2
+        ),
+      };
+    } else if (isNumberOfSwapsChanged(previousRoute, currentRoute)) {
+      output.route = {
+        type: RouteWarningType.ROUTE_UPDATED,
+      };
+    } else if (isRouteSwappersUpdated(previousRoute, currentRoute)) {
+      output.route = {
+        type: RouteWarningType.ROUTE_SWAPPERS_UPDATED,
+      };
+    } else if (isRouteInternalCoinsUpdated(previousRoute, currentRoute)) {
+      output.route = {
+        type: RouteWarningType.ROUTE_COINS_UPDATED,
+      };
+    }
+  }
+
+  const balanceWarnings = getBalanceWarnings(
+    currentRoute,
+    params.selectedWallets
+  );
+  const enoughBalance = balanceWarnings.length === 0;
+
+  if (!enoughBalance) {
+    output.balance = {
+      messages: balanceWarnings,
+    };
+  }
+
+  const minRequiredSlippage = getMinRequiredSlippage(previousRoute);
+  const highSlippage = params.userSlippage > HIGH_SLIPPAGE;
+
+  if (!hasProperSlippage(params.userSlippage.toString(), minRequiredSlippage)) {
+    output.slippage = {
+      type: SlippageWarningType.INSUFFICIENT_SLIPPAGE,
+      slippage: minRequiredSlippage,
+    };
+  } else if (highSlippage) {
+    output.slippage = {
+      type: SlippageWarningType.HIGH_SLIPPAGE,
+      slippage: params.userSlippage.toString(),
+    };
+  }
+
+  return output;
+}
+
+export function useConfirmSwap(): ConfirmSwap {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    inputUsdValue,
+    setRoute,
+    bestRoute: initialRoute,
+    customDestination: customDestinationFromStore,
+  } = useBestRouteStore();
+
+  const {
+    slippage,
+    customSlippage,
+    affiliatePercent,
+    affiliateRef,
+    affiliateWallets,
+    disabledLiquiditySources,
+  } = useSettingsStore();
+  const { connectedWallets } = useWalletsStore();
+
+  const { meta } = useMetaStore();
+
+  const userSlippage = customSlippage || slippage;
+
+  const { fetch: fetchBestRoute, cancelFetch, loading } = useFetchBestRoute();
+
+  useEffect(() => cancelFetch, []);
+
+  const fetch: ConfirmSwap['fetch'] = async (params: Params) => {
+    const selectedWallets = params.selectedWallets;
+    const customDestination =
+      params?.customDestination ?? customDestinationFromStore;
+
+    if (!fromToken || !toToken || !inputAmount || !initialRoute) {
+      return {
+        route: null,
+        swap: null,
+        error: null,
+        warnings: null,
+      };
+    }
+
+    const requestBody = createBestRouteRequestBody({
+      fromToken,
+      toToken,
+      inputAmount,
+      wallets: connectedWallets,
+      selectedWallets,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+      initialRoute,
+      destination: customDestination,
+    });
+
+    let currentRoute: BestRouteResponse;
+    try {
+      currentRoute = await fetchBestRoute(requestBody).then((response) =>
+        throwErrorIfResponseIsNotValid(response, {
+          outputUsdValue: toToken.usdPrice,
+          inputUsdValue,
+        })
+      );
+      setRoute(currentRoute);
+    } catch (error: any) {
+      if (error?.code === 'ERR_CANCELED') {
+        return {
+          swap: null,
+          error: {
+            type: ConfirmSwapErrorTypes.REQUEST_CANCELED,
+          },
+          warnings: null,
+        };
+      }
+
+      if (error.cause) {
+        return {
+          swap: null,
+          error: error.cause,
+          warnings: null,
+        };
+      }
+
+      return {
+        swap: null,
+        error: {
+          type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+        },
+        warnings: null,
+      };
+    }
+
+    const swapSettings: PendingSwapSettings = {
+      slippage: userSlippage.toString(),
+      disabledSwappersGroups: disabledLiquiditySources,
+    };
+    const swap = calculatePendingSwap(
+      inputAmount.toString(),
+      currentRoute,
+      getWalletsForNewSwap(selectedWallets),
+      swapSettings,
+      false,
+      meta
+    );
+
+    return {
+      route: currentRoute,
+      swap,
+      error: null,
+      warnings: generateWarnings(initialRoute, currentRoute, {
+        selectedWallets,
+        userSlippage,
+      }),
+    };
+  };
+
+  return {
+    loading,
+    fetch,
+    cancelFetch,
+  };
+}

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

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

package/src/hooks/useLanguage.ts

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

package/src/hooks/useNavigateBack.ts

@@ -1,6 +1,55 @@
-import { useNavigate } from 'react-router-dom';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
 
-export function useNavigateBack(): () => void {
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useBestRouteStore } from '../store/bestRoute';
+
+export function useNavigateBack() {
+  const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
-  return () => navigate(-1);
+  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 };
 }

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,16 +1,13 @@
-import type {
-  PrepareListOptions,
-  PrepareOutput,
-} from './usePrepareBlockchainList.types';
+import type { PrepareListOptions } 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.
@@ -28,37 +25,17 @@ export function prepare(
     let preferredBlockchainsWithoutMainList = preferredBlockchains;
 
     if (preferredBlockchains.length <= options.limit) {
-      /**
-       *
-       * 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 first X (limit) numbers, we need to remove them from preferred if exists.
        */
-      const howManyItemsShouldBeCheckedFromMainList =
-        options.limit - preferredBlockchains.length;
-
-      for (let i = 0; i <= howManyItemsShouldBeCheckedFromMainList; i++) {
+      for (let i = 0; i < options.limit; i++) {
         const blockchain = list[i];
-
         preferredBlockchainsWithoutMainList =
           preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
             return blockchain.name !== preferredBlockchain;
           });
       }
     }
-
     list.sort(
       generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
     );
@@ -80,7 +57,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;
@@ -129,10 +106,3 @@ export function generateSortByPreferredBlockchainsFor(
     return 0;
   };
 }
-
-export function isInVisibleList(
-  blockchain: string,
-  prepareOutput: PrepareOutput
-): boolean {
-  return !!prepareOutput.list.find((item) => item.name === blockchain);
-}