@rango-dev/ui 0.1.10-next.90 → 0.1.10-next.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.90",
+  "version": "0.1.10-next.92",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -75,7 +75,7 @@
     "@rango-dev/wallets-shared": "^0.1.11-next.78",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
-    "rango-sdk": "^0.1.18",
+    "rango-sdk": "^0.1.19",
     "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",

package/src/components/Alert/Alert.tsx

@@ -1,52 +1,53 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
-import { darkTheme, styled } from '../../theme';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
 
 const MainContainer = styled('div', {
-  display: 'flex',
   width: '100%',
-  alignItems: 'center',
   padding: '$16',
   borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+
+  '.main': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  '.footer': {
+    paddingTop: '$8',
+  },
+  '&.hasIcon .footer': {
+    paddingLeft: '$32',
+  },
+
   variants: {
     type: {
       primary: {
-        backgroundColor: '$primary200',
+        color: '$primary200',
       },
       secondary: {
-        backgroundColor: '$neutrals400',
+        color: '$secondary',
       },
       success: {
-        backgroundColor: '$success300',
+        color: '$success300',
       },
       warning: {
-        backgroundColor: '$warning500',
+        color: '$warning500',
       },
       error: {
-        backgroundColor: '$error300',
+        color: '$error300',
       },
     },
   },
 });
 
-const ContentContainer = styled('div', {});
-
-const TitleContainer = styled('div', {
-  marginBottom: '$8',
-});
-
-const IconContainer = styled('div', {
-  marginRight: '$24',
-});
-
-const StyledTypography = styled(Typography, {
-  color: darkTheme.colors.foreground.value,
-});
-
 export interface PropTypes {
-  type: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
   title?: string;
+  footer?: ReactNode;
 }
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -57,22 +58,24 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
   ).includes(type);
 
   return (
-    <MainContainer type={type}>
-      {showIcon && (
-        <IconContainer>
-          {type === 'success' && <CheckCircleIcon color="success" size={28} />}
-          {type === 'warning' && <WarningIcon color="white" size={28} />}
-          {type === 'error' && <InfoCircleIcon color="error" size={28} />}
-        </IconContainer>
-      )}
-      <ContentContainer>
+    <MainContainer type={type} className={showIcon ? 'hasIcon' : ''}>
+      <div className="main">
+        {showIcon && (
+          <>
+            {type === 'success' && <CheckCircleIcon color={type} size={24} />}
+            {type === 'warning' && <WarningIcon color={type} size={24} />}
+            {type === 'error' && <InfoCircleIcon color={type} size={24} />}
+            <Spacer size={8} />
+          </>
+        )}
         {title && (
-          <TitleContainer>
-            <StyledTypography variant="h6">{title}</StyledTypography>
-          </TitleContainer>
+          <Typography variant="h6" color={type}>
+            {title}
+          </Typography>
         )}
         {children}
-      </ContentContainer>
+      </div>
+      {props.footer ? <div className="footer">{props.footer}</div> : null}
     </MainContainer>
   );
 }

package/src/components/BestRoute/BestRoute.tsx

@@ -6,6 +6,7 @@ import { keyframes, styled } from '../../theme';
 import { Skeleton } from '../Skeleton';
 import { Spinner } from '../Spinner';
 import { BestRouteResponse } from 'rango-sdk';
