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

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,43 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  fontFamily: 'inherit',
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

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

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>
-);