@rango-dev/ui 0.1.10-next.102

package/src/components/Icon/WalletIconIcon.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const WalletIcon: React.FC<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="M4.51 7.205a3.018 3.018 0 0 0-3.01 3.01v6.73a3.018 3.018 0 0 0 3.01 3.01h11.48a3.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.971-.82H19v-.69a3.018 3.018 0 0 0-3.01-3.01H4.51ZM0 10.215a4.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-.013.014c-.266.26-.415.63-.377 1.022v.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.51H4.51A4.518 4.518 0 0 1 0 16.945v-6.73Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.35 2.655a1.15 1.15 0 0 0-1.554-1.079l-7.94 3A2.098 2.098 0 0 0 1.5 6.547v4.569a.75.75 0 1 1-1.5 0v-4.57c0-1.5.922-2.84 2.325-3.371l7.94-3s-.001 0 0 0c1.732-.657 3.585.629 3.585 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM17.729 12.405c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.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.778-1.03-2.907-2.553a2.759 2.759 0 0 1 .816-2.227Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Z"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+WalletIcon.toString = () => '._icon';

package/src/components/Icon/WarningIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const WarningIcon: 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 9v5M12 21.41H5.94c-3.47 0-4.92-2.48-3.24-5.51l3.12-5.62L8.76 5c1.78-3.21 4.7-3.21 6.48 0l2.94 5.29 3.12 5.62c1.68 3.03.22 5.51-3.24 5.51H12v-.01Z"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.994 17h.01"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+WarningIcon.toString = () => '._icon';

package/src/components/Icon/common.ts

@@ -0,0 +1,69 @@
+import { darkTheme, styled } from '../../theme';
+
+export const SvgWithStrokeColor = styled('svg', {
+  stroke: '$foreground',
+  variants: {
+    color: {
+      primary: {
+        stroke: '$primary',
+      },
+      error: {
+        stroke: '$error',
+      },
+      warning: {
+        stroke: '$warning',
+      },
+      success: {
+        stroke: '$success',
+      },
+      black: {
+        $$color: '$colors$foreground',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$background',
+        },
+        stroke: '$$color',
+      },
+      white: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        stroke: '$$color',
+      },
+    },
+  },
+});
+
+export const SvgWithFillColor = styled('svg', {
+  fill: '$foreground',
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary',
+      },
+      error: {
+        fill: '$error',
+      },
+      warning: {
+        fill: '$warning',
+      },
+      success: {
+        fill: '$success',
+      },
+      black: {
+        $$color: '$colors$foreground',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$background',
+        },
+        fill: '$$color',
+      },
+      white: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        fill: '$$color',
+      },
+    },
+  },
+});

package/src/components/Icon/index.ts

@@ -0,0 +1,48 @@
+export { DeleteCircleIcon } from './DeleteCircleIcon';
+export { CheckSquareIcon } from './CheckSquareIcon';
+export { AddIcon } from './AddIcon';
+export { InfoCircleIcon } from './InfoCircleIcon';
+export { AddCircleIcon } from './AddCircleIcon';
+export { MinusCircleIcon } from './MinusCircleIcon';
+export { CheckCircleIcon } from './CheckCircleIcon';
+export { CheckIcon } from './CheckIcon';
+
+export { BanIcon } from './BanIcon';
+export { WarningIcon } from './WarningIcon';
+
+export { HistoryIcon } from './HistoryIcon';
+export { GasIcon } from './GasIcon';
+export { SettingsIcon } from './SettingIcon';
+export { TrashIcon } from './TrashIcon';
+
+export { SearchMinusIcon } from './SearchMinusIcon';
+export { SearchIcon } from './SearchIcon';
+
+export { AngleRightIcon } from './AngleRightIcon';
+export { AngleUpIcon } from './AngleUpIcon';
+export { AngleDownIcon } from './AngleDownIcon';
+export { AngleLeftIcon } from './AngleLeftIcon';
+export { DownloadIcon } from './DownloadIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
+export { ArrowRightIcon } from './ArrowRightIcon';
+
+export { RetryRightIcon } from './RetryRightIcon';
+export { RetryLeftIcon } from './RetryLeftIcon';
+export { TryAgainIcon } from './TryAgainIcon';
+export { VerticalSwapIcon } from './VerticalSwapIcon';
+export { HorizontalSwapIcon } from './HorizontalSwapIcon';
+export { RetryIcon } from './RetryIcon';
+
+export { WalletIcon } from './WalletIconIcon';
+export { AddWalletIcon } from './AddWalletIcon';
+export { DeleteWalletIcon } from './DeleteWalletIcon';
+export { CheckWalletIcon } from './CheckWalletIcon';
+export { SwapWalletIcon } from './SwapWalletIcon';
+export { DisconnectIcon } from './DisconnectIcon';
+
+export { BagIcon } from './BagIcon';
+
+export { TimeIcon } from './TimeIcon';
+export { CloseIcon } from './CloseIcon';
+export { SignatureIcon } from './SignatureIcon';
+export { CopyIcon } from './CopyIcon';

