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

package/src/components/Quote/Quote.tsx

@@ -35,19 +35,29 @@ import {
   getSwapperDisplayName,
 } from '../../utils/meta';
 import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import {
+  getPriceImpact,
+  getPriceImpactLevel,
+  getRouteTagColor,
+  sortTags,
+} from '../../utils/quote';
 
 import {
+  AllRoutesButton,
   BasicInfoOutput,
   basicInfoStyles,
   ContainerInfoOutput,
   Content,
   FrameIcon,
   HorizontalSeparator,
+  Line,
   QuoteContainer,
   stepsDetailsStyles,
   SummaryContainer,
+  summaryHeaderStyles,
   summaryStyles,
+  Tag,
+  TagContainer,
 } from './Quote.styles';
 import { QuoteCostDetails } from './QuoteCostDetails';
 import { QuoteSummary } from './QuoteSummary';
@@ -61,11 +71,12 @@ export function Quote(props: QuoteProps) {
     error,
     warning,
     type,
-    recommended = true,
+    selected = false,
+    tagHidden = true,
+    onClickAllRoutes,
   } = props;
   const blockchains = useAppStore().blockchains();
   const swappers = useAppStore().swappers();
-
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
   const roundedInput = numberToString(
@@ -111,6 +122,14 @@ export function Quote(props: QuoteProps) {
         stepState = 'warning';
       }
 
+      let alertTitle = stepHasError
+        ? i18n.t('Slippage Error')
+        : i18n.t('Slippage Warning');
+
+      if (error?.type === QuoteErrorType.BRIDGE_LIMIT) {
+        alertTitle = error?.recommendation;
+      }
+
       return {
         swapper: {
           displayName: getSwapperDisplayName(swap.swapperId, swappers),
@@ -184,12 +203,9 @@ export function Quote(props: QuoteProps) {
           stepHasError || stepHasWarning ? (
             <FooterStepAlarm>
               <Alert
+                variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
-                title={
-                  error?.type === QuoteErrorType.BRIDGE_LIMIT
-                    ? error?.recommendation
-                    : i18n.t(`Slippage ${stepHasError ? 'Error' : 'Warning'}:`)
-                }
+                title={alertTitle}
                 footer={
                   <FooterAlert>
                     {error?.type === QuoteErrorType.BRIDGE_LIMIT && (
@@ -258,18 +274,59 @@ export function Quote(props: QuoteProps) {
       };
     });
   };
-  const steps = getQuoteSteps(quote.result?.swaps ?? []);
+  const steps = getQuoteSteps(quote?.swaps ?? []);
+
   const numberOfSteps = steps.length;
-  const tooltipContainer = getContainer();
+  const container = getContainer();
+  const sortedQuoteTags = sortTags(props.quote.tags || []);
+  const showAllRoutesButton = !!onClickAllRoutes;
 
   return (
     <>
       <SummaryContainer
-        recommended={recommended}
+        selected={selected}
         listItem={type === 'list-item'}
         basic={type === 'basic'}>
         <div className={summaryStyles()}>
-          <QuoteCostDetails steps={numberOfSteps} quote={quote} />
+          {!tagHidden && sortedQuoteTags.length ? (
+            <>
+              <TagContainer>
+                {sortedQuoteTags.map((tag, index) => {
+                  const key = `${tag.value}_${index}`;
+                  return (
+                    <>
+                      <Tag
+                        style={{ color: getRouteTagColor(tag.value) }}
+                        key={key}>
+                        {tag.label}
+                      </Tag>
+                      <Divider size={4} direction="horizontal" />
+                    </>
+                  );
+                })}
+              </TagContainer>
+              <Line />
+              {!showAllRoutesButton && <Divider size={4} />}
+            </>
+          ) : null}
+          <div id="portal-root" className={summaryHeaderStyles()}>
+            <QuoteCostDetails steps={numberOfSteps} quote={quote} />
+
+            {showAllRoutesButton && (
+              <AllRoutesButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClickAllRoutes();
+                }}
+                size="xxsmall"
+                type="secondary"
+                variant="default">
+                <Typography color="secondary" variant="label" size="medium">
+                  {i18n.t('See All Routes')}
+                </Typography>
+              </AllRoutesButton>
+            )}
+          </div>
           {type === 'basic' && (
             <div className={basicInfoStyles()}>
               <FrameIcon>
@@ -281,7 +338,7 @@ export function Quote(props: QuoteProps) {
                 </BasicInfoOutput>
                 <Tooltip
                   content={formatTooltipNumbers(output.value)}
-                  container={tooltipContainer}
+                  container={container}
                   open={!output.value ? false : undefined}>
                   <BasicInfoOutput size="small" variant="body">
                     &nbsp;
@@ -293,7 +350,7 @@ export function Quote(props: QuoteProps) {
               </ContainerInfoOutput>
               <Tooltip
                 content={formatTooltipNumbers(output.usdValue)}
-                container={tooltipContainer}
+                container={container}
                 style={{
                   display: 'flex',
                 }}>
@@ -309,9 +366,9 @@ export function Quote(props: QuoteProps) {
           )}
           {type === 'list-item' && (
             <TokenAmount
+              tooltipContainer={container}
               type="output"
               direction="vertical"
-              tooltipContainer={tooltipContainer}
               price={{
                 value: roundedOutput,
                 usdValue: roundedOutputUsdValue,
@@ -340,12 +397,14 @@ export function Quote(props: QuoteProps) {
           )}
         </div>
         <QuoteContainer
-          recommended={recommended}
+          selected={selected}
+          listItem={type === 'list-item'}
           open={expanded}
           onOpenChange={setExpanded}>
           <QuoteTrigger
+            type={type}
             quoteRef={quoteRef}
-            recommended={recommended}
+            selected={selected}
             setExpanded={setExpanded}
             expanded={expanded}
             steps={steps}
@@ -359,10 +418,10 @@ export function Quote(props: QuoteProps) {
                   <StepDetails
                     type="quote-details"
                     key={key}
+                    tooltipContainer={container}
                     step={step}
                     hasSeparator={index !== steps.length - 1}
                     state={step.state}
-                    tooltipContainer={tooltipContainer}
                   />
                 );
               })}

package/src/components/Quote/Quote.types.ts

@@ -1,23 +1,29 @@
-import type { QuoteError, QuoteWarning } from '../../types';
+import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
 import type { Step } from '@rango-dev/ui';
-import type { BestRouteResponse } from 'rango-sdk';
 import type { ReactNode } from 'react';
 
 export type QuoteProps = {
   type: 'basic' | 'list-item' | 'swap-preview';
   error: QuoteError | null;
   warning: QuoteWarning | null;
-  recommended: boolean;
-  tag?: ReactNode;
-  quote: BestRouteResponse;
+  quote: SelectedQuote;
   input: { value: string; usdValue: string };
   output: { value: string; usdValue?: string };
   expanded?: boolean;
+  tagHidden?: boolean;
+  selected?: boolean;
+  onClickAllRoutes?: () => void;
+};
+
+export type optionProps = {
+  value: string;
+  label: string;
 };
 
 export type QuoteTriggerProps = {
+  type: QuoteProps['type'];
   quoteRef: React.MutableRefObject<HTMLButtonElement | null>;
-  recommended: boolean;
+  selected: boolean;
   setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   steps: Step[];
   expanded?: boolean;
@@ -32,6 +38,6 @@ export type QuoteTriggerImagesProps = {
 };
 
 export type QuoteCostDetailsProps = {
-  quote: BestRouteResponse;
+  quote: SelectedQuote | null;
   steps: number;
 };

package/src/components/Quote/QuoteCostDetails.tsx

@@ -72,8 +72,8 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
   const { steps, quote } = props;
   const tokens = useAppStore().tokens();
-  const totalTime = secondsToString(totalArrivalTime(quote.result?.swaps));
-  const swaps = quote.result?.swaps ?? [];
+  const totalTime = secondsToString(totalArrivalTime(quote?.swaps));
+  const swaps = quote?.swaps ?? [];
   const container = getContainer();
 
   const totalFee = getTotalFeeInUsd(swaps, tokens);
@@ -83,7 +83,10 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   return (
     <>
       <QuoteCost
-        onClickFee={() => setOpen(!open)}
+        onClickFee={(e) => {
+          e.stopPropagation();
+          setOpen(!open);
+        }}
         fee={numberToString(
           totalFee,
           GAS_FEE_MIN_DECIMALS,
@@ -110,7 +113,9 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             </IconButton>
           </ModalHeader>
         }
-        onClose={() => setOpen(false)}>
+        onClose={() => {
+          setOpen(false);
+        }}>
         <ModalContainer>
           <Typography variant="title" size="small">
             {i18n.t('Details')}

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/languages.ts

@@ -1,6 +1,6 @@
 import type { FlagPropTypes, Language } from '@rango-dev/ui';
 
-import { English, French, Japanese, Spanish } from '@rango-dev/ui';
+import { English, French, Japanese, Portuguese, Spanish } from '@rango-dev/ui';
 
 export type LanguageItem = {
   title: string;
@@ -14,6 +14,7 @@ export const LANGUAGES: LanguageItem[] = [
   { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
   { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
   { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
+  { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
 ];
 
 export const DEFAULT_LANGUAGE = 'en';

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() ?? '',