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

package/src/store/{bestRoute.ts → quote.ts}

@@ -9,21 +9,21 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  createRetryRoute,
-  getBestRouteToTokenUsdPrice,
-} from '../utils/routing';
+import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
+export const getUsdValue = (
+  token: Token | null,
+  amount: string
+): BigNumber | null =>
   token?.usdPrice
     ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
     : null;
 
-export interface RouteState {
+export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
   inputAmount: string;
@@ -32,9 +32,10 @@ export interface RouteState {
   outputUsdValue: BigNumber | null;
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
-  routeWalletsConfirmed: boolean;
+  quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
-  resetRoute: () => void;
+  quoteWarningsConfirmed: boolean;
+  resetQuote: () => void;
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
@@ -43,19 +44,20 @@ export interface RouteState {
   setFromToken: (token: Token | null) => void;
   setToToken: (token: Token | null) => void;
   setInputAmount: (amount: string) => void;
-  bestRoute: BestRouteResponse | null;
-  setRoute: (bestRoute: BestRouteResponse | null) => void;
+  quote: BestRouteResponse | null;
+  setQuote: (quote: BestRouteResponse | null) => void;
   retry: (pendingSwap: PendingSwap) => void;
   switchFromAndTo: () => void;
-  setRouteWalletConfirmed: (flag: boolean) => void;
+  setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
   customDestination: string;
   setCustomDestination: (address: string) => void;
-  resetRouteWallets: () => void;
+  resetQuoteWallets: () => void;
+  setQuoteWarningsConfirmed: (flag: boolean) => void;
 }
 
-export const useBestRouteStore = createSelectors(
-  create<RouteState>()(
+export const useQuoteStore = createSelectors(
+  create<QuoteState>()(
     subscribeWithSelector((set) => ({
       fromBlockchain: null,
       fromToken: null,
@@ -65,37 +67,38 @@ export const useBestRouteStore = createSelectors(
       outputUsdValue: new BigNumber(0),
       toBlockchain: null,
       toToken: null,
-      bestRoute: null,
-      routeWalletsConfirmed: false,
+      quote: null,
+      quoteWalletsConfirmed: false,
       selectedWallets: [],
       customDestination: '',
-      setRoute: (bestRoute) =>
+      quoteWarningsConfirmed: false,
+      setQuote: (quote) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
           if (!isPositiveNumber(state.inputAmount)) {
             return {};
           }
-          if (!!bestRoute) {
-            outputAmount = !!bestRoute.result?.outputAmount
-              ? new BigNumber(bestRoute.result?.outputAmount)
+          if (!!quote) {
+            outputAmount = !!quote.result?.outputAmount
+              ? new BigNumber(quote.result?.outputAmount)
               : null;
             outputUsdValue = calcOutputUsdValue(
-              bestRoute.result?.outputAmount,
-              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice
+              quote.result?.outputAmount,
+              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
             );
           }
           return {
-            bestRoute,
-            ...(!!bestRoute && {
+            quote: quote,
+            ...(!!quote && {
               outputAmount,
               outputUsdValue,
             }),
           };
         }),
-      resetRoute: () =>
+      resetQuote: () =>
         set(() => ({
-          bestRoute: null,
+          quote: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
@@ -108,7 +111,7 @@ export const useBestRouteStore = createSelectors(
           return {
             fromBlockchain: chain,
             ...(state.fromToken && {
-              bestRoute: null,
+              quote: null,
               fromToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -140,7 +143,7 @@ export const useBestRouteStore = createSelectors(
           return {
             toBlockchain: chain,
             ...(state.toToken && {
-              bestRoute: null,
+              quote: null,
               toToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -166,7 +169,7 @@ export const useBestRouteStore = createSelectors(
           ...(!amount && {
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
-            bestRoute: null,
+            quote: null,
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
@@ -182,7 +185,7 @@ export const useBestRouteStore = createSelectors(
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryRoute(pendingSwap, blockchains, tokens);
+        } = createRetryQuote(pendingSwap, blockchains, tokens);
 
         set({
           fromBlockchain,
@@ -193,7 +196,7 @@ export const useBestRouteStore = createSelectors(
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,
-          bestRoute: null,
+          quote: null,
         });
       },
       switchFromAndTo: () =>
@@ -208,14 +211,13 @@ export const useBestRouteStore = createSelectors(
             state.outputAmount?.toString() || ''
           ),
         })),
-
       resetFromBlockchain: () =>
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
@@ -223,20 +225,22 @@ export const useBestRouteStore = createSelectors(
           toBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
-      setRouteWalletConfirmed: (flag) =>
+      setQuoteWalletConfirmed: (flag) =>
         set({
-          routeWalletsConfirmed: flag,
+          quoteWalletsConfirmed: flag,
         }),
       setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
       setCustomDestination: (address) => set({ customDestination: address }),
-      resetRouteWallets: () =>
+      resetQuoteWallets: () =>
         set({
-          routeWalletsConfirmed: false,
+          quoteWalletsConfirmed: false,
           selectedWallets: [],
           customDestination: '',
         }),
+      setQuoteWarningsConfirmed: (flag) =>
+        set({ quoteWarningsConfirmed: flag }),
     }))
   )
 );

package/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './swap';
 export * from './config';
-export * from './routing';
+export * from './quote';
 export * from './wallets';

package/src/types/quote.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type BigNumber from 'bignumber.js';
+import type { SwapResult } from 'rango-sdk';
+
+export enum QuoteErrorType {
+  NO_RESULT,
+  REQUEST_FAILED,
+  REQUEST_CANCELED,
+  BRIDGE_LIMIT,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type NoResultError = {
+  type: QuoteErrorType.NO_RESULT;
+  diagnosisMessage?: string;
+};
+
+export type BridgeLimitError = {
+  type: QuoteErrorType.BRIDGE_LIMIT;
+  swap: SwapResult;
+  recommendation: string;
+  fromAmountRangeError: string;
+};
+
+export type InsufficientSlippageError = {
+  type: QuoteErrorType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type QuoteRequestFailed = { type: QuoteErrorType.REQUEST_FAILED };
+export type QuoteRequestCanceled = { type: QuoteErrorType.REQUEST_CANCELED };
+
+export type QuoteError =
+  | NoResultError
+  | BridgeLimitError
+  | InsufficientSlippageError
+  | QuoteRequestFailed
+  | QuoteRequestCanceled;
+
+export enum QuoteWarningType {
+  HIGH_VALUE_LOSS,
+  UNKNOWN_PRICE,
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
+}
+
+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 = {
+  type: QuoteWarningType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type HighSlippageWarning = {
+  type: QuoteWarningType.HIGH_SLIPPAGE;
+  slippage: string | null;
+};
+
+export type HighValueLossWarning = {
+  type: QuoteWarningType.HIGH_VALUE_LOSS;
+  warningLevel: PriceImpactWarningLevel;
+  inputUsdValue: BigNumber;
+  outputUsdValue: BigNumber;
+  totalFee: BigNumber;
+  priceImpact: number;
+};
+
+export type UnknownPriceWarning = {
+  type: QuoteWarningType.UNKNOWN_PRICE;
+};
+
+export type QuoteWarning =
+  | HighValueLossWarning
+  | InsufficientSlippageWarning
+  | HighSlippageWarning
+  | UnknownPriceWarning;
+
+export type ConfirmSwapWarnings = {
+  quote: QuoteWarning | null;
+  quoteUpdate: QuoteUpdateWarning | null;
+  balance: { messages: string[] } | null;
+};

package/src/utils/numbers.ts

@@ -16,7 +16,7 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | null | undefined,
+  number: BigNumber | string | number | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {

package/src/utils/quote.ts

@@ -0,0 +1,338 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { QuoteError, QuoteWarning, Wallet } from '../types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type {
+  SimulationAssetAndAmount,
+  SimulationValidationStatus,
+} from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+import type {
+  Asset,
+  BestRouteResponse,
+  BlockchainMeta,
+  Token,
+} from 'rango-sdk';
+
+import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
+import BigNumber from 'bignumber.js';
+
+import { HIGHT_PRICE_IMPACT, LOW_PRICE_IMPACT } from '../constants/routing';
+import { HIGH_SLIPPAGE } from '../constants/swapSettings';
+import { getUsdValue } from '../store/quote';
+import { QuoteErrorType, QuoteWarningType } from '../types';
+
+import { areEqual } from './common';
+import { findBlockchain, findToken } from './meta';
+import {
+  checkSlippageErrors,
+  checkSlippageWarnings,
+  getLimitErrorMessage,
+  getMinRequiredSlippage,
+  getPercentageChange,
+  getTotalFeeInUsd,
+  hasHighValueLoss,
+  hasLimitError,
+  hasProperSlippage,
+} from './swap';
+
+export function searchParamsToToken(
+  tokens: Token[],
+  searchParams: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParams?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function getQuoteToTokenUsdPrice(
+  quote: BestRouteResponse | null
+): number | null | undefined {
+  return quote?.result?.swaps[quote?.result?.swaps.length - 1].to.usdPrice;
+}
+
+export function isNumberOfSwapsChanged(
+  quoteA: BestRouteResponse,
+  quoteB: BestRouteResponse
+) {
+  const quoteASwaps = quoteA.result?.swaps || [];
+  const quoteBSwaps = quoteB.result?.swaps || [];
+  return quoteASwaps.length !== quoteBSwaps.length;
+}
+
+export function isQuoteSwappersUpdated(
+  quoteA: BestRouteResponse,
+  quoteB: BestRouteResponse
+) {
+  const quoteASwappers =
+    quoteA.result?.swaps.map((swap) => swap.swapperId) || [];
+  const quoteBSwappers =
+    quoteB.result?.swaps.map((swap) => swap.swapperId) || [];
+  return !areEqual(quoteASwappers, quoteBSwappers);
+}
+
+export function isQuoteInternalCoinsUpdated(
+  quoteA: BestRouteResponse,
+  quoteB: BestRouteResponse
+) {
+  const quoteAInternalCoins =
+    quoteA.result?.swaps.map((swap) => swap.to.symbol) || [];
+  const quoteBInternalCoins =
+    quoteB.result?.swaps.map((swap) => swap.to.symbol) || [];
+  return !areEqual(quoteAInternalCoins, quoteBInternalCoins);
+}
+
+export function isQuoteChanged(
+  quoteA: BestRouteResponse,
+  quoteB: BestRouteResponse
+): boolean {
+  return (
+    isNumberOfSwapsChanged(quoteA, quoteB) ||
+    isQuoteSwappersUpdated(quoteA, quoteB) ||
+    isQuoteInternalCoinsUpdated(quoteA, quoteB)
+  );
+}
+
+export function outToRatioHasWarning(
+  fromUsdValue: BigNumber | null,
+  outToInRatio: BigNumber | 0
+) {
+  return (
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -10 &&
+      (fromUsdValue === null || fromUsdValue.gte(new BigNumber(200)))) ||
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -5 &&
+      (fromUsdValue === null || fromUsdValue.gte(new BigNumber(1000))))
+  );
+}
+
+export function getRequiredBalanceOfWallet(
+  selectedWallet: Wallet,
+  fee: SimulationValidationStatus[] | null
+): SimulationAssetAndAmount[] | null {
+  if (fee === null) {
+    return null;
+  }
+  const relatedFeeStatus = fee
+    ?.find((item) => item.blockchain === selectedWallet.chain)
+    ?.wallets.find(
+      (wallet) =>
+        wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase()
+    );
+  if (!relatedFeeStatus) {
+    return null;
+  }
+  return relatedFeeStatus.requiredAssets;
+}
+
+export function getPriceImpactLevel(
+  priceImpact: number
+): PriceImpactWarningLevel {
+  let warningLevel: PriceImpactWarningLevel = undefined;
+  if (priceImpact <= LOW_PRICE_IMPACT && priceImpact > HIGHT_PRICE_IMPACT) {
+    warningLevel = 'low';
+  } else if (priceImpact <= HIGHT_PRICE_IMPACT) {
+    warningLevel = 'high';
+  }
+
+  return warningLevel;
+}
+
+export function findCommonTokens<T extends Asset[], R extends Asset[]>(
+  listA: T,
+  listB: R
+) {
+  const tokenToString = (token: Asset): string =>
+    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
+
+  const set = new Set();
+
+  listA.forEach((token) => set.add(tokenToString(token)));
+
+  return listB.filter((token) => set.has(tokenToString(token))) as R;
+}
+
+export function createRetryQuote(
+  pendingSwap: PendingSwap,
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+): {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toBlockchain: BlockchainMeta | null;
+  toToken: Token | null;
+  inputAmount: string;
+} {
+  const firstStep = pendingSwap.steps[0];
+  const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+  const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
+
+  const toToken = {
+    blockchain: lastStep.toBlockchain,
+    symbol: lastStep.toSymbol,
+    address: lastStep.toSymbolAddress,
+  };
+
+  const fromBlockchainMeta = findBlockchain(
+    lastSuccessfulStep
+      ? lastSuccessfulStep.toBlockchain
+      : firstStep.fromBlockchain,
+    blockchains
+  );
+  const toBlockchainMeta = findBlockchain(lastStep.toBlockchain, blockchains);
+  const fromTokenMeta = findToken(
+    lastSuccessfulStep
+      ? {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: lastSuccessfulStep.toSymbol,
+          address: lastSuccessfulStep.toSymbolAddress,
+        }
+      : {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: firstStep.fromSymbol,
+          address: firstStep.fromSymbolAddress,
+        },
+    tokens
+  );
+  const toTokenMeta = findToken(toToken, tokens);
+  const inputAmount = lastSuccessfulStep
+    ? lastSuccessfulStep.outputAmount ?? ''
+    : pendingSwap.inputAmount;
+
+  return {
+    fromBlockchain: fromBlockchainMeta,
+    fromToken: fromTokenMeta,
+    toBlockchain: toBlockchainMeta,
+    toToken: toTokenMeta,
+    inputAmount,
+  };
+}
+
+export function generateQuoteWarnings(
+  quote: BestRouteResponse,
+  params: {
+    fromToken: Token;
+    toToken: Token;
+    tokens: Token[];
+    userSlippage: number;
+  }
+): QuoteWarning | null {
+  const { fromToken, toToken, tokens, userSlippage } = params;
+  const inputUsdValue = getUsdValue(fromToken, quote.requestAmount);
+  const outputUsdValue = getUsdValue(toToken, quote.result?.outputAmount ?? '');
+
+  if (quote.result && inputUsdValue && outputUsdValue) {
+    const priceImpact = getPercentageChange(
+      inputUsdValue.toString(),
+      outputUsdValue.toString()
+    );
+    const highValueLoss = hasHighValueLoss(inputUsdValue, priceImpact);
+
+    if (highValueLoss) {
+      const totalFee = getTotalFeeInUsd(quote.result.swaps, tokens);
+      const warningLevel = getPriceImpactLevel(priceImpact);
+      return {
+        type: QuoteWarningType.HIGH_VALUE_LOSS,
+        inputUsdValue,
+        outputUsdValue,
+        priceImpact,
+        totalFee,
+        warningLevel,
+      };
+    }
+  } else if (quote.result && (!inputUsdValue || !outputUsdValue)) {
+    return { type: QuoteWarningType.UNKNOWN_PRICE };
+  }
+
+  const minRequiredSlippage = getMinRequiredSlippage(quote);
+  const highSlippage = userSlippage > HIGH_SLIPPAGE;
+
+  if (!hasProperSlippage(params.userSlippage.toString(), minRequiredSlippage)) {
+    return {
+      type: QuoteWarningType.INSUFFICIENT_SLIPPAGE,
+      recommendedSlippages: checkSlippageWarnings(quote, userSlippage),
+      minRequiredSlippage: minRequiredSlippage,
+    };
+  } else if (
+    highSlippage &&
+    parseFloat(minRequiredSlippage ?? '0') < userSlippage
+  ) {
+    return {
+      type: QuoteWarningType.HIGH_SLIPPAGE,
+      slippage: userSlippage.toString(),
+    };
+  }
+
+  return null;
+}
+
+export function generateQuoteErrors(
+  quote: BestRouteResponse
+): QuoteError | null {
+  if (!quote.result) {
+    return {
+      type: QuoteErrorType.NO_RESULT,
+      diagnosisMessage: quote.diagnosisMessages?.[0],
+    };
+  }
+  const limitError = hasLimitError(quote);
+  if (limitError) {
+    const { swap, recommendation, fromAmountRangeError } =
+      getLimitErrorMessage(quote);
+    return {
+      type: QuoteErrorType.BRIDGE_LIMIT,
+      swap: swap,
+      recommendation,
+      fromAmountRangeError,
+    };
+  }
+
+  const recommendedSlippages = checkSlippageErrors(quote);
+
+  if (recommendedSlippages) {
+    const minRequiredSlippage = getMinRequiredSlippage(quote);
+    return {
+      type: QuoteErrorType.INSUFFICIENT_SLIPPAGE,
+      recommendedSlippages,
+      minRequiredSlippage,
+    };
+  }
+
+  return null;
+}
+
+export function getPriceImpact(
+  inputUsdValue: BigNumber | string | null,
+  outputUsdValue: BigNumber | string | null
+) {
+  const outputUsdValueIsInvalid =
+    typeof outputUsdValue === 'string'
+      ? parseFloat(outputUsdValue) <= 0
+      : !outputUsdValue?.gt(0);
+
+  const priceImpact =
+    !inputUsdValue || !outputUsdValue || outputUsdValueIsInvalid
+      ? null
+      : getPercentageChange(
+          inputUsdValue.toString(),
+          outputUsdValue.toString()
+        );
+
+  return priceImpact;
+}