@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

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/useNavigateBack.ts

@@ -1,12 +1,12 @@
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
 
 export function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
-  const quoteWalletsConfirmed = useQuoteStore.use.quoteWalletsConfirmed();
+  const routeWalletsConfirmed = useBestRouteStore.use.routeWalletsConfirmed();
 
   navigationRoutes;
 
@@ -26,7 +26,7 @@ export function useNavigateBack() {
         [navigationRoutes.settings, navigationRoutes.wallets].includes(
           currentRoute
         ) &&
-        quoteWalletsConfirmed
+        routeWalletsConfirmed
       ) {
         return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
       }

package/src/hooks/useSwapInput.ts

@@ -1,48 +1,37 @@
-import type { QuoteError, QuoteWarning } from '../types';
-
 import { useEffect, useRef, useState } from 'react';
 
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
 import { useSettingsStore } from '../store/settings';
-import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
-import { generateQuoteWarnings } from '../utils/quote';
-import { createQuoteRequestBody } from '../utils/swap';
+import { createBestRouteRequestBody } from '../utils/swap';
 import { tokensAreEqual } from '../utils/wallets';
 
-import {
-  handleQuoteErrors,
-  throwErrorIfResponseIsNotValid,
-} from './useConfirmSwap/useConfirmSwap.helpers';
-import { useFetchQuote } from './useFetchQuote';
+import { useFetchBestRoute } from './useFetchBestRoute';
 
 const DEBOUNCE_DELAY = 600;
 
 type UseSwapInput = {
   fetch: () => void;
   loading: boolean;
-  error: QuoteError | null;
-  warning: QuoteWarning | null;
+  error: string;
 };
 
 /**
- * a hook for fetching quote based on from and to input values
+ * a hook for fetching best route based on from and to input values
  * we use this hook in home page
  */
 export function useSwapInput(): UseSwapInput {
-  const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
-  const { liquiditySources, enableNewLiquiditySources } = useAppStore().config;
-  const tokens = useAppStore().tokens();
+  const { fetch: fetchBestRoute, cancelFetch } = useFetchBestRoute();
+  const [loading, setLoading] = useState(false);
   const {
     fromToken,
     toToken,
     inputAmount,
     inputUsdValue,
-    resetQuote,
-    setQuote,
-  } = useQuoteStore();
+    resetRoute,
+    setRoute,
+  } = useBestRouteStore();
   const {
     slippage,
     customSlippage,
@@ -51,9 +40,7 @@ export function useSwapInput(): UseSwapInput {
     affiliateWallets,
     disabledLiquiditySources,
   } = useSettingsStore();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<QuoteError | null>(null);
-  const [warning, setWarning] = useState<QuoteWarning | null>(null);
+  const [error, setError] = useState('');
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
@@ -62,53 +49,31 @@ export function useSwapInput(): UseSwapInput {
     tokensAreEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
-  const resetState = (loading: boolean) => {
-    setLoading(loading);
-    setError(null);
-    setWarning(null);
-  };
-
   const fetch: UseSwapInput['fetch'] = () => {
     if (!loading) {
-      resetState(true);
+      setLoading(true);
     }
     if (!shouldSkipRequest) {
-      resetQuote();
-      const requestBody = createQuoteRequestBody({
+      resetRoute();
+      const requestBody = createBestRouteRequestBody({
         fromToken,
         toToken,
         inputAmount,
-        liquiditySources,
-        excludeLiquiditySources: enableNewLiquiditySources,
         disabledLiquiditySources,
         slippage: userSlippage,
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
       });
-      fetchQuote(requestBody)
+      fetchBestRoute(requestBody)
         .then((res) => {
           setLoading(false);
-          setQuote(res);
-          throwErrorIfResponseIsNotValid(res);
-          const quoteWarning = generateQuoteWarnings(res, {
-            fromToken,
-            toToken,
-            userSlippage,
-            tokens,
-          });
-          setWarning(quoteWarning);
+          setRoute(res);
         })
         .catch((error) => {
-          const { error: quoteError } = handleQuoteErrors(error);
-          if (
-            quoteError?.type === QuoteErrorType.NO_RESULT ||
-            quoteError?.type === QuoteErrorType.REQUEST_FAILED
-          ) {
-            resetQuote();
-          }
-          if (quoteError?.type !== QuoteErrorType.REQUEST_CANCELED) {
-            setError(quoteError);
+          resetRoute();
+          if (error?.code !== 'ERR_CANCELED') {
+            setError(error.message);
             setLoading(false);
           }
         });
@@ -123,15 +88,15 @@ export function useSwapInput(): UseSwapInput {
 
   useEffect(() => {
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
-      resetState(false);
+      setLoading(false);
       cancelFetch();
       return;
     }
     if (shouldSkipRequest) {
       return;
     }
-    resetQuote();
-    resetState(true);
+    resetRoute();
+    setLoading(true);
     debouncedFetch();
     return cancelFetch;
   }, [inputAmount, shouldSkipRequest]);
@@ -147,5 +112,5 @@ export function useSwapInput(): UseSwapInput {
     return cancelFetch;
   }, [disabledLiquiditySources.length]);
 
-  return { fetch, loading, error, warning };
+  return { fetch, loading, error };
 }

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,13 +1,14 @@
+import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
 import { useEffect, useMemo, useRef } from 'react';
 
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { tokensAreEqual } from '../utils/wallets';
 
-export function useSyncStoresWithConfig() {
+export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   const {
     setInputAmount,
     setToToken,
@@ -18,12 +19,12 @@ export function useSyncStoresWithConfig() {
     toToken,
     fromBlockchain,
     toBlockchain,
-  } = useQuoteStore();
+  } = useBestRouteStore();
 
-  const config = useAppStore().config;
-  const fetchMetaStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
@@ -54,7 +55,7 @@ export function useSyncStoresWithConfig() {
   }, [config?.amount]);
 
   useEffect(() => {
-    if (fetchMetaStatus === 'success') {
+    if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -66,10 +67,8 @@ export function useSyncStoresWithConfig() {
         setFromBlockchain(chain ?? null);
       }
 
-      if (token) {
-        setFromToken({ token, meta: { blockchains, tokens } });
-      } else if (!token && prevConfigFromToken.current) {
-        setFromToken({ token: null });
+      if (token || (!token && prevConfigFromToken.current)) {
+        setFromToken(token ?? null);
       }
 
       prevConfigFromBlockchain.current = config?.from?.blockchain;
@@ -80,13 +79,13 @@ export function useSyncStoresWithConfig() {
     config?.from?.token?.address,
     config?.from?.token?.blockchain,
     config?.from?.blockchain,
-    fetchMetaStatus,
+    loadingMetaStatus,
   ]);
 
   useEffect(() => {
     if (fromToken && fromTokensConfig) {
       if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken({ token: null });
+        setFromToken(null);
       }
     }
 
@@ -100,7 +99,7 @@ export function useSyncStoresWithConfig() {
   useEffect(() => {
     if (toToken && toTokensConfig) {
       if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken({ token: null });
+        setToToken(null);
       }
     }
 
@@ -112,7 +111,7 @@ export function useSyncStoresWithConfig() {
   }, [toTokensConfig, toBlockchainsConfig]);
 
   useEffect(() => {
-    if (fetchMetaStatus === 'success') {
+    if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
@@ -124,10 +123,8 @@ export function useSyncStoresWithConfig() {
         setToBlockchain(chain ?? null);
       }
 
-      if (token) {
-        setToToken({ token, meta: { blockchains, tokens } });
-      } else if (!token && prevConfigToToken.current) {
-        setToToken({ token: null });
+      if (token || (!token && prevConfigToToken.current)) {
+        setToToken(token ?? null);
       }
 
       prevConfigToBlockchain.current = config?.to?.blockchain;
@@ -138,7 +135,7 @@ export function useSyncStoresWithConfig() {
     config?.to?.token?.address,
     config?.to?.token?.blockchain,
     config?.to?.blockchain,
-    fetchMetaStatus,
+    loadingMetaStatus,
   ]);
 
   useEffect(() => {

package/src/hooks/useWalletList.ts

@@ -10,7 +10,7 @@ import {
 } from '@rango-dev/wallets-shared';
 import { useEffect, useState } from 'react';
 
-import { useAppStore } from '../store/AppStore';
+import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
@@ -37,7 +37,9 @@ export function useWalletList(params: Params) {
   const { config, chain, onBeforeConnect, onConnect } = params;
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
-  const blockchains = useAppStore().blockchains();
+  const { blockchains } = useMetaStore().meta;
+  const multiWallets =
+    typeof config?.multiWallets === 'undefined' ? true : config.multiWallets;
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -74,7 +76,7 @@ export function useWalletList(params: Params) {
         const atLeastOneWalletIsConnected = !!wallets.find(
           (w) => w.state === WalletState.CONNECTED
         );
-        if (!config?.multiWallets && atLeastOneWalletIsConnected) {
+        if (!multiWallets && atLeastOneWalletIsConnected) {
           return;
         }
         onBeforeConnect?.(type);