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

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -1,16 +1,14 @@
 import type { ConfirmSwap, Params } from './useConfirmSwap.types';
-import type { PendingSwapSettings } from '../../types';
-import type { BestRouteResponse } from 'rango-sdk';
+import type { PendingSwapSettings, SelectedQuote } from '../../types';
+import type { ConfirmRouteRequest } from 'rango-sdk';
 
 import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useWalletsStore } from '../../store/wallets';
-import { isFeatureEnabled } from '../../utils/settings';
-import { createQuoteRequestBody, getWalletsForNewSwap } from '../../utils/swap';
-import { useFetchQuote } from '../useFetchQuote';
+import { getWalletsForNewSwap } from '../../utils/swap';
+import { useFetchConfirmQuote } from '../useFetchConfirmQuote';
 
 import {
   generateWarnings,
@@ -23,29 +21,21 @@ export function useConfirmSwap(): ConfirmSwap {
     fromToken,
     toToken,
     inputAmount,
-    setQuote,
-    quote: initialQuote,
+    setSelectedQuote,
+    selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
     setQuoteWarningsConfirmed,
+    resetAlerts,
   } = useQuoteStore();
 
-  const {
-    slippage,
-    customSlippage,
-    affiliatePercent,
-    affiliateRef,
-    affiliateWallets,
-  } = useAppStore();
+  const { slippage, customSlippage } = useAppStore();
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
-  const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
-  const { features } = useAppStore().config;
-  const { enableNewLiquiditySources } = useAppStore().config;
 
   const userSlippage = customSlippage || slippage;
 
-  const { fetch: fetchQuote, cancelFetch, loading } = useFetchQuote();
+  const { fetch: fetchQuote, cancelFetch, loading } = useFetchConfirmQuote();
 
   useEffect(() => cancelFetch, []);
 
@@ -63,70 +53,78 @@ export function useConfirmSwap(): ConfirmSwap {
       };
     }
 
-    const requestBody = createQuoteRequestBody({
-      fromToken,
-      toToken,
-      inputAmount,
-      wallets: connectedWallets,
-      selectedWallets,
-      excludeLiquiditySources: enableNewLiquiditySources,
-      disabledLiquiditySources,
-      slippage: userSlippage,
-      affiliateRef,
-      affiliatePercent,
-      affiliateWallets,
-      initialQuote: initialQuote ?? undefined,
-      destination: customDestination,
-    });
-    if (isFeatureEnabled('experimentalRoute', features)) {
-      requestBody.experimental = true;
-    }
-    let currentQuote: BestRouteResponse;
+    const wallets = selectedWallets.reduce(
+      (acc: Record<string, string>, item) => {
+        acc[item.chain] = item.address;
+        return acc;
+      },
+      {}
+    );
+    const requestBody: ConfirmRouteRequest = {
+      requestId: initialQuote?.requestId || '',
+      selectedWallets: wallets,
+      destination: customDestination || undefined,
+    };
+
     try {
-      currentQuote = await fetchQuote(requestBody).then((response) =>
-        throwErrorIfResponseIsNotValid(response)
-      );
-      setQuote(currentQuote);
+      return await fetchQuote(requestBody).then((response) => {
+        const { result } = response;
+
+        throwErrorIfResponseIsNotValid({
+          diagnosisMessages: result.diagnosisMessages,
+          requestId: result.requestId,
+          swaps: result.result?.swaps,
+        });
+
+        const currentQuote: SelectedQuote = {
+          outputAmount: result.result?.outputAmount,
+          requestId: result.requestId,
+          resultType: result.result?.resultType,
+          swaps: result.result?.swaps || [],
+          validationStatus: result.validationStatus,
+          requestAmount: result.requestAmount,
+        };
+        setSelectedQuote(currentQuote);
+        const swapSettings: PendingSwapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources,
+        };
+        const swap = calculatePendingSwap(
+          inputAmount.toString(),
+          result,
+          getWalletsForNewSwap(selectedWallets),
+          swapSettings,
+          false,
+          { blockchains, tokens }
+        );
+
+        const confirmSwapWarnings = generateWarnings(
+          initialQuote ?? undefined,
+          currentQuote,
+          {
+            fromToken,
+            toToken,
+            meta: { blockchains, tokens },
+            selectedWallets,
+            userSlippage,
+          }
+        );
+        if (confirmSwapWarnings.quoteUpdate) {
+          setQuoteWarningsConfirmed(false);
+        }
+        resetAlerts();
+
+        return {
+          quote: currentQuote,
+          swap,
+          error: null,
+          warnings: confirmSwapWarnings,
+        };
+      });
     } catch (error: any) {
       const confirmSwapResult = handleQuoteErrors(error);
       return confirmSwapResult;
     }
