@rango-dev/widget-embedded 0.36.1-next.12 → 0.36.1-next.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.12",
+  "version": "0.36.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
 import type { ConnectedWallet } from '../../store/slices/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 { getBlockchainShortNameFor } from '../../utils/meta';
@@ -58,9 +57,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
@@ -224,7 +220,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setQuoteWarning(null);
 
     const result = await onCheckBalance?.({
       selectedWallets: selectableWallets.filter((wallet) => wallet.selected),
@@ -234,9 +229,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));
     }
@@ -416,16 +409,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(

package/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;

package/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,
     });

package/src/constants/quote.ts

@@ -32,6 +32,29 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'HIGH_IMPACT',
 ];
 
+export type Criteria = {
+  threshold: number;
+  minInput: number;
+};
+
+export const PERCENT_MULTIPLIER = 100;
 export const GAS_FEE_MAX = 30;
 export const ROUTE_TIME_MAX = 15;
 export const SECONDS_IN_MINUTE = 60;
+export const HIGH_FEE_THRESHOLD_USD = 30;
+
+export const HIGH_VALUE_LOSS_CRITERIA: Criteria[] = [
+  { threshold: -10, minInput: 400 },
+  { threshold: -5, minInput: 1000 },
+];
+
+export const OUTPUT_CHANGE_WARNING_CRITERIA: Criteria[] = [
+  {
+    threshold: -1,
+    minInput: 1000,
+  },
+  {
+    threshold: -2,
+    minInput: 500,
+  },
+];

package/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 &&

package/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;

package/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;

package/src/hooks/useSwapInput.ts

@@ -10,8 +10,6 @@ import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
-  getQuoteFromTokenUsdPrice,
-  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isRoutingEnabled } from '../utils/settings';
@@ -156,15 +154,10 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
-          const outputUsdValue =
-            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
-          const inputUsdValue =
-            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
-            generateQuoteWarnings(quote, {
-              fromToken: { ...fromToken, usdPrice: inputUsdValue },
-              toToken: { ...toToken, usdPrice: outputUsdValue },
+            generateQuoteWarnings({
+              currentQuote: quote,
               userSlippage,
               findToken,
             });

package/src/pages/ConfirmSwapPage.tsx

@@ -24,12 +24,12 @@ import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
+import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
@@ -133,7 +133,12 @@ export function ConfirmSwapPage() {
   };
 
   const onStartConfirmSwap = async () => {
-    if (confirmSwapResult?.warnings?.quote && !quoteWarningsConfirmed) {
+    const shouldShowWarningModal =
+      confirmSwapResult.warnings?.quote &&
+      isQuoteWarningConfirmationRequired(confirmSwapResult.warnings.quote) &&
+      !quoteWarningsConfirmed;
+
+    if (shouldShowWarningModal) {
       setShowQuoteWarningModal(true);
     } else {
       await onConfirm();
@@ -196,19 +201,6 @@ export function ConfirmSwapPage() {
     alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
   }
 
-  if (confirmSwapResult.warnings?.quoteUpdate) {
-    alerts.push(
-      <Alert
-        variant="alarm"
-        type="warning"
-        title={
-          confirmSwapResult.warnings.quoteUpdate &&
-          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
-        }
-      />
-    );
-  }
-
   if (quoteWarning || quoteError) {
     const settings_url = `../${navigationRoutes.settings}`;
     alerts.push(

package/src/store/quote.ts

@@ -21,11 +21,7 @@ import {
   WidgetEvents,
 } from '../types';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  getQuoteFromTokenUsdPrice,
-  getQuoteToTokenUsdPrice,
-} from '../utils/quote';
-import { calcOutputUsdValue } from '../utils/swap';
+import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
 
 import createSelectors from './selectors';
 
@@ -137,14 +133,8 @@ export const useQuoteStore = createSelectors(
             outputAmount = !!quote?.outputAmount
               ? new BigNumber(quote?.outputAmount)
               : null;
-            inputUsdValue = calcOutputUsdValue(
-              state.inputAmount,
-              getQuoteFromTokenUsdPrice(quote) || state.fromToken?.usdPrice
-            );
-            outputUsdValue = calcOutputUsdValue(
-              quote.outputAmount,
-              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
-            );
+            inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
+            outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
           }
           return {
             selectedQuote: quote,

package/src/types/quote.ts

@@ -51,29 +51,9 @@ export enum QuoteWarningType {
   UNKNOWN_PRICE,
   INSUFFICIENT_SLIPPAGE,
   HIGH_SLIPPAGE,
+  EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
 }
 
-export enum QuoteUpdateType {
-  QUOTE_UPDATED,
-  QUOTE_SWAPPERS_UPDATED,
-  QUOTE_COINS_UPDATED,
-  QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
-  QUOTE_UPDATED_WITH_HIGH_VALUE_LOSS,
-}
-
-export type QuoteUpdateWarning =
-  | {
-      type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED;
-      newOutputAmount: string;
-      percentageChange: string;
-    }
-  | {
-      type: Exclude<
-        QuoteUpdateType,
-        QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED
-      >;
-    };
-
 export type RecommendedSlippages = Map<number, string>;
 
 export type InsufficientSlippageWarning = {
@@ -100,15 +80,21 @@ export type UnknownPriceWarning = {
   type: QuoteWarningType.UNKNOWN_PRICE;
 };
 
+export type ExcessiveOutputAmountChange = {
+  type: QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE;
+  usdValueChange: string;
+  percentageChange: string;
+};
+
 export type QuoteWarning =
   | HighValueLossWarning
+  | ExcessiveOutputAmountChange
+  | UnknownPriceWarning
   | InsufficientSlippageWarning
-  | HighSlippageWarning
-  | UnknownPriceWarning;
+  | HighSlippageWarning;
 
 export type ConfirmSwapWarnings = {
   quote: QuoteWarning | null;
-  quoteUpdate: QuoteUpdateWarning | null;
   balance: { messages: string[] } | null;
 };