@rango-dev/ui 0.1.10-next.69

package/src/components/Icon/SignatureIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const SignatureIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, color, ...props }) => {
+    return (
+      <SvgWithFillColor
+        width={size}
+        height={size}
+        color={color}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 122.88 107.95"
+        xmlSpace="preserve"
+        className="_icon"
+        {...props}
+      >
+        <path
+          d="M82.19 0c1.22-.01 2.27.4 3.18 1.27l13.27 12.7c.86.82 1.28 1.91 1.3 3.11.02 1.22-.34 2.33-1.18 3.18l-7.06 7.35L72.09 8.67l6.99-7.28C79.94.5 80.98.02 82.19 0zM20.08 68.29a4.536 4.536 0 1 1 2.67 8.67c-6.98 2.14-11.66 6.28-13.21 10.17-.41 1.04-.55 1.99-.39 2.77.12.59.48 1.13 1.07 1.56 2.55 1.86 8.04 2.34 17.26.1 5.46-1.33 11.31-3.13 16.49-4.73 5.29-1.63 9.91-3.06 13.12-3.66 5.92-1.1 11.83-1.85 16.6-1.61 6.26.31 10.96 2.32 12.57 7.13 1.04 3.11.75 5.81.49 8.23-.09.87-.18 1.68-.14 2.21 0 .02.95-.05 5.53-.41 5.3-.42 10.79-2.51 16.21-4.58 2.78-1.06 5.54-2.11 8.67-3.07 2.4-.73 4.93.63 5.65 3.02.73 2.4-.63 4.93-3.02 5.65-2.43.74-5.24 1.82-8.06 2.89-6.04 2.3-12.14 4.63-18.74 5.15-12.07.95-14.87-2.46-15.3-7.95-.1-1.29.03-2.54.17-3.88.16-1.5.34-3.18-.07-4.39-.18-.54-1.89-.82-4.39-.94-3.99-.2-9.22.48-14.54 1.47-2.65.49-7.05 1.85-12.09 3.41-5.27 1.63-11.22 3.46-17.02 4.87-12.14 2.95-20.21 1.7-24.73-1.6-2.54-1.85-4.05-4.27-4.63-7-.54-2.54-.23-5.28.85-8 2.46-6.14 9.23-12.5 18.98-15.48zm21.19-19.84L53.3 60.02l-14.71 3.95c-.53.1-.74-.11-.65-.6l3.33-14.92zm24.6-33.34 19.59 18.87L58.7 62.23l-23.98 6.43c-.86.17-1.2-.17-1.06-.98l5.43-24.31 26.78-28.26z"
+          style={{
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+          }}
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+SignatureIcon.toString = () => '._icon';

package/src/components/Icon/SwapWalletIcon.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const SwapWalletIcon = 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="M5.244 7.205a3.018 3.018 0 0 0-3.01 3.01v1.73a.75.75 0 0 1-1.5 0v-1.73a4.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-.359 0-.674.14-.902.373l-.014.014c-.266.26-.414.63-.377 1.022v.009c.054.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.51h-5.48a.75.75 0 0 1 0-1.5h5.48a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.777-1.03-2.907-2.553a2.758 2.758 0 0 1 .817-2.227 2.743 2.743 0 0 1 1.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H5.244Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.084 2.655a1.15 1.15 0 0 0-1.554-1.078l-7.94 3a2.098 2.098 0 0 0-1.356 1.968v4.57a.75.75 0 0 1-1.5 0v-4.57c0-1.5.922-2.84 2.325-3.371l7.94-3c1.732-.657 3.585.629 3.585 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM18.463 12.405c-.359 0-.675.14-.902.374l-.014.013c-.266.26-.415.63-.377 1.022v.01c.053.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.758 2.758 0 0 1 .816-2.227Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.234 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM1.234 15.205a.75.75 0 0 1 .75-.75h5.34a1.91 1.91 0 0 1 1.91 1.91v1.28a.75.75 0 0 1-1.5 0v-1.28a.41.41 0 0 0-.41-.41h-5.34a.75.75 0 0 1-.75-.75Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.735 13.455a.75.75 0 0 1 0 1.06l-.69.69.69.69a.75.75 0 1 1-1.061 1.06l-1.22-1.22a.75.75 0 0 1 0-1.06l1.22-1.22a.75.75 0 0 1 1.06 0ZM1.984 17.296a.75.75 0 0 1 .75.75v1.28c0 .225.185.41.41.41h5.34a.75.75 0 0 1 0 1.5h-5.34a1.91 1.91 0 0 1-1.91-1.91v-1.28a.75.75 0 0 1 .75-.75Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.735 18.735a.75.75 0 0 1 1.061 0l1.22 1.22a.75.75 0 0 1 0 1.061l-1.22 1.22a.75.75 0 1 1-1.06-1.06l.689-.69-.69-.69a.75.75 0 0 1 0-1.06Z"
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+SwapWalletIcon.toString = () => '._icon';

package/src/components/Icon/TimeIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const TimeIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        width={size}
+        height={size}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <circle cx={10} cy={10} r={7.25} strokeWidth={1.5} />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.134 6.6a.6.6 0 0 0-1.2 0v4.27a.6.6 0 0 0 .28.507c.009.01.018.019.029.028l2.59 2.373a.472.472 0 0 0 .753-.109.763.763 0 0 0-.133-.919l-2.319-2.123V6.6Z"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+TimeIcon.toString = () => '._icon';

package/src/components/Icon/TrashIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const TrashIcon = 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="M21.5 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3l-2.04.2M9 4.97l.22-1.31C9.38 2.71 9.5 2 11.19 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M19.35 9.14l-.65 10.07c-.11 1.57-.2 2.79-2.99 2.79H9.29c-2.79 0-2.88-1.22-2.99-2.79L5.65 9.14M10.83 16.5h3.33M10 12.5h5"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+TrashIcon.toString = () => '._icon';

package/src/components/Icon/TryAgainIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const TryAgainIcon = 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="M22 12c0 5.52-4.48 10-10 10s-8.89-5.56-8.89-5.56m0 0h4.52m-4.52 0v5M2 12C2 6.48 6.44 2 12 2c6.67 0 10 5.56 10 5.56m0 0v-5m0 5h-4.44"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+TryAgainIcon.toString = () => '._icon';

package/src/components/Icon/VerticalSwapIcon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const VerticalSwapIcon = 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="m13.82 6.85 3.04 3.04M13.82 17.15V6.85M10.18 17.15l-3.04-3.04M10.18 6.85v10.3"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+VerticalSwapIcon.toString = () => '._icon';

package/src/components/Icon/WalletIconIcon.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const WalletIcon = 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="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,35 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const WarningIcon = 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 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,44 @@
+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 { 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 { BagIcon } from './BagIcon';
+
+export { TimeIcon } from './TimeIcon';
+export { CloseIcon } from './CloseIcon';
+export { SignatureIcon } from './SignatureIcon';

package/src/components/Icon/types.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+export interface IconProps extends React.SVGAttributes<SVGElement> {
+  size?: 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';

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,114 @@
+import { CSSProperties } from '@stitches/react';
+import React, { useState } from 'react';
+import { styled } from '../../theme';
+import { LiquiditySource } from '../../types/meta';
+import { Button } from '../Button/Button';
+import { Spacer } from '../Spacer';
+import { Switch } from '../Switch';
+import { Typography } from '../Typography';
+
+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 LiquiditySourceType = styled(Typography, {
+  position: 'sticky',
+  top: '0',
+  marginTop: '$8',
+  marginBottom: '$8',
+  backgroundColor: '$background',
+  zIndex: '9999',
+  paddingTop: '$8',
+  paddingBottom: '$8',
+});
+
+const LiquidityImage = styled('img', {
+  width: '$20',
+  maxHeight: '$20',
+  marginRight: '$16',
+});
+
+export interface PropTypes {
+  list: LiquiditySource[];
+  onChange: (liquiditySource: LiquiditySource) => void;
+  listContainerStyle?: CSSProperties;
+}
+
+export function LiquiditySourceList(props: PropTypes) {
+  const { list, onChange, listContainerStyle } = 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 LiquiditySourceItem = ({
+    liquiditySource,
+    selected,
+  }: {
+    liquiditySource: LiquiditySource;
+    selected: boolean;
+  }) => {
+    return (
+      <Button
+        size="large"
+        align="start"
+        variant="outlined"
+        prefix={<LiquidityImage src={liquiditySource.logo} />}
+        suffix={<Switch checked={selected} />}
+        style={{ marginBottom: '12px' }}
+        type={selected ? 'primary' : undefined}
+        onClick={changeLiquiditySources.bind(null, liquiditySource)}
+      >
+        <Typography variant="body1">{liquiditySource.title}</Typography>
+      </Button>
+    );
+  };
+
+  const isSelected = (liquiditySource: LiquiditySource) =>
+    !!selected.find((item) => liquiditySource.title === item.title);
+
+  return (
+    <div style={{ height: '450px', ...listContainerStyle }}>
+      <div>
+        <LiquiditySourceType variant="h5">Bridges</LiquiditySourceType>
+        <Spacer size={16} direction="vertical"/>
+        {groupLiquiditySources(list).bridge.map((liquiditySource, index) => (
+          <LiquiditySourceItem
+            liquiditySource={liquiditySource}
+            key={index}
+            selected={isSelected(liquiditySource)}
+          />
+        ))}
+      </div>
+      <div>
+        <LiquiditySourceType variant="h5">Exchanges</LiquiditySourceType>
+        <Spacer size={16} direction="vertical" />
+
+        {groupLiquiditySources(list).exchange.map((liquiditySource, index) => (
+          <LiquiditySourceItem
+            liquiditySource={liquiditySource}
+            key={index}
+            selected={isSelected(liquiditySource)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/LiquiditySourceList/index.ts

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