@rango-dev/ui 0.1.10-next.69

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+// import { ChevronLeftIcon } from '@radix-ui/react-icons';
+import { styled } from '../../theme';
+import { AngleLeftIcon, SearchIcon } from '../Icon';
+import { TextField } from '../TextField/TextField';
+import { Typography } from '../Typography';
+
+export type PropTypes = (
+  | {
+      textField: true;
+      Content: React.ElementType<{ searchedFor: string }>;
+      textFieldPlaceholder: string;
+    }
+  | {
+      textField: false;
+      Content: React.ReactNode;
+    }
+) & {
+  title: string;
+  onBack?: () => void;
+  TopButton?: React.ReactNode;
+  Footer?: React.ReactNode;
+  hasHeader?: boolean;
+};
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  padding: '$12 0',
+
+  '@lg': {
+    padding: '$16 0',
+  },
+});
+
+const HeaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: '$16',
+  position: 'relative',
+});
+
+const BackIcon = styled(AngleLeftIcon, {
+  position: 'absolute',
+  left: '0',
+});
+const StyledBackIcon = styled(BackIcon, {
+  cursor: 'pointer',
+});
+
+const ContentContainer = styled('div', {
+  flex: '1',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  marginTop: '$16',
+});
+
+export function SecondaryPage(props: PropTypes) {
+  const { title, Footer, TopButton, onBack, hasHeader = true } = props;
+  const [searchedFor, setSearchedFor] = useState('');
+
+  return (
+    <Container>
+      {hasHeader && (
+        <HeaderContainer>
+          <StyledBackIcon size={24} onClick={onBack} />
+          <Typography variant="h4">{title}</Typography>
+          {TopButton}
+        </HeaderContainer>
+      )}
+
+      {props.textField && (
+        <div>
+          <TextField
+            size="large"
+            prefix={<SearchIcon size={24} />}
+            placeholder={props.textFieldPlaceholder}
+            onChange={(event) => setSearchedFor(event.target.value)}
+            value={searchedFor}
+            autoFocus
+          />
+        </div>
+      )}
+      <ContentContainer>
+        {props.textField && <props.Content searchedFor={searchedFor} />}
+        {!props.textField && props.Content}
+      </ContentContainer>
+
+      {Footer}
+    </Container>
+  );
+}

package/src/components/SecondaryPage/index.ts

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

