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

package/src/components/HeaderButtons/{HomeButtons.tsx → HeaderButtons.tsx}

@@ -1,4 +1,4 @@
-import type { HomeButtonsPropTypes } from './HeaderButtons.types';
+import type { HeaderButtonsPropTypes } from './HeaderButtons.types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -19,23 +19,32 @@ import { HeaderButton } from './HeaderButtons.styles';
 import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
-export function HomeButtons(props: HomeButtonsPropTypes) {
-  const { onClickRefresh, onClickHistory, onClickSettings } = props;
+export function HeaderButtons(props: HeaderButtonsPropTypes) {
+  const {
+    onClickRefresh,
+    onClickHistory,
+    onClickSettings,
+    hidden = [],
+  } = props;
 
   const {
     config: { features },
   } = useAppStore();
 
-  const isNotificationsHidden = isFeatureHidden('notification', features);
+  const isNotificationsHidden =
+    isFeatureHidden('notification', features) ||
+    hidden.includes('notifications');
 
   return (
     <>
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Refresh')}>
-        <RefreshButton onClick={onClickRefresh} />
-      </Tooltip>
+      {!hidden.includes('refresh') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Refresh')}>
+          <RefreshButton onClick={onClickRefresh} />
+        </Tooltip>
+      )}
 
       {!isNotificationsHidden && (
         <Popover
@@ -57,22 +66,26 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
           </div>
         </Popover>
       )}
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Settings')}>
-        <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
-          <SettingsIcon size={18} color="black" />
-        </HeaderButton>
-      </Tooltip>
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Transactions History')}>
-        <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
-          <TransactionIcon size={18} color="black" />
-        </HeaderButton>
-      </Tooltip>
+      {!hidden.includes('settings') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Settings')}>
+          <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+            <SettingsIcon size={18} color="black" />
+          </HeaderButton>
+        </Tooltip>
+      )}
+      {!hidden.includes('history') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Transactions History')}>
+          <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
+            <TransactionIcon size={18} color="black" />
+          </HeaderButton>
+        </Tooltip>
+      )}
     </>
   );
 }

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -3,8 +3,9 @@ export interface PropTypes {
   isConnected?: boolean;
   container?: HTMLElement;
 }
