@rango-dev/widget-embedded 0.22.4-next.1 → 0.22.4-next.11

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -1,43 +1,68 @@
 import type { PropTypes } from './QuoteInfo.types';
 
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 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 { QuoteContainer } from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
-  const { quote, type, loading, error, warning, expanded = false } = props;
-  const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
-    useQuoteStore();
+  const {
+    quote,
+    type,
+    loading,
+    error,
+    warning,
+    expanded = false,
+    tagHidden,
+    onClick,
+    selected,
+    onClickAllRoutes,
+  } = props;
+  const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
+
+  const outputAmount = !!quote?.outputAmount
+    ? new BigNumber(quote?.outputAmount)
+    : null;
+  const outputUsdValue = !!quote?.outputAmount
+    ? calcOutputUsdValue(
+        quote?.outputAmount,
+        getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice
+      )
+    : null;
 
   const noResult =
     error &&
     (error.type === QuoteErrorType.NO_RESULT ||
       error.type === QuoteErrorType.REQUEST_FAILED);
 
-  const showQuote = !noResult && quote && quote.result && !loading;
+  const showQuote = !noResult && quote && !loading;
 
   if (loading) {
     return (
       <QuoteContainer>
-        <QuoteSkeleton type={type} expanded={expanded} />
+        <QuoteSkeleton tagHidden={tagHidden} type={type} expanded={expanded} />
       </QuoteContainer>
     );
   }
 
   return showQuote ? (
-    <QuoteContainer>
+    <QuoteContainer onClick={() => onClick?.(quote)}>
       <Quote
         quote={quote}
         error={error}
         warning={warning}
+        tagHidden={tagHidden}
+        selected={selected}
         type={type}
         expanded={expanded}
-        recommended={true}
+        onClickAllRoutes={onClickAllRoutes}
         input={{
           value: inputAmount,
           usdValue: inputUsdValue?.toString() ?? '',

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -1,13 +1,16 @@
 import type { QuoteProps } from '../../components/Quote/Quote.types';
-import type { QuoteError, QuoteWarning } from '../../types';
-import type { BestRouteResponse } from 'rango-sdk';
+import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
 
 export type PropTypes = {
-  quote: BestRouteResponse | null;
+  quote: SelectedQuote | null;
   type: QuoteProps['type'];
+  onClick?: (quote: SelectedQuote) => void;
   loading: boolean;
+  tagHidden?: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
   autoScrollOnExpanding?: boolean;
   expanded?: boolean;
+  onClickAllRoutes?: () => void;
+  selected?: boolean;
 };

package/src/containers/Wallets/Wallets.tsx

@@ -3,15 +3,14 @@ import type {
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
-import type { Wallet } from '../../types/wallets';
 import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
-import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
@@ -35,7 +34,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
-  const [accounts, setAccounts] = useState<Wallet[]>([]);
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -67,7 +65,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
           supportedChainNames,
           meta.isContractWallet
         );
-        setAccounts(data);
+        if (data.length) {
+          connectWallet(data, tokens);
+        }
       } else {
         disconnectWallet(type);
       }
@@ -102,12 +102,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  useEffect(() => {
-    if (accounts.length) {
-      connectWallet(accounts, tokens);
-    }
-  }, [accounts, tokens]);
-
   return (
     <WidgetContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -1,6 +1,12 @@
 import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
-import type { ConfirmSwapWarnings, Wallet } from '../../types';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  ConfirmSwapWarnings,
+  QuoteErrorResponse,
+  QuoteResponse,
+  SelectedQuote,
+  Wallet,
+} from '../../types';
+import type { BlockchainMeta, SwapResult, Token } from 'rango-sdk';
 
 import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteUpdateType } from '../../types';
@@ -26,8 +32,8 @@ import {
 /**
  * A request can be successful but in body of the response, it can be some case which is considered as failed.
  */
-export function throwErrorIfResponseIsNotValid(response: BestRouteResponse) {
-  if (!response.result) {
+export function throwErrorIfResponseIsNotValid(response: QuoteResponse) {
+  if (!response.swaps) {
     throw new Error(errorMessages().noResultError.title, {
       cause: {
         type: QuoteErrorType.NO_RESULT,
@@ -35,40 +41,49 @@ export function throwErrorIfResponseIsNotValid(response: BestRouteResponse) {
       },
     });
   }
-  const limitError = hasLimitError(response);
+  const quoteError = getQuoteError(response.swaps);
+  if (quoteError) {
+    throw new Error(quoteError.message, {
+      cause: quoteError.options,
+    });
+  }
+}
+
+export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
+  const limitError = hasLimitError(swaps);
   if (limitError) {
     const { swap, recommendation, fromAmountRangeError } =
-      getLimitErrorMessage(response);
-
-    throw new Error('bridge limit error', {
-      cause: {
+      getLimitErrorMessage(swaps);
+    return {
+      message: 'bridge limit error',
+      options: {
         type: QuoteErrorType.BRIDGE_LIMIT,
-        swap: swap,
+        swap,
         recommendation,
         fromAmountRangeError,
       },
-    });
+    };
   }
 
-  const recommendedSlippages = checkSlippageErrors(response);
+  const recommendedSlippages = checkSlippageErrors(swaps);
 
   if (recommendedSlippages) {
-    const minRequiredSlippage = getMinRequiredSlippage(response);
-    throw new Error('', {
-      cause: {
+    const minRequiredSlippage = getMinRequiredSlippage(swaps);
+    return {
+      message: '',
+      options: {
         type: QuoteErrorType.INSUFFICIENT_SLIPPAGE,
         recommendedSlippages,
         minRequiredSlippage,
       },
-    });
+    };
   }
-
-  return response;
+  return null;
 }
 
 export function generateWarnings(
-  previousQuote: BestRouteResponse | undefined,
-  currentQuote: BestRouteResponse,
+  previousQuote: SelectedQuote | undefined,
+  currentQuote: SelectedQuote,
   params: {
     fromToken: Token;
     toToken: Token;
@@ -132,6 +147,7 @@ export function generateWarnings(
     params.selectedWallets,
     params.meta.blockchains
   );
+
   const enoughBalance = balanceWarnings.length === 0;
 
   if (!enoughBalance) {

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 };
+}