@rango-dev/widget-embedded 0.22.4-next.5 → 0.22.4-next.7

package/src/pages/Routes.tsx

@@ -0,0 +1,131 @@
+import type { SelectedQuote } from '../types';
+import type { MultiRouteSimulationResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HeaderButtons } from '../components/HeaderButtons';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteSkeleton } from '../components/QuoteSkeleton';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { QuoteInfo } from '../containers/QuoteInfo';
+import { getQuoteError } from '../hooks/useConfirmSwap/useConfirmSwap.helpers';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSwapInput } from '../hooks/useSwapInput';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { generateQuoteWarnings } from '../utils/quote';
+
+const ITEM_SKELETON_COUNT = 3;
+export function RoutesPage() {
+  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
+
+  const {
+    selectedQuote,
+    quotes,
+    refetchQuote,
+    setSelectedQuote,
+    updateQuotePartialState,
+    fromToken,
+    toToken,
+    error: quoteError,
+  } = useQuoteStore();
+  const { slippage, customSlippage } = useAppStore();
+  const tokens = useAppStore().tokens();
+
+  const userSlippage = customSlippage ?? slippage;
+
+  const { fetch: fetchQuote, loading: fetchingQuote } = useSwapInput({
+    refetchQuote,
+  });
+
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    setSelectedQuote(quote);
+    updateQuotePartialState('refetchQuote', false);
+    navigateBack();
+  };
+  const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
+    if (!fromToken || !toToken || !quotes) {
+      return null;
+    }
+    const mergedQuote: SelectedQuote = {
+      requestAmount: quotes.requestAmount, // Assuming quotes is an array
+      ...quote,
+    };
+
+    return generateQuoteWarnings(mergedQuote, {
+      fromToken,
+      toToken,
+      userSlippage,
+      tokens,
+    });
+  };
+  const settings_url = `../${navigationRoutes.settings}`;
+  const wallets_url = `../${navigationRoutes.wallets}`;
+  return (
+    <Layout
+      header={{
+        onWallet: () => {
+          navigate(wallets_url);
+        },
+        onBack: () => {
+          updateQuotePartialState('refetchQuote', false);
+        },
+        title: i18n.t('Routes'),
+        suffix: (
+          <HeaderButtons
+            onClickRefresh={
+              !!selectedQuote || quoteError ? fetchQuote : undefined
+            }
+            hidden={['notifications', 'history']}
+            onClickSettings={() => navigate(settings_url)}
+          />
+        ),
+      }}>
+      <PageContainer>
+        {fetchingQuote
+          ? Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
+              <React.Fragment key={index}>
+                <QuoteSkeleton
+                  tagHidden={false}
+                  type="list-item"
+                  expanded={false}
+                />
+                <Divider size={16} />
+              </React.Fragment>
+            ))
+          : !!quotes &&
+            quotes.results?.map((quote) => {
+              const quoteWarning = getQuoteWarning(quote);
+              const quoteError = getQuoteError(quote.swaps);
+
+              return (
+                <React.Fragment key={quote.requestId}>
+                  <QuoteInfo
+                    selected={selectedQuote?.requestId === quote.requestId}
+                    tagHidden={false}
+                    quote={{ ...quote, requestAmount: quotes.requestAmount }}
+                    loading={fetchingQuote}
+                    error={quoteError?.options || null}
+                    warning={quoteWarning}
+                    onClick={(quote) => {
+                      updateQuotePartialState('warning', quoteWarning);
+                      updateQuotePartialState(
+                        'error',
+                        quoteError?.options || null
+                      );
+                      onClickOnQuote(quote);
+                    }}
+                    type="list-item"
+                  />
+                  <Divider size={16} />
+                </React.Fragment>
+              );
+            })}
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/store/quote.ts

