@rango-dev/ui 0.1.10-next.102

package/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { ChromePicker, ColorResult } from 'react-color';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+
+const Container = styled('div', {
+  position: 'relative',
+});
+
+const Color = styled('div', {
+  border: '1px solid $neutrals300',
+  borderRadius: '$5',
+  width: '$32',
+  height: '$32',
+});
+const Cover = styled('div', {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px',
+});
+const Popover = styled('div', {
+  position: 'absolute',
+  zIndex: '2',
+  variants: {
+    place: {
+      top: {
+        top: '-241px',
+      },
+      bottom: {},
+      left: {
+        top: '-50%',
+        left: '-225px',
+      },
+      right: {
+        top: '-50%',
+        right: '-225px',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  color: string;
+  place: 'top' | 'bottom' | 'left' | 'right';
+  onChangeColor: (
+    color: ColorResult,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  label?: string;
+}
+
+const Label = styled('label', {
+  display: 'inline-block',
+  fontSize: '$14',
+  marginBottom: '$4',
+  color: '$foreground',
+});
+
+export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
+  const [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);
+
+  return (
+    <Container>
+      <Label className="_text">{label}</Label>
+      <Button
+        variant="outlined"
+        prefix={<Color style={{ backgroundColor: color }} />}
+        fullWidth
+        align="start"
+        size="large"
+        onClick={() => setDisplayColorPicker((prev) => !prev)}
+      >
+        {color}
+      </Button>
+
+      {displayColorPicker && (
+        <Popover place={place}>
+          <Cover onClick={() => setDisplayColorPicker(false)} />
+          <ChromePicker color={color} onChange={onChangeColor} />
+        </Popover>
+      )}
+    </Container>
+  );
+}

package/src/components/ColorPicker/index.ts

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

package/src/components/ConnectWalletsModal/ConnectWallets.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { ConnectWalletsModal, PropTypes } from './ConnectWalletsModal';
+import { walletsInfo } from './mockData';
+
+export default {
+  title: 'Connect Wallets Modal',
+  component: ConnectWalletsModal,
+} as ComponentMeta<typeof ConnectWalletsModal>;
+
+export const Main = (args: PropTypes) => (
+  <ConnectWalletsModal {...args} list={walletsInfo} />
+);

package/src/components/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { WalletInfo } from '../../types/wallet';
+import { Modal } from '../Modal';
+import { WalletType } from '@rango-dev/wallets-shared';
+import { Wallet } from '../Wallet';
+
+export interface PropTypes {
+  open: boolean;
+  list: WalletInfo[];
+  onSelect: (walletType: WalletType) => void;
+  onClose: () => void;
+  error?: string;
+}
+
+const ModalContent = styled('div', {
+  display: 'grid',
+  gap: '$8',
+  gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+});
+
+export function ConnectWalletsModal(props: PropTypes) {
+  const { open, list, onSelect, onClose } = props;
+
+  const Content = (
+    <ModalContent>
+      {list.map((info, index) => (
+        <Wallet {...info} key={index} onClick={onSelect} />
+      ))}
+    </ModalContent>
+  );
+
+  return (
+    <Modal
+      title="Connect Wallets"
+      open={open}
+      content={Content}
+      onClose={onClose}
+      containerStyle={{ width: '75%', maxWidth: '30rem', height: '70%' }}
+    />
+  );
+}

package/src/components/ConnectWalletsModal/index.ts

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

package/src/components/ConnectWalletsModal/mockData.ts

@@ -0,0 +1,134 @@
+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,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTING,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.NOT_INSTALLED,
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+    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,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.CONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+  {
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+    name: 'Coinbase',
+    state: WalletState.DISCONNECTED,
+    installLink: '',
+    type: WalletType.COINBASE,
+    showOnMobile: true,
+  },
+];

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const DividerContainer = styled('div', {
+  variants: {
+    size: {
+      4: {
+        height: '$4',
+      },
+      8: {
+        height: '$8',
+      },
+      12: {
+        height: '$12',
+      },
+      16: {
+        height: '$16',
+      },
+      18: {
+        height: '$18',
+      },
+      20: {
+        height: '$20',
+      },
+      24: {
+        height: '$24',
+      },
+      32: {
+        height: '$32',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export function Divider({ size = 12 }: PropTypes) {
+  return <DividerContainer size={size} />;
+}

package/src/components/Divider/index.ts

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

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,124 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { CloseIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { createPortal } from 'react-dom';
+
+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;
+  container: Element | null;
+}
+
+const BackDrop = styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  zIndex: 9999999,
+  backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$10',
+});
+
+const DrawerContainer = styled('div', {
+  position: 'absolute',
+  boxShadow: '$s',
+  background: '$background',
+  padding: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  zIndex: 9999999,
+  borderRadius: '$10',
+
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%',
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%',
+      },
+    },
+  },
+});
+
+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,
+    container,
+  } = props;
+
+  const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) onClose();
+  };
+
+  return (
+    <>
+      {open &&
+        container &&
+        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>,
+          container
+        )}
+    </>
+  );
+}

package/src/components/Drawer/index.ts

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

package/src/components/Header/Header.tsx

@@ -0,0 +1,39 @@
+import { styled } from '../../theme';
+import React, { PropsWithChildren } from 'react';
+import { AngleLeftIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { Button } from '../Button';
+
+const HeaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$8 0',
+  position: 'relative',
+});
+
+const BackButton = styled(Button, {
+  padding: '$8',
+});
+
+interface PropTypes {
+  onBack?: () => void;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title: string;
+}
+
+export function Header(props: PropsWithChildren<PropTypes>) {
+  return (
+    <HeaderContainer>
+      {props.onBack ? (
+        <BackButton variant="ghost" size="small" onClick={props.onBack}>
+          <AngleLeftIcon size={24} />
+        </BackButton>
+      ) : null}
+      {props.prefix}
+      <Typography variant="h4">{props.title}</Typography>
+      {props.suffix || <div></div>}
+    </HeaderContainer>
+  );
+}

package/src/components/Header/index.ts

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

package/src/components/Icon/AddCircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const AddCircleIcon: React.FC<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,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const AddIcon: React.FC<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';