@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.3

package/src/constants/warnings.ts

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

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '@rango-dev/ui';
+
+export const QuoteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$2',
+});
+
+export const FooterStepAlarm = styled('div', {
+  paddingBottom: '$15',
+});
+
+export const FooterAlert = styled('div', {
+  width: '100%',
+  display: 'flex',
+});

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -0,0 +1,97 @@
+import type { PropTypes } from './QuoteInfo.types';
+
+import { Divider } from '@rango-dev/ui';
+import React from 'react';
+
+import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { useQuoteStore } from '../../store/quote';
+import { numberToString } from '../../utils/numbers';
+
+import { QuoteContainer } from './QuoteInfo.styles';
+
+export function QuoteInfo(props: PropTypes) {
+  const {
+    quote,
+    type,
+    loading,
+    error,
+    warning,
+    refetchQuote,
+    showWarningModal,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+    expanded = false,
+  } = props;
+  const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
+    useQuoteStore();
+
+  const showQuote = quote && quote.result && !loading;
+  return (
+    <>
+      {loading && (
+        <QuoteContainer>
+          <QuoteSkeleton type={type} expanded={expanded} />
+        </QuoteContainer>
+      )}
+      {showQuote ? (
+        <QuoteContainer>
+          <Quote
+            quote={quote}
+            error={error}
+            warning={warning}
+            type={type}
+            expanded={expanded}
+            recommended={true}
+            input={{
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+            output={{
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+          />
+        </QuoteContainer>
+      ) : null}
+
+      {!warning && !error && <Divider size={16} />}
+
+      {(warning || error) && (
+        <QuoteWarningsAndErrors
+          warning={warning}
+          error={error}
+          loading={loading}
+          refetchQuote={refetchQuote}
+          showWarningModal={showWarningModal}
+          onOpenWarningModal={onOpenWarningModal}
+          onCloseWarningModal={onCloseWarningModal}
+          onConfirmWarningModal={onConfirmWarningModal}
+        />
+      )}
+    </>
+  );
+}

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -0,0 +1,17 @@
+import type { QuoteProps } from '../../components/Quote/Quote.types';
+import type { QuoteError, QuoteWarning } from '../../types';
+import type { BestRouteResponse } from 'rango-sdk';
+
+export type PropTypes = {
+  quote: BestRouteResponse | null;
+  type: QuoteProps['type'];
+  loading: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  expanded?: boolean;
+  refetchQuote: () => void;
+  showWarningModal: boolean;
+  onOpenWarningModal: () => void;
+  onCloseWarningModal: () => void;
+  onConfirmWarningModal: () => void;
+};

package/src/containers/QuoteInfo/index.ts

@@ -0,0 +1 @@
+export { QuoteInfo } from './QuoteInfo';

package/src/hooks/useConfirmSwap/index.ts

@@ -0,0 +1 @@
+export { useConfirmSwap } from './useConfirmSwap';

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

@@ -0,0 +1,168 @@
+import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
+import type { ConfirmSwapWarnings, Wallet } from '../../types';
+import type { BestRouteResponse, Token } from 'rango-sdk';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType, QuoteUpdateType } from '../../types';
+import { numberToString } from '../../utils/numbers';
+import {
+  generateQuoteWarnings,
+  isNumberOfSwapsChanged,
+  isQuoteChanged,
+  isQuoteInternalCoinsUpdated,
+  isQuoteSwappersUpdated,
+} from '../../utils/quote';
+import {
+  checkSlippageErrors,
+  getBalanceWarnings,
+  getLimitErrorMessage,
+  getMinRequiredSlippage,
+  getPercentageChange,
+  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,
+  currentQuote: BestRouteResponse,
+  params: {
+    fromToken: Token;
+    toToken: Token;
+    tokens: Token[];
+    selectedWallets: Wallet[];
+    userSlippage: number;
+  }
+): ConfirmSwapWarnings {
+  const 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.tokens,
+    userSlippage: params.userSlippage,
+  });
+
+  if (quoteWarning) {
+    output.quote = quoteWarning;
+  }
+
+  if (quoteChanged) {
+    if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
+        newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
+        percentageChange: numberToString(
+          getPercentageChange(
+            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 = getBalanceWarnings(
+    currentQuote,
+    params.selectedWallets
+  );
+  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,136 @@
+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 { useMetaStore } from '../../store/meta';
+import { useQuoteStore } from '../../store/quote';
+import { useSettingsStore } from '../../store/settings';
+import { useWalletsStore } from '../../store/wallets';
+import { QuoteErrorType } from '../../types';
+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,
+    resetQuote,
+    quote: initialQuote,
+    customDestination: customDestinationFromStore,
+    setQuoteWarningsConfirmed,
+  } = useQuoteStore();
+
+  const {
+    slippage,
+    customSlippage,
+    affiliatePercent,
+    affiliateRef,
+    affiliateWallets,
+    disabledLiquiditySources,
+  } = useSettingsStore();
+  const { connectedWallets } = useWalletsStore();
+
+  const { meta } = useMetaStore();
+
+  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 || !initialQuote) {
+      return {
+        quote: null,
+        swap: null,
+        error: null,
+        warnings: null,
+      };
+    }
+
+    const requestBody = createQuoteRequestBody({
+      fromToken,
+      toToken,
+      inputAmount,
+      wallets: connectedWallets,
+      selectedWallets,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+      initialQuote: initialQuote,
+      destination: customDestination,
+    });
+
+    let currentQuote: BestRouteResponse;
+    try {
+      currentQuote = await fetchQuote(requestBody).then((response) =>
+        throwErrorIfResponseIsNotValid(response)
+      );
+      setQuote(currentQuote);
+    } catch (error: any) {
+      const confirmSwapResult = handleQuoteErrors(error);
+      if (
+        confirmSwapResult.error?.type === QuoteErrorType.NO_RESULT ||
+        confirmSwapResult.error?.type === QuoteErrorType.REQUEST_FAILED
+      ) {
+        resetQuote();
+      }
+      return confirmSwapResult;
+    }
+
+    const swapSettings: PendingSwapSettings = {
+      slippage: userSlippage.toString(),
+      disabledSwappersGroups: disabledLiquiditySources,
+    };
+    const swap = calculatePendingSwap(
+      inputAmount.toString(),
+      currentQuote,
+      getWalletsForNewSwap(selectedWallets),
+      swapSettings,
+      false,
+      meta
+    );
+
+    const confirmSwapWarnings = generateWarnings(initialQuote, currentQuote, {
+      fromToken,
+      toToken,
+      tokens: meta.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/lib';
+
+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/useNavigateBack.ts

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

package/src/hooks/useSwapInput.ts

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