@rango-dev/ui 0.15.1-next.8 → 0.16.0

package/src/components/MessageBox/MessageBox.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -21,19 +21,39 @@ export const IconHighlight = styled('div', {
   variants: {
     type: {
       success: {
-        backgroundColor: '$success300',
+        $$color: '$colors$success300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success600',
+        },
+        backgroundColor: '$$color',
       },
       warning: {
-        backgroundColor: '$warning300',
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
       },
       error: {
-        backgroundColor: '$error300',
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
       },
       info: {
-        backgroundColor: '$info300',
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
       },
       loading: {
-        backgroundColor: '$info300',
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
       },
     },
   },

package/src/components/Modal/Modal.styles.ts

@@ -7,9 +7,9 @@ export const BackDrop = styled('div', {
   left: '0',
   width: '100%',
   height: '100%',
-  backgroundColor: 'rgba(0,0,0,0)',
+  backgroundColor: 'transparent',
   zIndex: 10,
-  borderRadius: '20px',
+  borderRadius: '$primary',
   display: 'flex',
   overflow: 'hidden',
   transition: 'background .35s',
@@ -28,7 +28,7 @@ export const BackDrop = styled('div', {
     },
     active: {
       true: {
-        backgroundColor: 'rgba(0,0,0,.1)',
+        backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
       },
     },
   },
@@ -37,7 +37,7 @@ export const BackDrop = styled('div', {
 export const ModalContainer = styled('div', {
   backgroundColor: '$background',
   width: '100%',
-  borderRadius: '20px',
+  borderRadius: '$primary',
   display: 'flex',
   flexDirection: 'column',
   zIndex: 9999999,

package/src/components/Modal/Modal.tsx

@@ -4,9 +4,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { usePaddingRight } from '../../hooks';
 import { CloseIcon } from '../../icons';
-import { theme } from '../../theme';
 import { BottomLogo } from '../BottomLogo';
 import { Divider } from '../Divider';
 import { IconButton } from '../IconButton/IconButton';
@@ -23,7 +21,6 @@ import {
 
 const CLOSED_DELAY = 600;
 const OPEN_DELAY = 10;
-const DEFAULT_CONTENT_PADDING = 20;
 
 export function Modal(props: PropsWithChildren<PropTypes>) {
   const {
@@ -44,11 +41,6 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const [active, setActive] = useState(false);
   const [isMount, setIsMount] = useState(false);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  usePaddingRight({
-    elementRef: contentRef,
-    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget && dismissible) {
@@ -95,7 +87,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
               css={containerStyle}
               anchor={anchor}>
               {header ?? (
-                <ModalHeader noTitle={!title}>
+                <ModalHeader noTitle={!title && dismissible && !prefix}>
                   {prefix}
                   {title && (
                     <Typography variant="title" size="small">
@@ -112,7 +104,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
                   </Flex>
                 </ModalHeader>
               )}
-              <Content ref={contentRef}>{children}</Content>
+              <Content>{children}</Content>
               {(hasLogo || footer) && (
                 <Footer>
                   <div className="footer__content">{footer}</div>

package/src/components/Modal/index.ts

@@ -1 +1,2 @@
 export { Modal } from './Modal';
+export { ModalHeader } from './Modal.styles';

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

@@ -1,6 +1,6 @@
 import * as Radio from '@radix-ui/react-radio-group';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const StyledItem = styled(Radio.Item, {
   padding: '0',
@@ -11,12 +11,13 @@ export const StyledItem = styled(Radio.Item, {
   backgroundColor: 'transparent',
   border: '1px solid $neutral800',
 
-  '&:hover': {
-    borderColor: '$secondary600',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
 });
 

package/src/components/RouteCost/RouteCost.tsx

@@ -26,7 +26,7 @@ export function RouteCost(props: PropTypes) {
           <TimeIcon size={12} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
-          {`${time} min`}
+          {time}
         </Typography>
       </div>
       <Separator />

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

@@ -0,0 +1,35 @@
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+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.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './SelectableCategoryList.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Image, Skeleton, Typography } from '..';
+import { BlockchainsChip } from '../BlockchainsChip';
+
+import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
+import {
+  Container,
+  FirstImage,
+  ImageContent,
+} from './SelectableCategoryList.styles';
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+export function SelectableCategoryList(props: PropTypes) {
+  const { setCategory, category, blockchains, isLoading } = props;
+  const categories = Object.keys(
+    BlockchainCategories
+  ) as BlockchainCategories[];
+  return (
+    <Container>
+      {isLoading &&
+        Array.from(Array(5), (_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            height={70}
+            width={index === 0 ? 45 : 65}
+          />
+        ))}
+      {!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>
+        ))}
+    </Container>
+  );
+}

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -0,0 +1,16 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  setCategory: (type: string) => void;
+  category: string;
+  blockchains: BlockchainMeta[];
+  isLoading?: boolean;
+}
+
+export enum BlockchainCategories {
+  ALL = 'ALL',
+  EVM = 'EVM',
+  COSMOS = 'COSMOS',
+  UTXO = 'UTXO',
+  OTHER = 'OTHER',
+}

package/src/components/SelectableCategoryList/index.ts

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

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

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   width: '100%',
@@ -10,7 +10,10 @@ export const Container = styled('div', {
     type: {
       'route-details': { border: 'none' },
       'route-progress': {
-        backgroundColor: '$neutral100',
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
         borderRadius: '$xm',
         padding: '$10 $15',
         marginBottom: '15px',

package/src/components/StepDetails/StepDetails.tsx

@@ -1,5 +1,6 @@
 import type { StepDetailsProps } from './StepDetails.types';
 
+import { i18n } from '@lingui/core';
 import React, { forwardRef, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
@@ -49,7 +50,16 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             className="swapper__description"
             ml={8}
             size="small"
-            variant="body">{`Swap on ${step.from.chain.displayName} via ${step.swapper.displayName}`}</Typography>
+            variant="body">
+            {i18n.t({
+              id: 'swapperDescription',
+              message: 'Swap on {fromChain} via {swapper}',
+              values: {
+                fromChain: step.from.chain.displayName,
+                swapper: step.swapper.displayName,
+              },
+            })}
+          </Typography>
         </div>
         <div className="step-info">
           <DashedLine invisible={!hasSeparator || type === 'route-progress'} />

package/src/components/SwapListItem/SwapListItem.styles.ts

@@ -17,22 +17,31 @@ export const Header = styled('div', {
 });
 
 export const Main = styled('button', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   border: 'none',
   width: '100%',
   borderRadius: '$xm',
   gap: 10,
   padding: 15,
   cursor: 'pointer',
+  fontFamily: 'inherit',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
   '&:focus-visible': {
-    backgroundColor: '$surface600',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
     outline: 'none',
   },
 });
@@ -44,7 +53,11 @@ export const Date = styled('div', {
 });
 
 export const LoadingMain = styled('div', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   border: 'none',
   width: '100%',
   borderRadius: '$xm',

package/src/components/SwapListItem/SwapToken.tsx

@@ -104,13 +104,13 @@ export function SwapToken(props: PropTypes) {
       {status === 'running' ? (
         <Layout direction="column">
           <TopSection>
-            <Typography size="xsmall" variant="headline">
+            <Typography size="medium" variant="title">
               {fromToken.displayName}
             </Typography>
             <Icon>
               <NextIcon size={24} color="black" />
             </Icon>
-            <Typography size="xsmall" variant="headline">
+            <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
           </TopSection>
@@ -121,7 +121,7 @@ export function SwapToken(props: PropTypes) {
       ) : (
         <Layout direction="row">
           <TokenInfo>
-            <Typography size="xsmall" variant="headline">
+            <Typography size="medium" variant="title">
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
@@ -134,7 +134,7 @@ export function SwapToken(props: PropTypes) {
             <NextIcon size={24} color="black" />
           </Icon>
           <TokenInfo>
-            <Typography size="xsmall" variant="headline">
+            <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
 

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

@@ -1,6 +1,6 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   boxSizing: 'border-box',
@@ -16,13 +16,13 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   cursor: 'pointer',
   transition: 'all 0.35s',
 
-  '&:hover': {
-    backgroundColor: '$secondary500',
-    borderColor: '$secondary500',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
   '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
 });

package/src/components/TextField/TextField.styles.ts

@@ -25,11 +25,15 @@ export const InputContainer = styled('div', {
     },
     variant: {
       contained: {
-        backgroundColor: '$neutral100',
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        backgroundColor: '$$color',
         '&:hover': {
           $$color: '$colors$info100',
           [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral400',
+            $$color: '$colors$neutral100',
           },
           backgroundColor: '$$color',
         },
@@ -86,7 +90,7 @@ export const Input = styled('input', {
   fontWeight: 400,
   border: 'none',
   outline: 'none',
-  width: '100%',
+  fontFamily: 'inherit',
   variants: {
     suffix: {
       true: { marginRight: '$10' },
@@ -109,6 +113,9 @@ export const Input = styled('input', {
   '&::placeholder, &::-webkit-input-placeholder': {
     color: '$neutral900',
   },
+  '&:focus-within': {
+    outline: 'none',
+  },
 });
 
 export const Label = styled('label', {

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

@@ -1,6 +1,16 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
 import { styled } from '../../theme';
 import { Typography } from '../Typography';
 
+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',

package/src/components/Tooltip/Tooltip.tsx

@@ -4,7 +4,11 @@ import type { PropsWithChildren } from 'react';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import React from 'react';
 
-import { TooltipTypography } from './Tooltip.styles';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipTypography,
+} from './Tooltip.styles';
 
 export function Tooltip(props: PropsWithChildren<PropTypes>) {
   const {
@@ -16,17 +20,18 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     side = 'top',
   } = props;
   return (
-    <RadixTooltip.Provider>
+    <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root>
         <RadixTooltip.Trigger asChild>
           <div>{children}</div>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
-          <RadixTooltip.Content side={side} sideOffset={sideOffset}>
+          <TooltipContent side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
-          </RadixTooltip.Content>
+            <TooltipArrow />
+          </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>
     </RadixTooltip.Provider>

package/src/components/Wallet/ClickableWallet.tsx

@@ -36,7 +36,7 @@ function Wallet(props: WalletPropTypes) {
   }
 
   return (
-    <Tooltip content={info.tooltipText} side="top">
+    <Tooltip container={props.container} content={info.tooltipText} side="top">
       <WalletButton
         disabled={props.state == WalletState.CONNECTING}
         onClick={() => {

package/src/components/Wallet/Wallet.helpers.ts

@@ -1,5 +1,7 @@
 import type { Info } from './Wallet.types';
 
+import { i18n } from '@lingui/core';
+
 import { WalletState } from './Wallet.types';
 
 export function makeInfo(state: WalletState): Info {
@@ -7,28 +9,28 @@ export function makeInfo(state: WalletState): Info {
     case WalletState.CONNECTED:
       return {
         color: 'success500',
-        description: 'Connected',
-        tooltipText: 'Disconnect',
+        description: i18n.t('Connected'),
+        tooltipText: i18n.t('Disconnect'),
       };
     case WalletState.NOT_INSTALLED:
       return {
         color: 'info500',
-        description: 'Install',
-        tooltipText: 'Install',
+        description: i18n.t('Install'),
+        tooltipText: i18n.t('Install'),
       };
     case WalletState.CONNECTING:
       return {
         color: 'neutral800',
-        description: 'Connecting...',
-        tooltipText: 'Connecting',
+        description: i18n.t('Connecting...'),
+        tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:
       return {
         color: 'neutral800',
-        description: 'Disconnected',
-        tooltipText: 'Connect',
+        description: i18n.t('Disconnected'),
+        tooltipText: i18n.t('Connect'),
       };
     default:
-      throw new Error('you need to pass a correct state to Wallet.');
+      throw new Error(i18n.t('you need to pass a correct state to Wallet.'));
   }
 }

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

@@ -23,23 +23,40 @@ export const WalletButton = styled('button', {
   border: '0',
   display: 'flex',
   flexDirection: 'column',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
   width: 110,
   position: 'relative',
+  fontFamily: 'inherit',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
+    outline: 0,
   },
   variants: {
     selected: {
       true: {
         outlineWidth: 1,
-        outlineColor: '$secondary500',
+        $$outline: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$outline: '$colors$secondary400',
+        },
+        outlineColor: '$$outline',
         outlineStyle: 'solid',
       },
     },