@rango-dev/ui 0.1.10-next.69

package/dist/ui.esm.js

@@ -0,0 +1,4028 @@
+import React__default, { forwardRef, createElement, useState, Fragment, useEffect, useRef } from 'react';
+import { Indicator, Root } from '@radix-ui/react-checkbox';
+import { createPortal } from 'react-dom';
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import { Root as Root$1, Thumb } from '@radix-ui/react-switch';
+import { Root as Root$2, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
+import { VariableSizeList } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { Provider, Root as Root$3, Portal, Trigger, Content as Content$1, Arrow as Arrow$1 } from '@radix-ui/react-tooltip';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+// TSDX + stiches doesn't work with import statement and has a bug.
+// Solution: (https://github.com/stitchesjs/stitches/issues/833#issuecomment-950707025)
+var _require = /*#__PURE__*/require('@stitches/react'),
+  createStitches = _require.createStitches;
+/* ----------------------- Values ----------------------- */
+var theme = {
+  colors: {
+    primary: '#5FA425',
+    primary100: '#9FC87C',
+    primary200: '#8FBF66',
+    primary300: '#7FB651',
+    primary400: '#6FAD3B',
+    primary500: '#5FA425',
+    primary600: '#4C831E',
+    primary700: '#396216',
+    primary800: '#26420F',
+    primary900: '#132107',
+    neutrals200: '#FAFAFA',
+    neutrals300: '#EAEAEA',
+    neutrals400: '#999999',
+    neutrals500: '#888888',
+    neutrals600: '#666666',
+    neutrals700: '#444444',
+    neutrals800: '#333333',
+    neutrals900: '#111111',
+    background: '#fff',
+    foreground: '#000',
+    success: '#0070F3',
+    success100: '#D3E5FF',
+    success300: '#3291FF',
+    success500: '#0070F3',
+    success700: '#0761D1',
+    warning: '#F5A623',
+    warning100: '#FFEFCF',
+    warning300: '#F7B955',
+    warning500: '#F5A623',
+    warning700: '#AB570A',
+    error: '#FF0000',
+    error100: '#F7D4D6',
+    error300: '#FF3333',
+    error500: '#FF0000',
+    error700: '#E60000'
+  },
+  space: {
+    2: '2px',
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    10: '10px',
+    12: '12px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    28: '28px',
+    30: '30px',
+    32: '32px'
+  },
+  fontSizes: {
+    10: '10px',
+    12: '12px',
+    14: '14px',
+    16: '16px',
+    18: '18px',
+    20: '20px',
+    24: '24px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    48: '48px'
+  },
+  fonts: {},
+  fontWeights: {
+    400: '400',
+    500: '500',
+    600: '600',
+    700: '700'
+  },
+  lineHeights: {},
+  letterSpacings: {},
+  sizes: {
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    12: '12px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    28: '28px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    48: '48px'
+  },
+  borderWidths: {},
+  borderStyles: {},
+  radii: {
+    5: '5px',
+    10: '10px'
+  },
+  shadows: {
+    s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
+  },
+  zIndices: {},
+  transitions: {}
+};
+var media = {
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)'
+};
+var utils = {
+  bc: function bc(value) {
+    return {
+      backgroundColor: value
+    };
+  }
+};
+/* ----------------------- End of Values ----------------------- */
+var typedCreateStiches = createStitches;
+// Note: it seems there is a bug on tsdx and when it compiles the code, it goes through an error
+// We can directly check it with `tsc` to see if the error is correct or not.
+// We `ignore` it for now, to get safety check on VSCode.
+// @ts-ignore
+var _typedCreateStiches = /*#__PURE__*/typedCreateStiches({
+    media: media,
+    theme: theme,
+    utils: utils
+  }),
+  styled = _typedCreateStiches.styled,
+  css = _typedCreateStiches.css,
+  createTheme = _typedCreateStiches.createTheme,
+  keyframes = _typedCreateStiches.keyframes,
+  globalCss = _typedCreateStiches.globalCss;
+var lightTheme = /*#__PURE__*/createTheme({});
+var darkTheme = /*#__PURE__*/createTheme({
+  colors: {
+    neutrals200: '#111111',
+    neutrals300: '#333333',
+    neutrals400: '#444444',
+    neutrals500: '#666666',
+    neutrals600: '#888888',
+    neutrals700: '#999999',
+    neutrals800: '#EAEAEA',
+    neutrals900: '#FAFAFA',
+    foreground: '#fff',
+    background: '#000'
+  },
+  shadows: {
+    s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
+  }
+});
+
+var _black, _white, _black2, _white2;
+var SvgWithStrokeColor = /*#__PURE__*/styled('svg', {
+  stroke: '$foreground',
+  variants: {
+    color: {
+      primary: {
+        stroke: '$primary'
+      },
+      error: {
+        stroke: '$error'
+      },
+      warning: {
+        stroke: '$warning'
+      },
+      success: {
+        stroke: '$success'
+      },
+      black: (_black = {
+        $$color: '$colors$foreground'
+      }, _black["." + darkTheme + " &"] = {
+        $$color: '$colors$background'
+      }, _black.stroke = '$$color', _black),
+      white: (_white = {
+        $$color: '$colors$background'
+      }, _white["." + darkTheme + " &"] = {
+        $$color: '$colors$foreground'
+      }, _white.stroke = '$$color', _white)
+    }
+  }
+});
+var SvgWithFillColor = /*#__PURE__*/styled('svg', {
+  fill: '$foreground',
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary'
+      },
+      error: {
+        fill: '$error'
+      },
+      warning: {
+        fill: '$warning'
+      },
+      success: {
+        fill: '$success'
+      },
+      black: (_black2 = {
+        $$color: '$colors$foreground'
+      }, _black2["." + darkTheme + " &"] = {
+        $$color: '$colors$background'
+      }, _black2.fill = '$$color', _black2),
+      white: (_white2 = {
+        $$color: '$colors$background'
+      }, _white2["." + darkTheme + " &"] = {
+        $$color: '$colors$foreground'
+      }, _white2.fill = '$$color', _white2)
+    }
+  }
+});
+
+var _excluded = ["size", "color"];
+var DeleteCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM9.17 14.83l5.66-5.66M14.83 14.83 9.17 9.17",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+DeleteCircleIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$1 = ["size", "color"];
+var CheckSquareIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), createElement("path", {
+    d: "m7.75 12 2.83 2.83 5.67-5.66",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+CheckSquareIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$2 = ["size", "color"];
+var AddIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M6 12h12M12 18V6",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+AddIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$3 = ["size", "color"];
+var InfoCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM12 8v5",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#fff"
+  }), createElement("path", {
+    d: "M11.994 16h.01",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#fff"
+  }));
+});
+InfoCircleIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$4 = ["size", "color"];
+var AddCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }));
+});
+AddCircleIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$5 = ["size", "color"];
+var MinusCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M11.92 22c5.5 0 10-4.5 10-10s-4.5-10-10-10-10 4.5-10 10 4.5 10 10 10ZM7.92 12h8",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+MinusCircleIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$6 = ["size", "color"];
+var CheckCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#fff"
+  }), createElement("path", {
+    d: "m7.75 12 2.83 2.83 5.67-5.66",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#fff"
+  }));
+});
+CheckCircleIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$7 = ["size", "color"];
+var CheckIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: color,
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+CheckIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$8 = ["size", "color"];
+var BanIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10ZM18.9 5l-14 14",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+BanIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$9 = ["size", "color"];
+var WarningIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }), createElement("path", {
+    d: "M11.994 17h.01",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+WarningIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$a = ["size", "color"];
+var HistoryIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
+  }));
+});
+HistoryIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$b = ["size", "color"];
+var GasIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M4 22V5c0-2 1.34-3 3-3h8c1.66 0 3 1 3 3v17H4ZM2.5 22h17",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), createElement("path", {
+    d: "M8.89 10h4.23c1.04 0 1.89-.5 1.89-1.89V6.88c0-1.39-.85-1.89-1.89-1.89H8.89C7.85 4.99 7 5.49 7 6.88v1.23C7 9.5 7.85 10 8.89 10ZM7 13h3M18 16.01l4.5-.01v-6l-2-1",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+GasIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$c = ["size", "color"];
+var SettingsIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M12.5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), createElement("path", {
+    d: "M2.5 12.88v-1.76c0-1.04.85-1.9 1.9-1.9 1.81 0 2.55-1.28 1.64-2.85-.52-.9-.21-2.07.7-2.59l1.73-.99c.79-.47 1.81-.19 2.28.6l.11.19c.9 1.57 2.38 1.57 3.29 0l.11-.19c.47-.79 1.49-1.07 2.28-.6l1.73.99c.91.52 1.22 1.69.7 2.59-.91 1.57-.17 2.85 1.64 2.85 1.04 0 1.9.85 1.9 1.9v1.76c0 1.04-.85 1.9-1.9 1.9-1.81 0-2.55 1.28-1.64 2.85.52.91.21 2.07-.7 2.59l-1.73.99c-.79.47-1.81.19-2.28-.6l-.11-.19c-.9-1.57-2.38-1.57-3.29 0l-.11.19c-.47.79-1.49 1.07-2.28.6l-1.73-.99a1.899 1.899 0 0 1-.7-2.59c.91-1.57.17-2.85-1.64-2.85-1.05 0-1.9-.86-1.9-1.9Z",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+SettingsIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$d = ["size", "color"];
+var TrashIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }));
+});
+TrashIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$e = ["size", "color"];
+var SearchMinusIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M9 11.7h5M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+SearchMinusIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$f = ["size", "color"];
+var SearchIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+SearchIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$g = ["size", "color"];
+var AngleRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    color: color,
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "m8.91 19.92 6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+AngleRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$h = ["size", "color"];
+var AngleUpIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    color: color,
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M19.92 15.05 13.4 8.53c-.77-.77-2.03-.77-2.8 0l-6.52 6.52",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+AngleUpIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$i = ["size", "color"];
+var AngleDownIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+AngleDownIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$j = ["size", "color"];
+var AngleLeftIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    color: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M15 19.92 8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+AngleDownIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$k = ["size", "color"];
+var DownloadIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M16.44 8.9c3.6.31 5.07 2.16 5.07 6.21v.13c0 4.47-1.79 6.26-6.26 6.26H8.74c-4.47 0-6.26-1.79-6.26-6.26v-.13c0-4.02 1.45-5.87 4.99-6.2M12 2v12.88",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), createElement("path", {
+    d: "M15.35 12.65 12 16l-3.35-3.35",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+DownloadIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$l = ["size", "color"];
+var RetryRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M14.89 5.08c-.87-.26-1.83-.43-2.89-.43-4.79 0-8.67 3.88-8.67 8.67C3.33 18.12 7.21 22 12 22s8.67-3.88 8.67-8.67c0-1.78-.54-3.44-1.46-4.82M16.13 5.32 13.24 2M16.13 5.32l-3.37 2.46",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+RetryRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$m = ["size", "color"];
+var RetryLeftIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M9.11 5.08c.87-.26 1.83-.43 2.89-.43 4.79 0 8.67 3.88 8.67 8.67s-3.88 8.67-8.67 8.67-8.67-3.88-8.67-8.67c0-1.78.54-3.44 1.46-4.82M7.87 5.32 10.76 2M7.87 5.32l3.37 2.46",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+RetryLeftIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$n = ["size", "color"];
+var TryAgainIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }));
+});
+TryAgainIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$o = ["size", "color"];
+var VerticalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }), createElement("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"
+  }));
+});
+VerticalSwapIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$p = ["size", "color"];
+var HorizontalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "m17.15 13.82-3.04 3.04M6.85 13.82h10.3M6.85 10.18l3.04-3.04M17.15 10.18H6.85",
+    strokeWidth: 1.5,
+    strokeMiterlimit: 10,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), createElement("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"
+  }));
+});
+HorizontalSwapIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$q = ["color", "size"];
+var RetryIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    color: color,
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.016 13.45c.199-.384.002-.842-.397-1.005-.406-.166-.864.033-1.077.416A6.17 6.17 0 0 1 13 15.345a6.051 6.051 0 0 1-4.244.513 6.127 6.127 0 0 1-3.543-2.425 6.286 6.286 0 0 1 .73-8.095A6.089 6.089 0 0 1 9.86 3.604a6.07 6.07 0 0 1 4.083 1.286 6.196 6.196 0 0 1 1.65 1.97l-1.053.363a.302.302 0 0 0-.073.534l2.607 1.758a.3.3 0 0 0 .45-.155l1.01-3.007a.298.298 0 0 0-.38-.378l-1.057.365a7.79 7.79 0 0 0-2.194-2.713 7.627 7.627 0 0 0-5.13-1.615A7.65 7.65 0 0 0 4.852 4.19a7.898 7.898 0 0 0-.917 10.17 7.7 7.7 0 0 0 4.452 3.048 7.604 7.604 0 0 0 5.333-.644 7.757 7.757 0 0 0 3.297-3.315Z",
+    fill: color
+  }));
+});
+RetryIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$r = ["size", "color"];
+var WalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }), createElement("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"
+  }), createElement("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"
+  }));
+});
+WalletIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$s = ["size", "color"];
+var AddWalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.569 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.206 1.579-.574 2.25h8.564a3.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.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.569Zm-4.51 3.01a4.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-.014.014c-.266.26-.414.63-.377 1.022l.001.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.51H7.939a.75.75 0 0 1-.482-1.324c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-5.283-2.533.75.75 0 0 1-1.217-.587v-4.37Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.409 2.655a1.15 1.15 0 0 0-1.555-1.078l-7.94 3a2.098 2.098 0 0 0-1.355 1.968v4.57a.75.75 0 0 1-1.5 0v-4.57c0-1.5.921-2.84 2.324-3.371l7.94-3c1.733-.657 3.586.629 3.586 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.787 12.405c-.359 0-.674.14-.902.374l-.014.013c-.266.26-.414.63-.377 1.022v.01c.054.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.759 2.759 0 0 1 .817-2.227Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.559 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.309 14.455c-.762 0-1.469.267-2.033.717h-.001a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.184.468 1.667l.006.01a3.22 3.22 0 0 0 2.776 1.573 3.155 3.155 0 0 0 2.148-.824c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-3.25-3.25Zm-2.967-.457a4.749 4.749 0 0 1 7.717 3.707c0 .888-.248 1.73-.687 2.446-.25.427-.57.808-.941 1.12a4.656 4.656 0 0 1-3.122 1.184 4.72 4.72 0 0 1-4.062-2.301 4.671 4.671 0 0 1-.688-2.449 4.72 4.72 0 0 1 1.783-3.707Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.07 17.685a.75.75 0 0 1 .75-.75H6.8a.75.75 0 0 1 0 1.5H3.82a.75.75 0 0 1-.75-.75Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.309 15.475a.75.75 0 0 1 .75.75v2.99a.75.75 0 0 1-1.5 0v-2.99a.75.75 0 0 1 .75-.75Z"
+  }));
+});
+AddWalletIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$t = ["size", "color"];
+var DeleteWalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.627 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.205 1.579-.573 2.25h8.563a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.777-1.03-2.907-2.553a2.759 2.759 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.01H6.627Zm-4.51 3.01a4.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-.675.14-.902.373l-.014.014c-.266.26-.415.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.51H7.997a.75.75 0 0 1-.482-1.325c.243-.203.457-.456.624-.743l.01-.016a3.17 3.17 0 0 0 .468-1.666 3.249 3.249 0 0 0-5.282-2.533.75.75 0 0 1-1.218-.587v-4.37Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.467 2.655a1.15 1.15 0 0 0-1.554-1.079l-7.94 3a2.098 2.098 0 0 0-1.356 1.97v4.569a.75.75 0 1 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.8ZM19.846 12.405c-.359 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"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.617 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.367 14.455c-.761 0-1.468.267-2.032.717h-.002a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.183.469 1.666l.006.01a3.22 3.22 0 0 0 2.775 1.574 3.155 3.155 0 0 0 2.148-.825c.243-.203.457-.456.624-.743l.01-.016a3.17 3.17 0 0 0 .468-1.666 3.249 3.249 0 0 0-3.25-3.25ZM2.4 13.998a4.749 4.749 0 0 1 7.717 3.707 4.67 4.67 0 0 1-.687 2.446c-.25.427-.57.808-.94 1.12a4.655 4.655 0 0 1-3.123 1.184 4.72 4.72 0 0 1-4.061-2.301 4.67 4.67 0 0 1-.689-2.449A4.72 4.72 0 0 1 2.4 13.998Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.785 16.106a.75.75 0 0 1 1.06-.003l2.12 2.11a.75.75 0 1 1-1.058 1.064l-2.12-2.11a.75.75 0 0 1-.002-1.061Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.948 16.136a.75.75 0 0 1-.002 1.06l-2.12 2.11a.75.75 0 0 1-1.058-1.063l2.12-2.11a.75.75 0 0 1 1.06.003Z"
+  }));
+});
+DeleteWalletIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$u = ["size", "color"];
+var CheckWalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.686 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.205 1.579-.573 2.25h8.563a3.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.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.686Zm-4.51 3.01a4.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-.378 1.022l.001.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.51H8.056a.75.75 0 0 1-.482-1.324c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-5.283-2.533.75.75 0 0 1-1.217-.587v-4.37Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.526 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.921-2.84 2.324-3.371l7.94-3c1.733-.657 3.586.629 3.586 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.905 12.405c-.36 0-.675.14-.903.374l-.014.013c-.265.26-.414.63-.377 1.022l.001.01c.053.634.664 1.181 1.413 1.181h1.942a.276.276 0 0 0 .268-.27v-2.06a.276.276 0 0 0-.268-.27h-2.062Zm-1.971-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.724 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.758 2.758 0 0 1 .816-2.227Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.676 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.426 14.455c-.762 0-1.469.267-2.033.717h-.001a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.184.468 1.667l.006.01a3.22 3.22 0 0 0 2.776 1.573 3.155 3.155 0 0 0 2.148-.824c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-3.25-3.25Zm-2.967-.457a4.749 4.749 0 0 1 7.717 3.707c0 .888-.248 1.73-.687 2.446-.25.427-.57.808-.941 1.12a4.656 4.656 0 0 1-3.122 1.184 4.72 4.72 0 0 1-4.062-2.301 4.671 4.671 0 0 1-.688-2.449 4.72 4.72 0 0 1 1.783-3.707Z"
+  }), createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.538 16.215a.75.75 0 0 1-.042 1.06l-2.13 1.97a.75.75 0 0 1-1.04-.02l-.99-.99a.75.75 0 1 1 1.062-1.06l.48.48 1.6-1.48a.75.75 0 0 1 1.06.04Z"
+  }));
+});
+CheckWalletIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$v = ["size", "color"];
+var SwapWalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("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"
+  }), createElement("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"
+  }), createElement("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"
+  }), createElement("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"
+  }), createElement("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"
+  }));
+});
+SwapWalletIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$w = ["size", "color"];
+var BagIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 32 32",
+    color: color,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("g", {
+    clipPath: "url(#a)",
+    strokeWidth: 1.5
+  }, createElement("path", {
+    d: "M9.333 9.333V4.8a.8.8 0 0 1 .8-.8h11.734a.8.8 0 0 1 .8.8v4.533M13.333 4v5.333M16 4v5.333m9.333 17.334H6.667A2.667 2.667 0 0 1 4 24V12a2.667 2.667 0 0 1 2.667-2.667h18.666A2.667 2.667 0 0 1 28 12v12a2.667 2.667 0 0 1-2.667 2.667Z"
+  }), createElement("path", {
+    d: "M22 18.666a.667.667 0 1 1 0-1.334.667.667 0 0 1 0 1.334Z",
+    fill: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), createElement("defs", null, createElement("clipPath", {
+    id: "a"
+  }, createElement("path", {
+    fill: color,
+    d: "M0 0h32v32H0z"
+  }))));
+});
+BagIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$x = ["size"];
+var TimeIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("circle", {
+    cx: 10,
+    cy: 10,
+    r: 7.25,
+    strokeWidth: 1.5
+  }), createElement("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"
+  }));
+});
+TimeIcon.toString = function () {
+  return '._icon';
+};
+
+var CloseIcon = /*#__PURE__*/styled(AddIcon, {
+  transform: 'rotate(45deg)',
+  cursor: 'pointer'
+});
+CloseIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$y = ["size", "color"];
+var SignatureIcon = /*#__PURE__*/forwardRef(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  return createElement(SvgWithFillColor, Object.assign({
+    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), createElement("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'
+    }
+  }));
+});
+SignatureIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$z = ["children"];
+var TypographyContainer = /*#__PURE__*/styled('span', {
+  margin: 0,
+  color: '$foreground',
+  variants: {
+    variant: {
+      h1: {
+        fontSize: '$36',
+        fontWeight: '$700',
+        '@md': {
+          fontSize: '$40'
+        },
+        '@lg': {
+          fontSize: '$48'
+        }
+      },
+      h2: {
+        fontSize: '$32',
+        fontWeight: '$700',
+        '@md': {
+          fontSize: '$36'
+        },
+        '@lg': {
+          fontSize: '$40'
+        }
+      },
+      h3: {
+        fontSize: '$20',
+        fontWeight: '$700',
+        '@md': {
+          fontSize: '$24'
+        },
+        '@lg': {
+          fontSize: '$32'
+        }
+      },
+      h4: {
+        fontSize: '$18',
+        fontWeight: '$600',
+        '@md': {
+          fontSize: '$20'
+        },
+        '@lg': {
+          fontSize: '$24'
+        }
+      },
+      h5: {
+        fontSize: '$16',
+        fontWeight: '$600',
+        '@md': {
+          fontSize: '$18'
+        },
+        '@lg': {
+          fontSize: '$20'
+        }
+      },
+      h6: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$16'
+        },
+        '@lg': {
+          fontSize: '$18'
+        }
+      },
+      body1: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@md': {
+          fontSize: '$16'
+        },
+        '@lg': {
+          fontSize: '$18'
+        }
+      },
+      body2: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@lg': {
+          fontSize: '$16'
+        }
+      },
+      caption: {
+        fontSize: '$10',
+        fontWeight: '$400',
+        '@lg': {
+          fontSize: '$12'
+        }
+      }
+    },
+    align: {
+      center: {
+        textAlign: 'center'
+      },
+      left: {
+        textAlign: 'left'
+      },
+      right: {
+        textAlign: 'right'
+      }
+    },
+    noWrap: {
+      "true": {
+        whiteSpace: 'nowrap'
+      }
+    },
+    ml: {
+      2: {
+        marginLeft: '$2'
+      },
+      4: {
+        marginLeft: '$4'
+      },
+      8: {
+        marginLeft: '$8'
+      },
+      12: {
+        marginLeft: '$12'
+      }
+    },
+    mt: {
+      2: {
+        marginTop: '$2'
+      },
+      4: {
+        marginTop: '$4'
+      },
+      8: {
+        marginTop: '$8'
+      },
+      12: {
+        marginTop: '$12'
+      }
+    },
+    mr: {
+      2: {
+        marginRight: '$2'
+      },
+      4: {
+        marginRight: '$4'
+      },
+      8: {
+        marginRight: '$8'
+      },
+      12: {
+        marginRight: '$12'
+      }
+    },
+    mb: {
+      2: {
+        marginBottom: '$2'
+      },
+      4: {
+        marginBottom: '$4'
+      },
+      8: {
+        marginBottom: '$8'
+      },
+      12: {
+        marginBottom: '$12'
+      }
+    }
+  }
+});
+function Typography(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+  return React__default.createElement(TypographyContainer, Object.assign({
+    className: "_typography"
+  }, props), children);
+}
+Typography.toString = function () {
+  return '._typography';
+};
+
+var StepLogoContainer = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  width: '$28',
+  height: '$28',
+  variants: {
+    direction: {
+      vertical: {
+        margin: 'auto'
+      },
+      horizontal: {}
+    }
+  }
+});
+var Logo = /*#__PURE__*/styled('img', {
+  width: '$28',
+  height: '$28',
+  borderRadius: '50%'
+});
+var ChainLogo = /*#__PURE__*/styled('img', {
+  position: 'absolute',
+  bottom: 0,
+  width: '$12',
+  height: '$12',
+  right: 0
+});
+var StepContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  variants: {
+    direction: {
+      horizontal: {
+        alignItems: 'center'
+      },
+      vertical: {
+        flexDirection: 'column',
+        textAlign: 'center',
+        justifyContent: 'center'
+      }
+    }
+  }
+});
+var Detail = /*#__PURE__*/styled('div', {
+  variants: {
+    pl: {
+      "true": {
+        paddingLeft: '$4',
+        '@lg': {
+          paddingLeft: '$8'
+        }
+      },
+      "false": {
+        paddingTop: '$8'
+      }
+    }
+  }
+});
+var SubTitle = /*#__PURE__*/styled(Typography, {
+  color: '$neutrals600'
+});
+function StepDetail(_ref) {
+  var logo = _ref.logo,
+    chainLogo = _ref.chainLogo,
+    amount = _ref.amount,
+    symbol = _ref.symbol,
+    blockchain = _ref.blockchain,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  return React__default.createElement(StepContainer, {
+    direction: direction
+  }, React__default.createElement(StepLogoContainer, {
+    direction: direction
+  }, React__default.createElement(Logo, {
+    src: logo,
+    alt: symbol
+  }), React__default.createElement(ChainLogo, {
+    src: chainLogo,
+    alt: blockchain
+  })), React__default.createElement(Detail, {
+    pl: direction === 'horizontal'
+  }, React__default.createElement(Typography, {
+    noWrap: true,
+    variant: direction === 'vertical' ? 'body2' : 'h6'
+  }, parseFloat(amount).toFixed(2), " ", symbol), React__default.createElement(SubTitle, {
+    noWrap: true,
+    variant: "caption"
+  }, "on ", blockchain)));
+}
+
+var secondsToString = function secondsToString(s) {
+  var minutes = parseInt((s / 60).toString()).toString();
+  return "" + minutes;
+};
+var totalArrivalTime = function totalArrivalTime(data) {
+  var _data$result, _data$result$swaps;
+  return (data == null ? void 0 : (_data$result = data.result) == null ? void 0 : (_data$result$swaps = _data$result.swaps) == null ? void 0 : _data$result$swaps.reduce(function (a, b) {
+    return a + b.estimatedTimeInSeconds;
+  }, 0)) || 0;
+};
+var rawFees = function rawFees(data) {
+  var _data$result2, _data$result2$swaps;
+  return ((data == null ? void 0 : (_data$result2 = data.result) == null ? void 0 : (_data$result2$swaps = _data$result2.swaps) == null ? void 0 : _data$result2$swaps.flatMap(function (s) {
+    return s.fee.map(function (f) {
+      return {
+        swapperId: s.swapperId,
+        fee: f
+      };
+    });
+  })) || []).reduce(function (partialSum, a) {
+    return partialSum + parseFloat(a.fee.amount);
+  }, 0).toFixed(3);
+};
+var decimalNumber = function decimalNumber(number, toFixed) {
+  if (number === void 0) {
+    number = '0';
+  }
+  return parseFloat(number).toFixed(toFixed);
+};
+var containsText = function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+};
+
+var waveSquares = /*#__PURE__*/keyframes({
+  '0%': {
+    backgroundPosition: '-468px 0'
+  },
+  '100%': {
+    backgroundPosition: '468px 0'
+  }
+});
+var SkeletonContainer = /*#__PURE__*/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
+      }
+    }
+  }
+});
+function Skeleton(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 20 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 20 : _ref$height;
+  return React__default.createElement(SkeletonContainer, {
+    width: width,
+    height: height
+  });
+}
+
+var spin = /*#__PURE__*/keyframes({
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+var SpinnerContainer = /*#__PURE__*/styled('div', {
+  borderRadius: '50%',
+  position: 'relative',
+  border: "2px solid $neutrals300",
+  borderRight: "2px solid",
+  animation: spin + " 1.5s linear infinite",
+  margin: "0px $8",
+  variants: {
+    color: {
+      primary: {
+        borderRightColor: '$primary'
+      },
+      error: {
+        borderRightColor: '$error'
+      },
+      warning: {
+        borderRightColor: '$warning'
+      },
+      success: {
+        borderRightColor: '$success'
+      },
+      black: {
+        borderRightColor: '$black'
+      },
+      white: {
+        borderRightColor: '$white'
+      }
+    },
+    size: {
+      16: {
+        width: '$16',
+        height: '$16'
+      },
+      20: {
+        width: '$20',
+        height: '$20'
+      },
+      24: {
+        width: '$24',
+        height: '$24'
+      }
+    }
+  }
+});
+function Spinner(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color;
+  return React__default.createElement(SpinnerContainer, {
+    size: size,
+    color: color
+  });
+}
+
+var Container = /*#__PURE__*/styled('div', {
+  borderRadius: '$5',
+  border: '1px solid $neutrals300',
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: 126,
+  justifyContent: 'space-between'
+});
+var ErrorMsg = /*#__PURE__*/styled(Typography, {
+  color: '$error'
+});
+var BestRouteContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 auto',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  alignSelf: 'stretch',
+  padding: '$4',
+  '@md': {
+    padding: '$8'
+  }
+});
+var Line = /*#__PURE__*/styled('div', {
+  height: '0',
+  width: '$20',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit',
+  '@lg': {
+    width: '$32'
+  }
+});
+var HR = /*#__PURE__*/styled('hr', {
+  width: '100%',
+  background: '$neutrals200',
+  margin: '$8 0'
+});
+var SwapperLogo = /*#__PURE__*/styled('img', {
+  width: '$16',
+  height: '$16'
+});
+var RelativeContainer = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Dot = /*#__PURE__*/styled('div', {
+  width: '$6',
+  height: '$6',
+  backgroundColor: '$foreground',
+  position: 'absolute',
+  top: '45%',
+  right: -5,
+  marginLeft: '$8',
+  borderRadius: '50%',
+  '@md': {
+    width: '$8',
+    height: '$8',
+    right: -8,
+    top: '45%'
+  }
+});
+var ArrowRight = /*#__PURE__*/styled('div', {
+  width: '0px',
+  height: '0px',
+  borderTop: '5px solid transparent',
+  borderBottom: '5px solid transparent',
+  borderLeft: '5px solid $foreground'
+});
+var GasContainer = /*#__PURE__*/styled('div', {
+  backgroundColor: '$neutrals300',
+  borderRadius: '5px',
+  margin: '$4',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$4',
+  '@md': {
+    padding: '$8',
+    margin: '$8'
+  }
+});
+var SkeletonContainer$1 = /*#__PURE__*/styled('div', {
+  padding: '$4',
+  '@md': {
+    padding: '$8'
+  }
+});
+var SwapperContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function BestRoute(_ref) {
+  var _data$result;
+  var data = _ref.data,
+    loading = _ref.loading,
+    error = _ref.error;
+  var fee,
+    time = '';
+  if (!!data) {
+    fee = rawFees(data);
+    time = secondsToString(totalArrivalTime(data));
+  }
+  return React__default.createElement(Container, null, loading ? React__default.createElement(SkeletonContainer$1, null, React__default.createElement(Skeleton, {
+    width: 48,
+    height: 94
+  })) : React__default.createElement(GasContainer, null, React__default.createElement(GasIcon, {
+    size: 20
+  }), React__default.createElement(Typography, {
+    mt: 4,
+    align: "center",
+    variant: "caption"
+  }, error && '-', !!data && "$" + fee), React__default.createElement(HR, null), React__default.createElement(TimeIcon, {
+    size: 20
+  }), React__default.createElement(Typography, {
+    mt: 4,
+    align: "center",
+    variant: "caption"
+  }, error && '-', !!data && "~" + time + "m")), React__default.createElement(BestRouteContainer, null, loading && React__default.createElement(Spinner, {
+    color: "primary"
+  }), error && React__default.createElement(ErrorMsg, {
+    variant: "caption"
+  }, error), !!data && ((_data$result = data.result) == null ? void 0 : _data$result.swaps.map(function (swap, index) {
+    var _data$result2;
+    return React__default.createElement(React__default.Fragment, null, index === 0 && React__default.createElement(RelativeContainer, null, React__default.createElement(StepDetail, {
+      direction: "vertical",
+      logo: swap.from.logo,
+      symbol: swap.from.symbol,
+      chainLogo: swap.from.blockchainLogo,
+      blockchain: swap.from.blockchain,
+      amount: swap.fromAmount
+    }), React__default.createElement(Dot, null)), React__default.createElement(SwapperContainer, null, React__default.createElement(Line, null), React__default.createElement(SwapperLogo, {
+      src: swap.swapperLogo,
+      alt: swap.swapperId
+    }), React__default.createElement(Line, null)), index + 1 === ((_data$result2 = data.result) == null ? void 0 : _data$result2.swaps.length) && React__default.createElement(ArrowRight, null), React__default.createElement(StepDetail, {
+      direction: "vertical",
+      logo: swap.to.logo,
+      symbol: swap.to.symbol,
+      chainLogo: swap.to.blockchainLogo,
+      blockchain: swap.to.blockchain,
+      amount: swap.toAmount
+    }));
+  })), !!data && !(data != null && data.result) && React__default.createElement(Typography, {
+    variant: "body2"
+  }, "No routes found")));
+}
+
+var containsText$1 = function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+};
+
+var _excluded$A = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _ghost, _css, _css2, _css3, _css4;
+var ButtonContainer = /*#__PURE__*/styled('button', {
+  borderRadius: '$5',
+  fontSize: '$16',
+  fontWeight: '$400',
+  cursor: 'pointer',
+  padding: '0 $12',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  variants: {
+    align: {
+      start: {
+        display: 'flex',
+        width: '100%'
+      },
+      grow: {
+        display: 'flex',
+        width: '100%'
+      }
+    },
+    size: {
+      small: {
+        height: '$32'
+      },
+      medium: {
+        height: '$40'
+      },
+      large: {
+        height: '$48'
+      }
+    },
+    variant: {
+      contained: {
+        backgroundColor: '$neutrals300',
+        color: '$foreground',
+        border: 0,
+        '&:hover': {
+          backgroundColor: '$neutrals200',
+          color: '$foreground'
+        },
+        '&:disabled': {
+          background: '$neutrals400 !important'
+        }
+      },
+      outlined: {
+        backgroundColor: '$background !important',
+        borderColor: '$neutrals400 !important',
+        color: '$foreground',
+        '&:hover': {
+          borderColor: '$neutrals600 !important',
+          color: '$neutrals500 !important'
+        },
+        '&:disabled': {
+          borderColor: '$neutrals300 !important',
+          color: '$neutrals400 !important'
+        },
+        background: 'transparent',
+        border: 1,
+        borderStyle: 'solid'
+      },
+      ghost: (_ghost = {
+        color: '$foreground',
+        '&:hover': {
+          backgroundColor: '$neutrals200'
+        },
+        '&:disabled': {
+          color: '$neutrals400 !important'
+        },
+        background: 'transparent',
+        border: 0
+      }, _ghost["& " + Typography] = {
+        color: 'inherit'
+      }, _ghost)
+    },
+    fullWidth: {
+      "true": {
+        width: '100%'
+      }
+    },
+    loading: {
+      "true": {}
+    },
+    type: {
+      primary: {},
+      error: {},
+      warning: {},
+      success: {}
+    }
+  },
+  compoundVariants: [{
+    type: 'primary',
+    variant: 'contained',
+    css: (_css = {
+      background: '$primary',
+      $$color: '$colors$background'
+    }, _css["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css.color = '$$color !important', _css['&:hover'] = {
+      background: '$primary700'
+    }, _css['&:visited'] = {
+      background: '$primary900'
+    }, _css['&:focus'] = {
+      background: '$primary600'
+    }, _css)
+  }, {
+    type: 'primary',
+    variant: 'outlined',
+    css: {
+      color: '$primary !important',
+      borderColor: '$primary !important',
+      '&:hover': {
+        color: '$primary700 !important',
+        borderColor: '$primary700 !important'
+      },
+      '&:visited': {
+        color: '$primary900 !important',
+        borderColor: '$primary900 !important'
+      },
+      '&:focus': {
+        color: '$primary600 !important',
+        borderColor: '$primary600 !important'
+      }
+    }
+  }, {
+    type: 'primary',
+    variant: 'ghost',
+    css: {
+      color: '$primary',
+      '&:hover': {
+        color: '$primary700'
+      },
+      '&:visited': {
+        color: '$primary900'
+      },
+      '&:focus': {
+        color: '$primary600'
+      }
+    }
+  }, {
+    type: 'error',
+    variant: 'contained',
+    css: (_css2 = {
+      background: '$error',
+      $$color: '$colors$background'
+    }, _css2["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css2.color = '$$color !important', _css2['&:hover'] = {
+      background: '$error300'
+    }, _css2['&:visited'] = {
+      background: '$error700'
+    }, _css2['&:focus'] = {
+      background: '$error700'
+    }, _css2)
+  }, {
+    type: 'error',
+    variant: 'outlined',
+    css: {
+      color: '$error !important',
+      borderColor: '$error !important',
+      '&:hover': {
+        color: '$error300 !important',
+        borderColor: '$error300 !important'
+      },
+      '&:visited': {
+        color: '$error700 !important',
+        borderColor: '$error700 !important'
+      },
+      '&:focus': {
+        color: '$error700 !important',
+        borderColor: '$error700 !important'
+      }
+    }
+  }, {
+    type: 'error',
+    variant: 'ghost',
+    css: {
+      color: '$error',
+      '&:hover': {
+        color: '$error300'
+      },
+      '&:visited': {
+        color: '$error700'
+      },
+      '&:focus': {
+        color: '$error700'
+      }
+    }
+  }, {
+    type: 'warning',
+    variant: 'contained',
+    css: (_css3 = {
+      background: '$warning',
+      $$color: '$colors$background'
+    }, _css3["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css3.color = '$$color !important', _css3['&:hover'] = {
+      background: '$warning300'
+    }, _css3['&:visited'] = {
+      background: '$warning700'
+    }, _css3['&:focus'] = {
+      background: '$warning700'
+    }, _css3)
+  }, {
+    type: 'warning',
+    variant: 'outlined',
+    css: {
+      color: '$warning !important',
+      borderColor: '$warning !important',
+      '&:hover': {
+        color: '$warning300 !important',
+        borderColor: '$warning300 !important'
+      },
+      '&:visited': {
+        color: '$warning700 !important',
+        borderColor: '$warning700 !important'
+      },
+      '&:focus': {
+        color: '$warning700 !important',
+        borderColor: '$warning700 !important'
+      }
+    }
+  }, {
+    type: 'warning',
+    variant: 'ghost',
+    css: {
+      color: '$warning',
+      '&:hover': {
+        color: '$warning300'
+      },
+      '&:visited': {
+        color: '$warning700'
+      },
+      '&:focus': {
+        color: '$warning700'
+      }
+    }
+  }, {
+    type: 'success',
+    variant: 'contained',
+    css: (_css4 = {
+      background: '$success',
+      $$color: '$colors$background'
+    }, _css4["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css4.color = '$$color !important', _css4['&:hover'] = {
+      background: '$success300'
+    }, _css4['&:visited'] = {
+      background: '$success700'
+    }, _css4['&:focus'] = {
+      background: '$success700'
+    }, _css4)
+  }, {
+    type: 'success',
+    variant: 'outlined',
+    css: {
+      color: '$success !important',
+      borderColor: '$success !important',
+      '&:hover': {
+        color: '$success300 !important',
+        borderColor: '$success300 !important'
+      },
+      '&:visited': {
+        color: '$success700 !important',
+        borderColor: '$success700 !important'
+      },
+      '&:focus': {
+        color: '$success700 !important',
+        borderColor: '$success700 !important'
+      }
+    }
+  }, {
+    type: 'success',
+    variant: 'ghost',
+    css: {
+      color: '$success',
+      '&:hover': {
+        color: '$success300'
+      },
+      '&:visited': {
+        color: '$success700'
+      },
+      '&:focus': {
+        color: '$success700'
+      }
+    }
+  }],
+  defaultVariants: {
+    size: 'medium',
+    variant: 'contained'
+  }
+});
+var Content = /*#__PURE__*/styled('div', {
+  flex: 1,
+  variants: {
+    align: {
+      start: {
+        textAlign: 'left'
+      },
+      grow: {
+        textAlign: 'center'
+      }
+    },
+    ml: {
+      "true": {
+        marginLeft: '$8'
+      }
+    },
+    mr: {
+      "true": {
+        marginRight: '$8'
+      }
+    },
+    flexContent: {
+      "true": {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }
+  }
+});
+function Button(_ref) {
+  var children = _ref.children,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    align = _ref.align,
+    flexContent = _ref.flexContent,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+  var isDisabled = loading || disabled;
+  return React__default.createElement(ButtonContainer, Object.assign({
+    disabled: isDisabled
+  }, props, {
+    align: align
+  }), prefix, children && React__default.createElement(Content, {
+    align: align,
+    ml: !!prefix,
+    mr: !!suffix && !loading,
+    flexContent: flexContent
+  }, children), loading && React__default.createElement(Spinner, {
+    size: 16,
+    color: props.type
+  }), suffix);
+}
+
+var FilledCircle = /*#__PURE__*/styled('span', {
+  width: '10px',
+  height: '10px',
+  backgroundColor: '$primary500',
+  borderRadius: '99999px'
+});
+
+var ListContainer = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  alignContent: 'baseline',
+  width: '100%',
+  height: '100%'
+});
+var Image = /*#__PURE__*/styled('img', {
+  width: '1.5rem',
+  maxHeight: '1.5rem',
+  marginRight: '$4'
+});
+function BlockchainsList(props) {
+  var list = props.list,
+    onChange = props.onChange;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelectedBlockchain = function changeSelectedBlockchain(blockchain) {
+    setSelected(blockchain);
+    onChange(blockchain);
+  };
+  return React__default.createElement(ListContainer, null, list.map(function (blockchain, index) {
+    return React__default.createElement(Button, {
+      type: blockchain.name === (selected == null ? void 0 : selected.name) ? 'primary' : undefined,
+      variant: "outlined",
+      size: "large",
+      prefix: React__default.createElement(Image, {
+        src: blockchain.logo
+      }),
+      suffix: blockchain.name === (selected == null ? void 0 : selected.name) ? React__default.createElement(FilledCircle, null) : undefined,
+      align: "start",
+      onClick: changeSelectedBlockchain.bind(null, blockchain),
+      key: index
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, blockchain.displayName));
+  }));
+}
+
+var _excluded$B = ["label", "prefix", "suffix", "children", "size", "style"];
+var InputContainer = /*#__PURE__*/styled('div', {
+  backgroundColor: '$background',
+  boxSizing: 'border-box',
+  border: '1px solid $neutrals400',
+  borderRadius: '$5',
+  height: '$48',
+  display: 'flex',
+  flexGrow: 1,
+  position: 'relative',
+  alignItems: 'center',
+  color: '$foreground',
+  transition: 'border-color ease .3s',
+  '&:focus-within': {
+    borderColor: '$primary500'
+  },
+  variants: {
+    size: {
+      small: {
+        height: '$32'
+      },
+      medium: {
+        height: '$40'
+      },
+      large: {
+        height: '$48'
+      }
+    },
+    disabled: {
+      "true": {
+        backgroundColor: '$neutrals300',
+        cursor: 'not-allowed',
+        filter: 'grayscale(100%)'
+      }
+    },
+    prefix: {
+      "true": {
+        paddingLeft: '$16'
+      },
+      "false": {
+        paddingLeft: '$0'
+      }
+    },
+    suffix: {
+      "true": {
+        paddingRight: '$16'
+      },
+      "false": {
+        paddingRight: '$0'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'medium'
+  }
+});
+var Input = /*#__PURE__*/styled('input', {
+  color: '$text',
+  paddingLeft: '$16',
+  paddingRight: '$16',
+  flexGrow: 1,
+  width: '100%',
+  border: 'none',
+  borderRadius: '$5',
+  outline: 'none',
+  fontSize: '$l',
+  backgroundColor: 'transparent',
+  '-webkit-appearance': 'none',
+  margin: 0,
+  '&:disabled': {
+    cursor: 'not-allowed'
+  }
+});
+var Label = /*#__PURE__*/styled('label', {
+  display: 'inline-block',
+  fontSize: '$16',
+  marginBottom: '$4'
+});
+var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var label = props.label,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    size = props.size,
+    style = props.style,
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$B);
+  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({}, inputAttributes.id && {
+    htmlFor: inputAttributes.id
+  }), label), React__default.createElement(InputContainer, {
+    disabled: inputAttributes.disabled,
+    prefix: !!prefix,
+    suffix: !!suffix,
+    size: size,
+    style: style
+  }, prefix || null, React__default.createElement(Input, Object.assign({}, inputAttributes, {
+    spellCheck: false,
+    ref: ref
+  })), suffix || null));
+});
+
+var Container$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  padding: '$12 0',
+  '@lg': {
+    padding: '$16 0'
+  }
+});
+var HeaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: '$16',
+  position: 'relative'
+});
+var BackIcon = /*#__PURE__*/styled(AngleLeftIcon, {
+  position: 'absolute',
+  left: '0'
+});
+var StyledBackIcon = /*#__PURE__*/styled(BackIcon, {
+  cursor: 'pointer'
+});
+var ContentContainer = /*#__PURE__*/styled('div', {
+  flex: '1',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  marginTop: '$16'
+});
+function SecondaryPage(props) {
+  var title = props.title,
+    Footer = props.Footer,
+    TopButton = props.TopButton,
+    onBack = props.onBack,
+    _props$hasHeader = props.hasHeader,
+    hasHeader = _props$hasHeader === void 0 ? true : _props$hasHeader;
+  var _useState = useState(''),
+    searchedFor = _useState[0],
+    setSearchedFor = _useState[1];
+  return React__default.createElement(Container$1, null, hasHeader && React__default.createElement(HeaderContainer, null, React__default.createElement(StyledBackIcon, {
+    size: 24,
+    onClick: onBack
+  }), React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), TopButton), props.textField && React__default.createElement("div", null, React__default.createElement(TextField, {
+    size: "large",
+    prefix: React__default.createElement(SearchIcon, {
+      size: 24
+    }),
+    placeholder: props.textFieldPlaceholder,
+    onChange: function onChange(event) {
+      return setSearchedFor(event.target.value);
+    },
+    value: searchedFor,
+    autoFocus: true
+  })), React__default.createElement(ContentContainer, null, props.textField && React__default.createElement(props.Content, {
+    searchedFor: searchedFor
+  }), !props.textField && props.Content), Footer);
+}
+
+var MainContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  padding: '$16',
+  borderRadius: '$5',
+  variants: {
+    type: {
+      primary: {
+        backgroundColor: '$primary200'
+      },
+      secondary: {
+        backgroundColor: '$neutrals400'
+      },
+      success: {
+        backgroundColor: '$success300'
+      },
+      warning: {
+        backgroundColor: '$warning300'
+      },
+      error: {
+        backgroundColor: '$error300'
+      }
+    }
+  }
+});
+var ContentContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var TitleContainer = /*#__PURE__*/styled('div', {
+  marginBottom: '$8'
+});
+var IconContainer = /*#__PURE__*/styled('div', {
+  marginRight: '$24'
+});
+function Alert(props) {
+  var type = props.type,
+    description = props.description,
+    title = props.title;
+  var showIcon = ['error', 'success', 'warning'].includes(type);
+  return React__default.createElement(MainContainer, {
+    type: type
+  }, showIcon && React__default.createElement(IconContainer, null, type === 'success' && React__default.createElement(CheckCircleIcon, {
+    color: "success",
+    size: 28
+  }), type === 'warning' && React__default.createElement(WarningIcon, {
+    size: 28
+  }), type === 'error' && React__default.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 28
+  })), React__default.createElement(ContentContainer$1, null, title && React__default.createElement(TitleContainer, null, React__default.createElement(Typography, {
+    variant: "h6"
+  }, title)), React__default.createElement(Typography, {
+    variant: "body2"
+  }, description)));
+}
+
+var ListContainer$1 = /*#__PURE__*/styled('div', {
+  height: '450px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var filterBlockchains = function filterBlockchains(list, searchedFor) {
+  return list.filter(function (blockchain) {
+    return containsText$1(blockchain.name, searchedFor) || containsText$1(blockchain.displayName, searchedFor);
+  });
+};
+function BlockchainSelector(props) {
+  var type = props.type,
+    list = props.list,
+    onChange = props.onChange,
+    selected = props.selected,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus,
+    hasHeader = props.hasHeader,
+    listContainerStyle = props.listContainerStyle;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Network",
+    hasHeader: hasHeader,
+    onBack: onBack,
+    Content: function Content(_ref) {
+      var searchedFor = _ref.searchedFor;
+      var filteredBlockchains = filterBlockchains(list, searchedFor);
+      return React__default.createElement(ListContainer$1, {
+        style: listContainerStyle
+      }, loadingStatus === 'loading' && React__default.createElement("div", null, React__default.createElement(Spinner, {
+        size: 24
+      })), loadingStatus === 'failed' && React__default.createElement(Alert, {
+        type: "error",
+        description: "Error connecting server, please reload the app and try again"
+      }), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length > 0 ? React__default.createElement(BlockchainsList, {
+        list: filteredBlockchains,
+        selected: selected,
+        onChange: onChange
+      }) : React__default.createElement(Alert, {
+        type: "secondary",
+        description: searchedFor + " not found"
+      })));
+    }
+  });
+}
+
+var _excluded$C = ["label", "id"];
+var CheckboxContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var CheckboxRoot = /*#__PURE__*/styled(Root, {
+  borderRadius: '5px',
+  width: 20,
+  padding: 0,
+  height: 20,
+  border: '1px solid',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginRight: '$2',
+  backgroundColor: '$neutral-100'
+});
+var Label$1 = /*#__PURE__*/styled('label', {
+  color: '$text',
+  fontSize: '$m',
+  marginLeft: '$8'
+});
+function Checkbox(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
+    id: id
+  }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
+    size: 20
+  }))), React__default.createElement(Label$1, {
+    htmlFor: id
+  }, label, " "));
+}
+
+var ChipCointainer = /*#__PURE__*/styled('div', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  padding: '$4 $8',
+  height: '32',
+  fontSize: '$14',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: '$neutrals300'
+  },
+  variants: {
+    selected: {
+      "true": {
+        backgroundColor: '$neutrals400'
+      },
+      "false": {
+        backgroundColor: '$background'
+      }
+    }
+  }
+});
+function Chip(props) {
+  var label = props.label,
+    selected = props.selected,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    onClick = props.onClick,
+    style = props.style;
+  return React__default.createElement(ChipCointainer, {
+    selected: selected,
+    onClick: onClick,
+    style: style
+  }, prefix || null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, label), suffix || null);
+}
+
+var BackDrop = /*#__PURE__*/styled('div', {
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  top: '0',
+  left: '0',
+  width: '100vw',
+  height: '100vh',
+  backgroundColor: 'rgba(0,0,0,.1)'
+});
+var ModalContainer = /*#__PURE__*/styled('div', {
+  backgroundColor: '$background',
+  borderRadius: '$10',
+  padding: '$16 $16',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '$s'
+});
+var ModalHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+var ContentContainer$2 = /*#__PURE__*/styled('div', {
+  overflowY: 'scroll'
+});
+function Modal(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    contentStyle = props.contentStyle;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  return React__default.createElement(React__default.Fragment, null, open && createPortal(React__default.createElement(BackDrop, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(ModalContainer, {
+    style: containerStyle
+  }, React__default.createElement(ModalHeader, null, React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  })), React__default.createElement(ContentContainer$2, {
+    style: contentStyle
+  }, content))), document.body));
+}
+
+var WalletState;
+(function (WalletState) {
+  WalletState["NOT_INSTALLED"] = "not installed";
+  WalletState["DISCONNECTED"] = "disconnected";
+  WalletState["CONNECTING"] = "connecting";
+  WalletState["CONNECTED"] = "connected";
+})(WalletState || (WalletState = {}));
+
+var StateIconContainer = /*#__PURE__*/styled('span', {
+  width: '$28',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var State = function State(_ref) {
+  var walletState = _ref.walletState,
+    installLink = _ref.installLink;
+  return React__default.createElement(Fragment, null, walletState !== WalletState.DISCONNECTED && React__default.createElement(StateIconContainer, null, walletState === WalletState.NOT_INSTALLED && React__default.createElement("a", {
+    href: detectInstallLink(installLink),
+    target: "_blank"
+  }, React__default.createElement(DownloadIcon, {
+    size: 24,
+    color: "success"
+  })), walletState === WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === WalletState.CONNECTED && React__default.createElement(FilledCircle, null)));
+};
+
+var WalletImage = /*#__PURE__*/styled('img', {
+  width: '$24',
+  height: '$24',
+  marginRight: '$12'
+});
+function Wallet(props) {
+  var name = props.name,
+    type = props.type,
+    image = props.image,
+    state = props.state,
+    _onClick = props.onClick,
+    installLink = props.installLink;
+  return React__default.createElement(Button, {
+    type: state === WalletState.CONNECTED ? 'primary' : undefined,
+    disabled: !state,
+    onClick: function onClick() {
+      if (state === WalletState.NOT_INSTALLED) {
+        window.open(detectInstallLink(installLink), '_blank');
+      } else _onClick(type);
+    },
+    align: "start",
+    variant: "outlined",
+    size: "large",
+    prefix: React__default.createElement(WalletImage, {
+      src: image
+    }),
+    suffix: React__default.createElement(State, {
+      walletState: state,
+      installLink: installLink
+    })
+  }, React__default.createElement(Typography, {
+    variant: "h5",
+    noWrap: false
+  }, name));
+}
+
+var ModalContent = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  gap: '$8',
+  gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
+});
+function ConnectWalletsModal(props) {
+  var open = props.open,
+    list = props.list,
+    onSelect = props.onSelect,
+    onClose = props.onClose;
+  var Content = React__default.createElement(ModalContent, null, list.map(function (info, index) {
+    return React__default.createElement(Wallet, Object.assign({}, info, {
+      key: index,
+      onClick: onSelect
+    }));
+  }));
+  return React__default.createElement(Modal, {
+    title: "Connect Wallets",
+    open: open,
+    content: Content,
+    onClose: onClose,
+    containerStyle: {
+      width: '75%',
+      maxWidth: '30rem',
+      height: '70%'
+    }
+  });
+}
+
+var SpacerContainer = /*#__PURE__*/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'
+    }
+  }]
+});
+function Spacer(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  return React__default.createElement(SpacerContainer, {
+    size: size,
+    direction: direction
+  });
+}
+
+var StyledSwitchRoot = /*#__PURE__*/styled(Root$1, {
+  boxSizing: 'border-box',
+  boxShadow: 'none',
+  borderStyle: 'solid',
+  width: '42px',
+  height: '22px',
+  backgroundColor: '$neutrals300',
+  borderColor: '$neutrals400',
+  borderRadius: '99999px',
+  position: 'relative',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    backgroundColor: '$primary100'
+  },
+  '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)'
+});
+var StyledSwitchThumb = /*#__PURE__*/styled(Thumb, {
+  position: 'absolute',
+  top: '0',
+  boxSizing: 'border-box',
+  display: 'block',
+  width: '18px',
+  height: '18px',
+  backgroundColor: '$neutrals500',
+  transition: ' transform 100ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+  '&[data-state="checked"]': {
+    transform: 'translateX(20px)',
+    backgroundColor: '$primary500'
+  }
+});
+function Switch(props) {
+  var checked = props.checked,
+    onChange = props.onChange;
+  return React__default.createElement(StyledSwitchRoot, {
+    checked: checked,
+    onCheckedChange: onChange
+  }, React__default.createElement(StyledSwitchThumb, null));
+}
+
+var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
+  return {
+    bridge: liquiditySources.filter(function (liquiditySource) {
+      return liquiditySource.type === 'BRIDGE' || liquiditySource.type === 'AGGREGATOR';
+    }),
+    exchange: liquiditySources.filter(function (liquiditySource) {
+      return liquiditySource.type === 'DEX';
+    })
+  };
+};
+var LiquiditySourceType = /*#__PURE__*/styled(Typography, {
+  position: 'sticky',
+  top: '0',
+  marginTop: '$8',
+  marginBottom: '$8',
+  backgroundColor: '$background',
+  zIndex: '9999',
+  paddingTop: '$8',
+  paddingBottom: '$8'
+});
+var LiquidityImage = /*#__PURE__*/styled('img', {
+  width: '$20',
+  maxHeight: '$20',
+  marginRight: '$16'
+});
+function LiquiditySourceList(props) {
+  var list = props.list,
+    onChange = props.onChange,
+    listContainerStyle = props.listContainerStyle;
+  var _useState = useState(list.filter(function (item) {
+      return item.selected;
+    })),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeLiquiditySources = function changeLiquiditySources(clickedItem) {
+    clickedItem.selected = !clickedItem.selected;
+    setSelected(function (prevState) {
+      if (clickedItem.selected) return [].concat(prevState, [clickedItem]);
+      return prevState.filter(function (item) {
+        return item.title != clickedItem.title;
+      });
+    });
+    onChange(clickedItem);
+  };
+  var LiquiditySourceItem = function LiquiditySourceItem(_ref) {
+    var liquiditySource = _ref.liquiditySource,
+      selected = _ref.selected;
+    return React__default.createElement(Button, {
+      size: "large",
+      align: "start",
+      variant: "outlined",
+      prefix: React__default.createElement(LiquidityImage, {
+        src: liquiditySource.logo
+      }),
+      suffix: React__default.createElement(Switch, {
+        checked: selected
+      }),
+      style: {
+        marginBottom: '12px'
+      },
+      type: selected ? 'primary' : undefined,
+      onClick: changeLiquiditySources.bind(null, liquiditySource)
+    }, React__default.createElement(Typography, {
+      variant: "body1"
+    }, liquiditySource.title));
+  };
+  var isSelected = function isSelected(liquiditySource) {
+    return !!selected.find(function (item) {
+      return liquiditySource.title === item.title;
+    });
+  };
+  return React__default.createElement("div", {
+    style: _extends({
+      height: '450px'
+    }, listContainerStyle)
+  }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, {
+    variant: "h5"
+  }, "Bridges"), React__default.createElement(Spacer, {
+    size: 16,
+    direction: "vertical"
+  }), groupLiquiditySources(list).bridge.map(function (liquiditySource, index) {
+    return React__default.createElement(LiquiditySourceItem, {
+      liquiditySource: liquiditySource,
+      key: index,
+      selected: isSelected(liquiditySource)
+    });
+  })), React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, {
+    variant: "h5"
+  }, "Exchanges"), React__default.createElement(Spacer, {
+    size: 16,
+    direction: "vertical"
+  }), groupLiquiditySources(list).exchange.map(function (liquiditySource, index) {
+    return React__default.createElement(LiquiditySourceItem, {
+      liquiditySource: liquiditySource,
+      key: index,
+      selected: isSelected(liquiditySource)
+    });
+  })));
+}
+
+var filterLiquiditySources = function filterLiquiditySources(liquiditySources, searchedFor) {
+  return liquiditySources.filter(function (liquiditySource) {
+    return containsText$1(liquiditySource.title, searchedFor || '');
+  });
+};
+var ActionButton = /*#__PURE__*/styled(Button, {
+  position: 'absolute',
+  right: 0
+});
+function LiquiditySourcesSelector(props) {
+  var list = props.list,
+    onChange = props.onChange,
+    onBack = props.onBack,
+    hasHeader = props.hasHeader,
+    listContainerStyle = props.listContainerStyle,
+    toggleAll = props.toggleAll;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search By Name",
+    title: "Liquidity Sources",
+    TopButton: React__default.createElement(ActionButton, {
+      variant: "ghost",
+      type: "primary",
+      onClick: toggleAll
+    }, list.find(function (item) {
+      return item.selected;
+    }) ? 'Clear all' : 'Select all'),
+    hasHeader: hasHeader,
+    onBack: onBack,
+    Content: function Content(_ref) {
+      var searchedFor = _ref.searchedFor;
+      return React__default.createElement(LiquiditySourceList, {
+        listContainerStyle: listContainerStyle,
+        list: filterLiquiditySources(list, searchedFor),
+        onChange: onChange
+      });
+    }
+  });
+}
+
+var Row = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap'
+});
+var Circle = /*#__PURE__*/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'
+      }
+    }
+  }
+});
+var SolidCircle = /*#__PURE__*/styled('div', {
+  width: 6,
+  margin: '20% auto',
+  height: 6,
+  borderRadius: 3,
+  variants: {
+    checked: {
+      "true": {
+        backgroundColor: '$success'
+      },
+      "false": {
+        backgroundColor: '$neutrals400'
+      }
+    }
+  }
+});
+var Container$2 = /*#__PURE__*/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'
+      }
+    }
+  }
+});
+function SelectableWalletList(_ref) {
+  var _list$find;
+  var list = _ref.list,
+    onChange = _ref.onChange;
+  var _useState = useState(((_list$find = list.find(function (item) {
+      return item.selected;
+    })) == null ? void 0 : _list$find.walletType) || ''),
+    active = _useState[0],
+    setActive = _useState[1];
+  var onClick = function onClick(w) {
+    setActive(w.walletType);
+    onChange(w);
+  };
+  useEffect(function () {
+    var _list$find2;
+    setActive(((_list$find2 = list.find(function (item) {
+      return item.selected;
+    })) == null ? void 0 : _list$find2.walletType) || '');
+  }, [list]);
+  return React__default.createElement(Row, null, list.map(function (w, index) {
+    var checked = active === w.walletType;
+    return React__default.createElement(Container$2, {
+      checked: checked,
+      onClick: onClick.bind(null, w),
+      key: index
+    }, React__default.createElement("img", {
+      src: w.image,
+      alt: w.walletType,
+      width: 24,
+      height: 24
+    }), React__default.createElement(Typography, {
+      variant: "body2"
+    }, w.walletType), React__default.createElement(Circle, {
+      checked: checked
+    }, React__default.createElement(SolidCircle, {
+      checked: checked
+    })));
+  }));
+}
+
+var StyledRoot = /*#__PURE__*/styled(Root$2, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24'
+      }
+    }
+  }
+});
+var ItemContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$24'
+});
+var StyledItem = /*#__PURE__*/styled(Item, {
+  backgroundColor: '$neutrals300',
+  width: '20px',
+  height: '20px',
+  borderRadius: '100%',
+  border: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: '$neutrals400'
+  }
+});
+var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '',
+    display: 'block',
+    width: '10px',
+    height: '10px',
+    borderRadius: '50%',
+    backgroundColor: '$primary'
+  }
+});
+var Label$2 = /*#__PURE__*/styled('label', {
+  paddingLeft: '$16',
+  cursor: 'pointer'
+});
+function Radio(props) {
+  var defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'vertical' : _props$direction,
+    style = props.style;
+  return React__default.createElement("form", null, React__default.createElement(StyledRoot, {
+    onValueChange: onChange,
+    defaultValue: defaultValue,
+    direction: direction,
+    style: style
+  }, props.options.map(function (option) {
+    return React__default.createElement(ItemContainer, null, React__default.createElement(StyledItem, {
+      value: option.value,
+      id: option.value
+    }, React__default.createElement(StyledIndicator, null)), React__default.createElement(Label$2, {
+      htmlFor: option.value
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, option.label)));
+  })));
+}
+
+var BaseContainer = /*#__PURE__*/styled('div', {
+  borderRadius: '$5',
+  backgroundColor: '$neutrals200',
+  padding: '$16'
+});
+var SlippageChipsContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginTop: '$16'
+});
+var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+  cursor: 'pointer'
+});
+var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
+  marginLeft: '8px'
+});
+var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
+  marginTop: '$32'
+});
+function Settings(props) {
+  var slippages = props.slippages,
+    selectedLiquiditySources = props.selectedLiquiditySources,
+    liquiditySources = props.liquiditySources,
+    onSlippageChange = props.onSlippageChange,
+    onLiquiditySourcesClick = props.onLiquiditySourcesClick,
+    onBack = props.onBack,
+    customSlippage = props.customSlippage,
+    onCustomSlippageChange = props.onCustomSlippageChange,
+    maxSlippage = props.maxSlippage,
+    minSlippage = props.minSlippage,
+    selectedTheme = props.selectedTheme,
+    onThemeChange = props.onThemeChange;
+  var _useState = useState(props.selectedSlippage),
+    selectedSlippage = _useState[0],
+    setSelectedSlippage = _useState[1];
+  var changeSlippage = function changeSlippage(slippage) {
+    setSelectedSlippage(slippage);
+    onSlippageChange(slippage);
+  };
+  var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Slippage tolerance per swap"), React__default.createElement(SlippageChipsContainer, null, slippages.map(function (slippage, index) {
+    return React__default.createElement(Chip, {
+      key: index,
+      onClick: function onClick() {
+        if (customSlippage) onCustomSlippageChange(null);
+        changeSlippage(slippage);
+      },
+      selected: !customSlippage && slippage === selectedSlippage,
+      label: slippage.toString() + " %",
+      style: {
+        marginRight: '8px'
+      }
+    });
+  }), React__default.createElement(TextField, {
+    type: "number",
+    value: customSlippage,
+    onChange: function onChange(event) {
+      var parsedValue = parseFloat(event.target.value);
+      if (!parsedValue || parsedValue >= minSlippage && parsedValue <= maxSlippage) onCustomSlippageChange(parsedValue);
+    },
+    suffix: customSlippage && React__default.createElement(Typography, {
+      variant: "body2"
+    }, "%"),
+    size: "small",
+    placeholder: "Custom",
+    style: {
+      width: '128px',
+      flexGrow: 'initial',
+      borderColor: customSlippage ? '$success' : 'initial'
+    }
+  }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "Theme"), React__default.createElement(Radio, {
+    defaultValue: selectedTheme,
+    options: [{
+      value: 'dark',
+      label: 'Dark'
+    }, {
+      value: 'light',
+      label: 'Light'
+    }, {
+      value: 'auto',
+      label: 'Auto'
+    }],
+    onChange: function onChange(value) {
+      return onThemeChange(value);
+    },
+    direction: "horizontal",
+    style: {
+      marginTop: '$24'
+    }
+  })), React__default.createElement(LiquiditySourceContainer, {
+    onClick: onLiquiditySourcesClick
+  }, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Liquidity Sources"), React__default.createElement(LiquiditySourceNumber, {
+    onClick: onLiquiditySourcesClick
+  }, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "( " + selectedLiquiditySources.length + " / " + liquiditySources.length + " )"), React__default.createElement(StyledAngleRight, null))));
+  return React__default.createElement(SecondaryPage, {
+    title: "Settings",
+    textField: false,
+    Content: PageContent,
+    onBack: onBack
+  });
+}
+
+var MainContainer$1 = /*#__PURE__*/styled('div', {
+  borderRadius: '$10',
+  maxWidth: '512px',
+  boxShadow: '$s',
+  minWidth: '375px',
+  width: '100%',
+  backgroundColor: '$background',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'end',
+  padding: '$16 $24'
+});
+var ContentContainer$3 = /*#__PURE__*/styled('div', {
+  width: '100%'
+});
+function SwapContainer(props) {
+  var children = props.children,
+    style = props.style;
+  return React__default.createElement(MainContainer$1, {
+    style: style
+  }, React__default.createElement(ContentContainer$3, null, children));
+}
+
+var Container$3 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var ButtonContainer$1 = /*#__PURE__*/styled('div', {
+  paddingTop: '$8'
+});
+var SwapContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  '@md': {
+    padding: '$12'
+  },
+  '&:hover': {
+    borderColor: '$primary'
+  },
+  variants: {
+    status: {
+      failed: {
+        borderColor: '$error'
+      },
+      running: {
+        borderColor: '$neutrals400'
+      },
+      success: {
+        borderColor: '$success'
+      }
+    }
+  }
+});
+var Arrow = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var Line$1 = /*#__PURE__*/styled('div', {
+  height: '0',
+  width: '$20',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit',
+  '@md': {
+    width: '$36'
+  },
+  '@lg': {
+    width: '$48'
+  }
+});
+var Dot$1 = /*#__PURE__*/styled('div', {
+  width: '$6',
+  height: '$6',
+  backgroundColor: '$foreground',
+  borderRadius: '50%',
+  '@lg': {
+    width: '$8',
+    height: '$8'
+  }
+});
+var ArrowRight$1 = /*#__PURE__*/styled('div', {
+  width: '0px',
+  height: '0px',
+  borderTop: '5px solid transparent',
+  borderBottom: '5px solid transparent',
+  borderLeft: '5px solid $foreground'
+});
+var StatusContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  right: '-8px',
+  top: '30%',
+  background: '$background',
+  borderRadius: '50%',
+  display: 'flex',
+  justifyContent: 'center',
+  '@md': {
+    top: '40%',
+    right: '-8px'
+  }
+});
+function SwapDetail(_ref) {
+  var swap = _ref.swap,
+    status = _ref.status,
+    onClick = _ref.onClick;
+  var firstStep = swap.steps[0];
+  var lastStep = swap.steps[swap.steps.length - 1];
+  return React__default.createElement(Container$3, {
+    onClick: onClick.bind(null, swap.requestId)
+  }, React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+    variant: "outlined",
+    align: "grow",
+    size: "large",
+    type: status === 'failed' ? 'error' : status === 'success' ? 'success' : undefined
+  }, React__default.createElement(SwapContainer$1, null, React__default.createElement(StepDetail, {
+    logo: firstStep.fromLogo,
+    symbol: firstStep.fromSymbol,
+    chainLogo: firstStep.fromBlockchainLogo,
+    blockchain: firstStep.fromBlockchain,
+    amount: swap.inputAmount
+  }), React__default.createElement(Arrow, null, React__default.createElement(Dot$1, null), React__default.createElement(Line$1, null), React__default.createElement(ArrowRight$1, null)), React__default.createElement(StepDetail, {
+    logo: lastStep.fromLogo,
+    symbol: lastStep.fromSymbol,
+    chainLogo: lastStep.fromBlockchainLogo,
+    blockchain: lastStep.fromBlockchain,
+    amount: lastStep.outputAmount
+  })))), React__default.createElement(StatusContainer, null, status === 'running' ? React__default.createElement(TryAgainIcon, {
+    size: 16
+  }) : status === 'failed' ? React__default.createElement(InfoCircleIcon, {
+    size: 18,
+    color: "error"
+  }) : React__default.createElement(CheckCircleIcon, {
+    size: 18,
+    color: "success"
+  })));
+}
+
+function VirtualizedList(props) {
+  var itemCount = props.itemCount,
+    hasNextPage = props.hasNextPage,
+    isNextPageLoading = props.isNextPageLoading,
+    loadNextPage = props.loadNextPage,
+    Item = props.Item,
+    innerElementType = props.innerElementType,
+    size = props.size;
+  var listRef = useRef(null);
+  var isItemLoaded = function isItemLoaded(index) {
+    return !hasNextPage || index < itemCount;
+  };
+  return React__default.createElement(InfiniteLoader, {
+    isItemLoaded: isItemLoaded,
+    itemCount: hasNextPage ? itemCount + 1 : itemCount,
+    loadMoreItems: isNextPageLoading ? function () {
+      // do nothing
+    } : loadNextPage,
+    threshold: 1
+  }, function (_ref) {
+    var onItemsRendered = _ref.onItemsRendered;
+    return React__default.createElement(AutoSizer, null, function (_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
+      return React__default.createElement(VariableSizeList, {
+        innerElementType: innerElementType,
+        ref: listRef,
+        itemSize: function itemSize() {
+          return size;
+        },
+        itemCount: itemCount,
+        height: height,
+        width: width,
+        onItemsRendered: onItemsRendered
+      }, function (_ref3) {
+        var index = _ref3.index,
+          style = _ref3.style;
+        return isItemLoaded(index) ? React__default.createElement(Item, {
+          index: index,
+          style: style
+        }) : null;
+      });
+    });
+  });
+}
+
+var _excluded$D = ["style"];
+var PAGE_SIZE = 20;
+var TokenImage = /*#__PURE__*/styled('img', {
+  width: '$32',
+  maxHeight: '$32',
+  marginRight: '$16'
+});
+var TokenNameContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var TokenAmountContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end'
+});
+var filterTokens = function filterTokens(list, searchedText, outputCount) {
+  if (searchedText) return list.filter(function (token) {
+    return containsText$1(token.symbol, searchedText) || containsText$1(token.address || '', searchedText) || containsText$1(token.name || '', searchedText);
+  }).slice(0, outputCount);else return list.slice(0, outputCount);
+};
+function TokenList(props) {
+  var list = props.list,
+    searchedText = props.searchedText,
+    onChange = props.onChange;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelected = function changeSelected(token) {
+    setSelected(token);
+    onChange(token);
+  };
+  var Token = function Token(_ref) {
+    var _currentToken$balance;
+    var filteredTokens = _ref.filteredTokens,
+      index = _ref.index,
+      style = _ref.style;
+    var currentToken = filteredTokens[index];
+    return React__default.createElement("div", {
+      style: _extends({
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%'
+      }, style, {
+        height: '48px',
+        top: parseFloat(style == null ? void 0 : style.top) + 0 + "px"
+      })
+    }, React__default.createElement(Button, {
+      variant: "outlined",
+      size: "large",
+      align: "start",
+      onClick: changeSelected.bind(null, currentToken),
+      type: (selected == null ? void 0 : selected.symbol) === currentToken.symbol && (selected == null ? void 0 : selected.address) === currentToken.address ? 'primary' : undefined,
+      prefix: React__default.createElement(TokenImage, {
+        src: currentToken.image
+      }),
+      suffix: ((_currentToken$balance = currentToken.balance) == null ? void 0 : _currentToken$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
+        variant: "body2"
+      }, currentToken.balance.amount), React__default.createElement(Typography, {
+        variant: "caption"
+      }, currentToken.balance.usdValue + "$"))
+    }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
+      variant: "body1"
+    }, currentToken.symbol), React__default.createElement(Typography, {
+      variant: "body2"
+    }, currentToken.name))));
+  };
+  var _useState2 = useState(true),
+    hasNextPage = _useState2[0],
+    setHasNextPage = _useState2[1];
+  var _useState3 = useState(false),
+    isNextPageLoading = _useState3[0],
+    setIsNextPageLoading = _useState3[1];
+  var _useState4 = useState(list),
+    filteredTokens = _useState4[0],
+    setFilteredTokens = _useState4[1];
+  var loadNextPage = function loadNextPage() {
+    setIsNextPageLoading(true);
+    setTimeout(function () {
+      setIsNextPageLoading(false);
+      setFilteredTokens(filterTokens(list, searchedText, filteredTokens.length + PAGE_SIZE));
+    }, 0);
+  };
+  useEffect(function () {
+    setFilteredTokens(filterTokens(list, searchedText, PAGE_SIZE));
+  }, [searchedText]);
+  useEffect(function () {
+    setHasNextPage(filterTokens(list, searchedText).length > filterTokens.length);
+  }, [filteredTokens.length]);
+  var innerElementType = forwardRef(function (_ref2, ref) {
+    var style = _ref2.style,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    return React__default.createElement("div", Object.assign({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: ref,
+      style: _extends({}, style, {
+        // eslint-disable-next-line react/prop-types
+        height: parseFloat(style == null ? void 0 : style.height) + 8 * 2 + "px"
+      })
+    }, rest));
+  });
+  return React__default.createElement("div", {
+    style: {
+      height: '450px'
+    }
+  }, React__default.createElement(VirtualizedList, {
+    Item: function Item(_ref3) {
+      var index = _ref3.index,
+        style = _ref3.style;
+      return React__default.createElement(Token, {
+        filteredTokens: filteredTokens,
+        style: style,
+        index: index
+      });
+    },
+    hasNextPage: hasNextPage,
+    isNextPageLoading: isNextPageLoading,
+    itemCount: filteredTokens.length,
+    loadNextPage: loadNextPage,
+    innerElementType: innerElementType,
+    size: 56
+  }));
+}
+
+function TokenSelector(props) {
+  var list = props.list,
+    type = props.type,
+    selected = props.selected,
+    onChange = props.onChange,
+    onBack = props.onBack,
+    hasHeader = props.hasHeader;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Token",
+    hasHeader: hasHeader,
+    onBack: onBack,
+    Content: function Content(_ref) {
+      var searchedFor = _ref.searchedFor;
+      return React__default.createElement(TokenList, {
+        searchedText: searchedFor,
+        list: list,
+        selected: selected,
+        onChange: onChange
+      });
+    }
+  });
+}
+
+var TooltipTrigger = /*#__PURE__*/styled(Trigger, {
+  border: 0,
+  padding: 0,
+  backgroundColor: 'transparent'
+});
+var TooltipContent = /*#__PURE__*/styled(Content$1, {
+  borderRadius: '$5',
+  padding: '$4 $8',
+  fontSize: '$14',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: '$primary',
+        color: '$white'
+      },
+      error: {
+        backgroundColor: '$error',
+        color: '$white'
+      },
+      warning: {
+        backgroundColor: '$warning',
+        color: '$white'
+      },
+      success: {
+        backgroundColor: '$success',
+        color: '$white'
+      },
+      gray: {
+        backgroundColor: '$neutrals300',
+        color: '$black'
+      },
+      black: {
+        backgroundColor: '$black',
+        color: '$white'
+      },
+      white: {
+        backgroundColor: '$white',
+        color: '$black'
+      }
+    }
+  }
+});
+var TooltipArrow = /*#__PURE__*/styled(Arrow$1, {
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary'
+      },
+      error: {
+        fill: '$error'
+      },
+      warning: {
+        fill: '$warning'
+      },
+      success: {
+        fill: '$success'
+      },
+      gray: {
+        fill: '$neutrals300'
+      },
+      black: {
+        fill: '$black'
+      },
+      white: {
+        fill: '$white'
+      }
+    }
+  }
+});
+function Tooltip(_ref) {
+  var children = _ref.children,
+    content = _ref.content,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'top' : _ref$side,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'gray' : _ref$color;
+  return React__default.createElement(Provider, null, React__default.createElement(Root$3, null, React__default.createElement(TooltipTrigger, null, children), React__default.createElement(Portal, null, React__default.createElement(TooltipContent, {
+    color: color,
+    side: side,
+    sideOffset: 5
+  }, content, React__default.createElement(TooltipArrow, {
+    color: color
+  })))));
+}
+
+var Line$2 = /*#__PURE__*/styled('div', {
+  width: '0',
+  marginLeft: '$12',
+  height: '36px',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit'
+});
+var SwapperContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: '6px'
+});
+var Fee = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var SwapperLogo$1 = /*#__PURE__*/styled('img', {
+  width: '$16',
+  height: '$16'
+});
+var RelativeContainer$1 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Footer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var Dot$2 = /*#__PURE__*/styled('div', {
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$foreground',
+  borderRadius: '4px',
+  marginLeft: '$8'
+});
+var ArrowDown = /*#__PURE__*/styled('div', {
+  width: '0px',
+  height: '0px',
+  borderLeft: '5px solid transparent',
+  borderRight: '5px solid transparent',
+  borderTop: '5px solid $foreground',
+  marginLeft: '$8'
+});
+var Alerts = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function ConfirmSwap(_ref) {
+  var _bestRoute$result;
+  var bestRoute = _ref.bestRoute,
+    onBack = _ref.onBack,
+    onConfirm = _ref.onConfirm,
+    loading = _ref.loading,
+    error = _ref.error,
+    warning = _ref.warning;
+  return React__default.createElement(SecondaryPage, {
+    textField: false,
+    title: "Swap",
+    onBack: onBack,
+    Footer: React__default.createElement(Footer, null, React__default.createElement(Button, {
+      type: "primary",
+      fullWidth: true,
+      loading: loading,
+      variant: "contained",
+      onClick: onConfirm
+    }, "Swap")),
+    Content: bestRoute == null ? void 0 : (_bestRoute$result = bestRoute.result) == null ? void 0 : _bestRoute$result.swaps.map(function (swap, index) {
+      var _bestRoute$result2;
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(Alerts, null, error && React__default.createElement(Alert, {
+        description: error,
+        type: "error"
+      }), warning && React__default.createElement(Alert, {
+        description: warning,
+        type: "warning"
+      })), index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
+        logo: swap.from.logo,
+        symbol: swap.from.symbol,
+        chainLogo: swap.from.blockchainLogo,
+        blockchain: swap.from.blockchain,
+        amount: swap.fromAmount
+      }), React__default.createElement(Dot$2, null)), React__default.createElement(Line$2, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
+        src: swap.swapperLogo,
+        alt: swap.swapperId
+      }), React__default.createElement("div", null, React__default.createElement(Typography, {
+        ml: 4,
+        variant: "caption"
+      }, swap.swapperType, " from ", swap.from.symbol, " to ", swap.to.symbol, ' ', "via ", swap.swapperId, ' '), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
+        ml: 4,
+        variant: "caption"
+      }, parseFloat(swap.fee[0].amount).toFixed(6), " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
+        logo: swap.to.logo,
+        symbol: swap.to.symbol,
+        chainLogo: swap.to.blockchainLogo,
+        blockchain: swap.to.blockchain,
+        amount: swap.toAmount
+      }));
+    })
+  });
+}
+
+var Footer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var AlertContainer = /*#__PURE__*/styled('div', {
+  padding: '$16 0'
+});
+function ConfirmWallets(_ref) {
+  var _swap$result, _swap$result2, _swap$result3;
+  var onBack = _ref.onBack,
+    loading = _ref.loading,
+    onConfirm = _ref.onConfirm,
+    swap = _ref.swap,
+    requiredWallets = _ref.requiredWallets,
+    selectableWallets = _ref.selectableWallets,
+    onChange = _ref.onChange,
+    confirmDisabled = _ref.confirmDisabled;
+  var firstStep = (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
+  var lastStep = (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
+  var fromAmount = decimalNumber(firstStep == null ? void 0 : firstStep.fromAmount, 3);
+  var toAmount = decimalNumber(lastStep == null ? void 0 : lastStep.toAmount, 3);
+  return React__default.createElement(SecondaryPage, {
+    textField: false,
+    title: "Swap",
+    onBack: onBack,
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
+      fullWidth: true,
+      loading: loading,
+      type: "primary",
+      variant: "contained",
+      onClick: onConfirm,
+      disabled: confirmDisabled
+    }, "Confirm")),
+    Content: React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
+      variant: "h6",
+      mb: 12
+    }, "Confirm swap ", fromAmount, " ", lastStep == null ? void 0 : lastStep.from.symbol, " (", firstStep == null ? void 0 : firstStep.from.blockchain, ") to ", toAmount, " ", lastStep == null ? void 0 : lastStep.to.symbol, ' ', "(on ", lastStep == null ? void 0 : lastStep.to.blockchain, ")"), requiredWallets.map(function (wallet, index) {
+      var list = selectableWallets.filter(function (w) {
+        return wallet === w.chain;
+      });
+      return React__default.createElement("div", {
+        key: index
+      }, React__default.createElement(Typography, {
+        variant: "body2",
+        mb: 12,
+        mt: 12
+      }, index + 1, ") Your ", wallet, " Wallet"), list.length === 0 && React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
+        type: "error",
+        description: "You should connect a " + wallet + " supported wallet"
+      })), list.length != 0 && React__default.createElement(SelectableWalletList, {
+        list: list,
+        onChange: onChange
+      }));
+    }))
+  });
+}
+
+function groupingOfSwaps(list) {
+  return list.reduce(function (acc, swap) {
+    var categoryIndex = acc.findIndex(function (item) {
+      return swap.status === 'running' && item.title == 'Active Swaps' || swap.status !== 'running' && item.title == 'Recent Swaps';
+    });
+    if (categoryIndex > -1) {
+      acc[categoryIndex].swaps.push(swap);
+    } else {
+      acc.push({
+        title: swap.status === 'running' ? 'Active Swaps' : 'Recent Swaps',
+        swaps: [swap]
+      });
+    }
+    return acc;
+  }, []);
+}
+
+var BodyError = /*#__PURE__*/styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var ErrorMsg$1 = /*#__PURE__*/styled(Typography, {
+  color: '$error'
+});
+var filteredHistory = function filteredHistory(list, searchedFor) {
+  return list.filter(function (swap) {
+    var firstStep = swap.steps[0];
+    var lastStep = swap.steps[swap.steps.length - 1];
+    return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
+  });
+};
+var Group = /*#__PURE__*/styled('div', {
+  marginBottom: '$24',
+  paddingRight: '$8'
+});
+var GroupTitle = /*#__PURE__*/styled(Typography, {
+  color: '$neutrals500'
+});
+var SwapsGroup = function SwapsGroup(props) {
+  var list = props.list,
+    onSwapClick = props.onSwapClick;
+  var swapsInGroup = groupingOfSwaps(list);
+  return React__default.createElement(React__default.Fragment, null, swapsInGroup.map(function (group) {
+    return React__default.createElement(Group, null, React__default.createElement(GroupTitle, {
+      variant: "body2"
+    }, group.title), group.swaps.map(function (swap) {
+      return React__default.createElement(SwapDetail, {
+        swap: swap,
+        status: swap.status,
+        onClick: onSwapClick
+      });
+    }));
+  }));
+};
+function History(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? [] : _ref$list,
+    onBack = _ref.onBack,
+    onSwapClick = _ref.onSwapClick;
+  return React__default.createElement(SecondaryPage, {
+    onBack: onBack,
+    textField: true,
+    textFieldPlaceholder: "Search By Blockchain Or Token",
+    title: "History",
+    Content: function Content(_ref2) {
+      var searchedFor = _ref2.searchedFor;
+      var filterSwaps = filteredHistory(list, searchedFor);
+      return filterSwaps.length ? React__default.createElement(SwapsGroup, {
+        list: filterSwaps,
+        onSwapClick: onSwapClick
+      }) : React__default.createElement(BodyError, null, React__default.createElement(ErrorMsg$1, {
+        variant: "caption"
+      }, "Not Found"));
+    }
+  });
+}
+
+var StyledAnchor = /*#__PURE__*/styled('a', {
+  color: '$primary',
+  fontWeight: '$600',
+  marginLeft: '$12'
+});
+var InternalDetailsContainer = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
+var InternalDetail = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  padding: '$10'
+});
+var DescriptionContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var Description = /*#__PURE__*/styled(Typography, {
+  color: '$success',
+  marginLeft: '$8'
+});
+var Error = /*#__PURE__*/styled(Description, {
+  color: '$error'
+});
+var Line$3 = /*#__PURE__*/styled('div', {
+  width: '0',
+  marginLeft: '$12',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit'
+});
+function SwapHistory(props) {
+  var pendingSwap = props.pendingSwap,
+    onBack = props.onBack;
+  return React__default.createElement(SecondaryPage, {
+    title: "History",
+    textField: false,
+    onBack: onBack,
+    Content: React__default.createElement(React__default.Fragment, null, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+      return React__default.createElement(React__default.Fragment, null, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
+        logo: step.fromLogo,
+        symbol: step.fromSymbol,
+        chainLogo: step.fromBlockchainLogo,
+        blockchain: step.fromBlockchain,
+        amount: pendingSwap.inputAmount
+      }), React__default.createElement(Dot$2, null)), React__default.createElement(Line$3, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
+        src: step.swapperLogo,
+        alt: step.swapperId
+      }), React__default.createElement("div", null, React__default.createElement(Typography, {
+        ml: 4,
+        variant: "caption"
+      }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
+        ml: 4,
+        variant: "caption"
+      }, "fee")))), React__default.createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$3, null), !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
+        return React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
+          color: "success"
+        }), React__default.createElement(Description, {
+          variant: "body2"
+        }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1)))), React__default.createElement(StyledAnchor, {
+          href: item.url,
+          target: "_blank",
+          rel: "noreferrer",
+          key: index
+        }, "TX-Link"));
+      }), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
+        color: "error"
+      }), React__default.createElement(Error, {
+        variant: "body2"
+      }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
+        logo: step.toLogo,
+        symbol: step.toSymbol,
+        chainLogo: step.toBlockchainLogo,
+        blockchain: step.toBlockchain,
+        amount: step.outputAmount
+      }));
+    }))
+  });
+}
+
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, MinusCircleIcon, Modal, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+//# sourceMappingURL=ui.esm.js.map