@rango-dev/ui 0.1.10-next.102

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -0,0 +1,68 @@
+import React, { ReactNode, useState } from 'react';
+import { styled } from '../../theme';
+import { Divider } from '../Divider';
+import { Header } from '../Header';
+import { SearchIcon } from '../Icon';
+import { TextField } from '../TextField';
+
+export type PropTypes = (
+  | {
+      textField: true;
+      children?: (searchedFor: string) => ReactNode;
+      textFieldPlaceholder: string;
+    }
+  | {
+      textField: false;
+      children?: ReactNode;
+    }
+) & {
+  title?: string;
+  onBack?: () => void;
+  TopButton?: React.ReactNode;
+  Footer?: React.ReactNode;
+  hasHeader?: boolean;
+};
+
+const ContentContainer = styled('div', {
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1',
+  padding: '0 $4',
+});
+
+const TextFieldContainer = styled('div', {
+  padding: '1px',
+});
+
+export function SecondaryPage(props: PropTypes) {
+  const { title, Footer, TopButton, onBack, hasHeader = true } = props;
+  const [searchedFor, setSearchedFor] = useState('');
+
+  return (
+    <>
+      {hasHeader && (
+        <Header onBack={onBack} title={title || ''} suffix={TopButton} />
+      )}
+
+      <ContentContainer>
+        {props.textField && (
+          <TextFieldContainer>
+            <TextField
+              size="large"
+              prefix={<SearchIcon size={24} />}
+              placeholder={props.textFieldPlaceholder}
+              onChange={(event) => setSearchedFor(event.target.value)}
+              value={searchedFor}
+              autoFocus
+            />
+            <Divider size={16} />
+          </TextFieldContainer>
+        )}
+        {props.textField && props.children?.(searchedFor)}
+        {!props.textField && props.children}
+      </ContentContainer>
+      {Footer}
+    </>
+  );
+}

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,118 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { styled } from '../../theme';
+import { SelectableWallet } from '../../types';
+import { Typography } from '../Typography';
+import { getConciseAddress } from '../../helper';
+
+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.name}</Typography>
+            <Typography variant="caption">
+              {getConciseAddress(w.address)}
+            </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,13 @@
+import { Network, WalletType } from '@rango-dev/wallets-shared';
+import { SelectableWallet } from '../../types';
+
+export const data: SelectableWallet[] = [
+  {
+    chain: Network.BTC,
+    name: Network.BTC,
+    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,208 @@
+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, LoadingStatus } from '../../types/meta';
+import { TextField } from '../TextField';
+import { Radio } from '../Radio';
+import { Switch } from '../Switch';
+import { Button } from '../Button';
+
+const BaseContainer = styled('div', {
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  padding: '$16',
+});
+
+const Title = styled(Typography, { marginBottom: '$16' });
+
+const SlippageChipsContainer = styled('div', {
+  display: 'grid',
+  rowGap: '$16',
+  gridTemplateColumns: 'repeat(auto-fill, 64px)',
+});
+
+const LiquiditySourceContainer = styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+  cursor: 'pointer',
+});
+const InfiniteContainer = styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+});
+
+const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
+
+const LiquiditySourceNumber = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const ThemesContainer = styled(BaseContainer, {
+  marginTop: '$32',
+});
+const Head = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$16',
+});
+
+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;
+  infiniteApprove: boolean;
+  toggleInfiniteApprove: (infinite: boolean) => void;
+  loadingStatus: LoadingStatus;
+}
+
+export function Settings(props: PropTypes) {
+  const {
+    slippages,
+    selectedLiquiditySources,
+    liquiditySources,
+    onSlippageChange,
+    onLiquiditySourcesClick,
+    onBack,
+    customSlippage,
+    onCustomSlippageChange,
+    maxSlippage,
+    minSlippage,
+    selectedTheme,
+    onThemeChange,
+    toggleInfiniteApprove,
+    infiniteApprove,
+    loadingStatus,
+  } = props;
+
+  const [selectedSlippage, setSelectedSlippage] = useState(
+    props.selectedSlippage
+  );
+
+  const changeSlippage = (slippage: number) => {
+    setSelectedSlippage(slippage);
+    onSlippageChange(slippage);
+  };
+
+  const PageContent = (
+    <>
+      <BaseContainer>
+        <Head>
+          <Typography variant="body1">Slippage tolerance per swap</Typography>
+          {customSlippage ? (
+            <Typography variant="caption" color="error">
+              {customSlippage}% Custom
+            </Typography>
+          ) : undefined}
+        </Head>
+        <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',
+            }}
+          />
+        </SlippageChipsContainer>
+      </BaseContainer>
+      <ThemesContainer>
+        <Title variant="body2">Theme</Title>
+        <Radio
+          value={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>
+      <InfiniteContainer>
+        <Typography variant="body1">Infinite Approval</Typography>
+        <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
+      </InfiniteContainer>
+      <LiquiditySourceContainer>
+        <Button
+          onClick={onLiquiditySourcesClick}
+          align="start"
+          variant="ghost"
+          loading={loadingStatus === 'loading'}
+          suffix={
+            <LiquiditySourceNumber>
+              {loadingStatus === 'success' && (
+                <Typography variant="body2" color="neutrals800">
+                  {liquiditySources.length !== selectedLiquiditySources.length
+                    ? `${selectedLiquiditySources.length} / ${liquiditySources.length}`
+                    : liquiditySources.length}
+                </Typography>
+              )}
+              {loadingStatus === 'failed' && (
+                <Typography variant="body2" color="$error500">
+                  Loading failed
+                </Typography>
+              )}
+              <StyledAngleRight />
+            </LiquiditySourceNumber>
+          }
+        >
+          <Typography variant="body1">Liquidity Sources</Typography>
+        </Button>
+      </LiquiditySourceContainer>
+    </>
+  );
+
+  return (
+    <SecondaryPage title="Settings" textField={false} onBack={onBack}>
+      {PageContent}
+    </SecondaryPage>
+  );
+}

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,31 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Typography } from '../Typography';
+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,
+    },
+    direction: {
+      name: 'direction',
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+      defaultValue: 'horizontal',
+    },
+  },
+} as ComponentMeta<typeof Spacer>;
+
+export const Main = (props: PropTypes) => (
+  <div style={{ display: props.direction === 'horizontal' ? 'flex' : 'block' }}>
+    <Typography variant="body1">spacer </Typography>
+    <Spacer {...props} />
+    <Typography variant="body1">spacer</Typography>
+  </div>
+);