@rango-dev/widget-embedded 0.22.4-next.0 → 0.22.4-next.10

package/src/hooks/useWalletList.ts

@@ -9,12 +9,13 @@ import {
   type WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
+  hashWalletsState,
   isExperimentalChain,
   mapWalletTypesToWalletInfo,
   sortWalletsBasedOnConnectionState,
@@ -87,14 +88,14 @@ export function useWalletList(params: Params) {
     }
   };
 
-  const disconnectConnectingWallets = () => {
+  const disconnectConnectingWallets = useCallback(() => {
     const connectingWallets =
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
       [];
     for (const wallet of connectingWallets) {
       void disconnect(wallet.type);
     }
-  };
+  }, [hashWalletsState(wallets)]);
 
   useEffect(() => {
     return () => {
@@ -141,5 +142,6 @@ export function useWalletList(params: Params) {
     ),
     error,
     handleClick,
+    disconnectConnectingWallets,
   };
 }

package/src/pages/ConfirmSwapPage.tsx

@@ -72,7 +72,7 @@ const descriptionStyles = css({
 export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
   const {
-    quote,
+    selectedQuote,
     setInputAmount,
     selectedWallets,
     quoteWalletsConfirmed,
@@ -102,7 +102,6 @@ export function ConfirmSwapPage() {
       error: null,
       warnings: null,
     });
-
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
 
   const onConfirmSwap: ConfirmSwap['fetch'] = async ({
@@ -110,6 +109,7 @@ export function ConfirmSwapPage() {
     customDestination,
   }) => {
     const result = await confirmSwap?.({ selectedWallets, customDestination });
+
     setConfirmSwapResult(result);
     return result;
   };
@@ -212,12 +212,12 @@ export function ConfirmSwapPage() {
     let quoteWalletsChanged = false;
 
     if (quoteChanged) {
-      let requiredWallets = getRequiredWallets(quote);
+      let requiredWallets = getRequiredWallets(selectedQuote?.swaps || null);
 
       const lastStepToBlockchain =
-        quote?.result?.swaps[quote.result.swaps.length - 1].to.blockchain;
+        selectedQuote?.swaps[selectedQuote.swaps.length - 1].to.blockchain;
 
-      const isLastWalletRequired = !!quote?.result?.swaps.find(
+      const isLastWalletRequired = !!selectedQuote?.swaps.find(
         (swap) => swap.from.blockchain === lastStepToBlockchain
       );
 
@@ -240,7 +240,7 @@ export function ConfirmSwapPage() {
       }
     }
 
-    if (quote && (selectedWalletDisconnected || quoteWalletsChanged)) {
+    if (selectedQuote && (selectedWalletDisconnected || quoteWalletsChanged)) {
       queueMicrotask(() => flushSync(setShowWallets.bind(null, true)));
       setQuoteWalletConfirmed(false);
     }
@@ -251,7 +251,7 @@ export function ConfirmSwapPage() {
   ]);
 
   useLayoutEffect(() => {
-    if (!quote) {
+    if (!selectedQuote) {
       navigate(`../${location.search}`);
     }
   }, []);
@@ -277,6 +277,7 @@ export function ConfirmSwapPage() {
   }
 
   if (quoteWarning || quoteError) {
+    const settings_url = `../${navigationRoutes.settings}`;
     alerts.push(
       <QuoteWarningsAndErrors
         warning={quoteWarning}
@@ -291,7 +292,7 @@ export function ConfirmSwapPage() {
           setShowQuoteWarningModal(false);
           await addNewSwap();
         }}
-        onChangeSettings={() => navigate(navigationRoutes.settings)}
+        onChangeSettings={() => navigate(settings_url)}
       />
     );
   }
@@ -375,9 +376,11 @@ export function ConfirmSwapPage() {
         {alerts.length > 0 ? <Divider size={10} /> : null}
 
         <QuoteInfo
-          quote={quote}
+          quote={selectedQuote}
           type="swap-preview"
           expanded={true}
+          selected
+          tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}

package/src/pages/Home.tsx

@@ -3,7 +3,7 @@ import { Button, Divider, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { HomeButtons } from '../components/HeaderButtons';
+import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
@@ -41,12 +41,6 @@ const InputsContainer = styled('div', {
 });
 export function Home() {
   const navigate = useNavigate();
-  const {
-    fetch: fetchQuote,
-    loading,
-    error: quoteError,
-    warning: quoteWarning,
-  } = useSwapInput();
   const {
     fromToken,
     fromBlockchain,
@@ -57,10 +51,16 @@ export function Home() {
     inputUsdValue,
     outputAmount,
     outputUsdValue,
-    quote,
+    selectedQuote,
+    refetchQuote,
+    error: quoteError,
+    warning: quoteWarning,
+    quotes,
     resetQuoteWallets,
     setQuoteWarningsConfirmed,
+    updateQuotePartialState,
   } = useQuoteStore();
+  const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
 
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
@@ -74,13 +74,13 @@ export function Home() {
   const needsToWarnEthOnPath = false;
 
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
-    quote,
+    selectedQuote,
     inputAmount,
     inputUsdValue
   );
 
   const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
-    quote,
+    selectedQuote,
     inputAmount,
     outputUsdValue
   );
@@ -89,7 +89,7 @@ export function Home() {
     fetchMetaStatus,
     fetchingQuote: loading,
     inputAmount,
-    quote,
+    quote: selectedQuote,
     anyWalletConnected: connectedWallets.length > 0,
     error: quoteError,
     warning: quoteWarning,
@@ -115,6 +115,7 @@ export function Home() {
 
   useEffect(() => {
     resetQuoteWallets();
+    updateQuotePartialState('refetchQuote', true);
   }, []);
 
   const percentageChange =
@@ -153,9 +154,9 @@ export function Home() {
         hasBackButton: false,
         title: config.title || i18n.t('Swap'),
         suffix: (
-          <HomeButtons
+          <HeaderButtons
             onClickRefresh={
-              (!!quote || quoteError) && !showQuoteWarningModal
+              (!!selectedQuote || quoteError) && !showQuoteWarningModal
                 ? fetchQuote
                 : undefined
             }
@@ -210,7 +211,7 @@ export function Home() {
             <SwitchFromAndToButton />
           </FromContainer>
           <SwapInput
-            sharpBottomStyle={!!quote?.result || fetchingQuote}
+            sharpBottomStyle={!!selectedQuote || fetchingQuote}
             label={i18n.t('To')}
             mode="To"
             fetchingQuote={fetchingQuote}
@@ -257,11 +258,20 @@ export function Home() {
         </InputsContainer>
         <Divider size="2" />
         <QuoteInfo
-          quote={quote}
+          quote={selectedQuote}
           loading={fetchingQuote}
           error={quoteError}
+          tagHidden={false}
           warning={quoteWarning}
           type="basic"
+          onClickAllRoutes={
+            !!quotes && quotes.results.length > 1
+              ? () => {
+                  updateQuotePartialState('refetchQuote', false);
+                  navigate(navigationRoutes.routes);
+                }
+              : undefined
+          }
         />
         {quoteWarning || quoteError ? (
           <>

package/src/pages/LiquiditySourcePage.tsx

@@ -1,7 +1,5 @@
-import type {
-  LiquiditySourceType,
-  UniqueSwappersGroupType,
-} from '../utils/settings';
+import type { UniqueSwappersGroupType } from '../utils/settings';
+import type { SwapperType } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import {
@@ -41,7 +39,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
   const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
-  const validTypes: Array<LiquiditySourceType> = [];
+  const validTypes: Array<SwapperType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
   }

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/pages/SettingsPage.tsx

@@ -129,18 +129,16 @@ export function SettingsPage() {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
-  /*
-   * const languageItem = {
-   *   id: 'language-item',
-   *   title: (
-   *     <Typography variant="title" size="xmedium">
-   *       {i18n.t('Language')}
-   *     </Typography>
-   *   ),
-   *   end: <ChevronRightIcon color="gray" />,
-   *   onClick: () => navigate(navigationRoutes.languages),
-   * };
-   */
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    end: <ChevronRightIcon color="gray" />,
+    onClick: () => navigate(navigationRoutes.languages),
+  };
 
   const themeItem = {
     id: 'theme-item',
@@ -185,7 +183,7 @@ export function SettingsPage() {
   const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
 
   if (!isLanguageHidden) {
-    // settingItems.push(languageItem);
+    settingItems.push(languageItem);
   }
   if (!theme?.singleTheme && !isThemeHidden) {
     settingItems.push(themeItem);

package/src/pages/WalletsPage.tsx

@@ -35,23 +35,29 @@ export function WalletsPage() {
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { list, handleClick, error } = useWalletList({
-    config,
-    onBeforeConnect: (type) => {
-      modalTimerId = setTimeout(() => {
-        setOpenModal(true);
-        setSelectedWalletType(type);
-      }, TIME_TO_IGNORE_MODAL);
-    },
-    onConnect: () => {
-      if (modalTimerId) {
-        clearTimeout(modalTimerId);
-      }
-      setTimeout(() => {
-        setOpenModal(false);
-      }, TIME_TO_CLOSE_MODAL);
-    },
-  });
+  const { list, handleClick, error, disconnectConnectingWallets } =
+    useWalletList({
+      config,
+      onBeforeConnect: (type) => {
+        modalTimerId = setTimeout(() => {
+          setOpenModal(true);
+          setSelectedWalletType(type);
+        }, TIME_TO_IGNORE_MODAL);
+      },
+      onConnect: () => {
+        if (modalTimerId) {
+          clearTimeout(modalTimerId);
+        }
+        setTimeout(() => {
+          setOpenModal(false);
+        }, TIME_TO_CLOSE_MODAL);
+      },
+    });
+
+  const handleCloseWalletModal = () => {
+    disconnectConnectingWallets();
+    setOpenModal(false);
+  };
 
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
@@ -87,7 +93,7 @@ export function WalletsPage() {
           })}
           <WalletModal
             open={!!openModal}
-            onClose={() => setOpenModal(false)}
+            onClose={handleCloseWalletModal}
             image={selectedWalletImage}
             state={selectedWalletState}
             error={error}

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 }),