@@ -1,8 +1,9 @@
-import type { Wallet } from '../types';
+import type { QuoteError, QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type {
-  BestRouteResponse,
   BlockchainMeta,
   MetaResponse,
+  MultiRouteResponse,
+  PreferenceType,
   Token,
 } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
@@ -30,6 +31,14 @@ export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
 
 export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
 
+type SomeQuoteState = {
+  quotes: MultiRouteResponse | null;
+  sortStrategy: PreferenceType;
+  refetchQuote: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+};
+
 export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
@@ -38,27 +47,37 @@ export interface QuoteState {
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
   fromToken: Token | null;
+  sortStrategy: PreferenceType;
   toToken: Token | null;
   quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
   quoteWarningsConfirmed: boolean;
+  refetchQuote: boolean;
+  selectedQuote: SelectedQuote | null;
+  quotes: MultiRouteResponse | null;
+  customDestination: string | null;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
   resetQuote: () => void;
+  resetAlerts: () => void;
+
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
   setToBlockchain: (chian: BlockchainMeta | null) => void;
-
   setFromToken: (params: SetTokenParams) => void;
   setToToken: (params: SetTokenParams) => void;
+  updateQuotePartialState: <K extends keyof SomeQuoteState>(
+    key: K,
+    value: SomeQuoteState[K]
+  ) => void;
   setInputAmount: (amount: string) => void;
-  quote: BestRouteResponse | null;
-  setQuote: (quote: BestRouteResponse | null) => void;
+  setSelectedQuote: (quote: SelectedQuote | null) => void;
   retry: (pendingSwap: PendingSwap, meta: Meta) => void;
   switchFromAndTo: () => void;
   setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
-  customDestination: string;
-  setCustomDestination: (address: string) => void;
+  setCustomDestination: (address: string | null) => void;
   resetQuoteWallets: () => void;
   setQuoteWarningsConfirmed: (flag: boolean) => void;
 }
@@ -74,12 +93,22 @@ export const useQuoteStore = createSelectors(
       outputUsdValue: new BigNumber(0),
       toBlockchain: null,
       toToken: null,
-      quote: null,
+      refetchQuote: true,
+      sortStrategy: 'SMART',
+      selectedQuote: null,
+      quotes: null,
+      error: null,
+      warning: null,
       quoteWalletsConfirmed: false,
       selectedWallets: [],
-      customDestination: '',
+      customDestination: null,
       quoteWarningsConfirmed: false,
-      setQuote: (quote) =>
+      updateQuotePartialState: (key, value) =>
+        set((state) => ({
+          ...state,
+          [key]: value,
+        })),
+      setSelectedQuote: (quote) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
@@ -87,27 +116,36 @@ export const useQuoteStore = createSelectors(
             return {};
           }
           if (!!quote) {
-            outputAmount = !!quote.result?.outputAmount
-              ? new BigNumber(quote.result?.outputAmount)
+            outputAmount = !!quote?.outputAmount
+              ? new BigNumber(quote?.outputAmount)
               : null;
             outputUsdValue = calcOutputUsdValue(
-              quote.result?.outputAmount,
+              quote?.outputAmount,
               getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
             );
           }
           return {
-            quote: quote,
+            selectedQuote: quote,
             ...(!!quote && {
               outputAmount,
               outputUsdValue,
             }),
           };
         }),