+import { Tooltip } from '../Tooltip';
 
 const Container = styled('div', {
   borderRadius: '$5',
@@ -40,11 +41,13 @@ const Line = styled('div', {
     width: '$32',
   },
 });
+
 const HR = styled('hr', {
   width: '100%',
-  background: '$neutrals200',
+  border: '1px solid $neutrals400',
   margin: '$8 0',
 });
+
 const SwapperLogo = styled('img', {
   width: '$16',
   height: '$16',
@@ -103,7 +106,7 @@ const GasContainer = styled('div', {
   },
 });
 
-const FeeContainer = styled('div', {
+const CostContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -156,24 +159,30 @@ export function BestRoute(props: PropsWithChildren<PropTypes>) {
         </SkeletonContainer>
       ) : (
         <GasContainer>
-          <FeeContainer warning={feeWarning}>
-            <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
-            <TotalFee
-              mt={4}
-              align="center"
-              variant="caption"
-              warning={feeWarning}
-            >
-              {error && '-'}
-              {!!data && `$${totalFee}`}
-            </TotalFee>
-          </FeeContainer>
+          <Tooltip content="Transaction cost (fee)">
+            <CostContainer warning={feeWarning}>
+              <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
+              <TotalFee
+                mt={4}
+                align="center"
+                variant="caption"
+                warning={feeWarning}
+              >
+                {error && '-'}
+                {!!data && `$${totalFee}`}
+              </TotalFee>
+            </CostContainer>
+          </Tooltip>
           <HR />
-          <TimeIcon size={20} />
-          <Typography mt={4} align="center" variant="caption">
-            {error && '-'}
-            {!!data && `~${totalTime}m`}
-          </Typography>
+          <Tooltip content="Time estimate">
+            <CostContainer warning={feeWarning}>
+              <TimeIcon size={20} />
+              <Typography mt={4} align="center" variant="caption">
+                {error && '-'}
+                {!!data && `~${totalTime}m`}
+              </Typography>
+            </CostContainer>
+          </Tooltip>
         </GasContainer>
       )}
       <BestRouteContainer>

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -87,9 +87,7 @@ export function BlockchainSelector(props: PropTypes) {
                     onChange={onChange}
                   />
                 ) : (
-                  <Alert type="secondary">
-                    <Typography variant="body2">{`${searchedFor} not found`}</Typography>
-                  </Alert>
+                  <Alert>{`${searchedFor} not found`}</Alert>
                 )}
               </>
             )}

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

@@ -27,7 +27,7 @@ export default {
     size: {
       name: 'size',
       control: { type: 'radio' },
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'medium', 'large', 'compact'],
       defaultValue: 'medium',
     },
     disabled: {

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, HTMLAttributes } from 'react';
 import { darkTheme, styled } from '../../theme';
 import { Spinner } from '../Spinner';
 import { Typography } from '../Typography';
