@rango-dev/widget-embedded 0.17.1-next.18 → 0.17.1-next.19

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -3,9 +3,7 @@ import type { PropTypes } from './QuoteWarningsAndErrors.types';
 import { i18n } from '@lingui/core';
 import { Alert, Button, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
@@ -24,10 +22,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
   } = props;
 
-  const navigate = useNavigate();
-
   const warningModalHandlers = {
     open: showWarningModal,
     onClose: onCloseWarningModal,
@@ -58,20 +55,23 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
             title={alertInfo.title}
             type={alertInfo.alertType}
             variant="alarm"
-            action={
-              alertInfo.action === 'show-info' ? (
+            {...(alertInfo.action === 'show-info' && {
+              action: (
                 <Action onClick={onOpenWarningModal}>
                   <InfoIcon size={12} color="gray" />
                 </Action>
-              ) : (
+              ),
+            })}
+            {...(alertInfo.action === 'change-settings' && {
+              action: (
                 <Button
-                  size="xsmall"
-                  type={'error'}
-                  onClick={() => navigate(navigationRoutes.settings)}>
-                  {i18n.t('Change Settings')}
+                  size="xxsmall"
+                  type={alertInfo.alertType}
+                  onClick={onChangeSettings}>
+                  {i18n.t('Change')}
                 </Button>
-              )
-            }
+              ),
+            })}
           />
         </Alerts>
       )}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -9,6 +9,7 @@ export interface PropTypes {
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
 }
 
 type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;

package/src/components/SwapDetails/SwapDetails.tsx