package/src/components/Icon/types.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+export interface IconProps extends React.SVGAttributes<SVGElement> {
+  size?: 12 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
+  color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+}
+
+export type Icon =
+  | 'DeleteCircleIcon'
+  | 'CheckSquareIcon'
+  | 'AddIcon'
+  | 'InfoCircleIcon'
+  | 'AddCircleIcon'
+  | 'MinusCircleIcon'
+  | 'CheckCircleIcon'
+  | 'CheckIcon'
+  | 'BanIcon'
+  | 'WarningIcon'
+  | 'HistoryIcon'
+  | 'GasIcon'
+  | 'SettingsIcon'
+  | 'TrashIcon'
+  | 'SearchMinusIcon'
+  | 'SearchIcon'
+  | 'AngleRightIcon'
+  | 'AngleUpIcon'
+  | 'AngleDownIcon'
+  | 'AngleLeftIcon'
+  | 'DownloadIcon'
+  | 'RetryRightIcon'
+  | 'RetryLeftIcon'
+  | 'TryAgainIcon'
+  | 'VerticalSwapIcon'
+  | 'HorizontalSwapIcon'
+  | 'RetryIcon'
+  | 'WalletIcon'
+  | 'AddWalletIcon'
+  | 'DeleteWalletIcon'
+  | 'CheckWalletIcon'
+  | 'SwapWalletIcon'
+  | 'BagIcon'
+  | 'TimeIcon'
+  | 'CloseIcon'
+  | 'SignatureIcon'
+  | 'CopyIcon';

package/src/components/LiquiditySourceList/LiquiditySource.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { LiquiditySourceList, PropTypes } from './LiquiditySourceList';
+import { liquiditySources } from './mockData';
+
+export default {
+  title: 'Liquidity Source List',
+  component: LiquiditySourceList,
+} as ComponentMeta<typeof LiquiditySourceList>;
+
+export const Main = (args: PropTypes) => (
+  <LiquiditySourceList {...args} list={liquiditySources} />
+);

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -0,0 +1,195 @@
+import { CSSProperties } from '@stitches/react';
+import React, { useEffect, useState } from 'react';
+import { styled } from '../../theme';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
+import { Button } from '../Button/Button';
+import { Spacer } from '../Spacer';
+import { Switch } from '../Switch';
+import { Typography } from '../Typography';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
+
+const groupLiquiditySources = (
+  liquiditySources: LiquiditySource[]
+): { [key in 'bridge' | 'exchange']: LiquiditySource[] } => ({
+  bridge: liquiditySources.filter(
+    (liquiditySource) =>
+      liquiditySource.type === 'BRIDGE' || liquiditySource.type === 'AGGREGATOR'
+  ),
+  exchange: liquiditySources.filter(
+    (liquiditySource) => liquiditySource.type === 'DEX'
+  ),
+});
+
+const MainContainer = styled('div', {
+  variants: {
+    loaded: {
+      true: {
+        overflowY: 'auto',
+      },
+    },
+  },
+});
+
+const LiquiditySourceType = styled('div', {
+  position: 'sticky',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  top: '0',
+  backgroundColor: '$background',
+  zIndex: '9999',
+  paddingTop: '$8',
+  paddingBottom: '$8',
+});
+
+const LiquidityImage = styled('img', {
+  width: '$20',
+  maxHeight: '$20',
+  marginRight: '$16',
+});
+
+const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export interface PropTypes {
+  list: LiquiditySource[];
+  onChange: (liquiditySource: LiquiditySource) => void;
+  listContainerStyle?: CSSProperties;
+  loadingStatus: LoadingStatus;
+  searchedFor: string;
+}
+
+export function LiquiditySourceList(props: PropTypes) {
+  const { list, onChange, listContainerStyle, loadingStatus, searchedFor } =
+    props;
+
+  const [selected, setSelected] = useState(
+    list.filter((item) => item.selected)
+  );
+
+  const changeLiquiditySources = (clickedItem: LiquiditySource) => {
+    clickedItem.selected = !clickedItem.selected;
+    setSelected((prevState) => {
+      if (clickedItem.selected) return [...prevState, clickedItem];
+      return prevState.filter((item) => item.title != clickedItem.title);
+    });
+    onChange(clickedItem);
+  };
+
+  const isSelected = (liquiditySource: LiquiditySource) =>
+    !!selected.find((item) => liquiditySource.title === item.title);
+
+  useEffect(() => {
+    setSelected(list.filter((item) => item.selected));
+  }, [list]);
+
+  const sections = groupLiquiditySources(list);
+  const bridges = sections.bridge;
+  const exchanges = sections.exchange;
+
+  const totalBridges = bridges.length;
+  const totalExchanges = exchanges.length;
+  // TODO: This is not performant
+  const totalSelectedBridges = bridges.filter(isSelected).length;
+  const totalSelectedExchanges = exchanges.filter(isSelected).length;
+
+  return (
+    <MainContainer
+      style={listContainerStyle}
+      loaded={loadingStatus === 'success'}
+    >
+      <div>
+        <LiquiditySourceType>
+          <Typography variant="h5">Bridges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedBridges === totalBridges
+              ? totalBridges
+              : `${totalSelectedBridges} / ${totalBridges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus === 'success' && (
+          <>
+            {totalBridges ? (
+              bridges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
+      </div>
+      <div>
+        <LiquiditySourceType>
+          <Typography variant="h5">Exchanges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedExchanges === totalExchanges
+              ? totalExchanges
+              : `${totalSelectedExchanges} / ${totalExchanges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus == 'success' && (
+          <>
+            {totalExchanges ? (
+              exchanges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
+      </div>
+    </MainContainer>
+  );
+}
+
+const LiquiditySourceItem = ({
+  liquiditySource,
+  selected,
+  onChange,
+}: {
+  liquiditySource: LiquiditySource;
+  selected: boolean;
+  onChange: (clickedItem: LiquiditySource) => void;
+}) => (
+  <Button
+    size="large"
+    align="start"
+    variant="outlined"
+    prefix={<LiquidityImage src={liquiditySource.logo} />}
+    suffix={<Switch checked={selected} />}
+    style={{ marginBottom: '12px' }}
+    onClick={onChange.bind(null, liquiditySource)}
+  >
+    <Typography variant="body1">{liquiditySource.title}</Typography>
+  </Button>
+);

package/src/components/LiquiditySourceList/index.ts

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