@@ -13,6 +13,12 @@ const ButtonContainer = styled('button', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  transition: 'all 0.35s',
+  border: '0',
+
+  '&:active': {
+    transform: 'scale(0.95)',
+  },
 
   variants: {
     align: {
@@ -26,6 +32,7 @@ const ButtonContainer = styled('button', {
       },
     },
     size: {
+      compact: {},
       small: {
         height: '$32',
       },
@@ -43,27 +50,28 @@ const ButtonContainer = styled('button', {
         border: 0,
         '&:hover': {
           backgroundColor: '$neutrals200',
-          color: '$foreground',
         },
         '&:disabled': {
-          background: '$neutrals400 !important',
+          background: '$neutrals400',
+        },
+        '&:disabled:hover': {
+          background: '$neutrals400',
+          transform: 'unset',
         },
       },
       outlined: {
-        backgroundColor: '$background !important',
-        borderColor: '$neutrals400 !important',
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        borderColor: '$neutrals400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600 !important',
-          color: '$neutrals500 !important',
+          borderColor: '$neutrals600',
         },
         '&:disabled': {
-          borderColor: '$neutrals300 !important',
-          color: '$neutrals400 !important',
+          borderColor: '$neutrals300',
+          color: '$neutrals400',
         },
-        background: 'transparent',
-        border: 1,
-        borderStyle: 'solid',
       },
       ghost: {
         color: '$foreground',
@@ -103,11 +111,7 @@ const ButtonContainer = styled('button', {
       variant: 'contained',
       css: {
         background: '$primary',
-        $$color: '$colors$background',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$foreground',
-        },
-        color: '$$color !important',
+        color: '$white',
         '&:hover': {
           background: '$primary700',
         },
@@ -124,7 +128,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$primary !important',
-        borderColor: '$primary !important',
+        borderColor: '$primary',
         '&:hover': {
           color: '$primary700 !important',
           borderColor: '$primary700 !important',
@@ -179,7 +183,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$error !important',
-        borderColor: '$error !important',
+        borderColor: '$error',
         '&:hover': {
           color: '$error300 !important',
           borderColor: '$error300 !important',
@@ -236,7 +240,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$warning !important',
-        borderColor: '$warning !important',
+        borderColor: '$warning',
         '&:hover': {
           color: '$warning300 !important',
           borderColor: '$warning300 !important',
@@ -293,7 +297,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$success !important',
-        borderColor: '$success !important',
+        borderColor: '$success',
         '&:hover': {
           color: '$success300 !important',
           borderColor: '$success300 !important',
@@ -324,6 +328,13 @@ const ButtonContainer = styled('button', {
         },
       },
     },
+    {
+      size: 'compact',
+      css: {
+        padding: '$2 $4',
+        fontSize: '$12',
+      },
+    },
   ],
   defaultVariants: {
     size: 'medium',
@@ -361,9 +372,10 @@ const Content = styled('div', {
   },
 });
 
-export interface PropTypes {
+export interface PropTypes
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'> {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'compact';
   variant?: 'contained' | 'outlined' | 'ghost';
   type?: 'primary' | 'error' | 'warning' | 'success';
   prefix?: React.ReactNode;

package/src/components/Chip/Chip.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties } from '@stitches/react';
 import React from 'react';
 import { styled } from '../../theme';
-import { Typography } from '../Typography';
 
 const ChipCointainer = styled('div', {
   display: 'inline-flex',
@@ -12,12 +11,16 @@ const ChipCointainer = styled('div', {
   height: '32',
   fontSize: '$14',
   cursor: 'pointer',
+  transition: 'all 0.35s',
+  color: '$foreground',
+
   '&:hover': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$success700',
+    color: '$background',
   },
   variants: {
     selected: {
-      true: { backgroundColor: '$neutrals400' },
+      true: { backgroundColor: '$success', color: '$background' },
       false: { backgroundColor: '$background' },
     },
   },
@@ -38,7 +41,7 @@ export function Chip(props: PropTypes) {
   return (
     <ChipCointainer selected={selected} onClick={onClick} style={style}>
       {prefix || null}
-      <Typography variant="body2">{label}</Typography>
+      {label}
       {suffix || null}
     </ChipCointainer>
   );

package/src/components/Icon/ChevronRightIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+ChevronRightIcon.toString = () => '._icon';

package/src/components/Icon/DisconnectIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+        <polyline points="16 17 21 12 16 7"></polyline>
+        <line x1="21" y1="12" x2="9" y2="12"></line>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+DisconnectIcon.toString = () => '._icon';

package/src/components/Icon/HistoryIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgWithFillColor } from './common';
+import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
 export const HistoryIcon: React.FC<IconProps> = ({
@@ -8,32 +8,26 @@ export const HistoryIcon: React.FC<IconProps> = ({
   ...props
 }) => {
   return (
-    <SvgWithFillColor
+    <SvgWithStrokeColor
       width={size}
       height={size}
       viewBox="0 0 24 24"
       color={color}
       fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
     >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
-      />
-    </SvgWithFillColor>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+      <line x1="16" y1="13" x2="8" y2="13"></line>
+      <line x1="16" y1="17" x2="8" y2="17"></line>
+      <polyline points="10 9 9 9 8 9"></polyline>
+    </SvgWithStrokeColor>
   );
 };
 

package/src/components/Icon/RetryIcon.tsx

@@ -1,28 +1,28 @@
 import * as React from 'react';
-import { SvgWithFillColor } from './common';
+import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
 export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ color, size = 16, ...props }, forwardedRef) => {
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
     return (
-      <SvgWithFillColor
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
         color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}
       >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M17.016 13.45c.199-.384.002-.842-.397-1.005-.406-.166-.864.033-1.077.416A6.17 6.17 0 0 1 13 15.345a6.051 6.051 0 0 1-4.244.513 6.127 6.127 0 0 1-3.543-2.425 6.286 6.286 0 0 1 .73-8.095A6.089 6.089 0 0 1 9.86 3.604a6.07 6.07 0 0 1 4.083 1.286 6.196 6.196 0 0 1 1.65 1.97l-1.053.363a.302.302 0 0 0-.073.534l2.607 1.758a.3.3 0 0 0 .45-.155l1.01-3.007a.298.298 0 0 0-.38-.378l-1.057.365a7.79 7.79 0 0 0-2.194-2.713 7.627 7.627 0 0 0-5.13-1.615A7.65 7.65 0 0 0 4.852 4.19a7.898 7.898 0 0 0-.917 10.17 7.7 7.7 0 0 0 4.452 3.048 7.604 7.604 0 0 0 5.333-.644 7.757 7.757 0 0 0 3.297-3.315Z"
-          fill={color}
-        />
-      </SvgWithFillColor>
+        <polyline points="23 4 23 10 17 10"></polyline>
+        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+      </SvgWithStrokeColor>
     );
   }
 );

package/src/components/Icon/SettingIcon.tsx

@@ -13,25 +13,17 @@ export const SettingsIcon: React.FC<IconProps> = ({
       height={size}
       viewBox="0 0 24 24"
       color={color}
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
     >
-      <path
-        d="M12.5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M2.5 12.88v-1.76c0-1.04.85-1.9 1.9-1.9 1.81 0 2.55-1.28 1.64-2.85-.52-.9-.21-2.07.7-2.59l1.73-.99c.79-.47 1.81-.19 2.28.6l.11.19c.9 1.57 2.38 1.57 3.29 0l.11-.19c.47-.79 1.49-1.07 2.28-.6l1.73.99c.91.52 1.22 1.69.7 2.59-.91 1.57-.17 2.85 1.64 2.85 1.04 0 1.9.85 1.9 1.9v1.76c0 1.04-.85 1.9-1.9 1.9-1.81 0-2.55 1.28-1.64 2.85.52.91.21 2.07-.7 2.59l-1.73.99c-.79.47-1.81.19-2.28-.6l-.11-.19c-.9-1.57-2.38-1.57-3.29 0l-.11.19c-.47.79-1.49 1.07-2.28.6l-1.73-.99a1.899 1.899 0 0 1-.7-2.59c.91-1.57.17-2.85-1.64-2.85-1.05 0-1.9-.86-1.9-1.9Z"
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <circle cx="12" cy="12" r="3"></circle>
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
     </SvgWithStrokeColor>
   );
 };

package/src/components/Icon/index.ts

@@ -23,6 +23,7 @@ export { AngleUpIcon } from './AngleUpIcon';
 export { AngleDownIcon } from './AngleDownIcon';
 export { AngleLeftIcon } from './AngleLeftIcon';
 export { DownloadIcon } from './DownloadIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
 
 export { RetryRightIcon } from './RetryRightIcon';
 export { RetryLeftIcon } from './RetryLeftIcon';
@@ -36,6 +37,7 @@ export { AddWalletIcon } from './AddWalletIcon';
 export { DeleteWalletIcon } from './DeleteWalletIcon';
 export { CheckWalletIcon } from './CheckWalletIcon';
 export { SwapWalletIcon } from './SwapWalletIcon';
+export { DisconnectIcon } from './DisconnectIcon';
 
 export { BagIcon } from './BagIcon';
 

package/src/components/Icon/types.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface IconProps extends React.SVGAttributes<SVGElement> {
-  size?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
+  size?: 12 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
   color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
 }