package/src/components/SelectableWalletList/SelectableWalletList.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { SelectableWalletList, PropTypes } from './SelectableWalletList';
+import { data } from './mock';
+
+export default {
+  title: 'Components/SelectableWalletList',
+  component: SelectableWalletList,
+} as ComponentMeta<typeof SelectableWalletList>;
+
+export const Main = (props: PropTypes) => (
+  <SelectableWalletList {...props} list={data} />
+);

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -0,0 +1,113 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { SelectableWallet } from '../../containers/ConfirmWallets/types';
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+const Row = styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap',
+});
+
+const Circle = styled('div', {
+  width: 12,
+  height: 12,
+  borderRadius: 6,
+  border: '1px solid $neutrals400',
+  position: 'absolute',
+  top: 12,
+  right: 12,
+  variants: {
+    checked: {
+      true: {
+        borderColor: '$success',
+      },
+      false: {
+        borderColor: '$neutrals400',
+      },
+    },
+  },
+});
+const SolidCircle = styled('div', {
+  width: 6,
+  margin: '20% auto',
+  height: 6,
+  borderRadius: 3,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: '$success',
+      },
+      false: {
+        backgroundColor: '$neutrals400',
+      },
+    },
+  },
+});
+const Container = styled('div', {
+  border: '1.5px solid',
+  borderRadius: '$5',
+  padding: '$12',
+  flexBasis: 'calc(33.33% - 10px)',
+  margin: 5,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  width: 124,
+  height: 92,
+  cursor: 'pointer',
+  position: 'relative',
+  variants: {
+    checked: {
+      true: {
+        borderColor: '$success',
+        color: '$success',
+      },
+      false: {
+        borderColor: '$neutrals400',
+        color: '$neutrals400',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  list: SelectableWallet[];
+  onChange: (w: SelectableWallet) => void;
+}
+
+export function SelectableWalletList({
+  list,
+  onChange,
+}: PropsWithChildren<PropTypes>) {
+  const [active, setActive] = useState<string>(
+    list.find((item) => item.selected)?.walletType || ''
+  );
+  const onClick = (w: SelectableWallet) => {
+    setActive(w.walletType);
+    onChange(w);
+  };
+
+  useEffect(() => {
+    setActive(list.find((item) => item.selected)?.walletType || '');
+  }, [list]);
+
+  return (
+    <Row>
+      {list.map((w, index) => {
+        const checked = active === w.walletType;
+        return (
+          <Container
+            checked={checked}
+            onClick={onClick.bind(null, w)}
+            key={index}
+          >
+            <img src={w.image} alt={w.walletType} width={24} height={24} />
+            <Typography variant="body2">{w.walletType}</Typography>
+            <Circle checked={checked}>
+              <SolidCircle checked={checked} />
+            </Circle>
+          </Container>
+        );
+      })}
+    </Row>
+  );
+}

package/src/components/SelectableWalletList/index.ts

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

package/src/components/SelectableWalletList/mock.ts

@@ -0,0 +1,12 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+import { SelectableWallet } from '../../containers/ConfirmWallets/types';
+
+export const data: SelectableWallet[] = [
+  {
+    blockchain: 'BSC',
+    walletType: WalletType.META_MASK,
+    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
+    image: 'https://app.rango.exchange/wallets/metamask.svg',
+    selected: true,
+  },
+];

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Settings, PropTypes } from './Settings';
+import { SwapContainer } from '../SwapContainer/SwapContainer';
+import { liquiditySources } from '../LiquiditySourceList/mockData';
+
+export default {
+  title: 'Settings',
+  component: Settings,
+  argTypes: {
+    slippages: {
+      defaultValue: [0.5, 1, 3, 5, 8, 13, 20],
+    },
+    selectedSlippage: { defaultValue: 3 },
+    liquiditySources: {
+      defaultValue: liquiditySources,
+    },
+    selectedLiquiditySources: {
+      defaultValue: liquiditySources.slice(0, 5),
+    },
+    minSlippage: {
+      defaultValue: 1,
+    },
+    maxSlippage: {
+      defaultValue: 10,
+    },
+  },
+} as ComponentMeta<typeof Settings>;
+
+export const Main = (args: PropTypes) => (
+  <SwapContainer>
+    <Settings {...args} />
+  </SwapContainer>
+);

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,160 @@
+import { styled } from '../../theme';
+import React, { useState } from 'react';
+import { AngleRightIcon } from '../Icon';
+import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+import { Typography } from '../Typography';
+import { Chip } from '../Chip';
+import { LiquiditySource } from '../../types/meta';
+import { TextField } from '../TextField';
+import { Radio } from '../Radio';
+
+const BaseContainer = styled('div', {
+  borderRadius: '$5',
+  backgroundColor: '$neutrals200',
+  padding: '$16',
+});
+
+const SlippageChipsContainer = styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginTop: '$16',
+});
+
+const LiquiditySourceContainer = styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+  cursor: 'pointer',
+});
+
+const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '8px' });
+
+const LiquiditySourceNumber = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const ThemesContainer = styled(BaseContainer, {
+  marginTop: '$32',
+});
+
+type Theme = 'dark' | 'light' | 'auto';
+
+export interface PropTypes {
+  slippages: number[];
+  selectedSlippage: number;
+  customSlippage: number;
+  maxSlippage: number;
+  minSlippage: number;
+  liquiditySources: LiquiditySource[];
+  onLiquiditySourcesClick: () => void;
+  selectedLiquiditySources: LiquiditySource[];
+  onSlippageChange: (slippage: number) => void;
+  onCustomSlippageChange: (customSlippage: number | null) => void;
+  selectedTheme: Theme;
+  onThemeChange: (theme: Theme) => void;
+  onBack: () => void;
+}
+
+export function Settings(props: PropTypes) {
+  const {
+    slippages,
+    selectedLiquiditySources,
+    liquiditySources,
+    onSlippageChange,
+    onLiquiditySourcesClick,
+    onBack,
+    customSlippage,
+    onCustomSlippageChange,
+    maxSlippage,
+    minSlippage,
+    selectedTheme,
+    onThemeChange,
+  } = props;
+
+  const [selectedSlippage, setSelectedSlippage] = useState(
+    props.selectedSlippage
+  );
+
+  const changeSlippage = (slippage: number) => {
+    setSelectedSlippage(slippage);
+    onSlippageChange(slippage);
+  };
+
+  const PageContent = (
+    <>
+      <BaseContainer>
+        <Typography variant="body1">Slippage tolerance per swap</Typography>
+        <SlippageChipsContainer>
+          {slippages.map((slippage, index) => (
+            <Chip
+              key={index}
+              onClick={() => {
+                if (customSlippage) onCustomSlippageChange(null);
+                changeSlippage(slippage);
+              }}
+              selected={!customSlippage && slippage === selectedSlippage}
+              label={`${slippage.toString()} %`}
+              style={{
+                marginRight: '8px',
+              }}
+            />
+          ))}
+          <TextField
+            type="number"
+            value={customSlippage}
+            onChange={(event) => {
+              const parsedValue = parseFloat(event.target.value);
+              if (
+                !parsedValue ||
+                (parsedValue >= minSlippage && parsedValue <= maxSlippage)
+              )
+                onCustomSlippageChange(parsedValue);
+            }}
+            suffix={
+              customSlippage && <Typography variant="body2">%</Typography>
+            }
+            size="small"
+            placeholder="Custom"
+            style={{
+              width: '128px',
+              flexGrow: 'initial',
+              borderColor: customSlippage ? '$success' : 'initial',
+            }}
+          />
+        </SlippageChipsContainer>
+      </BaseContainer>
+      <ThemesContainer>
+        <Typography variant="body2">Theme</Typography>
+        <Radio
+          defaultValue={selectedTheme}
+          options={[
+            { value: 'dark', label: 'Dark' },
+            { value: 'light', label: 'Light' },
+            { value: 'auto', label: 'Auto' },
+          ]}
+          onChange={(value) => onThemeChange(value as Theme)}
+          direction="horizontal"
+          style={{ marginTop: '$24' }}
+        />
+      </ThemesContainer>
+      <LiquiditySourceContainer onClick={onLiquiditySourcesClick}>
+        <Typography variant="body1">Liquidity Sources</Typography>
+        <LiquiditySourceNumber onClick={onLiquiditySourcesClick}>
+          <Typography variant="body2">{`( ${selectedLiquiditySources.length} / ${liquiditySources.length} )`}</Typography>
+          <StyledAngleRight />
+        </LiquiditySourceNumber>
+      </LiquiditySourceContainer>
+    </>
+  );
+
+  return (
+    <SecondaryPage
+      title="Settings"
+      textField={false}
+      Content={PageContent}
+      onBack={onBack}
+    />
+  );
+}

