@rango-dev/ui 0.24.0 → 0.25.0

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/Skeleton/Skeleton.tsx

@@ -5,12 +5,13 @@ import React from 'react';
 import { SkeletonContainer } from './Skeleton.styles';
 
 export function Skeleton(props: PropTypes) {
+  const { width = '100%' } = props;
   const customCss =
     props.variant !== 'text'
       ? {
-          width: props.width,
+          width,
           height: props.height,
         }
-      : { width: props.width };
+      : { 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: 'route-progress',
+    type: 'swap-progress',
     state: 'completed',
   },
 };

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

@@ -1,3 +1,5 @@
+import { css } from '@stitches/react';
+
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
@@ -8,8 +10,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',
@@ -31,40 +33,16 @@ 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: 'max-content',
-  height: 'max-content',
+  width: '24px',
+  height: '24px',
   overflow: 'hidden',
   border: '1.5px solid transparent',
   variants: {
@@ -131,3 +109,33 @@ 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,8 +13,12 @@ import {
   Alerts,
   Container,
   DashedLine,
+  stepInfoStyles,
   StepSeparator,
   SwapperImage,
+  swapperStyles,
+  tokensContainerStyles,
+  tokensStyles,
 } from './StepDetails.styles';
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
@@ -39,8 +43,8 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className="swapper">
-          {type === 'route-progress' && hasSeparator && (
+        <div className={swapperStyles()}>
+          {type === 'swap-progress' && hasSeparator && (
             <StepSeparator state={state} />
           )}
           <SwapperImage state={state}>
@@ -60,10 +64,10 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             })}
           </Typography>
         </div>
-        <div className="step-info">
-          <DashedLine invisible={!hasSeparator || type === 'route-progress'} />
-          <div className="tokens-container">
-            <div className="tokens">
+        <div className={stepInfoStyles()}>
+          <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
+          <div className={tokensContainerStyles()}>
+            <div className={tokensStyles()}>
               <ChainToken
                 chainImage={step.from.chain.image}
                 tokenImage={step.from.token.image}
@@ -90,7 +94,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/SwapListItem/mock.ts