-export interface HomeButtonsPropTypes {
+export interface HeaderButtonsPropTypes {
+  onClickSettings?: () => void;
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
-  onClickSettings?: () => void;
+  hidden?: ('settings' | 'refresh' | 'history' | 'notifications')[];
 }

package/src/components/HeaderButtons/index.ts

@@ -1,4 +1,4 @@
 export { BackButton } from './BackButton';
 export { CancelButton } from './CancelButton';
 export { WalletButton } from './WalletButton';
-export { HomeButtons } from './HomeButtons';
+export { HeaderButtons } from './HeaderButtons';

package/src/components/Layout/Layout.tsx

@@ -101,7 +101,19 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       className={activeTheme()}
       ref={containerRef}>
       <Header
-        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
+        prefix={
+          <>
+            {showBackButton && (
+              <BackButton
+                onClick={() => {
+                  navigateBack();
+                  // As an example, used in routes page to add a custom logic when navigating back to the home page.
+                  header.onBack && header.onBack();
+                }}
+              />
+            )}
+          </>
+        }
         title={header.title}
         suffix={
           <>

package/src/components/Layout/Layout.types.ts

@@ -14,6 +14,7 @@ export interface PropTypes {
     suffix?: React.ReactNode;
     hasBackButton?: boolean;
     onCancel?: () => void;
+    onBack?: () => void;
   };
   footer?: React.ReactNode;
   height?: ContainerHeightProp;

package/src/components/Quote/Quote.styles.ts

@@ -1,5 +1,12 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+import {
+  Button,
+  css,
+  darkTheme,
+  Image,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -13,31 +20,64 @@ export const QuoteContainer = styled(Collapsible.Root, {
   overflowY: 'hidden',
   width: '100%',
   borderRadius: '$xm',
-  cursor: 'default',
   variants: {
-    recommended: {
-      true: {
-        $$color: '$colors$info300',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary800',
+          $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
-      false: {
+    },
+    listItem: {
+      true: {
         $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
+      false: {},
     },
   },
+
+  compoundVariants: [
+    {
+      listItem: false,
+      selected: true,
+      css: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      listItem: true,
+      selected: false,
+      css: {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: '$neutral300',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral400',
+          },
+        },
+      },
+    },
+  ],
 });
 
 export const stepsDetailsStyles = css({
   padding: '$10 $15',
 });
-
+export const AllRoutesButton = styled(Button, {
+  backgroundColor: 'transparent',
+  border: '1px solid $secondary',
+});
 export const SummaryContainer = styled('div', {
   borderRadius: '$xm',
   display: 'flex',
@@ -45,35 +85,35 @@ export const SummaryContainer = styled('div', {
   alignItems: 'start',
   justifyContent: 'space-between',
   color: '$foreground',
-  cursor: 'pointer',
   boxSizing: 'border-box',
   position: 'relative',
   variants: {
-    recommended: {
-      true: {
-        $$color: '$colors$info100',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral200',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary600',
+          $$color: '$colors$neutral500',
         },
         backgroundColor: '$$color',
-        '&:hover': {
-          backgroundColor: '$$color',
-        },
       },
-      false: {
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {
         $$color: '$colors$neutral200',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral500',
         },
         backgroundColor: '$$color',
         '&:hover': {
-          backgroundColor: '$$color',
+          backgroundColor: '$neutral300',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral400',
+          },
         },
+        cursor: 'pointer',
       },
-    },
-    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
-    listItem: {
-      true: {},
       false: {},
     },
   },
@@ -81,27 +121,35 @@ export const SummaryContainer = styled('div', {
   compoundVariants: [
     {
       listItem: true,
-      recommended: true,
+      selected: true,
+      css: {
+        border: '1px solid $secondary',
+      },
+    },
+    {
+      listItem: false,
+      selected: true,
       css: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
         '&:hover': {
-          $$color: '$colors$secondary200',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$secondary700',
-          },
           backgroundColor: '$$color',
         },
       },
     },
     {
       listItem: true,
-      recommended: false,
+      selected: false,
       css: {
+        cursor: 'pointer',
         '&:hover': {
-          $$color: '$colors$neutral300',
+          backgroundColor: '$neutral300',
           [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral400',
+            backgroundColor: '$neutral400',
           },
-          backgroundColor: '$$color',
         },
       },
     },
@@ -111,7 +159,15 @@ export const SummaryContainer = styled('div', {
 export const summaryStyles = css({
   width: '100%',
   padding: '$15 $15 $10 $15',
-  cursor: 'default',
+});
+
+export const summaryHeaderStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  position: 'relative',
 });
 
 export const rowStyles = css({
@@ -124,7 +180,6 @@ export const rowStyles = css({
   },
 });
 export const basicInfoStyles = css({
-  paddingTop: '$10',
   display: 'flex',
   alignItems: 'center',
   '.usd-value': {
@@ -163,23 +218,41 @@ export const Trigger = styled(Collapsible.Trigger, {
         },
       },
     },
-    recommended: {
-      true: {
-        $$color: '$colors$info300',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary800',
+          $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
-      false: {
+    },
+    listItem: {
+      true: {
         $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
+      false: {},
     },
   },
+
+  compoundVariants: [
+    {
+      listItem: false,
+      selected: true,
+      css: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  ],
   '.blockchains_section': {
     display: 'none',
   },
@@ -291,3 +364,25 @@ export const MoreStep = styled('div', {
     },
   },
 });
+
+export const Tag = styled('div', {
+  backgroundColor: '$neutral400',
+  borderRadius: '$xs',
+  padding: '$2 $5',
+  fontSize: '$10',
+  fontWeight: 400,
+});
+export const TagContainer = styled('div', {
+  display: 'flex',
+});
+
+export const Line = styled('div', {
+  width: '100%',
+  borderTopWidth: '1px',
+  borderTopStyle: 'solid',
+  borderTopColor: '$neutral',
+  margin: '$5 0',
+  [`.${darkTheme} &`]: {
+    borderTopColor: '$neutral400',
+  },
+});

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(
@@ -184,6 +195,7 @@ export function Quote(props: QuoteProps) {
           stepHasError || stepHasWarning ? (
             <FooterStepAlarm>
               <Alert
+                variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
                 title={
                   error?.type === QuoteErrorType.BRIDGE_LIMIT
@@ -258,18 +270,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 +334,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 +346,7 @@ export function Quote(props: QuoteProps) {
               </ContainerInfoOutput>
               <Tooltip
                 content={formatTooltipNumbers(output.usdValue)}
-                container={tooltipContainer}
+                container={container}
                 style={{
                   display: 'flex',
                 }}>
@@ -309,9 +362,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 +393,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 +414,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')}