@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -1,9 +1,11 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { styled } from '../../theme';
-import { SelectableWallet } from '../../types';
-import { Typography } from '../Typography';
+import type { PropsWithChildren } from 'react';
+
+import React, { useEffect, useState } from 'react';
+
 import { getConciseAddress } from '../../helper';
+import { styled } from '../../theme';
 import { Image } from '../common';
+import { Typography } from '../Typography';
 
 const Row = styled('div', {
   display: 'flex',
@@ -47,7 +49,7 @@ const SolidCircle = styled('div', {
 });
 const Container = styled('div', {
   border: '1.5px solid',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$12',
   flexBasis: 'calc(33.33% - 10px)',
   margin: 5,
@@ -73,15 +75,18 @@ const Container = styled('div', {
 });
 
 export interface PropTypes {
-  list: SelectableWallet[];
-  onChange: (w: SelectableWallet) => void;
+  list: any[];
+  onChange: (w: any) => void;
 }
 
-export function SelectableWalletList({ list, onChange }: PropsWithChildren<PropTypes>) {
+export function SelectableWalletList({
+  list,
+  onChange,
+}: PropsWithChildren<PropTypes>) {
   const [active, setActive] = useState<string>(
-    list.find((item) => item.selected)?.walletType || '',
+    list.find((item) => item.selected)?.walletType || ''
   );
-  const onClick = (w: SelectableWallet) => {
+  const onClick = (w: any) => {
     setActive(w.walletType);
     onChange(w);
   };
@@ -95,11 +100,21 @@ export function SelectableWalletList({ list, onChange }: PropsWithChildren<PropT
       {list.map((w, index) => {
         const checked = active === w.walletType;
         return (
-          <Container checked={checked} onClick={onClick.bind(null, w)} key={index}>
+          <Container
+            checked={checked}
+            onClick={onClick.bind(null, w)}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}>
             <Image src={w.image} alt={w.walletType} size={24} />
-            <Typography variant="body2">{w.name}</Typography>
-            <Typography variant="caption">{getConciseAddress(w.address)}</Typography>
-            <Circle checked={checked}>{checked && <SolidCircle checked={checked} />}</Circle>
+            <Typography variant="body" size="small">
+              {w.name}
+            </Typography>
+            <Typography variant="body" size="xsmall">
+              {getConciseAddress(w.address)}
+            </Typography>
+            <Circle checked={checked}>
+              {checked && <SolidCircle checked={checked} />}
+            </Circle>
           </Container>
         );
       })}

package/src/components/SelectableWalletList/mock.ts

@@ -1,7 +1,6 @@
 import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
-import { SelectableWallet } from '../../types';
 
-export const data: SelectableWallet[] = [
+export const data = [
   {
     chain: Networks.BTC,
     name: Networks.BTC,

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,28 +1,52 @@
-import { Meta } from '@storybook/react';
+import type { PropTypes } from './Skeleton.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Skeleton, PropTypes } from './Skeleton';
+
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
+
+import { Skeleton } from './Skeleton';
 
 export default {
   title: 'Components/Skeleton',
   component: Skeleton,
   args: {
-    width: 20,
-    height: 20,
+    width: 50,
+    height: 50,
   },
   argTypes: {
-    width: {
-      name: 'width',
-      control: { type: 'select' },
-      options: [20, 24, 36, 48],
-      defaultValue: 20,
+    variant: {
+      name: 'variant',
+      defaultValue: 'rounded',
+      control: {
+        type: 'select',
+        options: ['text', 'circular', 'rectangular', 'rounded'],
+      },
     },
-    height: {
-      name: 'height',
-      control: { type: 'select' },
-      options: [20, 24, 36, 48],
-      defaultValue: 20,
+
+    size: {
+      name: 'size',
+      defaultValue: 'small',
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
     },
   },
 } as Meta<typeof Skeleton>;
 
-export const Main = (props: PropTypes) => <Skeleton {...props} />;
+export const Main = (args: PropTypes) => (
+  <>
+    <Skeleton {...args} height={50} width={50} variant="circular" />
+    <Divider />
+    <Skeleton {...args} variant="text" size="medium" width={200} />
+    <Divider />
+    <Skeleton width={210} height={60} variant="rectangular" />
+    <Divider />
+    <Skeleton {...args} width={210} height={60} variant="rounded" />
+    <Divider />
+    <Typography variant="title" size="small"></Typography>
+    <Skeleton {...args} />
+  </>
+);

package/src/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,66 @@
+import { darkTheme, keyframes, styled } from '../../theme';
+
+const waveSquares = keyframes({
+  '0%': {
+    backgroundPosition: '-468px 0',
+  },
+  '100%': {
+    backgroundPosition: '468px 0',
+  },
+});
+// #2B3462 -0.15%, rgba(43, 52, 98, 0.20) 99.85%
+export const SkeletonContainer = styled('div', {
+  $$background:
+    'linear-gradient(90deg, $colors$info300 20%, rgba(200, 226, 255, 0.20) 70%, $colors$info300 100%)',
+  [`.${darkTheme} &`]: {
+    $$background:
+      'linear-gradient(90deg, $colors$secondary600 0%,rgba(43, 52, 98, 0.20) 70%, $colors$secondary600 100%)',
+  },
+  background: '$$background',
+  backgroundSize: '800px 100px',
+  animation: `${waveSquares} 2s infinite ease-out`,
+  variants: {
+    variant: {
+      text: {
+        borderRadius: '$sm',
+      },
+      circular: {
+        borderRadius: '$lg',
+      },
+      rectangular: {},
+      rounded: {
+        borderRadius: '$sm',
+      },
+    },
+
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'small',
+      variant: 'text',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'text',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 'large',
+      variant: 'text',
+      css: {
+        height: '$16',
+      },
+    },
+  ],
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -1,66 +1,16 @@
-import React from 'react';
-import { keyframes, styled } from '../../theme';
+import type { PropTypes } from './Skeleton.types';
 
-const waveSquares = keyframes({
-  '0%': {
-    backgroundPosition: '-468px 0',
-  },
-  '100%': {
-    backgroundPosition: '468px 0',
-  },
-});
+import React from 'react';
 
-const SkeletonContainer = styled('div', {
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  background: `linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)`,
-  backgroundSize: '800px 100px',
-  animation: `${waveSquares} 2s infinite ease-out`,
-  variants: {
-    width: {
-      16: {
-        width: '$16',
-      },
-      20: {
-        width: '$20',
-      },
-      24: {
-        width: '$24',
-      },
-      36: {
-        width: '$36',
-      },
-      48: {
-        width: '$48',
-      },
-    },
-    height: {
-      16: {
-        height: '$16',
-      },
-      20: {
-        height: '$20',
-      },
-      24: {
-        height: '$24',
-      },
-      36: {
-        height: '$36',
-      },
-      48: {
-        height: '$48',
-      },
-      94: {
-        height: 94,
-      },
-    },
-  },
-});
-export interface PropTypes {
-  width?: 20 | 24 | 36 | 48;
-  height?: 20 | 24 | 36 | 48 | 94;
-}
+import { SkeletonContainer } from './Skeleton.styles';
 
-export function Skeleton({ width = 20, height = 20 }: PropTypes) {
-  return <SkeletonContainer width={width} height={height} />;
+export function Skeleton(props: PropTypes) {
+  const customCss =
+    props.variant !== 'text'
+      ? {
+          width: props.width,
+          height: props.height,
+        }
+      : { width: props.width };
+  return <SkeletonContainer css={customCss} {...props} />;
 }

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

@@ -0,0 +1,20 @@
+import type { SkeletonContainer } from './Skeleton.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof SkeletonContainer>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+type TextVariant = {
+  variant: 'text';
+  size: BaseSizes;
+  width: number;
+};
+
+type OtherVariant = {
+  variant: Exclude<BaseVariants, 'text'>;
+  width?: number;
+  height: number;
+};
+
+export type PropTypes = TextVariant | OtherVariant;

package/src/components/Spinner/Spinner.tsx

@@ -1,4 +1,9 @@
+import type { SvgIconProps } from '../SvgIcon';
+import type * as Stitches from '@stitches/react';
+
 import React from 'react';
+
+import { LoadingIcon } from '../../icons';
 import { keyframes, styled } from '../../theme';
 
 const spin = keyframes({
@@ -8,54 +13,25 @@ const spin = keyframes({
 });
 
 const SpinnerContainer = styled('div', {
-  borderRadius: '50%',
   position: 'relative',
-  border: `2px solid $neutral100`,
-  borderRight: `2px solid`,
   animation: `${spin} 1.5s linear infinite`,
-  margin: `0px $8`,
-  variants: {
-    color: {
-      primary: {
-        borderRightColor: '$primary',
-      },
-      error: {
-        borderRightColor: '$error',
-      },
-      warning: {
-        borderRightColor: '$warning',
-      },
-      success: {
-        borderRightColor: '$success',
-      },
-      black: {
-        borderRightColor: '$black',
-      },
-      white: {
-        borderRightColor: '$white',
-      },
-    },
-    size: {
-      16: {
-        width: '$16',
-        height: '$16',
-      },
-      20: {
-        width: '$20',
-        height: '$20',
-      },
-      24: {
-        width: '$24',
-        height: '$24',
-      },
-    },
-  },
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
+
 export interface PropTypes {
-  size?: 16 | 20 | 24;
-  color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  size?: 12 | 16 | 20 | 24 | 30;
+  color?: SvgIconProps['color'];
+  css?: Stitches.CSS;
 }
 
-export function Spinner({ size = 16, color = 'primary' }: PropTypes) {
-  return <SpinnerContainer size={size} color={color} />;
+export function Spinner(props: PropTypes) {
+  const { size, color, css = {} } = props;
+  return (
+    <SpinnerContainer css={css}>
+      <LoadingIcon size={size} color={color} />
+    </SpinnerContainer>
+  );
 }

package/src/components/StepDetail/StepDetail.tsx

@@ -112,28 +112,28 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
         {amount && (
           <Typography
             noWrap
-            variant={direction === 'vertical' ? 'body2' : 'title'}
-          >
+            variant={direction === 'vertical' ? 'body' : 'title'}
+            size="medium">
             {amount}
           </Typography>
         )}
         {!amount && estimatedAmount && (
           <Typography
             noWrap
-            variant={direction === 'vertical' ? 'body2' : 'title'}
-            color={'$neutral600'}
-          >
+            variant={direction === 'vertical' ? 'body' : 'title'}
+            size="medium"
+            color={'$neutral600'}>
             {estimatedAmount}
           </Typography>
         )}
         &nbsp;
         <Typography
-          variant={direction === 'vertical' ? 'body2' : 'title'}
-          noWrap
-        >
+          variant={direction === 'vertical' ? 'body' : 'title'}
+          size="medium"
+          noWrap>
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="$neutral800">
+        <SubTitle noWrap variant="body" size="xsmall" color="$neutral800">
           on {blockchain}
         </SubTitle>
       </Detail>

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+
+import { Alert } from '../Alert';
+
+import { step1 } from './mock';
+import { StepDetails } from './StepDetails';
+
+const meta: Meta<typeof StepDetails> = {
+  component: StepDetails,
+};
+
+export default meta;
+type Story = StoryObj<typeof StepDetails>;
+
+export const Main: Story = {
+  args: {
+    step: { ...step1, alerts: <Alert title="test alert" type="warning" /> },
+    type: 'route-progress',
+    state: 'completed',
+  },
+};

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

@@ -0,0 +1,133 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  width: '100%',
+  position: 'relative',
+  padding: '0 0.5rem',
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
+  variants: {
+    type: {
+      'route-details': { border: 'none' },
+      'route-progress': {
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        borderRadius: '$xm',
+        padding: '$10 $15',
+        marginBottom: '15px',
+      },
+    },
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      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',
+  overflow: 'hidden',
+  border: '1.5px solid transparent',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
+export const Alerts = styled('div', {
+  width: '100%',
+  variants: {
+    pb: {
+      true: {
+        paddingBottom: '35px',
+      },
+    },
+  },
+});
+
+export const DashedLine = styled('div', {
+  borderLeft: '1px dashed black',
+  minHeight: '64px',
+  margin: '0 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    invisible: {
+      true: {
+        visibility: 'hidden',
+        minHeight: 'unset',
+      },
+    },
+  },
+});
+
+export const StepSeparator = styled('div', {
+  borderLeft: '1px dashed transparent',
+  margin: '0 $10',
+  alignSelf: 'stretch',
+  display: 'block',
+  height: '15px',
+  position: 'absolute',
+  top: '-16px',
+  left: '16px',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});