@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/hooks/useConfirmSwap.ts

@@ -1,16 +1,35 @@
-import { useEffect, useRef, useState } from 'react';
+/* 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 {
-  ConfirmSwapError,
   ConfirmSwapErrorTypes,
-  ConfirmSwapWarningTypes,
-  ConfirmSwapWarnings,
-  PendingSwapSettings,
+  RouteWarningType,
+  SlippageWarningType,
 } from '../types';
-
+import { numberToString } from '../utils/numbers';
+import {
+  isNumberOfSwapsChanged,
+  isRouteChanged,
+  isRouteInternalCoinsUpdated,
+  isRouteSwappersUpdated,
+} from '../utils/routing';
 import {
   createBestRouteRequestBody,
   getBalanceWarnings,
@@ -23,250 +42,262 @@ import {
   isOutputAmountChangedALot,
   outputRatioHasWarning,
 } from '../utils/swap';
-import { httpService } from '../services/httpService';
-import BigNumber from 'bignumber.js';
-import {
-  isNumberOfSwapsChanged,
-  isRouteChanged,
-  isRouteInternalCoinsUpdated,
-  isRouteSwappersUpdated,
-} from '../utils/routing';
-import { numberToString } from '../utils/numbers';
-import { BestRouteResponse } from 'rango-sdk';
-import {
-  calculatePendingSwap,
-  PendingSwap,
-} from '@rango-dev/queue-manager-rango-preset';
 
-type ConfirmSwap = {
+import { useFetchBestRoute } from './useFetchBestRoute';
+
+export type ConfirmSwapFetchResult = {
+  swap: PendingSwap | null;
+  error: ConfirmSwapError | null;
+  warnings: ConfirmSwapWarnings | null;
+};
+
+export type ConfirmSwap = {
   loading: boolean;
-  errors: ConfirmSwapError[];
-  warnings: ConfirmSwapWarnings[];
-  confirmSwap: (() => Promise<PendingSwap | undefined>) | null;
+  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 = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const initialRoute = useBestRouteStore.use.bestRoute();
-  const setBestRoute = useBestRouteStore.use.setBestRoute();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const affiliateRef = useSettingsStore.use.affiliateRef();
-  const affiliatePercent = useSettingsStore.use.affiliatePercent();
-  const affiliateWallets = useSettingsStore.use.affiliateWallets();
-
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const destination = useWalletsStore.use.customDestination();
-
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const meta = useMetaStore.use.meta();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const slippage = useSettingsStore.use.slippage();
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
+  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 proceedAnywayRef = useRef(false);
-  const confiremedRouteRef = useRef<BestRouteResponse | null>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState<ConfirmSwapError[]>([]);
-  const [warnings, setWarnings] = useState<ConfirmSwapWarnings[]>([]);
-
-  useEffect(() => {
-    return () => abortControllerRef.current?.abort();
-  }, []);
-
-  if (!fromToken || !toToken || !inputAmount || !initialRoute)
-    return { loading: false, warnings: [], errors: [], confirmSwap: null };
-
-  const confirmSwap = async (): Promise<PendingSwap | undefined> => {
-    if (proceedAnywayRef.current) {
-      const swapSettings: PendingSwapSettings = {
-        slippage: userSlippage.toString(),
-        disabledSwappersGroups: disabledLiquiditySources,
-      };
 
-      if (errors.length > 0) setErrors([]);
-      if (warnings.length > 0) setWarnings([]);
-      proceedAnywayRef.current = false;
-
-      if (confiremedRouteRef.current) {
-        const newSwap = calculatePendingSwap(
-          inputAmount.toString(),
-          confiremedRouteRef.current,
-          getWalletsForNewSwap(selectedWallets),
-          swapSettings,
-          false,
-          meta
-        );
-
-        return newSwap;
-      }
-      return;
-    }
+  const { fetch: fetchBestRoute, cancelFetch, loading } = useFetchBestRoute();
+
+  useEffect(() => cancelFetch, []);
 
-    abortControllerRef.current = new AbortController();
+  const fetch: ConfirmSwap['fetch'] = async (params: Params) => {
+    const selectedWallets = params.selectedWallets;
+    const customDestination =
+      params?.customDestination ?? customDestinationFromStore;
 
-    setLoading(true);
+    if (!fromToken || !toToken || !inputAmount || !initialRoute) {
+      return {
+        route: null,
+        swap: null,
+        error: null,
+        warnings: null,
+      };
+    }
 
-    const requestBody = createBestRouteRequestBody(
+    const requestBody = createBestRouteRequestBody({
       fromToken,
       toToken,
       inputAmount,
-      connectedWallets,
+      wallets: connectedWallets,
       selectedWallets,
       disabledLiquiditySources,
-      userSlippage,
+      slippage: userSlippage,
       affiliateRef,
       affiliatePercent,
       affiliateWallets,
       initialRoute,
-      destination
-    );
+      destination: customDestination,
+    });
 
+    let currentRoute: BestRouteResponse;
     try {
-      const confiremedRoute = await httpService().getBestRoute(requestBody, {
-        signal: abortControllerRef.current?.signal,
-      });
-
-      abortControllerRef.current = null;
-
-      setLoading(false);
-
-      if (
-        !confiremedRoute.result ||
-        !new BigNumber(confiremedRoute.requestAmount).isEqualTo(
-          new BigNumber(inputAmount || '-1')
-        )
-      ) {
-        setErrors((prevState) =>
-          prevState.concat({
-            type: ConfirmSwapErrorTypes.NO_ROUTE,
-          })
-        );
-        return;
-      }
-
-      const confirmSwapState: Omit<ConfirmSwap, 'confirmSwap' | 'loading'> = {
-        errors: [],
-        warnings: [],
-      };
-
-      const routeChanged = isRouteChanged(initialRoute, confiremedRoute!);
-
-      if (routeChanged) {
-        setBestRoute(confiremedRoute);
-        const newRouteOutputUsdValue = new BigNumber(
-          confiremedRoute.result?.outputAmount || '0'
-        ).multipliedBy(toToken.usdPrice || 0);
-
-        const outputRatio = getOutputRatio(
+      currentRoute = await fetchBestRoute(requestBody).then((response) =>
+        throwErrorIfResponseIsNotValid(response, {
+          outputUsdValue: toToken.usdPrice,
           inputUsdValue,
-          newRouteOutputUsdValue
-        );
-        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
-
-        if (highValueLoss)
-          confirmSwapState.errors.push({
-            type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
-          });
-        else if (isOutputAmountChangedALot(initialRoute, confiremedRoute))
-          confirmSwapState.warnings.push({
-            type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
-            newOutputAmount: numberToString(
-              getRouteOutputAmount(confiremedRoute)
-            ),
-            percentageChange: numberToString(
-              getPercentageChange(
-                getRouteOutputAmount(initialRoute),
-                getRouteOutputAmount(confiremedRoute)
-              ),
-              null,
-              2
-            ),
-          });
-        else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute))
-          confirmSwapState.warnings.push({
-            type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED,
-          });
-        else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute))
-          confirmSwapState.warnings.push({
-            type: ConfirmSwapWarningTypes.ROUTE_UPDATED,
-          });
-        else if (isRouteSwappersUpdated(initialRoute, confiremedRoute))
-          confirmSwapState.warnings.push({
-            type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED,
-          });
-      }
-
-      const balanceWarnings = getBalanceWarnings(
-        confiremedRoute,
-        selectedWallets
+        })
       );
-      const enoughBalance = balanceWarnings.length === 0;
-
-      if (!enoughBalance)
-        confirmSwapState.errors.push({
-          type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
-          messages: balanceWarnings,
-        });
-
-      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
-
-      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage))
-        confirmSwapState.errors.push({
-          type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
-          minRequiredSlippage,
-        });
-
-      const noErrors = confirmSwapState.errors.length === 0;
-      const noWarnings = confirmSwapState.warnings.length === 0;
-
-      if (
-        (noErrors || (!noErrors && proceedAnywayRef.current)) &&
-        (noWarnings || (!noWarnings && proceedAnywayRef.current))
-      ) {
-        const swapSettings: PendingSwapSettings = {
-          slippage: userSlippage.toString(),
-          disabledSwappersGroups: disabledLiquiditySources,
+      setRoute(currentRoute);
+    } catch (error: any) {
+      if (error?.code === 'ERR_CANCELED') {
+        return {
+          swap: null,
+          error: {
+            type: ConfirmSwapErrorTypes.REQUEST_CANCELED,
+          },
+          warnings: null,
         };
-
-        const newSwap = calculatePendingSwap(
-          inputAmount.toString(),
-          confiremedRoute,
-          getWalletsForNewSwap(selectedWallets),
-          swapSettings,
-          false,
-          meta
-        );
-        return newSwap;
-      } else if (!proceedAnywayRef.current) {
-        proceedAnywayRef.current = true;
-        setErrors(confirmSwapState.errors);
-        setWarnings(confirmSwapState.warnings);
-        confiremedRouteRef.current = confiremedRoute;
-      }
-      return;
-    } catch (error) {
-      if ((error as any)?.code === 'ERR_CANCELED') {
-        return;
       }
 
-      const status = (error as any)?.response?.status;
+      if (error.cause) {
+        return {
+          swap: null,
+          error: error.cause,
+          warnings: null,
+        };
+      }
 
-      setLoading(false);
-      setErrors([
-        {
+      return {
+        swap: null,
+        error: {
           type: ConfirmSwapErrorTypes.REQUEST_FAILED,
-          status,
         },
-      ]);
-
-      return;
+        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, warnings, errors, confirmSwap };
+  return {
+    loading,
+    fetch,
+    cancelFetch,
+  };
 }

package/src/hooks/useFetchBestRoute.ts

@@ -0,0 +1,38 @@
+import type { BestRouteRequest, BestRouteResponse } from 'rango-sdk';
+
+import { useRef, useState } from 'react';
+
+import { httpService } from '../services/httpService';
+
+interface UseFetchBestRoute {
+  fetch: (requestBody: BestRouteRequest) => Promise<BestRouteResponse>;
+  cancelFetch: () => void;
+  loading: boolean;
+}
+
+export function useFetchBestRoute(): UseFetchBestRoute {
+  const [loading, setLoading] = useState(false);
+  const abortController = useRef<AbortController | null>(null);
+  const cancel = () => abortController.current?.abort();
+
+  const fetch: UseFetchBestRoute['fetch'] = async (requestBody) => {
+    cancel();
+    abortController.current = new AbortController();
+
+    setLoading(true);
+
+    try {
+      const res = await httpService().getBestRoute(requestBody, {
+        signal: abortController.current.signal,
+      });
+      abortController.current = null;
+      return res;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-useless-catch
+    } catch (error: any) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { fetch, loading, cancelFetch: cancel };
+}

package/src/hooks/useNavigateBack.ts

@@ -1,37 +1,53 @@
 import { useInRouterContext, useNavigate } from 'react-router-dom';
+
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useBestRouteStore } from '../store/bestRoute';
 
 export function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
+  const routeWalletsConfirmed = useBestRouteStore.use.routeWalletsConfirmed();
 
   navigationRoutes;
 
   const navigateBackFrom = (currentRoute: string) => {
-    if (currentRoute === navigationRoutes.swapDetails)
+    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 {
+    } else {
+      if (
+        [navigationRoutes.settings, navigationRoutes.wallets].includes(
+          currentRoute
+        ) &&
+        routeWalletsConfirmed
+      ) {
+        return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
+      }
       if (
         [
-          navigationRoutes.fromChain,
-          navigationRoutes.fromToken,
-          navigationRoutes.toChain,
-          navigationRoutes.toToken,
+          navigationRoutes.fromSwap,
+          navigationRoutes.toSwap,
           navigationRoutes.settings,
           navigationRoutes.wallets,
           navigationRoutes.swaps,
           navigationRoutes.confirmSwap,
         ].includes(currentRoute)
-      )
+      ) {
         navigate(navigationRoutes.home, { replace: true });
-      else if (currentRoute === navigationRoutes.liquiditySources)
+      } 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 });
+      }
     }
   };