package/src/components/Settings/index.ts

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

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Skeleton, PropTypes } from './Skeleton';
+
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    width: {
+      name: 'width',
+      control: { type: 'select' },
+      options: [20, 24, 36, 48],
+      defaultValue: 20,
+    },
+    height: {
+      name: 'height',
+      control: { type: 'select' },
+      options: [20, 24, 36, 48],
+      defaultValue: 20,
+    },
+  },
+} as ComponentMeta<typeof Skeleton>;
+
+export const Main = (props: PropTypes) => <Skeleton {...props} />;

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { keyframes, styled } from '../../theme';
+
+const waveSquares = keyframes({
+  '0%': {
+    backgroundPosition: '-468px 0',
+  },
+  '100%': {
+    backgroundPosition: '468px 0',
+  },
+});
+
+const SkeletonContainer = styled('div', {
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  background: `linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)`,
+  backgroundSize: '800px 100px',
+  animation: `${waveSquares} 2s infinite ease-out`,
+  variants: {
+    width: {
+      16: {
+        width: '$16',
+      },
+      20: {
+        width: '$20',
+      },
+      24: {
+        width: '$24',
+      },
+      36: {
+        width: '$36',
+      },
+      48: {
+        width: '$48',
+      },
+    },
+    height: {
+      16: {
+        height: '$16',
+      },
+      20: {
+        height: '$20',
+      },
+      24: {
+        height: '$24',
+      },
+      36: {
+        height: '$36',
+      },
+      48: {
+        height: '$48',
+      },
+      94: {
+        height: 94,
+      },
+    },
+  },
+});
+export interface PropTypes {
+  width?: 20 | 24 | 36 | 48;
+  height?: 20 | 24 | 36 | 48 | 94;
+}
+
+export function Skeleton({ width = 20, height = 20 }: PropTypes) {
+  return <SkeletonContainer width={width} height={height} />;
+}

package/src/components/Skeleton/index.ts

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

package/src/components/Spacer/Spacer.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Spacer, PropTypes } from './Spacer';
+
+export default {
+  title: 'Components/Spacer',
+  component: Spacer,
+  argTypes: {
+    size: {
+      name: 'size',
+      control: { type: 'select' },
+      options: [12, 16, 18, 20],
+      defaultValue: 12,
+    },
+  },
+} as ComponentMeta<typeof Spacer>;
+
+export const Main = (props: PropTypes) => <Spacer {...props} />;

package/src/components/Spacer/Spacer.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const SpacerContainer = styled('div', {
+  variants: {
+    size: {
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
+        height: '$16',
+      },
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
+        height: '$18',
+      },
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
+        height: '$20',
+      },
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
+        height: '$24',
+      },
+    },
+  ],
+});
+export interface PropTypes {
+  size?: 12 | 16 | 18 | 20 | 24;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export function Spacer({ size = 12, direction = 'horizontal' }: PropTypes) {
+  return <SpacerContainer size={size} direction={direction} />;
+}

package/src/components/Spacer/index.ts

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

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Spinner, PropTypes } from './Spinner';
+
+export default {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    color: {
+      name: 'color',
+      control: { type: 'select' },
+      options: ['primary', 'error', 'warning', 'success', 'black', 'white'],
+      defaultValue: 'primary',
+    },
+
+    size: {
+      name: 'size',
+      control: { type: 'radio' },
+      options: [16, 20, 24],
+      defaultValue: 16,
+    },
+  },
+} as ComponentMeta<typeof Spinner>;
+
+export const Main = (props: PropTypes) => <Spinner {...props} />;