@rango-dev/ui 0.23.0 → 0.24.0

package/dist/widget/ui/src/icons/Icons.stories.d.ts

@@ -1,6 +1,6 @@
 import type { SvgIconProps } from '../components/SvgIcon';
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
 export default _default;
 export declare const Main: (props: SvgIconProps) => React.JSX.Element;
 //# sourceMappingURL=Icons.stories.d.ts.map

package/dist/widget/ui/src/icons/index.d.ts

@@ -7,13 +7,11 @@ export { default as ChevronUpIcon } from './ChevronUp';
 export { default as CloseIcon } from './Close';
 export { default as CompleteIcon } from './Complete';
 export { default as CopyIcon } from './Copy';
-export { default as CosmosCategoryIcon } from './CosmosCategory';
 export { default as CustomColorsIcon } from './CustomColors';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
 export { default as DoneIcon } from './Done';
-export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
@@ -21,7 +19,6 @@ export { default as GasIcon } from './Gas';
 export { default as InProgressIcon } from './InProgress';
 export { default as InfoErrorIcon } from './InfoError';
 export { default as InfoIcon } from './Info';
-export { default as LanguageIcon } from './Language';
 export { default as LightModeIcon } from './LightMode';
 export { default as LinkIcon } from './Link';
 export { default as LoadingIcon } from './Loading';
@@ -32,7 +29,6 @@ export { default as NoNotificationIcon } from './NoNotification';
 export { default as NotificationNumberIcon } from './NotificationNumber';
 export { default as NotificationsIcon } from './Notifications';
 export { default as NumberIcon } from './Number';
-export { default as OtherCategoryIcon } from './OtherCategory';
 export { default as PinIcon } from './Pin';
 export { default as RefreshIcon } from './Refresh';
 export { default as ReverseIcon } from './Reverse';
@@ -40,7 +36,6 @@ export { default as RouteIcon } from './Route';
 export { default as SearchIcon } from './Search';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
-export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';
 export { default as ChainsIcon } from './Chains';

package/dist/widget/ui/src/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}

package/dist/widget/ui/src/index.d.ts

@@ -4,4 +4,5 @@ export * from './theme';
 export * from './types';
 export * from './hooks';
 export * from './icons';
+export { generateRangeColors } from './helper';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC"}

package/dist/widget/ui/src/types/index.d.ts

@@ -1,2 +1,3 @@
+export type { BestRouteWithFee } from './swaps';
 export type { ConnectedWallet } from './wallet';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}

package/dist/widget/ui/src/types/swaps.d.ts

@@ -1,4 +1,30 @@
-import type { BlockchainValidationStatus, WalletRequiredAssets } from 'rango-sdk';
+import type { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
+export type SwapStatus = 'running' | 'failed' | 'success';
+export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
+export type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
+export declare enum PendingSwapNetworkStatus {
+    WaitingForConnectingWallet = "waitingForConnectingWallet",
+    WaitingForQueue = "waitingForQueue",
+    WaitingForNetworkChange = "waitingForNetworkChange",
+    NetworkChanged = "networkChanged"
+}
+export type WalletTypeAndAddress = {
+    walletType: string;
+    address: string;
+};
+export type SwapSavedSettings = {
+    slippage: string;
+    disabledSwappersIds: string[];
+    disabledSwappersGroups: string[];
+};
 export type SimulationAssetAndAmount = WalletRequiredAssets;
 export type SimulationValidationStatus = BlockchainValidationStatus;
+export type BestRouteType = BestRouteResponse;
+export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
+    result: Omit<SimulationResult, 'swaps'> & {
+        swaps: (SwapResult & {
+            feeInUsd?: string;
+        })[];
+    };
+};
 //# sourceMappingURL=swaps.d.ts.map

