@rango-dev/ui 0.1.10-next.69

package/src/components/ConnectWalletsModal/mockData.ts

@@ -0,0 +1,118 @@
+import { WalletInfo, WalletState } from '../../types/wallet';
+import { WalletType } from '@rango-dev/wallets-shared';
+
+export const walletsInfo: WalletInfo[] = [
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTING,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.NOT_INSTALLED,
+    type: WalletType.COINBASE,
+    installLink:
+      'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+  },
+];

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Drawer, PropTypes } from './Drawer';
+
+export default {
+  name: 'Components/Drawer',
+  component: Drawer,
+  argTypes: {
+    anchor: {
+      name: 'anchor',
+      control: { type: 'select' },
+      options: ['bottom', 'left', 'right', 'top'],
+      defaultValue: 'bottom',
+    },
+  },
+} as ComponentMeta<typeof Drawer>;
+
+export const Main = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <Drawer
+        {...args}
+        open={open}
+        title="I'm Drawer"
+        onClose={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+
+export const EmptyContent = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <Drawer {...args} open={open} onClose={() => setOpen(false)} />
+    </div>
+  );
+};
+export const BottomAnchor = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <Drawer
+        {...args}
+        open={open}
+        title="I'm Drawer"
+        onClose={() => setOpen(false)}
+        anchor="bottom"
+        content={
+          <div>
+            {Array.from({ length: 50 }, (_, index) => (
+              <div>Test {index}</div>
+            ))}
+          </div>
+        }
+      />
+    </div>
+  );
+};
+
+export const LeftAnchor = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <Drawer
+        {...args}
+        open={open}
+        title="I'm Drawer"
+        onClose={() => setOpen(false)}
+        anchor="left"
+        content={
+          <div>
+            {Array.from({ length: 50 }, (_, index) => (
+              <span>Test {index} </span>
+            ))}
+          </div>
+        }
+      />
+    </div>
+  );
+};

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { styled } from '../../theme';
+import { CloseIcon } from '../Icon';
+import { Typography } from '../Typography';
+
+export interface PropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  content: React.ReactNode;
+  containerStyle?: React.CSSProperties;
+  anchor?: 'bottom' | 'left' | 'right' | 'top';
+  showClose?: boolean;
+  footer?: React.ReactNode;
+}
+
+const BackDrop = styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+
+  backgroundColor: 'rgba(0,0,0,.1)',
+});
+
+const DrawerContainer = styled('div', {
+  position: 'fixed',
+  boxShadow: '$s',
+  background: '$background',
+  padding: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+        borderTopRightRadius: '$10',
+        borderBottomRightRadius: '$10',
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+        borderTopLeftRadius: '$10',
+        borderBottomLeftRadius: '$10',
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%',
+        borderTopRightRadius: '$10',
+        borderTopLeftRadius: '$10',
+        
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%',
+        borderBottomRightRadius: '$10',
+        borderBottomLeftRadius: '$10',
+        
+      },
+    },
+  },
+});
+
+const DrawerHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16',
+});
+
+const Body = styled('div', {
+  overflowY: 'auto',
+  height: '100%',
+});
+const Footer = styled('footer', {
+  width: '100%',
+  marginTop:'$28'
+});
+
+export function Drawer(props: PropTypes) {
+  const {
+    title,
+    content,
+    open,
+    onClose,
+    containerStyle,
+    anchor = 'bottom',
+    showClose = false,
+    footer,
+  } = props;
+
+  const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) onClose();
+  };
+
+  return (
+    <>
+      {open &&
+        createPortal(
+          <BackDrop onClick={handleBackDropClick}>
+            <DrawerContainer anchor={anchor} style={containerStyle}>
+              <DrawerHeader>
+                <Typography variant="h4">{title}</Typography>
+                {showClose && <CloseIcon size={24} onClick={onClose} />}
+              </DrawerHeader>
+              <Body>{content}</Body>
+              <Footer>{footer}</Footer>
+            </DrawerContainer>
+          </BackDrop>,
+          document.body
+        )}
+    </>
+  );
+}

package/src/components/Drawer/index.ts

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

package/src/components/Icon/AddCircleIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const AddCircleIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM8 12h8M12 16V8"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+AddCircleIcon.toString = () => '._icon';

package/src/components/Icon/AddIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const AddIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M6 12h12M12 18V6"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+AddIcon.toString = () => '._icon';

