feat: display a warning if the output amount changes on the confirm swap page

widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
 import type { ConnectedWallet } from '../../store/wallets';
-import type { ConfirmSwapWarnings, Wallet } from '../../types';
+import type { Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -17,7 +17,6 @@ import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
@@ -60,9 +59,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
-  const [quoteWarning, setQuoteWarning] = useState<
-    ConfirmSwapWarnings['quoteUpdate'] | null
-  >(null);
 
   const [isCustomDestinationOpen, setCustomDestinationOpen] = useState(
     !!customDestination
@@ -226,7 +222,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setQuoteWarning(null);
 
     const result = await onCheckBalance?.({
       selectedWallets: selectableWallets.filter((wallet) => wallet.selected),
@@ -236,9 +231,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-    if (warnings?.quoteUpdate) {
-      setQuoteWarning(warnings.quoteUpdate);
-    }
+
     if (result.error) {
       setError(getQuoteErrorMessage(result.error));
     }
@@ -418,16 +411,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
-          {quoteWarning && (
-            <>
-              <Alert
-                variant="alarm"
-                type="warning"
-                title={getQuoteUpdateWarningMessage(quoteWarning)}
-              />
-              <Divider size={12} />
-            </>
-          )}
           <Wallets>
             {quoteWallets.map((requiredWallet, index) => {
               const blockchain = blockchains.find(

widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -44,30 +44,50 @@ export function makeAlerts(
     return alertInfo;
   }
   if (warning) {
-    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
-      const warningLevel = getPriceImpactLevel(warning.priceImpact);
-      if (warningLevel === 'high') {
-        alertInfo.alertType = 'error';
+    switch (warning.type) {
+      case QuoteWarningType.HIGH_VALUE_LOSS: {
+        const warningLevel = getPriceImpactLevel(warning.priceImpact);
+        if (warningLevel === 'high') {
+          alertInfo.alertType = 'error';
+        }
+        alertInfo.action = 'show-info';
+        alertInfo.title = errorMessages().highValueLossError.title;
+        break;
       }
-      alertInfo.action = 'show-info';
-      alertInfo.title = errorMessages().highValueLossError.title;
-    }
-    if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
-      alertInfo.title = errorMessages().unknownPriceError.title;
-    }
-    if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
-      alertInfo.title = i18n.t({
-        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-        values: {
-          minRequiredSlippage: warning.minRequiredSlippage,
-        },
-      });
-      alertInfo.action = 'change-settings';
-    }
-    if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
-      alertInfo.title = i18n.t('Caution, your slippage is high.');
-      alertInfo.action = 'change-settings';
+      case QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE: {
+        alertInfo.title = i18n.t({
+          id: 'Output amount changed by {percentageChange}% (${usdValueChange}).',
+          values: {
+            percentageChange: warning.percentageChange,
+            usdValueChange: warning.usdValueChange,
+          },
+        });
+        break;
+      }
+      case QuoteWarningType.UNKNOWN_PRICE: {
+        alertInfo.title = errorMessages().unknownPriceError.title;
+        break;
+      }
+      case QuoteWarningType.INSUFFICIENT_SLIPPAGE: {
+        alertInfo.title = i18n.t({
+          id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+          values: {
+            minRequiredSlippage: warning.minRequiredSlippage,
+          },
+        });
+        alertInfo.action = 'change-settings';
+        break;
+      }
+      case QuoteWarningType.HIGH_SLIPPAGE: {
+        alertInfo.title = i18n.t('Caution, your slippage is high.');
+        alertInfo.action = 'change-settings';
+        break;
+      }
+
+      default:
+        break;
     }
+
     return alertInfo;
   }
   return null;

widget/embedded/src/components/Quotes/Quotes.tsx

@@ -53,9 +53,8 @@ export function Quotes(props: PropTypes) {
       ...quote,
     };
 
-    return generateQuoteWarnings(mergedQuote, {
-      fromToken,
-      toToken,
+    return generateQuoteWarnings({
+      currentQuote: mergedQuote,
       userSlippage,
       findToken,
     });

widget/embedded/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -7,8 +7,7 @@ import { Quote } from '../../components/Quote';
 import { QuoteSkeleton } from '../../components/QuoteSkeleton';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';
-import { getQuoteToTokenUsdPrice } from '../../utils/quote';
-import { calcOutputUsdValue } from '../../utils/swap';
+import { getUsdOutputFrom } from '../../utils/swap';
 
 import { QuoteContainer } from './QuoteInfo.styles';
 
@@ -28,17 +27,12 @@ export function QuoteInfo(props: PropTypes) {
     fullExpandedMode = false,
     container,
   } = props;
-  const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
+  const { inputAmount, inputUsdValue } = useQuoteStore();
 
   const outputAmount = !!quote?.outputAmount
     ? new BigNumber(quote?.outputAmount)
     : null;
-  const outputUsdValue = !!quote?.outputAmount
-    ? calcOutputUsdValue(
-        quote?.outputAmount,
-        getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice
-      )
-    : null;
+  const outputUsdValue = quote ? getUsdOutputFrom(quote) : null;
 
   const noResult =
     error &&

widget/embedded/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -7,27 +7,18 @@ import type {
   SelectedQuote,
   Wallet,
 } from '../../types';
-import type { BlockchainMeta, SwapResult, Token } from 'rango-sdk';
+import type BigNumber from 'bignumber.js';
+import type { BlockchainMeta, SwapResult } 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 { QuoteErrorType } from '../../types';
+import { generateQuoteWarnings } from '../../utils/quote';
 import {
   checkSlippageErrors,
   generateBalanceWarnings,
   getLimitErrorMessage,
   getMinRequiredSlippage,
-  getQuoteOutputAmount,
   hasLimitError,
-  isOutputAmountChangedALot,
 } from '../../utils/swap';
 
 /**
@@ -82,72 +73,44 @@ export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
   return null;
 }
 
-export function generateWarnings(
-  previousQuote: SelectedQuote | undefined,
-  currentQuote: SelectedQuote,
-  params: {
-    fromToken: Token;
-    toToken: Token;
-    meta: { blockchains: BlockchainMeta[] };
-    selectedWallets: Wallet[];
-    userSlippage: number;
-    findToken: FindToken;
-  }
-): ConfirmSwapWarnings {
-  let quoteChanged = false;
-  if (previousQuote) {
-    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
-  }
+export function generateWarnings(params: {
+  currentQuote: SelectedQuote;
+  previousQuote?: SelectedQuote;
+  meta: { blockchains: BlockchainMeta[] };
+  selectedWallets: Wallet[];
+  userSlippage: number;
+  inputUsdValue: BigNumber | null;
+  findToken: FindToken;
+}): ConfirmSwapWarnings {
+  const {
+    currentQuote,
+    previousQuote,
+    meta,
+    selectedWallets,
+    userSlippage,
+    findToken,
+  } = params;
+
   const output: ConfirmSwapWarnings = {
     quote: null,
-    quoteUpdate: null,
     balance: null,
   };
 
-  const quoteWarning = generateQuoteWarnings(currentQuote, {
-    fromToken: params.fromToken,
-    toToken: params.toToken,
-    findToken: params.findToken,
-    userSlippage: params.userSlippage,
+  const quoteWarning = generateQuoteWarnings({
+    previousQuote,
+    currentQuote,
+    findToken,
+    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
+    selectedWallets,
+    meta.blockchains
   );
 
   const enoughBalance = balanceWarnings.length === 0;

widget/embedded/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -21,10 +21,10 @@ export function useConfirmSwap(): ConfirmSwap {
     fromToken,
     toToken,
     inputAmount,
+    inputUsdValue,
     setSelectedQuote,
     selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
-    setQuoteWarningsConfirmed,
     resetAlerts,
   } = useQuoteStore();
 
@@ -95,21 +95,16 @@ export function useConfirmSwap(): ConfirmSwap {
           disabledSwappersGroups: disabledLiquiditySources,
         };
 
-        const confirmSwapWarnings = generateWarnings(
-          initialQuote ?? undefined,
+        const confirmSwapWarnings = generateWarnings({
+          previousQuote: initialQuote ?? undefined,
           currentQuote,
-          {
-            fromToken,
-            toToken,
-            meta: { blockchains },
-            findToken,
-            selectedWallets,
-            userSlippage,
-          }
-        );
-        if (confirmSwapWarnings.quoteUpdate) {
-          setQuoteWarningsConfirmed(false);
-        }
+          meta: { blockchains },
+          selectedWallets,
+          userSlippage,
+          inputUsdValue,
+          findToken,
+        });
+
         resetAlerts();
 
         const proceedAnyway = !!confirmSwapWarnings.balance;