@rango-dev/ui 0.15.1-next.0 → 0.15.1-next.10

package/src/components/Radio/Radio.tsx

@@ -1,100 +1,14 @@
-import React from 'react';
-import * as RadioGroup from '@radix-ui/react-radio-group';
-import { styled } from '../../theme';
-import { Typography } from '../Typography';
-import { CSSProperties } from '@stitches/react';
-
-const StyledRoot = styled(RadioGroup.Root, {
-  variants: {
-    direction: {
-      horizontal: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-      },
-      vertical: {
-        display: 'grid',
-        gridGap: '$24',
-      },
-    },
-  },
-});
-
-const ItemContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: '$8',
-});
-const StyledItem = styled(RadioGroup.Item, {
-  padding: '0',
-  width: '20px',
-  height: '20px',
-  borderRadius: '100%',
-  cursor: 'pointer',
-  backgroundColor: '$background',
-  border: '1px solid $neutral400',
-
-  '&:hover': {
-    borderColor: '$neutral600',
-  },
-});
+import type { PropTypes } from './Radio.types';
 
-const Container = styled('div', {
-  display: 'flex',
-});
-
-const StyledIndicator = styled(RadioGroup.Indicator, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  '&::after': {
-    content: '',
-    display: 'block',
-    width: '10px',
-    height: '10px',
-    borderRadius: '50%',
-    backgroundColor: '$success',
-  },
-});
-
-const Label = styled('label', {
-  paddingLeft: '$8',
-  cursor: 'pointer',
-  color: '$foreground',
-});
+import React from 'react';
 
-export interface PropTypes {
-  options: { label: string; value: string }[];
-  value: string;
-  onChange: (value: string) => void;
-  direction?: 'vertical' | 'horizontal';
-  style?: CSSProperties;
-}
+import { StyledIndicator, StyledItem } from './Radio.styles';
 
 export function Radio(props: PropTypes) {
-  const { value, onChange, direction = 'vertical', style } = props;
+  const { value } = props;
   return (
-    <Container>
-      <StyledRoot
-        onValueChange={onChange}
-        value={value}
-        direction={direction}
-        style={style}
-      >
-        {props.options.map((option, index) => (
-          <ItemContainer key={index}>
-            <StyledItem value={option.value} id={option.value}>
-              <StyledIndicator />
-            </StyledItem>
-            <Label className="_text" htmlFor={option.value}>
-              <Typography variant="body2">{option.label}</Typography>
-            </Label>
-          </ItemContainer>
-        ))}
-      </StyledRoot>
-    </Container>
+    <StyledItem value={value} id={value}>
+      <StyledIndicator />
+    </StyledItem>
   );
 }

package/src/components/Radio/Radio.types.tsx

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  value: string;
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type { PropTypes } from './RadioGroup.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { RadioGroup } from './RadioGroup';
+
+export default {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  args: {
+    options: [
+      { value: 'one', label: 'One' },
+      { value: 'two', label: 'Two' },
+      { value: 'three', label: 'Three' },
+    ],
+    direction: 'horizontal',
+    defaultValue: 'one',
+  },
+  argTypes: {
+    options: {
+      defaultValue: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+      ],
+    },
+  },
+} as Meta<typeof RadioGroup>;
+
+export const Main = (args: PropTypes) => <RadioGroup {...args} />;

package/src/components/RadioGroup/RadioGroup.styles.tsx

@@ -0,0 +1,38 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { styled } from '../../theme';
+
+export const RadioRoot = styled(RadioGroup.Root, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24',
+      },
+    },
+  },
+});
+
+export const ItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$8',
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+});
+
+export const Label = styled('label', {
+  paddingLeft: '$8',
+  cursor: 'pointer',
+  color: '$foreground',
+  '& > span': {
+    display: 'block',
+  },
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,37 @@
+import type { PropTypes } from './RadioGroup.types';
+
+import React from 'react';
+
+import { Radio } from '../Radio/Radio';
+import { Typography } from '../Typography';
+
+import {
+  Container,
+  ItemContainer,
+  Label,
+  RadioRoot,
+} from './RadioGroup.styles';
+
+export function RadioGroup(props: PropTypes) {
+  const { value, onChange, direction = 'vertical', style, options } = props;
+  return (
+    <Container>
+      <RadioRoot
+        onValueChange={onChange}
+        value={value}
+        direction={direction}
+        style={style}>
+        {options.map((option) => (
+          <ItemContainer key={option.value}>
+            <Radio value={option.value} />
+            <Label className="_text" htmlFor={option.value}>
+              <Typography variant="body" size="small">
+                {option.label}
+              </Typography>
+            </Label>
+          </ItemContainer>
+        ))}
+      </RadioRoot>
+    </Container>
+  );
+}

package/src/components/RadioGroup/RadioGroup.types.tsx

@@ -0,0 +1,13 @@
+import type { PropTypes as RadioType } from '../Radio/Radio.types';
+import type { CSSProperties } from '@stitches/react';
+
+export interface PropTypes {
+  options: {
+    label: string;
+    value: RadioType['value'];
+  }[];
+  value: RadioType['value'];
+  onChange: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+}

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export { RadioRoot } from './RadioGroup.styles';

package/src/components/RouteCost/RouteCost.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  '& .item': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .icon': {
+    width: '$16',
+    height: '$16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/RouteCost/RouteCost.tsx

@@ -0,0 +1,43 @@
+import type { PropTypes } from './RouteCost.types';
+
+import React from 'react';
+
+import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Separator } from '../BestRoute/BestRoute.styles';
+import { Typography } from '../Typography';
+
+import { Container } from './RouteCost.styles';
+
+export function RouteCost(props: PropTypes) {
+  const { fee, time, steps } = props;
+  return (
+    <Container>
+      <div className="item">
+        <div className="icon">
+          <GasIcon size={12} color={'gray'} />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          ${fee}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <TimeIcon size={12} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {`${time} min`}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <NumberIcon size={16} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {steps}
+        </Typography>
+      </div>
+    </Container>
+  );
+}

package/src/components/RouteCost/RouteCost.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  fee: string;
+  time: string | number;
+  steps: number;
+};

package/src/components/RouteCost/index.ts

@@ -0,0 +1 @@
+export { RouteCost } from './RouteCost';

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