package/src/components/Icon/AddWalletIcon.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const AddWalletIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithFillColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.569 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.206 1.579-.574 2.25h8.564a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227 2.743 2.743 0 0 1 1.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.569Zm-4.51 3.01a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.36 0-.675.14-.903.373l-.014.014c-.266.26-.414.63-.377 1.022l.001.009c.053.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H7.939a.75.75 0 0 1-.482-1.324c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-5.283-2.533.75.75 0 0 1-1.217-.587v-4.37Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.409 2.655a1.15 1.15 0 0 0-1.555-1.078l-7.94 3a2.098 2.098 0 0 0-1.355 1.968v4.57a.75.75 0 0 1-1.5 0v-4.57c0-1.5.921-2.84 2.324-3.371l7.94-3c1.733-.657 3.586.629 3.586 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.787 12.405c-.359 0-.674.14-.902.374l-.014.013c-.266.26-.414.63-.377 1.022v.01c.054.634.664 1.181 1.413 1.181h1.943a.276.276 0 0 0 .267-.27v-2.06a.276.276 0 0 0-.267-.27h-2.063Zm-1.97-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.723 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.777-1.03-2.907-2.553a2.759 2.759 0 0 1 .817-2.227Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.559 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.309 14.455c-.762 0-1.469.267-2.033.717h-.001a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.184.468 1.667l.006.01a3.22 3.22 0 0 0 2.776 1.573 3.155 3.155 0 0 0 2.148-.824c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-3.25-3.25Zm-2.967-.457a4.749 4.749 0 0 1 7.717 3.707c0 .888-.248 1.73-.687 2.446-.25.427-.57.808-.941 1.12a4.656 4.656 0 0 1-3.122 1.184 4.72 4.72 0 0 1-4.062-2.301 4.671 4.671 0 0 1-.688-2.449 4.72 4.72 0 0 1 1.783-3.707Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.07 17.685a.75.75 0 0 1 .75-.75H6.8a.75.75 0 0 1 0 1.5H3.82a.75.75 0 0 1-.75-.75Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.309 15.475a.75.75 0 0 1 .75.75v2.99a.75.75 0 0 1-1.5 0v-2.99a.75.75 0 0 1 .75-.75Z"
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+AddWalletIcon.toString = () => '._icon';

package/src/components/Icon/AngleDownIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleDownIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+AngleDownIcon.toString = () => '._icon';

package/src/components/Icon/AngleLeftIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+import { AngleDownIcon } from './AngleDownIcon';
+
+export const AngleLeftIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        fill="none"
+        viewBox="0 0 24 24"
+        color={color}
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M15 19.92 8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+AngleDownIcon.toString = () => '._icon';

package/src/components/Icon/AngleRightIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        color={color}
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="m8.91 19.92 6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+AngleRightIcon.toString = () => '._icon';

package/src/components/Icon/AngleUpIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleUpIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        color={color}
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M19.92 15.05 13.4 8.53c-.77-.77-2.03-.77-2.8 0l-6.52 6.52"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+AngleUpIcon.toString = () => '._icon';

package/src/components/Icon/BagIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const BagIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 32 32"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <g clipPath="url(#a)" strokeWidth={1.5}>
+          <path d="M9.333 9.333V4.8a.8.8 0 0 1 .8-.8h11.734a.8.8 0 0 1 .8.8v4.533M13.333 4v5.333M16 4v5.333m9.333 17.334H6.667A2.667 2.667 0 0 1 4 24V12a2.667 2.667 0 0 1 2.667-2.667h18.666A2.667 2.667 0 0 1 28 12v12a2.667 2.667 0 0 1-2.667 2.667Z" />
+          <path
+            d="M22 18.666a.667.667 0 1 1 0-1.334.667.667 0 0 1 0 1.334Z"
+            fill={color}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill={color} d="M0 0h32v32H0z" />
+          </clipPath>
+        </defs>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+BagIcon.toString = () => '._icon';

package/src/components/Icon/BanIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const BanIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10ZM18.9 5l-14 14"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+BanIcon.toString = () => '._icon';

package/src/components/Icon/CheckCircleIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithFillColor } from './common';
+
+export const CheckCircleIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithFillColor
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          stroke="#fff"
+        />
+        <path
+          d="m7.75 12 2.83 2.83 5.67-5.66"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          stroke="#fff"
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+CheckCircleIcon.toString = () => '._icon';