@@ -344,7 +344,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               },
             }}
             percentageChange={numberToString(
-              String(percentageChange),
+              percentageChange,
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
@@ -402,7 +402,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
-          String(percentageChange),
+          percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -10,8 +10,8 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
       <Divider size={20} />
       <MessageBox
         type="error"
-        title={i18n.t('Transaction Cancel')}
-        description={i18n.t('Are you sure you want to Cancel this swap?')}
+        title={i18n.t('Cancel Swap')}
+        description={i18n.t('Are you sure you want to cancel this swap?')}
       />
       <Divider size={32} />
       <Button

package/src/constants/errors.ts

@@ -10,18 +10,22 @@ export const errorMessages = () => {
     liquiditySourcesError: {
       title: i18n.t('Please reset your liquidity sources.'),
       description: i18n.t(
-        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources.'
       ),
     },
     noResultError: {
-      title: i18n.t('No Routes Found'),
+      title: i18n.t('No Routes Found.'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
       ),
     },
     bridgeLimitErrors: {
-      increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
-      decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
+      increaseAmount: i18n.t(
+        'Bridge Limit Error: Please increase your amount.'
+      ),
+      decreaseAmount: i18n.t(
+        'Bridge Limit Error: Please decrease your amount.'
+      ),
     },
     highValueLossError: {
       impactTitle: i18n.t('High Price Impact'),
@@ -29,7 +33,7 @@ export const errorMessages = () => {
       description: i18n.t(
         'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
       ),
-      confirmMessage: i18n.t('Confirm High price impact'),
+      confirmMessage: i18n.t('Confirm high price impact'),
     },
     quoteUpdatedWithHighValueLoss: {
       title: i18n.t(

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -1,8 +1,24 @@
 import { styled } from '@rango-dev/ui';
 
+export const PositionTopAlerts = styled('div', {
+  paddingBottom: '$10',
+});
+
 export const QuoteContainer = styled('div', {
   width: '100%',
-  paddingTop: '$2',
+  '& .position-top__skeleton': {
+    paddingTop: '$10',
+  },
+});
+
+export const SkeletonContainer = styled('div', {
+  variants: {
+    paddingTop: {
+      true: {
+        paddingTop: '$10',
+      },
+    },
+  },
 });
 
 export const FooterStepAlarm = styled('div', {

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -5,16 +5,14 @@ import React from 'react';
 
 import { Quote, QuoteSkeleton } from '../../components/Quote';
 import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
-} from '../../constants/routing';
 import { useQuoteStore } from '../../store/quote';
-import { numberToString } from '../../utils/numbers';
+import { QuoteErrorType } from '../../types';
 
-import { QuoteContainer } from './QuoteInfo.styles';
+import {
+  PositionTopAlerts,
+  QuoteContainer,
+  SkeletonContainer,
+} from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
   const {
@@ -28,19 +26,46 @@ export function QuoteInfo(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
     expanded = false,
+    alertPosition = 'bottom',
   } = props;
   const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
     useQuoteStore();
 
-  const showQuote = quote && quote.result && !loading;
+  const noResult =
+    error &&
+    (error.type === QuoteErrorType.NO_RESULT ||
+      error.type === QuoteErrorType.REQUEST_FAILED);
+
+  const showQuote = !noResult && quote && quote.result && !loading;
+
+  const quoteWarningsAndErrors = (warning || error) && (
+    <QuoteWarningsAndErrors
+      warning={warning}
+      error={error}
+      loading={loading}
+      refetchQuote={refetchQuote}
+      showWarningModal={showWarningModal}
+      onOpenWarningModal={onOpenWarningModal}
+      onCloseWarningModal={onCloseWarningModal}
+      onConfirmWarningModal={onConfirmWarningModal}
+      onChangeSettings={onChangeSettings}
+    />
+  );
   return (
     <>
       {loading && (
         <QuoteContainer>
-          <QuoteSkeleton type={type} expanded={expanded} />
+          <SkeletonContainer paddingTop={alertPosition === 'top'}>
+            <QuoteSkeleton type={type} expanded={expanded} />
+          </SkeletonContainer>
         </QuoteContainer>
       )}
+
+      {alertPosition === 'top' && (
+        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
+      )}
       {showQuote ? (
         <QuoteContainer>
           <Quote
@@ -51,46 +76,22 @@ export function QuoteInfo(props: PropTypes) {
             expanded={expanded}
             recommended={true}
             input={{
-              value: numberToString(
-                inputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                inputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: inputAmount,
+              usdValue: inputUsdValue?.toString() ?? '',
             }}
             output={{
-              value: numberToString(
-                outputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                outputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: outputAmount?.toString() ?? '',
+              usdValue: outputUsdValue?.toString() ?? '',
             }}
           />
         </QuoteContainer>
       ) : null}
 
-      {!warning && !error && <Divider size={16} />}
-
-      {(warning || error) && (
-        <QuoteWarningsAndErrors
-          warning={warning}
-          error={error}
-          loading={loading}
-          refetchQuote={refetchQuote}
-          showWarningModal={showWarningModal}
-          onOpenWarningModal={onOpenWarningModal}
-          onCloseWarningModal={onCloseWarningModal}
-          onConfirmWarningModal={onConfirmWarningModal}
-        />
+      {alertPosition === 'bottom' && (
+        <>
+          {!warning && !error && <Divider size={16} />}
+          {quoteWarningsAndErrors}
+        </>
       )}
     </>
   );

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

@@ -8,10 +8,13 @@ export type PropTypes = {
   loading: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
+  autoScrollOnExpanding?: boolean;
   expanded?: boolean;
+  alertPosition?: 'top' | 'bottom';
   refetchQuote: () => void;
   showWarningModal: boolean;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
 };

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

@@ -1,12 +1,13 @@
 import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
-import type { BestRouteResponse, Token } from 'rango-sdk';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 
 import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteUpdateType } from '../../types';
 import { numberToString } from '../../utils/numbers';
 import {
   generateQuoteWarnings,
+  getPriceImpact,
   isNumberOfSwapsChanged,
   isQuoteChanged,
   isQuoteInternalCoinsUpdated,
@@ -14,10 +15,9 @@ import {
 } from '../../utils/quote';
 import {
   checkSlippageErrors,
-  getBalanceWarnings,
+  generateBalanceWarnings,
   getLimitErrorMessage,
   getMinRequiredSlippage,
-  getPercentageChange,
   getQuoteOutputAmount,
   hasLimitError,
   isOutputAmountChangedALot,
@@ -67,17 +67,20 @@ export function throwErrorIfResponseIsNotValid(response: BestRouteResponse) {
 }
 
 export function generateWarnings(
-  previousQuote: BestRouteResponse,
+  previousQuote: BestRouteResponse | undefined,
   currentQuote: BestRouteResponse,
   params: {
     fromToken: Token;
     toToken: Token;
-    tokens: Token[];
+    meta: { blockchains: BlockchainMeta[]; tokens: Token[] };
     selectedWallets: Wallet[];
     userSlippage: number;
   }
 ): ConfirmSwapWarnings {
-  const quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  let quoteChanged = false;
+  if (previousQuote) {
+    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  }
   const output: ConfirmSwapWarnings = {
     quote: null,
     quoteUpdate: null,
@@ -87,7 +90,7 @@ export function generateWarnings(
   const quoteWarning = generateQuoteWarnings(currentQuote, {
     fromToken: params.fromToken,
     toToken: params.toToken,
-    tokens: params.tokens,
+    tokens: params.meta.tokens,
     userSlippage: params.userSlippage,
   });
 
@@ -95,13 +98,13 @@ export function generateWarnings(
     output.quote = quoteWarning;
   }
 
-  if (quoteChanged) {
+  if (previousQuote && quoteChanged) {
     if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
       output.quoteUpdate = {
         type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
         newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
         percentageChange: numberToString(
-          getPercentageChange(
+          getPriceImpact(
             getQuoteOutputAmount(previousQuote) ?? '',
             getQuoteOutputAmount(currentQuote) ?? ''
           ),
@@ -124,9 +127,10 @@ export function generateWarnings(
     }
   }
 
-  const balanceWarnings = getBalanceWarnings(
+  const balanceWarnings = generateBalanceWarnings(
     currentQuote,
-    params.selectedWallets
+    params.selectedWallets,
+    params.meta.blockchains
   );
   const enoughBalance = balanceWarnings.length === 0;
 

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -9,7 +9,6 @@ import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useSettingsStore } from '../../store/settings';
 import { useWalletsStore } from '../../store/wallets';
-import { QuoteErrorType } from '../../types';
 import { createQuoteRequestBody, getWalletsForNewSwap } from '../../utils/swap';
 import { useFetchQuote } from '../useFetchQuote';
 
@@ -25,7 +24,6 @@ export function useConfirmSwap(): ConfirmSwap {
     toToken,
     inputAmount,
     setQuote,
-    resetQuote,
     quote: initialQuote,
     customDestination: customDestinationFromStore,
     setQuoteWarningsConfirmed,
@@ -43,6 +41,8 @@ export function useConfirmSwap(): ConfirmSwap {
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const { experimental } = useAppStore().config;
+  const { enableNewLiquiditySources } = useAppStore().config;
+
   const userSlippage = customSlippage || slippage;
 
   const { fetch: fetchQuote, cancelFetch, loading } = useFetchQuote();
@@ -54,7 +54,7 @@ export function useConfirmSwap(): ConfirmSwap {
     const customDestination =
       params?.customDestination ?? customDestinationFromStore;
 
-    if (!fromToken || !toToken || !inputAmount || !initialQuote) {
+    if (!fromToken || !toToken || !inputAmount) {
       return {
         quote: null,
         swap: null,
@@ -69,12 +69,13 @@ export function useConfirmSwap(): ConfirmSwap {
       inputAmount,
       wallets: connectedWallets,
       selectedWallets,
+      excludeLiquiditySources: enableNewLiquiditySources,
       disabledLiquiditySources,
       slippage: userSlippage,
       affiliateRef,
       affiliatePercent,
       affiliateWallets,
-      initialQuote: initialQuote,
+      initialQuote: initialQuote ?? undefined,
       destination: customDestination,
     });
     if (experimental?.routing) {
@@ -88,12 +89,6 @@ export function useConfirmSwap(): ConfirmSwap {
       setQuote(currentQuote);
     } catch (error: any) {
       const confirmSwapResult = handleQuoteErrors(error);
-      if (
-        confirmSwapResult.error?.type === QuoteErrorType.NO_RESULT ||
-        confirmSwapResult.error?.type === QuoteErrorType.REQUEST_FAILED
-      ) {
-        resetQuote();
-      }
       return confirmSwapResult;
     }
 
@@ -110,13 +105,17 @@ export function useConfirmSwap(): ConfirmSwap {
       { blockchains, tokens }
     );
 
-    const confirmSwapWarnings = generateWarnings(initialQuote, currentQuote, {
-      fromToken,
-      toToken,
-      tokens: tokens,
-      selectedWallets,
-      userSlippage,
-    });
+    const confirmSwapWarnings = generateWarnings(
+      initialQuote ?? undefined,
+      currentQuote,
+      {
+        fromToken,
+        toToken,
+        meta: { blockchains, tokens },
+        selectedWallets,
+        userSlippage,
+      }
+    );
 
     if (confirmSwapWarnings.quoteUpdate) {
       setQuoteWarningsConfirmed(false);

package/src/hooks/useSwapInput.ts

@@ -1,6 +1,7 @@
 import type { QuoteError, QuoteWarning } from '../types';
+import type { Token } from 'rango-sdk';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -19,6 +20,12 @@ import {
 import { useFetchQuote } from './useFetchQuote';
 
 const DEBOUNCE_DELAY = 600;
+const FIRST_INDEX = 0;
+
+type FetchQuoteParams = Omit<
+  Parameters<typeof createQuoteRequestBody>[typeof FIRST_INDEX],
+  'fromToken' | 'toToken'
+> & { fromToken: Token | null; toToken: Token | null };
 
 type UseSwapInput = {
   fetch: () => void;
@@ -55,7 +62,6 @@ export function useSwapInput(): UseSwapInput {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
-  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -69,20 +75,32 @@ export function useSwapInput(): UseSwapInput {
     setWarning(null);
   };
 
-  const fetch: UseSwapInput['fetch'] = () => {
+  const fetch = (params: FetchQuoteParams) => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      liquiditySources,
+      excludeLiquiditySources,
+      disabledLiquiditySources,
+      slippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    } = params;
     if (!loading) {
       resetState(true);
     }
-    if (!shouldSkipRequest) {
+    if (!shouldSkipRequest && fromToken && toToken) {
       resetQuote();
       const requestBody = createQuoteRequestBody({
         fromToken,
         toToken,
         inputAmount,
         liquiditySources,
-        excludeLiquiditySources: enableNewLiquiditySources,
+        excludeLiquiditySources,
         disabledLiquiditySources,
-        slippage: userSlippage,
+        slippage,
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
@@ -119,11 +137,14 @@ export function useSwapInput(): UseSwapInput {
     }
   };
 
-  const debouncedFetch = debounce(() => {
-    if (!shouldSkipRequest) {
-      fetch();
-    }
-  }, DEBOUNCE_DELAY);
+  const debouncedFetch = useCallback(
+    debounce((params: FetchQuoteParams) => {
+      if (!shouldSkipRequest) {
+        fetch(params);
+      }
+    }, DEBOUNCE_DELAY),
+    [shouldSkipRequest]
+  );
 
   useEffect(() => {
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
@@ -136,20 +157,53 @@ export function useSwapInput(): UseSwapInput {
     }
     resetQuote();
     resetState(true);
-    debouncedFetch();
-    return cancelFetch;
-  }, [inputAmount, shouldSkipRequest]);
-
-  useEffect(() => {
-    const disabledLiquiditySourceReset =
-      !!prevDisabledLiquiditySources.current.length &&
-      !disabledLiquiditySources.length;
-    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
-      fetch();
-    }
-    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+    debouncedFetch({
+      inputAmount,
+      fromToken,
+      toToken,
+      liquiditySources,
+      excludeLiquiditySources: enableNewLiquiditySources,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    });
     return cancelFetch;
-  }, [disabledLiquiditySources.length]);
+  }, [
+    inputAmount,
+    fromToken?.symbol,
+    fromToken?.address,
+    fromToken?.blockchain,
+    toToken?.symbol,
+    toToken?.address,
+    toToken?.blockchain,
+    shouldSkipRequest,
+    liquiditySources?.length,
+    enableNewLiquiditySources,
+    disabledLiquiditySources.length,
+    userSlippage,
+    affiliateRef,
+    affiliatePercent,
+    JSON.stringify(affiliateWallets),
+  ]);
 
-  return { fetch, loading, error, warning };
+  return {
+    fetch: () =>
+      fetch({
+        inputAmount,
+        fromToken,
+        toToken,
+        liquiditySources,
+        excludeLiquiditySources: enableNewLiquiditySources,
+        disabledLiquiditySources,
+        slippage: userSlippage,
+        affiliateRef,
+        affiliatePercent,
+        affiliateWallets,
+      }),
+    loading,
+    error,
+    warning,
+  };
 }