@rango-dev/ui 0.22.1-next.1 → 0.22.1-next.11

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":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC"}

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

@@ -4,5 +4,4 @@ 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;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,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"}

package/dist/widget/ui/src/{helper → utils}/index.d.ts

@@ -1,6 +1,3 @@
 export declare function containsText(text: string, searchText: string): boolean;
 export declare function getConciseAddress(address: string | null, maxChars?: number, ellipsisLength?: number): string | null;
-export declare const generateRangeColors: (name: string, mode: 'light' | 'dark', color?: string) => {
-    [x: string]: string | undefined;
-};
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEtE;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,QAAQ,SAAI,EACZ,cAAc,SAAI,GACjB,MAAM,GAAG,IAAI,CAYf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.22.1-next.1",
+  "version": "0.22.1-next.11",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -65,7 +65,7 @@
     "@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.21.1-next.1",
+    "@rango-dev/wallets-shared": "^0.21.1-next.3",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",

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

@@ -20,11 +20,7 @@ export const Container = styled('div', {
     paddingLeft: '$24',
   },
   '.description': {
-    $$color: '$colors$neutral700',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral600',
-    },
-    color: '$$color',
+    color: '$neutral700',
     fontSize: '$10',
     lineHeight: '$12',
   },
@@ -124,6 +120,7 @@ export const IconHighlight = styled('div', {
   justifyContent: 'center',
   alignItems: 'center',
   alignSelf: 'flex-start',
+  flexShrink: 0,
   variants: {
     type: {
       success: {

package/src/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,11 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: '1rem',
   height: '1rem',
   padding: 0,
-  border: '1px solid $neutral600',
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&[data-state="checked"]': {

package/src/components/ListItem/ListItem.styles.ts

@@ -22,6 +22,13 @@ export const BaseListItem = styled('li', {
     flexShrink: 1,
     flexBasis: 'auto',
     textAlign: 'left',
+    '._description': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
 
     '.item-text-title': {
       fontWeight: 'bold',

package/src/components/ListItem/ListItem.tsx

@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
       <div className="item-text-container">
         {title && <div className="item-text-title">{title}</div>}
         {description && (
-          <Typography variant="body" size="small" color="neutral600">
+          <Typography variant="body" className="_description" size="small">
             {description}
           </Typography>
         )}

package/src/components/PriceImpact/PriceImpact.tsx

@@ -9,7 +9,7 @@ import { Container } from './PriceImpact.styles';
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
 
-  let percentageChangeColor = '$neutral700';
+  let percentageChangeColor = '$neutral600';
   if (!outputUsdValue || warningLevel === 'low') {
     percentageChangeColor = '$warning500';
   } else if (warningLevel === 'high') {
@@ -22,7 +22,7 @@ export function PriceImpact(props: PriceImpactProps) {
         <Typography
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
-          color={size !== 'small' ? '$neutral600' : '$neutral700'}>
+          color="$neutral600">
           {`~$${outputUsdValue}`}
         </Typography>
       )}

package/src/components/{RouteCost/RouteCost.styles.ts → QuoteCost/QuoteCost.styles.ts}

@@ -18,3 +18,10 @@ export const Container = styled('div', {
     alignItems: 'center',
   },
 });
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});

package/src/components/{RouteCost/RouteCost.tsx → QuoteCost/QuoteCost.tsx}

@@ -1,14 +1,13 @@
-import type { PropTypes } from './RouteCost.types';
+import type { PropTypes } from './QuoteCost.types';
 
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
-import { Separator } from '../BestRoute/BestRoute.styles';
 import { Typography } from '../Typography';
 
-import { Container } from './RouteCost.styles';
+import { Container, Separator } from './QuoteCost.styles';
 
-export function RouteCost(props: PropTypes) {
+export function QuoteCost(props: PropTypes) {
   const { fee, time, steps } = props;
   return (
     <Container>

package/src/components/QuoteCost/index.ts

@@ -0,0 +1 @@
+export { QuoteCost } from './QuoteCost';

package/src/components/Radio/Radio.styles.tsx

@@ -9,8 +9,11 @@ export const StyledItem = styled(Radio.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  border: '1px solid $neutral600',
-
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
     [`.${darkTheme} &`]: {

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -2,7 +2,7 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import React from 'react';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 import { Divider } from '../Divider';
 import { AngleRightIcon, GasIcon } from '../Icon';
 
@@ -13,7 +13,11 @@ export const Container = styled('div', {
   padding: '$8',
   borderRadius: '$xs',
   backgroundColor: '$background',
-  color: '$neutral600',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  color: '$$color',
   fontSize: '$12',
 
   '.routes': {

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -1,7 +1,29 @@
 import { type BlockchainMeta, TransactionType } from 'rango-sdk';
 
+import {
+  CosmosCategoryIcon,
+  EvmCategoryIcon,
+  OtherCategoryIcon,
+  UtxoCategoryIcon,
+} from '../../icons';
+
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
+export const blockchainCategoryIcons = {
+  [BlockchainCategories.EVM]: EvmCategoryIcon,
+  [BlockchainCategories.COSMOS]: CosmosCategoryIcon,
+  [BlockchainCategories.UTXO]: UtxoCategoryIcon,
+  [BlockchainCategories.OTHER]: OtherCategoryIcon,
+};
+
+export const blockchainCategoryLabel = {
+  [BlockchainCategories.ALL]: 'All',
+  [BlockchainCategories.EVM]: 'EVM',
+  [BlockchainCategories.COSMOS]: 'Cosmos',
+  [BlockchainCategories.UTXO]: 'UTXO',
+  [BlockchainCategories.OTHER]: 'Other',
+};
+
 const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
   switch (type) {
     case BlockchainCategories.ALL:
@@ -19,17 +41,22 @@ const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
   }
 };
 
-const blockchainslogo = {
-  [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
-  [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
-  [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
-  [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
-};
-
-export const generateBlockchainsLogo = (
+export const hasAnyCategory = (
   list: BlockchainMeta[],
-  type: Exclude<BlockchainCategories, 'ALL'>
-) =>
-  list
-    .filter((item) => filterByType(item, type))
-    .filter((item) => blockchainslogo[type].includes(item.name));
+  blockchainType: string
+) => list.some((blockchain) => filterByType(blockchain, blockchainType));
+
+export const getCountCategories = (list: BlockchainMeta[]) => {
+  const categoriesToCheck = Object.values(BlockchainCategories).filter(
+    (category) => category !== BlockchainCategories.ALL
+  );
+
+  const categoriesCount = categoriesToCheck.reduce((count, category) => {
+    const isCategoryPresent = list.some((blockchain) =>
+      filterByType(blockchain, category)
+    );
+    return count + (isCategoryPresent ? 1 : 0);
+  }, 0);
+
+  return categoriesCount;
+};

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -4,19 +4,19 @@ import type { PropTypes } from './SelectableCategoryList.types';
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Divider, Image, Skeleton, Typography } from '..';
+import { Divider, Skeleton, Typography } from '..';
 import { BlockchainsChip } from '../BlockchainsChip';
 
-import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
 import {
-  Container,
-  FirstImage,
-  ImageContent,
-} from './SelectableCategoryList.styles';
+  blockchainCategoryIcons,
+  blockchainCategoryLabel,
+  hasAnyCategory,
+} from './SelectableCategoryList.helpers';
+import { Container } from './SelectableCategoryList.styles';
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
 export function SelectableCategoryList(props: PropTypes) {
-  const { setCategory, category, blockchains, isLoading } = props;
+  const { setCategory, category, isLoading, blockchains } = props;
   const categories = Object.keys(
     BlockchainCategories
   ) as BlockchainCategories[];
@@ -32,45 +32,46 @@ export function SelectableCategoryList(props: PropTypes) {
           />
         ))}
       {!isLoading &&
-        categories.map((blockchainCategory) => (
-          <BlockchainsChip
-            selected={category === blockchainCategory}
-            key={blockchainCategory}
-            onClick={() => setCategory(blockchainCategory)}>
-            {blockchainCategory !== BlockchainCategories.ALL && (
-              <>
-                <ImageContent>
-                  {generateBlockchainsLogo(blockchains, blockchainCategory).map(
-                    (blockchain, index) =>
-                      index === 0 ? (
-                        <FirstImage
-                          key={`image-${blockchain.name}-${blockchain.chainId}`}
-                          src={blockchain.logo}
-                        />
-                      ) : (
-                        <Image
-                          key={`image-${blockchain.name}-${blockchain.chainId}`}
-                          src={blockchain.logo}
-                          size={15}
-                        />
-                      )
-                  )}
-                </ImageContent>
-                <Divider size={12} />
-              </>
-            )}
-            <Typography
-              size="xsmall"
-              variant="body"
-              color={
-                blockchainCategory === BlockchainCategories.ALL
-                  ? 'secondary500'
-                  : undefined
-              }>
-              {i18n.t(BlockchainCategories[blockchainCategory])}
-            </Typography>
-          </BlockchainsChip>
-        ))}
+        categories.map((blockchainCategory) => {
+          const Logo =
+            blockchainCategory !== BlockchainCategories.ALL
+              ? blockchainCategoryIcons[blockchainCategory]
+              : null;
+
+          const hasBlockchain = hasAnyCategory(blockchains, blockchainCategory);
+
+          return (
+            hasBlockchain && (
+              <BlockchainsChip
+                selected={category === blockchainCategory}
+                key={blockchainCategory}
+                onClick={() => setCategory(blockchainCategory)}>
+                {Logo && (
+                  <>
+                    <Logo size={28} />
+                    <Divider size={12} />
+                  </>
+                )}
+                <Typography
+                  size="xsmall"
+                  variant="body"
+                  color={
+                    blockchainCategory === BlockchainCategories.ALL
+                      ? 'secondary500'
+                      : undefined
+                  }>
+                  {i18n.t({
+                    id: '{blockchainCategory}',
+                    values: {
+                      blockchainCategory:
+                        blockchainCategoryLabel[blockchainCategory],
+                    },
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            )
+          );
+        })}
     </Container>
   );
 }

package/src/components/SelectableCategoryList/index.ts

@@ -1,2 +1,3 @@
 export { SelectableCategoryList } from './SelectableCategoryList';
 export { BlockchainCategories } from './SelectableCategoryList.types';
+export { getCountCategories } from './SelectableCategoryList.helpers';

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -2,8 +2,8 @@ import type { PropsWithChildren } from 'react';
 
 import React, { useEffect, useState } from 'react';
 
-import { getConciseAddress } from '../../helper';
 import { styled } from '../../theme';
+import { getConciseAddress } from '../../utils';
 import { Image } from '../common';
 import { Typography } from '../Typography';
 

package/src/components/StepDetails/StepDetails.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof StepDetails>;
 export const Main: Story = {
   args: {
     step: { ...step1, alerts: <Alert title="test alert" type="warning" /> },
-    type: 'route-progress',
+    type: 'swap-progress',
     state: 'completed',
   },
 };

package/src/components/StepDetails/StepDetails.styles.ts

@@ -8,8 +8,8 @@ export const Container = styled('div', {
   border: '1px solid transparent',
   variants: {
     type: {
-      'route-details': { border: 'none' },
-      'route-progress': {
+      'quote-details': { border: 'none' },
+      'swap-progress': {
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',
@@ -63,8 +63,8 @@ export const Container = styled('div', {
 
 export const SwapperImage = styled('div', {
   borderRadius: '100%',
-  width: 'max-content',
-  height: 'max-content',
+  width: '24px',
+  height: '24px',
   overflow: 'hidden',
   border: '1.5px solid transparent',
   variants: {

package/src/components/StepDetails/StepDetails.tsx

@@ -40,7 +40,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         ref={containerRef}
         tabIndex={tabIndex}>
         <div className="swapper">
-          {type === 'route-progress' && hasSeparator && (
+          {type === 'swap-progress' && hasSeparator && (
             <StepSeparator state={state} />
           )}
           <SwapperImage state={state}>
@@ -61,7 +61,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
           </Typography>
         </div>
         <div className="step-info">
-          <DashedLine invisible={!hasSeparator || type === 'route-progress'} />
+          <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
           <div className="tokens-container">
             <div className="tokens">
               <ChainToken
@@ -90,7 +90,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 step.to.price.value
               } ${step.to.token.displayName}`}</Typography>
             </div>
-            <Alerts pb={hasSeparator && type === 'route-details'}>
+            <Alerts pb={hasSeparator && type === 'quote-details'}>
               {step.alerts}
             </Alerts>
           </div>

package/src/components/StepDetails/StepDetails.types.ts

@@ -1,9 +1,24 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { ReactNode } from 'react';
+import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
+
+type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+
+export type Step = {
+  swapper: SwapInputProps['chain'];
+  from: BaseStep;
+  to: BaseStep;
+  error?: {
+    title?: string;
+    description?: string;
+  };
+  alerts?: ReactNode;
+  state?: 'error' | 'warning';
+};
 
 export type StepDetailsProps = {
   step: Step;
   hasSeparator: boolean;
-  type: 'route-details' | 'route-progress';
+  type: 'quote-details' | 'swap-progress';
   state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
   isFocused?: boolean;
   tabIndex?: number;

package/src/components/StepDetails/index.ts

@@ -1,2 +1,2 @@
 export { StepDetails } from './StepDetails';
-export type { StepDetailsProps } from './StepDetails.types';
+export type { StepDetailsProps, Step } from './StepDetails.types';

package/src/components/StepDetails/mock.ts

@@ -1,4 +1,4 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { Step } from './StepDetails.types';
 
 export const step1: Step = {
   swapper: {

package/src/components/SvgIcon/SvgIcon.style.ts

@@ -28,7 +28,7 @@ export const SvgWithColor = styled('svg', {
         color: '$info500',
       },
       gray: {
-        color: '$neutral600',
+        color: '$neutral700',
       },
     },
   },

package/src/components/Switch/Switch.styles.tsx

@@ -8,8 +8,12 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  backgroundColor: '$neutral600',
-  borderColor: '$neutral600',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  backgroundColor: '$$color',
+  borderColor: '$$color',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',

package/src/components/index.ts

@@ -1,6 +1,5 @@
 export * from './I18nManager';
 export * from './Alert';
-export * from './BestRoute';
 export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
@@ -45,7 +44,7 @@ export * from './ListItem';
 export * from './NotFound';
 export * from './MessageBox';
 export * from './IconButton';
-export * from './RouteCost';
+export * from './QuoteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';

package/src/containers/BlockchainSelector/BlockchainSelector.tsx

@@ -1,14 +1,16 @@
+import type { LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+import type { BlockchainMeta } from 'rango-sdk';
+
 import React from 'react';
-import { BlockchainMeta } from 'rango-sdk';
+
+import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { BlockchainsList } from '../../components/BlockchainsList';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { Spinner } from '../../components/Spinner';
 import { styled } from '../../theme';
-import { CSSProperties } from '@stitches/react';
-import { containsText } from '../../helper';
-import { LoadingStatus } from '../../types/meta';
-import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { containsText } from '../../utils';
 import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
@@ -56,8 +58,7 @@ export function BlockchainSelector(props: PropTypes) {
       hasHeader={hasHeader}
       textFieldPlaceholder="Search blockchains by name"
       title={`Select ${type} Blockchain`}
-      onBack={onBack}
-    >
+      onBack={onBack}>
       {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -17,6 +17,13 @@ export const Container = styled('div', {
       },
     },
   },
+  '& .gray-text': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
   '& .label__container': {
     paddingBottom: '$5',
   },
@@ -62,3 +69,29 @@ export const MaxButton = styled(Button, {
   },
   backgroundColor: '$$color',
 });
+
+export const ValueTypography = styled('div', {
+  width: 140,
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+      false: {
+        '& ._typography': {
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
+        },
+      },
+    },
+  },
+});