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

package/src/components/BlockchainsList/BlockchainsList.stories.tsx

@@ -1,10 +1,13 @@
+import type { PropTypes } from './BlockchainsList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { BlockchainsList, PropTypes } from './BlockchainsList';
+
+import { BlockchainsList } from './BlockchainsList';
 import { blockchainMeta } from './mockData';
 
 export default {
-  title: 'Components/Blockchains List',
+  title: 'Components/Blockchains List (Deprecated)',
   component: BlockchainsList,
   args: {
     searchedText: '',

package/src/components/BlockchainsList/BlockchainsList.tsx

@@ -1,6 +1,8 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
 import React, { useState } from 'react';
+
 import { styled } from '../../theme';
-import { BlockchainMeta } from 'rango-sdk';
 import { Button } from '../Button/Button';
 import { FilledCircle, Image } from '../common';
 import { Typography } from '../Typography';
@@ -25,7 +27,9 @@ const ListContainer = styled('div', {
 const ImageContainer = styled('div', {
   paddingRight: '$4',
 });
-
+/**
+ * @deprecated will be removed in v2
+ */
 export function BlockchainsList(props: PropTypes) {
   const { list, onChange, multiSelect, selectedList } = props;
   const [selected, setSelected] = useState(props.selected);
@@ -37,9 +41,10 @@ export function BlockchainsList(props: PropTypes) {
 
   const isSelect = (name: string) => {
     if (multiSelect && selectedList) {
+      const NOT_FOUND_INDEX = -1;
       return (
         selectedList === 'all' ||
-        selectedList.findIndex((item) => name === item.name) > -1
+        selectedList.findIndex((item) => name === item.name) > NOT_FOUND_INDEX
       );
     }
     return name === selected?.name;
@@ -48,6 +53,7 @@ export function BlockchainsList(props: PropTypes) {
   return (
     <ListContainer>
       {list.map((blockchain, index) => {
+        const key = `item-${index}`;
         return (
           <Button
             type={isSelect(blockchain.name) ? 'primary' : undefined}
@@ -59,11 +65,11 @@ export function BlockchainsList(props: PropTypes) {
               </ImageContainer>
             }
             suffix={isSelect(blockchain.name) ? <FilledCircle /> : undefined}
-            align="start"
             onClick={changeSelectedBlockchain.bind(null, blockchain)}
-            key={index}
-          >
-            <Typography variant="body2">{blockchain.displayName}</Typography>
+            key={key}>
+            <Typography variant="body" size="small">
+              {blockchain.displayName}
+            </Typography>
           </Button>
         );
       })}

package/src/components/BottomLogo/BottomLogo.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+});
+
+export const StyledAnchor = styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none',
+});

package/src/components/BottomLogo/BottomLogo.tsx

@@ -1,46 +1,26 @@
-import React from 'react';
 import { i18n } from '@lingui/core';
-import { styled } from '../../theme';
-import { Typography } from '../Typography';
-
-const Container = styled('div', {
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
-  alignItems: 'center',
-  paddingTop: '$16',
-});
+import React from 'react';
 
-const Logo = styled('svg', {
-  fill: '$foreground',
-  width: '$24',
-  margin: '0 $8 0 $16',
-});
+import { Divider } from '../Divider';
+import { Logo } from '../Logo/Logo';
+import { Typography } from '../Typography';
 
-const StyledAnchor = styled('a', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  textDecoration: 'none',
-});
+import { Container, StyledAnchor } from './BottomLogo.styles';
 
 export function BottomLogo() {
   return (
     <Container>
-      <Typography variant="caption" color="$neutral600">
+      <Typography variant="body" size="xsmall" color="$neutral900">
         {i18n.t('Powered By')}
       </Typography>
+      <Divider direction="horizontal" size={8} />
       <StyledAnchor href="https://rango.exchange" target="_blank">
-        <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
-          <defs></defs>
-          <g id="Layer_2" data-name="Layer 2">
-            <g id="Layer_1-2" data-name="Layer 1">
-              <path d="M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z" />
-              <path d="M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z" />
-            </g>
-          </g>
-        </Logo>
-        <Typography variant="body2">RANGO</Typography>
+        <Logo size={16} color="gray" />
+        <Divider direction="horizontal" size={4} />
+
+        <Typography variant="body" size="xsmall" color="neutral900">
+          RANGO
+        </Typography>
       </StyledAnchor>
     </Container>
   );

package/src/components/Button/Button.stories.tsx

@@ -1,64 +1,36 @@
+import type { PropTypes } from './Button.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Button, PropTypes } from './Button';
-import { AddWalletIcon } from '../Icon';
+import { WalletIcon } from '../../icons';
+
+import { Button } from './Button';
 
-export default {
-  title: 'Components/Button',
+const meta: Meta<typeof Button> = {
   component: Button,
-  args: {
-    variant: 'contained',
-    size: 'medium',
-    type: 'primary',
-  },
-  argTypes: {
-    variant: {
-      name: 'variant',
-      control: { type: 'select' },
-      options: ['contained', 'outlined', 'ghost'],
-      defaultValue: 'contained',
-    },
-    type: {
-      name: 'type',
-      control: { type: 'select' },
-      options: ['primary', 'error', 'warning', 'success'],
-    },
-    align: {
-      name: 'align',
-      control: { type: 'select' },
-      options: ['start', 'grow'],
-    },
-    size: {
-      name: 'size',
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large', 'compact'],
-      defaultValue: 'medium',
-    },
-    disabled: {
-      name: 'disabled',
-      control: { type: 'boolean' },
-    },
-  },
-} as Meta<typeof Button>;
+};
+
+export default meta;
 
 export const Main = (props: PropTypes) => (
   <Button {...props}>I'm a button</Button>
 );
 
-export const WithPrefix = (args: PropTypes) => (
-  <Button prefix={<AddWalletIcon size={24} color="white" />} {...args}>
-    I'm a button
-  </Button>
-);
+export const WithPrefix = (args: PropTypes) => {
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    <Button prefix={<WalletIcon />} {...args}>
+      I'm a button
+    </Button>
+  );
+};
 
 export const WithSuffix = (args: PropTypes) => (
-  <Button suffix={<AddWalletIcon size={24} color="white" />} {...args}>
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  <Button suffix={<WalletIcon />} {...args}>
     I'm a button
   </Button>
 );
-export const IconButton = (args: PropTypes) => (
-  <div>
-    <Button suffix={<AddWalletIcon size={24} color="white" />} {...args} />
-  </div>
-);

package/src/components/Button/Button.styles.tsx

@@ -0,0 +1,469 @@
+import { darkTheme, keyframes, styled } from '../../theme';
+
+export const ButtonBase = styled('button', {
+  position: 'relative',
+  display: 'flex',
+  overflow: 'hidden',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '$16',
+  fontWeight: '$400',
+  border: '0',
+  borderRadius: '$secondary',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+
+  variants: {
+    size: {
+      xxsmall: {
+        fontSize: '$10',
+        lineHeight: '12px',
+        padding: '$4',
+      },
+      xsmall: {
+        fontSize: '$12',
+        lineHeight: '12px',
+        padding: '$0 $4',
+      },
+      small: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '20px',
+        padding: '$4 $4',
+      },
+      medium: {
+        fontSize: '$16',
+        lineHeight: '24px',
+        fontWeight: '$medium',
+        padding: '$8 $8',
+      },
+      large: {
+        fontSize: '$18',
+        lineHeight: '26px',
+        padding: '$12 $24',
+        fontWeight: '$medium',
+      },
+    },
+    variant: {
+      contained: {
+        backgroundColor: '$background',
+        color: '$foreground',
+        border: 0,
+        '&:hover': {
+          backgroundColor: '$neutral300',
+        },
+        '&:disabled': {
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          backgroundColor: '$neutral800',
+          color: '$$color',
+        },
+        '&:disabled:hover': {
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          backgroundColor: '$neutral800',
+          color: '$$color',
+          transform: 'unset',
+        },
+      },
+      outlined: {
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        color: '$foreground',
+        borderColor: '$neutral200',
+        '&:hover': {
+          borderColor: '$neutral300',
+        },
+        '&:disabled': {
+          borderColor: '$neutral800',
+          color: '$neutral800',
+        },
+        '&:disabled:hover': {
+          borderColor: '$neutral800',
+          transform: 'unset',
+        },
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        color: '$neutral900',
+        '&:disabled': {
+          color: '$neutral800',
+        },
+        '&:hover': {
+          color: '$secondary500',
+        },
+      },
+      default: {},
+    },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+    type: {
+      primary: {},
+      error: {},
+      warning: {},
+      success: {},
+      secondary: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'primary',
+      variant: 'contained',
+      css: {
+        background: '$primary500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$primary600',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:disabled': {
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          background: '$neutral800',
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$primary500',
+        },
+        '&:active': {
+          backgroundColor: '$primary500',
+          backgroundSize: '100%',
+          transition: 'background 0s',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'outlined',
+      css: {
+        color: '$primary500',
+        borderColor: '$primary500',
+        '&:hover': {
+          color: '$primary600',
+          borderColor: '$primary600',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'ghost',
+      css: {
+        color: '$primary500',
+        '&:hover': {
+          color: '$primary600',
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'contained',
+      css: {
+        background: '$secondary500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$secondary500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$secondary500',
+        },
+        '&:focus': {
+          background: '$secondary500',
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'outlined',
+      css: {
+        color: '$secondary500',
+        borderColor: '$secondary500',
+        '&:hover': {
+          color: '$secondary500',
+          borderColor: '$secondary500',
+        },
+        '&:visited': {
+          color: '$secondary500',
+          borderColor: '$secondary500',
+        },
+        '&:focus': {
+          color: '$secondary500',
+          borderColor: '$secondary500',
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'ghost',
+      css: {
+        color: '$secondary500',
+        '&:hover': {
+          color: '$secondary500',
+        },
+        '&:visited': {
+          color: '$secondary500',
+        },
+        '&:focus': {
+          color: '$secondary500',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'contained',
+      css: {
+        background: '$error500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$error500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$error500',
+        },
+        '&:focus': {
+          background: '$error500',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'outlined',
+      css: {
+        color: '$error500',
+        borderColor: '$error500',
+        '&:hover': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+        '&:visited': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+        '&:focus': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'ghost',
+      css: {
+        color: '$error500',
+        '&:hover': {
+          color: '$error500',
+        },
+        '&:visited': {
+          color: '$error500',
+        },
+        '&:focus': {
+          color: '$error500',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'contained',
+      css: {
+        background: '$warning500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$warning500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$warning500',
+        },
+        '&:focus': {
+          background: '$warning500',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'outlined',
+      css: {
+        color: '$warning500',
+        borderColor: '$warning500',
+        '&:hover': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+        '&:visited': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+        '&:focus': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'ghost',
+      css: {
+        color: '$warning500',
+        '&:hover': {
+          color: '$warning500',
+        },
+        '&:visited': {
+          color: '$warning500',
+        },
+        '&:focus': {
+          color: '$warning500',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'contained',
+      css: {
+        background: '$success500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$success500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$success500',
+        },
+        '&:focus': {
+          background: '$success500',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'outlined',
+      css: {
+        color: '$success500',
+        borderColor: '$success500',
+        '&:hover': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+        '&:visited': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+        '&:focus': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'ghost',
+      css: {
+        color: '$success500',
+        '&:hover': {
+          color: '$success500',
+        },
+        '&:visited': {
+          color: '$success500',
+        },
+        '&:focus': {
+          color: '$success500',
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'medium',
+    variant: 'contained',
+  },
+});
+
+export const Content = styled('span', {
+  display: 'inline-block',
+  variants: {
+    pl: {
+      true: {
+        paddingLeft: '$8',
+      },
+    },
+    pr: {
+      true: {
+        paddingRight: '$8',
+      },
+    },
+  },
+});
+
+const ripple = keyframes({
+  to: {
+    transform: 'scale(2)',
+    opacity: 0.1,
+  },
+});
+
+export const RippleContainer = styled('div', {
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+
+  '& span': {
+    transform: 'scale(0)',
+    borderRadius: '100%',
+    position: 'absolute',
+    opacity: '0.75',
+    backgroundColor: '$neutral500',
+    animation: `${ripple} 0.8s linear`,
+  },
+});