-
-    const swapSettings: PendingSwapSettings = {
-      slippage: userSlippage.toString(),
-      disabledSwappersGroups: disabledLiquiditySources,
-    };
-    const swap = calculatePendingSwap(
-      inputAmount.toString(),
-      currentQuote,
-      getWalletsForNewSwap(selectedWallets),
-      swapSettings,
-      false,
-      { blockchains, tokens }
-    );
-
-    const confirmSwapWarnings = generateWarnings(
-      initialQuote ?? undefined,
-      currentQuote,
-      {
-        fromToken,
-        toToken,
-        meta: { blockchains, tokens },
-        selectedWallets,
-        userSlippage,
-      }
-    );
-
-    if (confirmSwapWarnings.quoteUpdate) {
-      setQuoteWarningsConfirmed(false);
-    }
-
-    return {
-      quote: currentQuote,
-      swap,
-      error: null,
-      warnings: confirmSwapWarnings,
-    };
   };
 
   return {

package/src/hooks/useConfirmSwap/useConfirmSwap.types.ts

@@ -15,5 +15,5 @@ export type ConfirmSwap = {
 
 export type Params = {
   selectedWallets: Wallet[];
-  customDestination?: string;
+  customDestination: string | null;
 };

package/src/hooks/useFetch.ts

@@ -0,0 +1,48 @@
+import type { RequestOptions } from 'rango-sdk';
+
+import { useRef, useState } from 'react';
+
+type UseFetchOptions<TRequest, TResponse> = {
+  request: (
+    requestBody: TRequest,
+    options?: RequestOptions
+  ) => Promise<TResponse>;
+};
+export type UseFetchResult<TRequest, TResponse> = {
+  fetch: (requestBody: TRequest) => Promise<TResponse>;
+  cancelFetch: () => void;
+  loading: boolean;
+};
+
+export function useFetch<TRequest, TResponse>({
+  request,
+}: UseFetchOptions<TRequest, TResponse>): UseFetchResult<TRequest, TResponse> {
+  const [loading, setLoading] = useState(false);
+  const abortController = useRef<AbortController | null>(null);
+
+  const cancelFetch = () => abortController.current?.abort();
+
+  const fetch: UseFetchResult<TRequest, TResponse>['fetch'] = async (
+    requestBody
+  ) => {
+    cancelFetch();
+    abortController.current = new AbortController();
+
+    setLoading(true);
+    try {
+      const res = await request(requestBody, {
+        signal: abortController.current.signal,
+      });
+
+      abortController.current = null;
+      return res;
+      // eslint-disable-next-line no-useless-catch
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useFetchAllQuotes.ts

@@ -0,0 +1,21 @@
+import type { UseFetchResult } from './useFetch';
+import type { BestRouteRequest, MultiRouteResponse } from 'rango-sdk';
+
+import { httpService } from '../services/httpService';
+
+import { useFetch } from './useFetch';
+
+export function useFetchAllQuotes(): UseFetchResult<
+  BestRouteRequest,
+  MultiRouteResponse
+> {
+  const { fetch, loading, cancelFetch } = useFetch<
+    BestRouteRequest,
+    MultiRouteResponse
+  >({
+    request: async (requestBody, options) =>
+      await httpService().getAllRoutes(requestBody, options),
+  });
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useFetchConfirmQuote.ts

@@ -0,0 +1,21 @@
+import type { UseFetchResult } from './useFetch';
+import type { ConfirmRouteRequest, ConfirmRouteResponse } from 'rango-sdk';
+
+import { httpService } from '../services/httpService';
+
+import { useFetch } from './useFetch';
+
+export function useFetchConfirmQuote(): UseFetchResult<
+  ConfirmRouteRequest,
+  ConfirmRouteResponse
+> {
+  const { fetch, loading, cancelFetch } = useFetch<
+    ConfirmRouteRequest,
+    ConfirmRouteResponse
+  >({
+    request: async (requestBody, options) =>
+      await httpService().confirmRouteRequest(requestBody, options),
+  });
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useSwapInput.ts

@@ -1,14 +1,18 @@
-import type { QuoteError, QuoteWarning } from '../types';
 import type { Token } from 'rango-sdk';
 
 import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useWalletsStore } from '../store/wallets';
 import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
-import { generateQuoteWarnings } from '../utils/quote';
+import {
+  generateQuoteWarnings,
+  getDefaultQuote,
+  sortQuotesBy,
+} from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
 import { areTokensEqual } from '../utils/wallets';
@@ -17,7 +21,7 @@ import {
   handleQuoteErrors,
   throwErrorIfResponseIsNotValid,
 } from './useConfirmSwap/useConfirmSwap.helpers';
-import { useFetchQuote } from './useFetchQuote';
+import { useFetchAllQuotes } from './useFetchAllQuotes';
 
 const DEBOUNCE_DELAY = 600;
 const FIRST_INDEX = 0;
@@ -28,28 +32,34 @@ type FetchQuoteParams = Omit<
 > & { fromToken: Token | null; toToken: Token | null };
 
 type UseSwapInput = {
-  fetch: () => void;
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
   loading: boolean;
-  error: QuoteError | null;
-  warning: QuoteWarning | null;
 };
-
+type UseSwapInputProps = {
+  refetchQuote: boolean;
+};
 /**
  * a hook for fetching quote based on from and to input values
  * we use this hook in home page
  */
-export function useSwapInput(): UseSwapInput {
-  const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
+export function useSwapInput({
+  refetchQuote,
+}: UseSwapInputProps): UseSwapInput {
+  const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
   const { enableNewLiquiditySources, features } = useAppStore().config;
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+
   const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,
     inputAmount,
     inputUsdValue,
-    quote,
+    selectedQuote,
+    sortStrategy,
     resetQuote,
-    setQuote,
+    setSelectedQuote,
+    updateQuotePartialState,
   } = useQuoteStore();
   const {
     slippage,
@@ -64,8 +74,6 @@ export function useSwapInput(): UseSwapInput {
   const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
 
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<QuoteError | null>(null);
-  const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -75,8 +83,6 @@ export function useSwapInput(): UseSwapInput {
 
   const resetState = (loading: boolean) => {
     setLoading(loading);
-    setError(null);
-    setWarning(null);
   };
 
   const fetch = (params: FetchQuoteParams) => {
@@ -92,6 +98,7 @@ export function useSwapInput(): UseSwapInput {
       affiliatePercent,
       affiliateWallets,
     } = params;
+
     if (!loading) {
       resetState(true);
     }
@@ -104,6 +111,7 @@ export function useSwapInput(): UseSwapInput {
         liquiditySources: liquiditySources,
         excludeLiquiditySources,
         disabledLiquiditySources,
+        wallets: connectedWallets,
         slippage,
         affiliateRef,
         affiliatePercent,
@@ -114,16 +122,32 @@ export function useSwapInput(): UseSwapInput {
       }
       fetchQuote(requestBody)
         .then((res) => {
+          const sortQuotes = sortQuotesBy(sortStrategy, res.results);
+          const quote = getDefaultQuote(
+            selectedQuote,
+            sortQuotes,
+            res.requestAmount
+          );
+
           setLoading(false);
-          setQuote(res);
-          throwErrorIfResponseIsNotValid(res);
-          const quoteWarning = generateQuoteWarnings(res, {
-            fromToken,
-            toToken,
-            userSlippage,
-            tokens,
+          updateQuotePartialState('quotes', res);
+          setSelectedQuote(quote);
+
+          throwErrorIfResponseIsNotValid({
+            diagnosisMessages: res.diagnosisMessages,
+            requestId: quote?.requestId || '',
+            swaps: quote?.swaps,
           });
-          setWarning(quoteWarning);
+
+          const quoteWarning =
+            quote &&
+            generateQuoteWarnings(quote, {
+              fromToken,
+              toToken,
+              userSlippage,
+              tokens,
+            });
+          updateQuotePartialState('warning', quoteWarning);
         })
         .catch((error) => {
           const { error: quoteError } = handleQuoteErrors(error);
@@ -134,7 +158,7 @@ export function useSwapInput(): UseSwapInput {
             resetQuote();
           }
           if (quoteError?.type !== QuoteErrorType.REQUEST_CANCELED) {
-            setError(quoteError);
+            updateQuotePartialState('error', quoteError);
             setLoading(false);
           }
         });
@@ -151,20 +175,26 @@ export function useSwapInput(): UseSwapInput {
   );
 
   useEffect(() => {
-    if (fetchStatus !== 'success') {
+    if (!refetchQuote) {
+      setLoading(false);
       return;
     }
-    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
-      resetState(false);
-      cancelFetch();
+    if (fetchStatus !== 'success') {
       return;
     }
     if (shouldSkipRequest) {
-      if (quote) {
+      setLoading(false);
+      if (selectedQuote) {
         resetQuote();
       }
       return;
     }
+    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
+      resetState(false);
+      cancelFetch();
+      return;
+    }
+
     resetQuote();
     resetState(true);
     debouncedFetch({
@@ -214,7 +244,5 @@ export function useSwapInput(): UseSwapInput {
         affiliateWallets,
       }),
     loading,
-    error,
-    warning,
   };
 }

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 ? (
           <>