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

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -1,15 +1,18 @@
+import type { BestRouteResponse } from 'rango-sdk';
+
 import React from 'react';
-import { ChevronRightIcon, GasIcon, Divider } from '..';
+
 import { styled } from '../../theme';
-import { BestRouteResponse } from 'rango-sdk';
+import { Divider } from '../Divider';
+import { AngleRightIcon, GasIcon } from '../Icon';
 
 export const Container = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
+  borderRadius: '$xs',
+  backgroundColor: '$background',
   color: '$neutral800',
   fontSize: '$12',
 
@@ -28,7 +31,9 @@ interface PropTypes {
   totalFee?: string;
 }
 export function RoutesOverview(props: PropTypes) {
-  if (!props.routes) return null;
+  if (!props.routes) {
+    return null;
+  }
 
   const swaps = props.routes.result?.swaps;
   return (
@@ -36,10 +41,11 @@ export function RoutesOverview(props: PropTypes) {
       <div className="routes">
         {swaps?.map((swap, idx) => {
           const isLast = idx + 1 == swaps.length;
+          const key = `swap-${idx}`;
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <div className="route">{swap.from.symbol}</div>
-              <ChevronRightIcon size={12} />
+              <AngleRightIcon size={12} />
               {isLast ? <div className="route">{swap.to.symbol}</div> : null}
             </React.Fragment>
           );

package/src/components/SecondaryPage/SecondaryPage.stories.tsx

@@ -1,16 +1,18 @@
-import { Meta } from '@storybook/react';
-import { PropTypes, SecondaryPage } from './SecondaryPage';
+import type { PropTypes } from './SecondaryPage';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
 
+import { SecondaryPage } from './SecondaryPage';
+
 export default {
-  title: 'Components/Secondary Page',
+  title: 'Components/Secondary Page (Deprecated)',
   component: SecondaryPage,
-  args:{
-    textField:true,
-    textFieldPlaceholder:'Search',
-    title:'Secondary Page'
-  }
+  args: {
+    textField: true,
+    textFieldPlaceholder: 'Search',
+    title: 'Secondary Page',
+  },
 } as Meta<typeof SecondaryPage>;
 
-
 export const Main = (args: PropTypes) => <SecondaryPage {...args} />;

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -1,4 +1,7 @@
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import React, { useState } from 'react';
+
 import { styled } from '../../theme';
 import { Divider } from '../Divider';
 import { Header } from '../Header';
@@ -35,14 +38,27 @@ const TextFieldContainer = styled('div', {
   padding: '1px',
 });
 
+/**
+ * @deprecated will be removed in v2
+ */
 export function SecondaryPage(props: PropTypes) {
-  const { title, Footer, TopButton, onBack, hasHeader = true } = props;
+  const {
+    title,
+    Footer,
+    TopButton,
+    // onBack,
+    hasHeader = true,
+  } = props;
   const [searchedFor, setSearchedFor] = useState('');
 
   return (
     <>
       {hasHeader && (
-        <Header onBack={onBack} title={title || ''} suffix={TopButton} />
+        <Header
+          // onBack={onBack}
+          title={title || ''}
+          suffix={TopButton}
+        />
       )}
 
       <ContentContainer>
@@ -52,7 +68,9 @@ export function SecondaryPage(props: PropTypes) {
               size="large"
               prefix={<SearchIcon size={24} />}
               placeholder={props.textFieldPlaceholder}
-              onChange={(event) => setSearchedFor(event.target.value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchedFor(event.target.value)
+              }
               value={searchedFor}
               autoFocus
             />

package/src/components/SelectableWalletList/SelectableWalletList.stories.tsx

@@ -1,11 +1,13 @@
+import type { PropTypes } from './SelectableWalletList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { SelectableWalletList, PropTypes } from './SelectableWalletList';
 import { data } from './mock';
+import { SelectableWalletList } from './SelectableWalletList';
 
 export default {
-  title: 'Components/SelectableWalletList',
+  title: 'Components/SelectableWalletList(Deprecated)',
   component: SelectableWalletList,
 } as Meta<typeof SelectableWalletList>;
 

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',
+  },
+};