+      resetAlerts: () =>
+        set(() => ({
+          error: null,
+          warning: null,
+        })),
       resetQuote: () =>
         set(() => ({
-          quote: null,
+          selectedQuote: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
+          quotes: null,
+          refetchQuote: true,
+          error: null,
+          warning: null,
         })),
       setFromBlockchain: (chain) => {
         set((state) => {
@@ -118,7 +156,7 @@ export const useQuoteStore = createSelectors(
           return {
             fromBlockchain: chain,
             ...(state.fromToken && {
-              quote: null,
+              selectedQuote: null,
               fromToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -149,7 +187,7 @@ export const useQuoteStore = createSelectors(
           return {
             toBlockchain: chain,
             ...(state.toToken && {
-              quote: null,
+              selectedQuote: null,
               toToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -174,7 +212,7 @@ export const useQuoteStore = createSelectors(
           ...(!amount && {
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
-            quote: null,
+            selectedQuote: null,
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
@@ -199,7 +237,7 @@ export const useQuoteStore = createSelectors(
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,
-          quote: null,
+          selectedQuote: null,
         });
       },
       switchFromAndTo: () =>
@@ -220,7 +258,7 @@ export const useQuoteStore = createSelectors(
           fromBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          quote: null,
+          selectedQuote: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
@@ -228,7 +266,7 @@ export const useQuoteStore = createSelectors(
           toBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          quote: null,
+          selectedQuote: null,
         })),
       setQuoteWalletConfirmed: (flag) =>
         set({
@@ -240,7 +278,7 @@ export const useQuoteStore = createSelectors(
         set({
           quoteWalletsConfirmed: false,
           selectedWallets: [],
-          customDestination: '',
+          customDestination: null,
         }),
       setQuoteWarningsConfirmed: (flag) =>
         set({ quoteWarningsConfirmed: flag }),

package/src/store/wallets.ts

@@ -38,7 +38,6 @@ export interface ConnectedWallet extends Wallet {
 interface WalletsStore {
   connectedWallets: ConnectedWallet[];
   balances: TokensBalance;
-  customDestination: string;
   loading: boolean;
   connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
@@ -57,7 +56,6 @@ export const useWalletsStore = createSelectors(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
       balances: {},
-      customDestination: '',
       loading: false,
       connectWallet: (accounts, tokens) => {
         const getWalletsDetails = get().getWalletsDetails;

package/src/types/quote.ts

@@ -2,7 +2,12 @@
 
 import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type BigNumber from 'bignumber.js';
-import type { SwapResult } from 'rango-sdk';
+import type {
+  BlockchainValidationStatus,
+  RouteTag,
+  RoutingResultType,
+  SwapResult,
+} from 'rango-sdk';
 
 export enum QuoteErrorType {
   NO_RESULT,
@@ -105,3 +110,24 @@ export type ConfirmSwapWarnings = {
   quoteUpdate: QuoteUpdateWarning | null;
   balance: { messages: string[] } | null;
 };
+
+export type QuoteResponse = {
+  requestId: string;
+  swaps?: SwapResult[];
+  diagnosisMessages: string[] | null;
+};
+
+export type SelectedQuote = {
+  swaps: SwapResult[];
+  requestId: string;
+  outputAmount?: string;
+  resultType?: RoutingResultType;
+  tags?: RouteTag[];
+  validationStatus: BlockchainValidationStatus[] | null;
+  requestAmount: string;
+};
+
+export type QuoteErrorResponse = {
+  message: string;
+  options: QuoteError;
+};

package/src/utils/quote.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { QuoteError, QuoteWarning, Wallet } from '../types';
+import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
@@ -7,8 +7,12 @@ import type {
 } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
 import type {
   Asset,
-  BestRouteResponse,
   BlockchainMeta,
+  MultiRouteResponse,
+  MultiRouteSimulationResult,
+  PreferenceType,
+  RouteTag,
+  TagValue,
   Token,
 } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
@@ -16,65 +20,60 @@ import type { PendingSwap } from 'rango-types';
 import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 
+import { HIGH_PRIORITY_TAGS } from '../constants/quote';
 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 { 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 getQuoteToTokenUsdPrice(
-  quote: BestRouteResponse | null
+  quote: SelectedQuote | null
 ): number | null | undefined {
-  return quote?.result?.swaps[quote?.result?.swaps.length - 1].to.usdPrice;
+  const swaps = quote?.swaps || [];
+  return swaps[swaps.length - 1].to.usdPrice;
 }
 
 export function isNumberOfSwapsChanged(
-  quoteA: BestRouteResponse,
-  quoteB: BestRouteResponse
+  quoteA: SelectedQuote,
+  quoteB: SelectedQuote
 ) {
-  const quoteASwaps = quoteA.result?.swaps || [];
-  const quoteBSwaps = quoteB.result?.swaps || [];
+  const quoteASwaps = quoteA?.swaps || [];
+  const quoteBSwaps = quoteB?.swaps || [];
   return quoteASwaps.length !== quoteBSwaps.length;
 }
 
 export function isQuoteSwappersUpdated(
-  quoteA: BestRouteResponse,
-  quoteB: BestRouteResponse
+  quoteA: SelectedQuote,
+  quoteB: SelectedQuote
 ) {
-  const quoteASwappers =
-    quoteA.result?.swaps.map((swap) => swap.swapperId) || [];
-  const quoteBSwappers =
-    quoteB.result?.swaps.map((swap) => swap.swapperId) || [];
+  const quoteASwappers = quoteA?.swaps.map((swap) => swap.swapperId) || [];
+  const quoteBSwappers = quoteB?.swaps.map((swap) => swap.swapperId) || [];
   return !areEqual(quoteASwappers, quoteBSwappers);
 }
 
 export function isQuoteInternalCoinsUpdated(
-  quoteA: BestRouteResponse,
-  quoteB: BestRouteResponse
+  quoteA: SelectedQuote,
+  quoteB: SelectedQuote
 ) {
-  const quoteAInternalCoins =
-    quoteA.result?.swaps.map((swap) => swap.to.symbol) || [];
-  const quoteBInternalCoins =
-    quoteB.result?.swaps.map((swap) => swap.to.symbol) || [];
+  const quoteAInternalCoins = quoteA?.swaps.map((swap) => swap.to.symbol) || [];
+  const quoteBInternalCoins = quoteB?.swaps.map((swap) => swap.to.symbol) || [];
   return !areEqual(quoteAInternalCoins, quoteBInternalCoins);
 }
 
 export function isQuoteChanged(
-  quoteA: BestRouteResponse,
-  quoteB: BestRouteResponse
+  quoteA: SelectedQuote,
+  quoteB: SelectedQuote
 ): boolean {
   return (
     isNumberOfSwapsChanged(quoteA, quoteB) ||
@@ -198,7 +197,7 @@ export function createRetryQuote(
 }
 
 export function generateQuoteWarnings(
-  quote: BestRouteResponse,
+  quote: SelectedQuote,
   params: {
     fromToken: Token;
     toToken: Token;
@@ -208,9 +207,9 @@ export function generateQuoteWarnings(
 ): QuoteWarning | null {
   const { fromToken, toToken, tokens, userSlippage } = params;
   const inputUsdValue = getUsdValue(fromToken, quote.requestAmount);
-  const outputUsdValue = getUsdValue(toToken, quote.result?.outputAmount ?? '');
+  const outputUsdValue = getUsdValue(toToken, quote?.outputAmount ?? '');
 
-  if (quote.result && inputUsdValue && outputUsdValue) {
+  if (!!quote && inputUsdValue && outputUsdValue) {
     const priceImpact = getPriceImpact(
       inputUsdValue.toString(),
       outputUsdValue.toString()
@@ -219,7 +218,7 @@ export function generateQuoteWarnings(
       !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
 
     if (highValueLoss) {
-      const totalFee = getTotalFeeInUsd(quote.result.swaps, tokens);
+      const totalFee = getTotalFeeInUsd(quote?.swaps, tokens);
       const warningLevel = getPriceImpactLevel(priceImpact);
       return {
         type: QuoteWarningType.HIGH_VALUE_LOSS,
@@ -230,11 +229,11 @@ export function generateQuoteWarnings(
         warningLevel,
       };
     }
-  } else if (quote.result && (!inputUsdValue || !outputUsdValue)) {
+  } else if (quote && (!inputUsdValue || !outputUsdValue)) {
     return { type: QuoteWarningType.UNKNOWN_PRICE };
   }
 
-  const minRequiredSlippage = getMinRequiredSlippage(quote);
+  const minRequiredSlippage = getMinRequiredSlippage(quote.swaps);
   const highSlippage = userSlippage > HIGH_SLIPPAGE;
 
   if (!hasProperSlippage(params.userSlippage.toString(), minRequiredSlippage)) {
@@ -256,41 +255,6 @@ export function generateQuoteWarnings(
   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
@@ -326,3 +290,101 @@ export const getUniqueBlockchains = (steps: Step[]) => {
 
   return result;
 };
+
+export const sortQuotesBy = (
+  strategy: PreferenceType,
+  quotes: MultiRouteResponse['results']
+): MultiRouteResponse['results'] => {
+  return quotes.sort((quote1, quote2) => {
+    const getScore = (route: MultiRouteSimulationResult) =>
+      route.scores?.find((score) => score.preferenceType === strategy)?.score ??
+      0;
+
+    const quote1Score = getScore(quote1);
+    const quote2Score = getScore(quote2);
+
+    if (quote1Score !== quote2Score) {
+      return quote2Score - quote1Score;
+    }
+
+    const lowerQuoteId1 = quote1.requestId.toLowerCase();
+    const lowerQuoteId2 = quote2.requestId.toLowerCase();
+
+    return lowerQuoteId1.localeCompare(lowerQuoteId2);
+  });
+};
+
+export const getDefaultQuote = (
+  currentQuote: SelectedQuote | null,
+  quotes: MultiRouteSimulationResult[],
+  requestAmount: string
+): SelectedQuote | null => {
+  if (!quotes.length) {
+    return null;
+  }
+  if (!currentQuote) {
+    // Handle the case where currentQuote is null
+    return {
+      requestAmount: requestAmount,
+      ...quotes[0], // Return the first quote from the quotes array
+    };
+  }
+  // Create a set of swapperIds from the currentQuote swaps
+  const currentQuoteSwapperIds = new Set(
+    currentQuote.swaps.map((swap) => swap.swapperId)
+  );
+
+  // Find a quote that matches the currentQuote's swapperIds
+  const matchedQuote = quotes.find((quote) => {
+    // Create a set of swapperIds from the quote swaps
+    const quoteSwapperIds = new Set(quote.swaps.map((swap) => swap.swapperId));
+
+    // Check if all swapperIds from the currentQuote are present in the quoteSwapperIds
+    return Array.from(currentQuoteSwapperIds).every((swapperId) =>
+      quoteSwapperIds.has(swapperId)
+    );
+  });
+
+  // Return the matchedQuote if found, otherwise return the first quote from the quotes array
+  return {
+    requestAmount: requestAmount,
+    ...(matchedQuote || quotes[0]),
+  };
+};
+
+export const sortTags = (tags: RouteTag[]): RouteTag[] => {
+  const customSort = (a: RouteTag, b: RouteTag) => {
+    const indexA = HIGH_PRIORITY_TAGS.indexOf(a.value);
+    const indexB = HIGH_PRIORITY_TAGS.indexOf(b.value);
+
+    if (indexA !== -1 && indexB !== -1) {
+      return indexA - indexB;
+    }
+
+    if (indexA !== -1) {
+      return -1;
+    } else if (indexB !== -1) {
+      return 1;
+    }
+
+    return 0;
+  };
+
+  return tags.sort(customSort);
+};
+
+export const getRouteTagColor = (tag: TagValue): string => {
+  switch (tag) {
+    case 'FASTEST':
+      return '#06C270';
+    case 'RECOMMENDED':
+      return '#469BF5';
+    case 'LOWEST_FEE':
+      return '#FF4DAD';
+    case 'HIGH_IMPACT':
+      return '#FF3B3B';
+    case 'CENTRALIZED':
+    default:
+      return '#FFF1D4';
+  }
+};