package/dist/widget/ui/src/types/swaps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC"}
+{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,oBAAoB,GACpB,UAAU,CAAC;AAEf,oBAAY,wBAAwB;IAClC,0BAA0B,+BAA+B;IACzD,eAAe,oBAAoB;IACnC,uBAAuB,4BAA4B;IACnD,cAAc,mBAAmB;CAClC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;QACxC,KAAK,EAAE,CAAC,UAAU,GAAG;YAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;KAC/C,CAAC;CACH,CAAC"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "license": "MIT",
   "type": "module",
-  "source": "./src/index.ts",
+  "module": "./dist/index.js",
   "main": "./dist/index.js",
   "exports": "./dist/index.js",
   "typings": "dist/widget/ui/src/index.d.ts",
@@ -14,7 +14,6 @@
   "scripts": {
     "dev": "yarn bundle --watch",
     "build": "node ../../scripts/build/command.mjs --path widget/ui",
-    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "build:icons": "svgr svgs/resources/fill --config-file svgs/configs/.svgrrc.default.cjs",
     "type-checking": "tsc --declaration --emitDeclarationOnly",
     "storybook": "storybook dev -p 3000",
@@ -26,6 +25,7 @@
   "peerDependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
+    "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
   "devDependencies": {
@@ -65,10 +65,9 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.22.0",
+    "@rango-dev/wallets-shared": "^0.23.0",
     "@stitches/react": "^1.2.8",
-    "rango-sdk": "^0.1.44",
-    "rango-types": "^0.1.57",
+    "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.8",

package/src/components/Alert/Alert.styles.ts

@@ -1,10 +1,16 @@
-import { css, darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$xs',
 
+  '.title': {
+    display: 'flex',
+    alignItems: 'center',
+    flex: '1 0 0',
+  },
+
   '.title_typography:first-letter': {
     textTransform: 'uppercase',
   },
@@ -14,7 +20,11 @@ export const Container = styled('div', {
     paddingLeft: '$24',
   },
   '.description': {
-    color: '$neutral700',
+    $$color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral600',
+    },
+    color: '$$color',
     fontSize: '$10',
     lineHeight: '$12',
   },
@@ -114,7 +124,6 @@ export const IconHighlight = styled('div', {
   justifyContent: 'center',
   alignItems: 'center',
   alignSelf: 'flex-start',
-  flexShrink: 0,
   variants: {
     type: {
       success: {
@@ -155,9 +164,3 @@ export const IconHighlight = styled('div', {
     },
   },
 });
-
-export const titleStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '1 0 0',
-});

package/src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { Divider } from '../Divider';
 import { Typography } from '../Typography';
 
 import { getColor } from './Alert.helpers';
-import { Container, IconHighlight, Main, titleStyles } from './Alert.styles';
+import { Container, IconHighlight, Main } from './Alert.styles';
 import AlertIcon from './AlertIcon';
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -28,7 +28,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
       type={type}
       variant={variant}>
       <Main variant={variant}>
-        <div className={titleStyles()}>
+        <div className="title">
           <IconHighlight type={type}>
             <AlertIcon type={type} />
           </IconHighlight>

package/src/components/BestRoute/BestRoute.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BestRoute } from './BestRoute';
+import { route1 } from './mock';
+
+const meta: Meta<typeof BestRoute> = {
+  component: BestRoute,
+};
+
+export default meta;
+type Story = StoryObj<typeof BestRoute>;
+
+export const Main: Story = {
+  args: {
+    ...route1,
+  },
+};

package/src/components/BestRoute/BestRoute.styles.ts

@@ -0,0 +1,213 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { darkTheme, styled } from '../../theme';
+import { Image } from '../common';
+import { CollapsibleContent } from '../common/styles';
+
+export const EXPANDABLE_ROUTES_TRANSITION_DURATION = 300;
+
+export const RouteContainer = styled(Collapsible.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  width: '100%',
+  borderRadius: '$xm',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& .steps-details': {
+    padding: '$10 $15',
+  },
+});
+
+export const SummaryContainer = styled('div', {
+  borderRadius: '$xm',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  color: '$foreground',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
+        '&:hover': {
+          $$color: '$colors$secondary200',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$secondary700',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
+        '&:hover': {
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  ],
+  '& .summary': {
+    width: '100%',
+    padding: '$15 $15 $10 $15',
+  },
+  '& .basic-info': {
+    paddingTop: '$10',
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export const Chains = styled(Collapsible.Trigger, {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '$36',
+  padding: '$10 $15',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  variants: {
+    error: {
+      true: {
+        [`& ${Image}`]: {
+          border: '1px $warning500 solid',
+          borderRadius: '100%',
+        },
+      },
+      false: {
+        [`& ${Image}`]: {
+          border: '1px transparent solid',
+          borderRadius: '100%',
+        },
+      },
+    },
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& div:nth-child(1)': { display: 'flex' },
+});
+
+export const Content = styled(CollapsibleContent, {
+  width: '100%',
+});
+
+export const IconContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$2',
+  transition: `all ${EXPANDABLE_ROUTES_TRANSITION_DURATION}ms ease`,
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const HorizontalSeparator = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 $15',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+});
+
+export const FrameIcon = styled('div', {
+  width: '$16',
+  height: '$16',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+});

package/src/components/BestRoute/BestRoute.tsx

@@ -0,0 +1,176 @@
+import type { BestRouteProps } from './BestRoute.types';
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import { Typography } from '../../components/Typography';
+import { ChevronDownIcon, ChevronRightIcon, InfoIcon } from '../../icons';
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { RouteCost } from '../RouteCost';
+import { StepDetails } from '../StepDetails';
+import { TokenAmount } from '../TokenAmount/TokenAmount';
+import { Tooltip } from '../Tooltip';
+
+import {
+  Chains,
+  Content,
+  EXPANDABLE_ROUTES_TRANSITION_DURATION,
+  FrameIcon,
+  HorizontalSeparator,
+  IconContainer,
+  RouteContainer,
+  SummaryContainer,
+} from './BestRoute.styles';
+import { RouteSummary } from './RouteSummary';
+
+export function BestRoute(props: BestRouteProps) {
+  const {
+    steps,
+    totalFee,
+    totalTime,
+    input,
+    output,
+    percentageChange,
+    warningLevel,
+    type,
+    recommended = true,
+  } = props;
+
+  const numberOfSteps = steps.length;
+
+  const [expanded, setExpanded] = useState(props.expanded);
+  const routeRef = useRef<HTMLButtonElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (expanded && routeRef.current) {
+      setTimeout(() => {
+        routeRef?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_ROUTES_TRANSITION_DURATION);
+    }
+  }, [expanded]);
+
+  return (
+    <>
+      <SummaryContainer
+        recommended={recommended}
+        listItem={type === 'list-item'}
+        basic={type === 'basic'}>
+        <div className="summary">
+          <RouteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
+          {type === 'basic' && (
+            <div className="basic-info">
+              <FrameIcon>
+                <InfoIcon size={12} color="gray" />
+              </FrameIcon>
+              <Typography
+                size="small"
+                variant="body"
+                style={{ letterSpacing: 0.4 }}>
+                {`${input.value} ${steps[0].from.token.displayName} = ${
+                  output.value
+                } ${steps[steps.length - 1].to.token.displayName}`}
+              </Typography>
+              <Typography
+                color="$neutral600"
+                ml={2}
+                size="xsmall"
+                variant="body">
+                {`($${output.usdValue})`}
+              </Typography>
+            </div>
+          )}
+          {type === 'list-item' && (
+            <TokenAmount
+              type="output"
+              direction="vertical"
+              price={{ value: output.value, usdValue: output.usdValue }}
+              token={{
+                displayName: steps[numberOfSteps - 1].to.token.displayName,
+                image: steps[numberOfSteps - 1].to.token.image,
+              }}
+              chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+              percentageChange={percentageChange}
+              warningLevel={warningLevel}
+            />
+          )}
+          {type === 'swap-preview' && (
+            <>
+              <RouteSummary
+                from={steps[0].from}
+                to={steps[numberOfSteps - 1].to}
+                percentageChange={percentageChange}
+                warningLevel={warningLevel}
+              />
+              <Divider size={4} />
+            </>
+          )}
+        </div>
+        <RouteContainer
+          recommended={recommended}
+          open={expanded}
+          onOpenChange={setExpanded}>
+          <Chains
+            ref={(ref) => (routeRef.current = ref)}
+            recommended={recommended}
+            onClick={setExpanded.bind(null, (prevState) => !prevState)}>
+            <div>
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                return (
+                  <React.Fragment key={key}>
+                    <Tooltip
+                      container={props.tooltipContainer}
+                      side="bottom"
+                      sideOffset={4}
+                      content={step.from.chain.displayName}>
+                      <Image src={step.from.chain.image} size={16} />
+                    </Tooltip>
+                    {index === numberOfSteps - 1 && (
+                      <>
+                        <IconContainer>
+                          <ChevronRightIcon size={12} color="black" />
+                        </IconContainer>
+                        <Tooltip
+                          container={props.tooltipContainer}
+                          side="bottom"
+                          sideOffset={4}
+                          content={step.to.chain.displayName}>
+                          <Image src={step.to.chain.image} size={16} />
+                        </Tooltip>
+                      </>
+                    )}
+                    {index !== numberOfSteps - 1 && (
+                      <IconContainer>
+                        <ChevronRightIcon size={12} color="black" />
+                      </IconContainer>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+            <IconContainer orientation={expanded ? 'up' : 'down'}>
+              <ChevronDownIcon size={12} color="black" />
+            </IconContainer>
+          </Chains>
+          <Content open={expanded}>
+            <HorizontalSeparator />
+            <div className="steps-details">
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                return (
+                  <StepDetails
+                    type="route-details"
+                    key={key}
+                    step={step}
+                    hasSeparator={index !== steps.length - 1}
+                    state={step.alerts ? 'error' : undefined}
+                  />
+                );
+              })}
+            </div>
+          </Content>
+        </RouteContainer>
+      </SummaryContainer>
+    </>
+  );
+}

package/src/components/BestRoute/BestRoute.types.ts

@@ -0,0 +1,32 @@
+import type { SwapInputProps } from '../../containers/SwapInput/SwapInput.types';
+import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
+import type { ReactNode } from 'react';
+
+type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+
+export type Step = {
+  swapper: SwapInputProps['chain'];
+  from: BaseStep;
+  to: BaseStep;
+  error?: {
+    title?: string;
+    description?: string;
+  };
+  alerts?: ReactNode;
+};
+
+export type BestRouteProps = Pick<
+  PriceImpactProps,
+  'percentageChange' | 'warningLevel'
+> & {
+  type: 'basic' | 'list-item' | 'swap-preview';
+  recommended: boolean;
+  tag?: ReactNode;
+  input: { value: string; usdValue: string };
+  output: { value: string; usdValue?: string };
+  steps: Step[];
+  totalFee: string;
+  totalTime: string;
+  expanded?: boolean;
+  tooltipContainer?: HTMLElement;
+};