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

package/src/components/Quote/QuoteTrigger .tsx

@@ -44,7 +44,7 @@ const ImageComponent = (props: QuoteTriggerImagesProps) => {
 };
 
 export function QuoteTrigger(props: QuoteTriggerProps) {
-  const { quoteRef, recommended, setExpanded, steps, expanded } = props;
+  const { quoteRef, selected, setExpanded, steps, expanded, type } = props;
   const tooltipContainer = getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
@@ -65,9 +65,13 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
 
   return (
     <Trigger
+      listItem={type === 'list-item'}
       ref={(ref) => (quoteRef.current = ref)}
-      recommended={recommended}
-      onClick={() => setExpanded((prevState) => !prevState)}>
+      selected={selected}
+      onClick={(e) => {
+        e.stopPropagation();
+        setExpanded((prevState) => !prevState);
+      }}>
       <div className={rowStyles()}>
         <Typography variant="body" size="xsmall">
           {i18n.t('Via:')}

package/src/components/QuoteSkeleton/QuoteSkeleton.tsx

@@ -8,11 +8,11 @@ import { QuoteSummarySkeleton } from './QuoteSummarySkeleton';
 import { StepSkeleton } from './StepSkeleton';
 
 export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
+  const { type, expanded, tagHidden = false } = props;
 
   return (
     <Container rounded={type !== 'basic'}>
-      <QuoteSummarySkeleton type={type} tag={tag} />
+      <QuoteSummarySkeleton type={type} tagHidden={tagHidden} />
       <Chains>
         <Skeleton height={15} variant="rounded" />
       </Chains>

package/src/components/QuoteSkeleton/QuoteSkeleton.types.ts

@@ -1,5 +1,5 @@
 export type PropTypes = {
   type: 'basic' | 'list-item' | 'swap-preview';
   expanded?: boolean;
-  tag?: boolean;
+  tagHidden?: boolean;
 };

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.styles.ts

@@ -1,22 +1,15 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
-export const CostAndTag = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  height: '22px',
-});
-
-export const Cost = styled('div', {
+export const FlexContent = styled('div', {
   display: 'flex',
 });
 
 export const BasicSummary = styled('div', {
-  padding: '$15 $0 14px $0',
+  padding: '$10 $0 $20',
 });
 
 export const Output = styled('div', {
-  padding: '$6 $0 $15 $0',
+  padding: '$12 $0 $20 $0',
   display: 'flex',
   flexDirection: 'column',
 });
@@ -25,7 +18,6 @@ export const OutputTokenInfo = styled('div', {
   display: 'flex',
   justifyContent: 'start',
   alignItems: 'center',
-  paddingBottom: '$5',
 });
 
 export const QuoteSummary = styled('div', {
@@ -55,3 +47,9 @@ export const TokenAmountLabel = styled('div', {
 });
 
 export const SwapPreview = styled('div', { padding: '$15 $0 $15 $0' });
+
+export const RowStyle = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -3,21 +3,23 @@ import type { PropTypes } from './QuoteSummarySkeleton.types';
 import { ChainToken, Divider, Skeleton } from '@rango-dev/ui';
 import React from 'react';
 
+import { Line } from '../Quote/Quote.styles';
+
 import {
   BasicSummary,
-  Cost,
-  CostAndTag,
+  FlexContent,
   Output,
   OutputTokenInfo,
   QuoteSummary,
   QuoteSummarySeparator,
+  RowStyle,
   SwapPreview,
   TokenAmount,
   TokenAmountLabel,
 } from './QuoteSummarySkeleton.styles';
 
 export function QuoteSummarySkeleton(props: PropTypes) {
-  const { type, tag = false } = props;
+  const { type, tagHidden = true } = props;
   const quotePreview = (
     <QuoteSummary>
       <TokenAmount>
@@ -32,19 +34,36 @@ export function QuoteSummarySkeleton(props: PropTypes) {
       <Skeleton height={12} width={64} variant="rounded" />
     </QuoteSummary>
   );
+  const showAllRoutesSkeleton = type === 'basic' && !tagHidden;
 
   return (
     <div>
-      <CostAndTag>
-        <Cost>
+      {!tagHidden && (
+        <>
+          <FlexContent>
+            <Skeleton width={65} height={14} variant="rounded" />
+            <Divider size={4} direction="horizontal" />
+            <Skeleton width={65} height={14} variant="rounded" />
+            <Divider size={4} direction="horizontal" />
+            <Skeleton width={65} height={14} variant="rounded" />
+          </FlexContent>
+          <Line />
+          {!showAllRoutesSkeleton && <Divider size={4} />}
+        </>
+      )}
+      <div className={RowStyle()}>
+        <FlexContent>
           <Skeleton width={60} height={10} variant="rounded" />
           <Divider size={4} direction="horizontal" />
           <Skeleton width={60} height={10} variant="rounded" />
           <Divider size={4} direction="horizontal" />
           <Skeleton width={60} height={10} variant="rounded" />
-        </Cost>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </CostAndTag>
+        </FlexContent>
+        {showAllRoutesSkeleton && (
+          <Skeleton width={100} height={22} variant="rounded" />
+        )}
+      </div>
+
       {type === 'basic' && (
         <BasicSummary>
           <Skeleton height={15} width={148} variant="rounded" />
@@ -57,7 +76,7 @@ export function QuoteSummarySkeleton(props: PropTypes) {
             <Divider direction="horizontal" size={4} />
             <Skeleton height={15} width={150} variant="rounded" />
           </OutputTokenInfo>
-          <Divider size={4} />
+          <Divider size={10} />
           <Skeleton height={10} width={184} variant="rounded" />
         </Output>
       )}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.types.ts

@@ -2,5 +2,5 @@ import type { QuoteProps } from '../Quote/Quote.types';
 
 export type PropTypes = {
   type: QuoteProps['type'];
-  tag?: boolean;
+  tagHidden?: boolean;
 };

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -25,6 +25,25 @@ export function makeAlerts(
     title: '',
     action: 'show-info',
   };
+  if (error) {
+    alertInfo.alertType = 'error';
+    if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
+      alertInfo.title = error.recommendation;
+      alertInfo.action = 'show-info';
+    }
+
+    if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = i18n.t({
+        id: 'You need to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: {
+          minRequiredSlippage: error.minRequiredSlippage,
+        },
+      });
+      alertInfo.action = 'change-settings';
+    }
+
+    return alertInfo;
+  }
   if (warning) {
     if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
       const warningLevel = getPriceImpactLevel(warning.priceImpact);
@@ -51,24 +70,5 @@ export function makeAlerts(
     }
     return alertInfo;
   }
-  if (error) {
-    alertInfo.alertType = 'error';
-    if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
-      alertInfo.title = error.recommendation;
-      alertInfo.action = 'show-info';
-    }
-
-    if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
-      alertInfo.title = i18n.t({
-        id: 'You need to increase slippage to at least {minRequiredSlippage} for this route.',
-        values: {
-          minRequiredSlippage: error.minRequiredSlippage,
-        },
-      });
-      alertInfo.action = 'change-settings';
-    }
-
-    return alertInfo;
-  }
   return null;
 }

package/src/components/SwapDetails/SwapDetails.tsx

@@ -163,7 +163,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     setNetworkModal: setModalState,
     message: stepMessage,
     blockchains: blockchains,
-    swappers: swappers,
+    swappers,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -1,12 +1,12 @@
 import type { getSwapMessages } from '../../utils/swap';
 import type { ModalState } from '../SwapDetailsModal';
 import type { ConnectResult } from '@rango-dev/wallets-react';
+import type { SwapperMeta } from 'rango-sdk';
 import type {
   BlockchainMeta,
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
-  SwapperMeta,
 } from 'rango-types';
 
 export interface SwapAlertsProps extends WaningAlertsProps {

package/src/components/SwapDetailsModal/index.ts

@@ -1,3 +1,3 @@
 export { SwapDetailsModal } from './SwapDetailsModal';
 export { SwapDetailsCompleteModal } from './SwapDetailsCompleteModal';
-export type { ModalState } from './SwapDetailsModal.types';
+export type { ModalState, ModalPropTypes } from './SwapDetailsModal.types';

package/src/constants/navigationRoutes.ts

@@ -13,4 +13,5 @@ export const navigationRoutes = {
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',
   swapDetails: ':requestId',
+  routes: 'routes',
 };

package/src/constants/quote.ts

@@ -1,4 +1,4 @@
-import type { SwapFee } from 'rango-sdk';
+import type { PreferenceType, SwapFee, TagValue } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 
@@ -21,3 +21,19 @@ export type FeesGroup = {
   payable: { [key in NameOfFees]?: SwapFee[] };
   nonePayable: { [key in NameOfFees]?: SwapFee[] };
 };
+
+export const ROUTE_SORTING_STRATEGY: { [key in PreferenceType]: string } = {
+  SPEED: i18n.t('Fastest Transfer'),
+  NET_OUTPUT: i18n.t('Maximum Return'),
+  FEE: i18n.t('Lowest Fee'),
+  PRICE: i18n.t('Maximum Output'),
+  SMART: i18n.t('Smart Routing'),
+};
+
+export const HIGH_PRIORITY_TAGS: TagValue[] = [
+  'RECOMMENDED',
+  'CENTRALIZED',
+  'LOWEST_FEE',
+  'FASTEST',
+  'HIGH_IMPACT',
+];

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/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) {