@@ -1,11 +1,12 @@
 /* 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 '../../containers/History/types';
+import type { PendingSwap } from 'rango-types';
 
-import { RoutingResultType, TransactionType } from 'rango-sdk';
+import {
+  MessageSeverity,
+  RoutingResultType,
+  TransactionType,
+} from 'rango-types';
 
 export const swap: PendingSwap = {
   creationTime: '1673164511955',
@@ -21,7 +22,7 @@ export const swap: PendingSwap = {
   status: 'running',
   isPaused: false,
   extraMessage: null,
-  extraMessageSeverity: 'info',
+  extraMessageSeverity: MessageSeverity.info,
   extraMessageDetail: '',
   extraMessageErrorCode: null,
   networkStatusExtraMessage: null,
@@ -75,6 +76,7 @@ export const swap: PendingSwap = {
             expenseType: 'FROM_SOURCE_WALLET',
             name: 'Network Fee',
             amount: '0',
+            price: null,
           },
         ],
         estimatedTimeInSeconds: 45,
@@ -150,6 +152,7 @@ export const swap: PendingSwap = {
         includesDestinationTx: false,
         maxRequiredSign: 1,
         warnings: [],
+        internalSwaps: null,
       },
     ],
   },
@@ -164,16 +167,20 @@ 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',
@@ -189,6 +196,13 @@ 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',
@@ -276,6 +290,7 @@ export const swap: PendingSwap = {
       transferTransaction: null,
       diagnosisUrl: null,
       internalSteps: null,
+      internalSwaps: null,
     },
   ],
 };

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

@@ -5,13 +5,15 @@ import { darkTheme, styled } from '../../theme';
 export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   boxSizing: 'border-box',
   boxShadow: 'none',
-  borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  backgroundColor: '$neutral600',
-  borderColor: '$neutral600',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  backgroundColor: '$$color',
+  border: 'none',
   borderRadius: '99999px',
-  position: 'relative',
   padding: '0',
   cursor: 'pointer',
   transition: 'all 0.35s',
@@ -28,9 +30,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,9 +23,7 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     <>
       {label && (
         <>
-          <Label
-            className="_text"
-            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
             <Typography variant="label" size="large">
               {label}
             </Typography>
@@ -39,10 +37,9 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
         variant={variant}
         size={size}
         style={style}
-        className="_text">
+        className="_text-field">
         {prefix || null}
         <Input
-          className="_text"
           {...inputAttributes}
           spellCheck={false}
           suffix={!!suffix}
@@ -56,5 +53,6 @@ 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 { styled } from '@stitches/react';
+import { css, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -15,13 +15,15 @@ export const Container = styled('div', {
       true: { alignItems: 'center', justifyContent: 'center' },
     },
   },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  '& .usd-value': {
-    display: 'flex',
-    paddingTop: '$5',
-  },
+});
+
+export const tokenAmountStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const usdValueStyles = css({
+  display: 'flex',
+  paddingTop: '$5',
 });

package/src/components/TokenAmount/TokenAmount.tsx

@@ -6,12 +6,16 @@ import { ChainToken } from '../ChainToken';
 import { PriceImpact } from '../PriceImpact/PriceImpact';
 import { Typography } from '../Typography';
 
-import { Container } from './TokenAmount.styles';
+import {
+  Container,
+  tokenAmountStyles,
+  usdValueStyles,
+} from './TokenAmount.styles';
 
 export function TokenAmount(props: PropTypes) {
   return (
     <Container direction={props.direction} centerAlign={props.centerAlign}>
-      <div className="token-amount">
+      <div className={tokenAmountStyles()}>
         <ChainToken
           chainImage={props.chain.image}
           tokenImage={props.token.image}
@@ -41,21 +45,23 @@ export function TokenAmount(props: PropTypes) {
           </div>
         </div>
       </div>
-      <div className="usd-value">
-        {props.type === 'input' && (
-          <Typography mr={4} size="small" variant="body" color="$neutral700">
-            {`~$${props.price.usdValue}`}
-          </Typography>
-        )}
-        {props.type === 'output' && (
-          <PriceImpact
-            size="small"
-            outputUsdValue={props.price.usdValue}
-            percentageChange={props.percentageChange}
-            warningLevel={props.warningLevel}
-          />
-        )}
-      </div>
+      {props.price.usdValue && props.price.usdValue !== '0' && (
+        <div className={usdValueStyles()}>
+          {props.type === 'input' && (
+            <Typography mr={4} size="small" variant="body" color="$neutral700">
+              {`~$${props.price.usdValue}`}
+            </Typography>
+          )}
+          {props.type === 'output' && (
+            <PriceImpact
+              size="small"
+              outputUsdValue={props.price.usdValue}
+              percentageChange={props.percentageChange}
+              warningLevel={props.warningLevel}
+            />
+          )}
+        </div>
+      )}
     </Container>
   );
 }

package/src/components/Tooltip/Tooltip.styles.ts

@@ -7,13 +7,16 @@ export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',
 });
 
-export const TooltipArrow = styled(RadixTooltip.Arrow, {
-  fill: '$neutral100',
-});
-
 export const TooltipTypography = styled(Typography, {
   borderRadius: '$md',
   padding: '$5 $10',
-  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  boxShadow:
+    'inset 0 0 0.5px 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.9px 1.5px rgba(0, 0, 0, 0.045), 0 3.5px 6px rgba(0, 0, 0, 0.09)',
   backgroundColor: '$neutral100',
 });
+
+export const TriggerContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -5,9 +5,9 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import React from 'react';
 
 import {
-  TooltipArrow,
   TooltipContent,
   TooltipTypography,
+  TriggerContent,
 } from './Tooltip.styles';
 
 export function Tooltip(props: PropsWithChildren<PropTypes>) {
@@ -24,14 +24,13 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root open={open}>
         <RadixTooltip.Trigger asChild>
-          <div>{children}</div>
+          <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
           <TooltipContent side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
-            <TooltipArrow />
           </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>

package/src/components/Wallet/Wallet.styles.ts

@@ -30,7 +30,7 @@ export const WalletButton = styled('button', {
   backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
-  width: 110,
+  width: 100,
   position: 'relative',
   fontFamily: 'inherit',
   '&:hover': {