@rango-dev/ui 0.23.0 → 0.24.0

package/src/components/RoutesOverview/RoutesOverview.tsx

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

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

@@ -1,29 +1,7 @@
 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:
@@ -41,22 +19,17 @@ const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
   }
 };
 
-export const hasAnyCategory = (
-  list: BlockchainMeta[],
-  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;
+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 = (
+  list: BlockchainMeta[],
+  type: Exclude<BlockchainCategories, 'ALL'>
+) =>
+  list
+    .filter((item) => filterByType(item, type))
+    .filter((item) => blockchainslogo[type].includes(item.name));

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, Skeleton, Typography } from '..';
+import { Divider, Image, Skeleton, Typography } from '..';
 import { BlockchainsChip } from '../BlockchainsChip';
 
+import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
 import {
-  blockchainCategoryIcons,
-  blockchainCategoryLabel,
-  hasAnyCategory,
-} from './SelectableCategoryList.helpers';
-import { Container } from './SelectableCategoryList.styles';
+  Container,
+  FirstImage,
+  ImageContent,
+} from './SelectableCategoryList.styles';
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
 export function SelectableCategoryList(props: PropTypes) {
-  const { setCategory, category, isLoading, blockchains } = props;
+  const { setCategory, category, blockchains, isLoading } = props;
   const categories = Object.keys(
     BlockchainCategories
   ) as BlockchainCategories[];
@@ -32,46 +32,45 @@ export function SelectableCategoryList(props: PropTypes) {
           />
         ))}
       {!isLoading &&
-        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>
-            )
-          );
-        })}
+        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>
+        ))}
     </Container>
   );
 }

package/src/components/SelectableCategoryList/index.ts

@@ -1,3 +1,2 @@
 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/Skeleton/Skeleton.tsx

@@ -5,13 +5,12 @@ import React from 'react';
 import { SkeletonContainer } from './Skeleton.styles';
 
 export function Skeleton(props: PropTypes) {
-  const { width = '100%' } = props;
   const customCss =
     props.variant !== 'text'
       ? {
-          width,
+          width: props.width,
           height: props.height,
         }
-      : { width };
+      : { width: props.width };
   return <SkeletonContainer css={customCss} {...props} />;
 }

package/src/components/Skeleton/Skeleton.types.ts

@@ -8,7 +8,7 @@ type BaseSizes = Exclude<BaseProps['size'], object>;
 type TextVariant = {
   variant: 'text';
   size: BaseSizes;
-  width?: number;
+  width: number;
 };
 
 type OtherVariant = {

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: 'swap-progress',
+    type: 'route-progress',
     state: 'completed',
   },
 };

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

@@ -1,5 +1,3 @@
-import { css } from '@stitches/react';
-
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
@@ -10,8 +8,8 @@ export const Container = styled('div', {
   border: '1px solid transparent',
   variants: {
     type: {
-      'quote-details': { border: 'none' },
-      'swap-progress': {
+      'route-details': { border: 'none' },
+      'route-progress': {
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',
@@ -33,16 +31,40 @@ export const Container = styled('div', {
       error: { borderColor: '$error500' },
     },
   },
+  '& .swapper': {
+    display: 'flex',
+    alignItems: 'center',
+  },
   '& .swapper__description': {
     fontWeight: '$medium',
   },
+  '& .step-info': {
+    display: 'flex',
+    flex: '1',
+    width: '100%',
+    alignItems: 'start',
+    variants: {
+      tx: {
+        true: {
+          paddingLeft: '36px',
+        },
+      },
+    },
+  },
   '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
+  '& .tokens-container': { width: '100%' },
+  '& .tokens': {
+    display: 'flex',
+    paddingTop: '$5',
+    paddingBottom: '$10',
+    alignItems: 'center',
+  },
 });
 
 export const SwapperImage = styled('div', {
   borderRadius: '100%',
-  width: '24px',
-  height: '24px',
+  width: 'max-content',
+  height: 'max-content',
   overflow: 'hidden',
   border: '1.5px solid transparent',
   variants: {
@@ -109,33 +131,3 @@ export const StepSeparator = styled('div', {
     },
   },
 });
-
-export const tokensContainerStyles = css({
-  width: '100%',
-});
-
-export const swapperStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const stepInfoStyles = css({
-  display: 'flex',
-  flex: '1',
-  width: '100%',
-  alignItems: 'start',
-  variants: {
-    tx: {
-      true: {
-        paddingLeft: '36px',
-      },
-    },
-  },
-});
-
-export const tokensStyles = css({
-  display: 'flex',
-  paddingTop: '$5',
-  paddingBottom: '$10',
-  alignItems: 'center',
-});

package/src/components/StepDetails/StepDetails.tsx

@@ -13,12 +13,8 @@ import {
   Alerts,
   Container,
   DashedLine,
-  stepInfoStyles,
   StepSeparator,
   SwapperImage,
-  swapperStyles,
-  tokensContainerStyles,
-  tokensStyles,
 } from './StepDetails.styles';
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
@@ -43,8 +39,8 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className={swapperStyles()}>
-          {type === 'swap-progress' && hasSeparator && (
+        <div className="swapper">
+          {type === 'route-progress' && hasSeparator && (
             <StepSeparator state={state} />
           )}
           <SwapperImage state={state}>
@@ -64,10 +60,10 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             })}
           </Typography>
         </div>
-        <div className={stepInfoStyles()}>
-          <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
-          <div className={tokensContainerStyles()}>
-            <div className={tokensStyles()}>
+        <div className="step-info">
+          <DashedLine invisible={!hasSeparator || type === 'route-progress'} />
+          <div className="tokens-container">
+            <div className="tokens">
               <ChainToken
                 chainImage={step.from.chain.image}
                 tokenImage={step.from.token.image}
@@ -94,7 +90,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 step.to.price.value
               } ${step.to.token.displayName}`}</Typography>
             </div>
-            <Alerts pb={hasSeparator && type === 'quote-details'}>
+            <Alerts pb={hasSeparator && type === 'route-details'}>
               {step.alerts}
             </Alerts>
           </div>

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

@@ -1,24 +1,9 @@
-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';
-};
+import type { Step } from '../BestRoute/BestRoute.types';
 
 export type StepDetailsProps = {
   step: Step;
   hasSeparator: boolean;
-  type: 'quote-details' | 'swap-progress';
+  type: 'route-details' | 'route-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, Step } from './StepDetails.types';
+export type { StepDetailsProps } from './StepDetails.types';

package/src/components/StepDetails/mock.ts

@@ -1,4 +1,4 @@
-import type { Step } from './StepDetails.types';
+import type { Step } from '../BestRoute/BestRoute.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: '$neutral700',
+        color: '$neutral600',
       },
     },
   },

package/src/components/SwapListItem/mock.ts

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+// TODO: fix ts errors
+// eslint-disable-next-line
+// @ts-nocheck
 import type { SwapTokenData } from './SwapListItem.types';
-import type { PendingSwap } from 'rango-types';
+import type { PendingSwap } from '../../containers/History/types';
 
-import {
-  MessageSeverity,
-  RoutingResultType,
-  TransactionType,
-} from 'rango-types';
+import { RoutingResultType, TransactionType } from 'rango-sdk';
 
 export const swap: PendingSwap = {
   creationTime: '1673164511955',
@@ -22,7 +21,7 @@ export const swap: PendingSwap = {
   status: 'running',
   isPaused: false,
   extraMessage: null,
-  extraMessageSeverity: MessageSeverity.info,
+  extraMessageSeverity: 'info',
   extraMessageDetail: '',
   extraMessageErrorCode: null,
   networkStatusExtraMessage: null,
@@ -76,7 +75,6 @@ export const swap: PendingSwap = {
             expenseType: 'FROM_SOURCE_WALLET',
             name: 'Network Fee',
             amount: '0',
-            price: null,
           },
         ],
         estimatedTimeInSeconds: 45,
@@ -152,7 +150,6 @@ export const swap: PendingSwap = {
         includesDestinationTx: false,
         maxRequiredSign: 1,
         warnings: [],
-        internalSwaps: null,
       },
     ],
   },
@@ -167,20 +164,16 @@ export const swap: PendingSwap = {
         'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
       fromDecimals: 6,
       fromAmountPrecision: null,
-      fromAmountRestrictionType: 'EXCLUSIVE',
-      estimatedTimeInSeconds: 5,
       fromAmountMinValue: null,
       fromAmountMaxValue: null,
       toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
-      fromUsdPrice: null,
       toBlockchain: 'OSMOSIS',
       fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
       toSymbol: 'OSMO',
       toSymbolAddress: null,
       toDecimals: 6,
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
-      toUsdPrice: null,
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
       swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
@@ -196,13 +189,6 @@ export const swap: PendingSwap = {
           description: null,
         },
       ],
-      starknetApprovalTransaction: null,
-      starknetTransaction: null,
-      tronApprovalTransaction: null,
-      tonTransaction: null,
-      tronTransaction: null,
-      feeInUsd: null,
-      executedTransactionTime: null,
       cosmosTransaction: {
         type: TransactionType.COSMOS,
         fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
@@ -290,7 +276,6 @@ export const swap: PendingSwap = {
       transferTransaction: null,
       diagnosisUrl: null,
       internalSteps: null,
-      internalSwaps: null,
     },
   ],
 };

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

@@ -5,15 +5,13 @@ import { darkTheme, styled } from '../../theme';
 export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   boxSizing: 'border-box',
   boxShadow: 'none',
+  borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  $$color: '$colors$neutral600',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral700',
-  },
-  backgroundColor: '$$color',
-  border: 'none',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
+  position: 'relative',
   padding: '0',
   cursor: 'pointer',
   transition: 'all 0.35s',
@@ -30,9 +28,9 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
 });
 
 export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
+  position: 'absolute',
+  top: '0',
   boxSizing: 'border-box',
-  position: 'relative',
-  left: '$2',
   display: 'block',
   width: '12px',
   height: '12px',

package/src/components/TextField/TextField.tsx

@@ -23,7 +23,9 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     <>
       {label && (
         <>
-          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+          <Label
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
             <Typography variant="label" size="large">
               {label}
             </Typography>
@@ -37,9 +39,10 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
         variant={variant}
         size={size}
         style={style}
-        className="_text-field">
+        className="_text">
         {prefix || null}
         <Input
+          className="_text"
           {...inputAttributes}
           spellCheck={false}
           suffix={!!suffix}
@@ -53,6 +56,5 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
 
 const TextField = React.forwardRef(TextFieldComponent);
 TextField.displayName = 'TextField';
-TextField.toString = () => '._text-field';
 
 export { TextField };

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { styled } from '@stitches/react';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -15,15 +15,13 @@ export const Container = styled('div', {
       true: { alignItems: 'center', justifyContent: 'center' },
     },
   },
-});
-
-export const tokenAmountStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const usdValueStyles = css({
-  display: 'flex',
-  paddingTop: '$5',
+  '& .token-amount': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .usd-value': {
+    display: 'flex',
+    paddingTop: '$5',
+  },
 });