@rango-dev/ui 0.1.10-next.102

package/dist/ui.esm.js

@@ -0,0 +1,4870 @@
+import React__default, { createElement, forwardRef, Fragment, useState, useEffect } from 'react';
+import { Provider, Root, Portal, Trigger, Content as Content$1, Arrow } from '@radix-ui/react-tooltip';
+import { VariableSizeList } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { Indicator, Root as Root$1 } from '@radix-ui/react-checkbox';
+import { createPortal } from 'react-dom';
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import { Root as Root$2, Thumb } from '@radix-ui/react-switch';
+import { Root as Root$3, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
+import { ChromePicker } from 'react-color';
+
+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',
+    // Only use this color when you are going to use white for both dark and light theme.
+    white: '#fff'
+  },
+  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: '8px',
+    10: '12px'
+  },
+  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 = function DeleteCircleIcon(_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 = function CheckSquareIcon(_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 = function AddIcon(_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 = function InfoCircleIcon(_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 = function AddCircleIcon(_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 = function MinusCircleIcon(_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 = function CheckCircleIcon(_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 = function CheckIcon(_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 = function BanIcon(_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 = function WarningIcon(_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 = function HistoryIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("path", {
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+  }), createElement("polyline", {
+    points: "14 2 14 8 20 8"
+  }), createElement("line", {
+    x1: "16",
+    y1: "13",
+    x2: "8",
+    y2: "13"
+  }), createElement("line", {
+    x1: "16",
+    y1: "17",
+    x2: "8",
+    y2: "17"
+  }), createElement("polyline", {
+    points: "10 9 9 9 8 9"
+  }));
+};
+HistoryIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$b = ["size", "color"];
+var GasIcon = function GasIcon(_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 = function SettingsIcon(_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,
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }), createElement("path", {
+    d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+  }));
+};
+SettingsIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$d = ["size", "color"];
+var TrashIcon = function TrashIcon(_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 = function SearchMinusIcon(_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 = function SearchIcon(_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 = function AngleRightIcon(_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 = function AngleUpIcon(_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 = function AngleDownIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return React__default.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), React__default.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 = function AngleLeftIcon(_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 = function DownloadIcon(_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 = ["color", "size"];
+var ChevronRightIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("polyline", {
+    points: "9 18 15 12 9 6"
+  }));
+});
+ChevronRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$m = ["size", "color"];
+var ArrowRightIcon = function ArrowRightIcon(_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",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }), createElement("polyline", {
+    points: "12 5 19 12 12 19"
+  }));
+};
+ArrowRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$n = ["size", "color"];
+var RetryRightIcon = function RetryRightIcon(_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: "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$o = ["size", "color"];
+var RetryLeftIcon = function RetryLeftIcon(_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: "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$p = ["size", "color"];
+var TryAgainIcon = function TryAgainIcon(_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: "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$q = ["size", "color"];
+var VerticalSwapIcon = function VerticalSwapIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+  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$r = ["size", "color"];
+var HorizontalSwapIcon = function HorizontalSwapIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  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$s = ["color", "size"];
+var RetryIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("polyline", {
+    points: "23 4 23 10 17 10"
+  }), createElement("path", {
+    d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10"
+  }));
+});
+RetryIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$t = ["size", "color"];
+var WalletIcon = function WalletIcon(_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: "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$u = ["size", "color"];
+var AddWalletIcon = function AddWalletIcon(_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.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$v = ["size", "color"];
+var DeleteWalletIcon = function DeleteWalletIcon(_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: "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$w = ["size", "color"];
+var CheckWalletIcon = function CheckWalletIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+  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$x = ["size", "color"];
+var SwapWalletIcon = function SwapWalletIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  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$y = ["color", "size"];
+var DisconnectIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+  }), createElement("polyline", {
+    points: "16 17 21 12 16 7"
+  }), createElement("line", {
+    x1: "21",
+    y1: "12",
+    x2: "9",
+    y2: "12"
+  }));
+});
+DisconnectIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$z = ["size", "color"];
+var BagIcon = function BagIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+  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$A = ["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$A);
+  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$B = ["size", "color"];
+var SignatureIcon = function SignatureIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  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$C = ["size", "color"];
+var CopyIcon = function CopyIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 64 64",
+    color: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("g", {
+    id: "Text-files"
+  }, createElement("path", {
+    d: "M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228\n\t\tC49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999\n\t\tc0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64\n\t\th32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002\n\t\tC58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228\n\t\tc0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999\n\t\tc0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z\n\t\t M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699\n\t\tc-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946\n\t\tc2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999\n\t\th3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+  }), createElement("path", {
+    d: "M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005\n\t\tc0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997\n\t\tC39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+  }), createElement("path", {
+    d: "M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986\n\t\tc0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016\n\t\tC39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+  }), createElement("path", {
+    d: "M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997\n\t\tS39.16465,29.4603004,38.6031494,29.4603004z"
+  }), createElement("path", {
+    d: "M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997\n\t\tS29.0059509,37.5872993,28.4444485,37.5872993z"
+  })));
+};
+CopyIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$D = ["children", "className", "color"];
+var TypographyContainer = /*#__PURE__*/styled('span', {
+  margin: 0,
+  display: 'inline-block',
+  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'
+      },
+      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'
+        }
+      },
+      body3: {
+        fontSize: '$12',
+        fontWeight: '$400'
+      },
+      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,
+    className = _ref.className,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+  var customCss = color ? {
+    color: color.startsWith('$') ? color : "$" + color
+  } : {
+    color: '$foreground'
+  };
+  return React__default.createElement(TypographyContainer, Object.assign({
+    className: "_typography _text " + (className || ''),
+    css: customCss
+  }, 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('div', {
+  position: 'absolute',
+  right: -4,
+  bottom: -4,
+  width: '$16',
+  height: '$16',
+  padding: '$2',
+  borderRadius: '50%',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
+  img: {
+    width: '100%',
+    display: 'block'
+  }
+});
+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',
+  display: 'block'
+});
+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, null, React__default.createElement("img", {
+    src: chainLogo,
+    alt: blockchain
+  }))), React__default.createElement(Detail, {
+    pl: direction === 'horizontal'
+  }, React__default.createElement(Typography, {
+    noWrap: true,
+    variant: direction === 'vertical' ? 'body2' : 'h6'
+  }, amount ? parseFloat(amount).toFixed(2) : '?', " ", symbol), React__default.createElement(SubTitle, {
+    noWrap: true,
+    variant: "caption",
+    color: "neutrals800"
+  }, "on ", blockchain)));
+}
+
+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 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, {
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary'
+      },
+      error: {
+        fill: '$error'
+      },
+      warning: {
+        fill: '$warning'
+      },
+      success: {
+        fill: '$success'
+      },
+      gray: {
+        fill: '$neutrals300'
+      },
+      black: {
+        fill: '$black'
+      },
+      white: {
+        fill: '$white'
+      }
+    }
+  }
+});
+var ChildrenWrapper = /*#__PURE__*/styled('div', {
+  display: 'inline-block'
+});
+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, null, React__default.createElement(TooltipTrigger, {
+    asChild: true
+  }, React__default.createElement(ChildrenWrapper, 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 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%',
+  border: '1px solid $neutrals400',
+  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 pulse = /*#__PURE__*/keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+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 CostContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  variants: {
+    warning: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
+var TotalFee = /*#__PURE__*/styled(Typography, {
+  variants: {
+    warning: {
+      "true": {
+        color: '$warning300'
+      }
+    }
+  }
+});
+var SkeletonContainer$1 = /*#__PURE__*/styled('div', {
+  padding: '$4',
+  '@md': {
+    padding: '$8'
+  }
+});
+var SwapperContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function BestRoute(props) {
+  var _data$result;
+  var data = props.data,
+    loading = props.loading,
+    error = props.error,
+    totalFee = props.totalFee,
+    feeWarning = props.feeWarning,
+    totalTime = props.totalTime;
+  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(Tooltip, {
+    content: "Transaction cost (fee)"
+  }, React__default.createElement(CostContainer, {
+    warning: feeWarning
+  }, React__default.createElement(GasIcon, {
+    size: 20,
+    color: feeWarning ? 'warning' : undefined
+  }), React__default.createElement(TotalFee, {
+    mt: 4,
+    align: "center",
+    variant: "caption",
+    warning: feeWarning
+  }, error && '-', !!data && "$" + totalFee))), React__default.createElement(HR, null), React__default.createElement(Tooltip, {
+    content: "Time estimate"
+  }, React__default.createElement(CostContainer, {
+    warning: feeWarning
+  }, React__default.createElement(TimeIcon, {
+    size: 20
+  }), React__default.createElement(Typography, {
+    mt: 4,
+    align: "center",
+    variant: "caption"
+  }, error && '-', !!data && "~" + totalTime + "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(Fragment, {
+      key: index
+    }, 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 _excluded$E = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _ghost, _css, _css2, _css3;
+var ButtonContainer = /*#__PURE__*/styled('button', {
+  borderRadius: '$5',
+  fontSize: '$16',
+  fontWeight: '$400',
+  cursor: 'pointer',
+  padding: '0 $12',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.35s',
+  border: '0',
+  '&:active': {
+    transform: 'scale(0.95)'
+  },
+  variants: {
+    align: {
+      start: {
+        display: 'flex',
+        width: '100%'
+      },
+      grow: {
+        display: 'flex',
+        width: '100%'
+      }
+    },
+    size: {
+      compact: {},
+      free: {},
+      small: {
+        height: '$32'
+      },
+      medium: {
+        height: '$40'
+      },
+      large: {
+        height: '$48'
+      }
+    },
+    variant: {
+      contained: {
+        backgroundColor: '$neutrals300',
+        color: '$foreground',
+        border: 0,
+        '&:hover': {
+          backgroundColor: '$neutrals200'
+        },
+        '&:disabled': {
+          background: '$neutrals400'
+        },
+        '&:disabled:hover': {
+          background: '$neutrals400',
+          transform: 'unset'
+        }
+      },
+      outlined: {
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        borderColor: '$neutrals400',
+        color: '$foreground',
+        '&:hover': {
+          borderColor: '$neutrals600'
+        },
+        '&:disabled': {
+          borderColor: '$neutrals300',
+          color: '$neutrals400'
+        }
+      },
+      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: {
+      background: '$primary',
+      color: '$white',
+      '&:hover': {
+        background: '$primary700'
+      },
+      '&:visited': {
+        background: '$primary900'
+      },
+      '&:focus': {
+        background: '$primary600'
+      }
+    }
+  }, {
+    type: 'primary',
+    variant: 'outlined',
+    css: {
+      color: '$primary !important',
+      borderColor: '$primary',
+      '&: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: (_css = {
+      background: '$error',
+      $$color: '$colors$background'
+    }, _css["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css.color = '$$color !important', _css['&:hover'] = {
+      background: '$error300'
+    }, _css['&:visited'] = {
+      background: '$error700'
+    }, _css['&:focus'] = {
+      background: '$error700'
+    }, _css)
+  }, {
+    type: 'error',
+    variant: 'outlined',
+    css: {
+      color: '$error !important',
+      borderColor: '$error',
+      '&: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: (_css2 = {
+      background: '$warning',
+      $$color: '$colors$background'
+    }, _css2["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css2.color = '$$color !important', _css2['&:hover'] = {
+      background: '$warning300'
+    }, _css2['&:visited'] = {
+      background: '$warning700'
+    }, _css2['&:focus'] = {
+      background: '$warning700'
+    }, _css2)
+  }, {
+    type: 'warning',
+    variant: 'outlined',
+    css: {
+      color: '$warning !important',
+      borderColor: '$warning',
+      '&: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: (_css3 = {
+      background: '$success',
+      $$color: '$colors$background'
+    }, _css3["." + darkTheme + " &"] = {
+      $$color: '$colors$foreground'
+    }, _css3.color = '$$color !important', _css3['&:hover'] = {
+      background: '$success300'
+    }, _css3['&:visited'] = {
+      background: '$success700'
+    }, _css3['&:focus'] = {
+      background: '$success700'
+    }, _css3)
+  }, {
+    type: 'success',
+    variant: 'outlined',
+    css: {
+      color: '$success !important',
+      borderColor: '$success',
+      '&: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'
+      }
+    }
+  }, {
+    size: 'compact',
+    css: {
+      padding: '$2 $4',
+      fontSize: '$12'
+    }
+  }],
+  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$E);
+  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,
+    className: "_text"
+  }, children), loading && React__default.createElement(Spinner, {
+    size: 16,
+    color: props.type
+  }), suffix);
+}
+
+var FilledCircle = /*#__PURE__*/styled('span', {
+  width: '10px',
+  height: '10px',
+  backgroundColor: '$primary',
+  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,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelectedBlockchain = function changeSelectedBlockchain(blockchain) {
+    setSelected(blockchain);
+    onChange(blockchain);
+  };
+  var isSelect = function isSelect(name) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.findIndex(function (item) {
+        return name === item.name;
+      }) > -1;
+    }
+    return name === (selected == null ? void 0 : selected.name);
+  };
+  return React__default.createElement(ListContainer, null, list.map(function (blockchain, index) {
+    return React__default.createElement(Button, {
+      type: isSelect(blockchain.name) ? 'primary' : undefined,
+      variant: "outlined",
+      size: "large",
+      prefix: React__default.createElement(Image, {
+        src: blockchain.logo
+      }),
+      suffix: isSelect(blockchain.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 DividerContainer = /*#__PURE__*/styled('div', {
+  variants: {
+    size: {
+      4: {
+        height: '$4'
+      },
+      8: {
+        height: '$8'
+      },
+      12: {
+        height: '$12'
+      },
+      16: {
+        height: '$16'
+      },
+      18: {
+        height: '$18'
+      },
+      20: {
+        height: '$20'
+      },
+      24: {
+        height: '$24'
+      },
+      32: {
+        height: '$32'
+      }
+    }
+  }
+});
+function Divider(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size;
+  return React__default.createElement(DividerContainer, {
+    size: size
+  });
+}
+
+var HeaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$8 0',
+  position: 'relative'
+});
+var BackButton = /*#__PURE__*/styled(Button, {
+  padding: '$8'
+});
+function Header(props) {
+  return React__default.createElement(HeaderContainer, null, props.onBack ? React__default.createElement(BackButton, {
+    variant: "ghost",
+    size: "small",
+    onClick: props.onBack
+  }, React__default.createElement(AngleLeftIcon, {
+    size: 24
+  })) : null, props.prefix, React__default.createElement(Typography, {
+    variant: "h4"
+  }, props.title), props.suffix || React__default.createElement("div", null));
+}
+
+var _excluded$F = ["label", "prefix", "suffix", "children", "size", "style"];
+var InputContainer = /*#__PURE__*/styled('div', {
+  backgroundColor: '$background',
+  padding: '1px',
+  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: '$success',
+    outline: '1px solid $success'
+  },
+  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: '$foreground',
+  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: '$14',
+  color: '$foreground',
+  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$F);
+  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
+    className: "_text"
+  }, inputAttributes.id && {
+    htmlFor: inputAttributes.id
+  }), label), React__default.createElement(InputContainer, {
+    disabled: inputAttributes.disabled,
+    prefix: !!prefix,
+    suffix: !!suffix,
+    size: size,
+    style: style,
+    className: "_text"
+  }, prefix || null, React__default.createElement(Input, Object.assign({
+    className: "_text"
+  }, inputAttributes, {
+    spellCheck: false,
+    ref: ref
+  })), suffix || null));
+});
+
+var ContentContainer = /*#__PURE__*/styled('div', {
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1',
+  padding: '0 $4'
+});
+var TextFieldContainer = /*#__PURE__*/styled('div', {
+  padding: '1px'
+});
+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(React__default.Fragment, null, hasHeader && React__default.createElement(Header, {
+    onBack: onBack,
+    title: title || '',
+    suffix: TopButton
+  }), React__default.createElement(ContentContainer, null, props.textField && React__default.createElement(TextFieldContainer, 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(Divider, {
+    size: 16
+  })), props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
+}
+
+var containsText = function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+};
+var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLength) {
+  if (maxChars === void 0) {
+    maxChars = 8;
+  }
+  if (ellipsisLength === void 0) {
+    ellipsisLength = 3;
+  }
+  if (!address) return null;
+  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  var start = Math.ceil((address.length - maxChars) / 2);
+  var end = address.length - maxChars;
+  return "" + address.substr(start, maxChars) + '.'.repeat(ellipsisLength) + address.substr(end);
+};
+
+var SpacerContainer = /*#__PURE__*/styled('div', {
+  variants: {
+    size: {
+      4: {},
+      8: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {}
+    },
+    direction: {
+      vertical: {},
+      horizontal: {}
+    }
+  },
+  compoundVariants: [{
+    size: 4,
+    direction: 'horizontal',
+    css: {
+      width: '$4'
+    }
+  }, {
+    size: 4,
+    direction: 'vertical',
+    css: {
+      height: '$4'
+    }
+  }, {
+    size: 8,
+    direction: 'horizontal',
+    css: {
+      width: '$8'
+    }
+  }, {
+    size: 8,
+    direction: 'vertical',
+    css: {
+      height: '$8'
+    }
+  }, {
+    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 MainContainer = /*#__PURE__*/styled('div', {
+  width: '100%',
+  padding: '$16',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  '.main': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.footer': {
+    paddingTop: '$8'
+  },
+  '&.hasIcon .footer': {
+    paddingLeft: '$32'
+  },
+  variants: {
+    type: {
+      primary: {
+        color: '$primary200'
+      },
+      secondary: {
+        color: '$foreground'
+      },
+      success: {
+        color: '$success300'
+      },
+      warning: {
+        color: '$warning500'
+      },
+      error: {
+        color: '$error300'
+      }
+    }
+  }
+});
+function Alert(props) {
+  var type = props.type,
+    children = props.children,
+    title = props.title;
+  var showIcon = ['error', 'success', 'warning'].includes(type);
+  return React__default.createElement(MainContainer, {
+    type: type,
+    className: showIcon ? 'hasIcon' : ''
+  }, React__default.createElement("div", {
+    className: "main"
+  }, showIcon && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    style: {
+      width: '32px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, type === 'success' && React__default.createElement(CheckCircleIcon, {
+    color: type,
+    size: 24
+  }), type === 'warning' && React__default.createElement(WarningIcon, {
+    color: type,
+    size: 24
+  }), type === 'error' && React__default.createElement(InfoCircleIcon, {
+    color: type,
+    size: 24
+  }), React__default.createElement(Spacer, {
+    size: 8
+  }))), React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flexDirection: 'column',
+      width: '100%'
+    }
+  }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
+    className: "title",
+    variant: "h6",
+    color: type
+  }, title), !!children && React__default.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  })), children)), props.footer ? React__default.createElement("div", {
+    className: "footer"
+  }, props.footer) : null);
+}
+
+function LoadingFailedAlert() {
+  return React__default.createElement(Alert, {
+    type: "error",
+    title: " Error connecting server, please reload the app and try again."
+  });
+}
+
+function NotFoundAlert(props) {
+  var catergory = props.catergory,
+    searchedFor = props.searchedFor;
+  return React__default.createElement(Alert, {
+    type: "secondary",
+    title: catergory + " " + (searchedFor ? "'" + searchedFor + "'" : '') + " not found."
+  });
+}
+
+function VirtualizedList(props) {
+  var itemCount = props.itemCount,
+    hasNextPage = props.hasNextPage,
+    loadNextPage = props.loadNextPage,
+    Item = props.Item,
+    innerElementType = props.innerElementType,
+    size = props.size;
+  var isItemLoaded = function isItemLoaded(index) {
+    return !hasNextPage || index < itemCount;
+  };
+  return React__default.createElement(AutoSizer, null, function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    return React__default.createElement(InfiniteLoader, {
+      isItemLoaded: isItemLoaded,
+      itemCount: hasNextPage ? itemCount + 1 : itemCount,
+      loadMoreItems: loadNextPage,
+      threshold: 1
+    }, function (_ref2) {
+      var onItemsRendered = _ref2.onItemsRendered,
+        ref = _ref2.ref;
+      return React__default.createElement(VariableSizeList, {
+        innerElementType: innerElementType,
+        ref: ref,
+        itemSize: function itemSize() {
+          return size;
+        },
+        itemCount: itemCount,
+        height: height || 0,
+        width: width || 0,
+        onItemsRendered: onItemsRendered
+      }, function (_ref3) {
+        var index = _ref3.index,
+          style = _ref3.style;
+        return isItemLoaded(index) ? React__default.createElement(Item, {
+          index: index,
+          style: style
+        }) : null;
+      });
+    });
+  });
+}
+
+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'
+});
+function TokenItem(props) {
+  var _token$balance;
+  var token = props.token,
+    style = props.style,
+    onClick = props.onClick,
+    selected = props.selected;
+  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",
+      padding: '0 4px'
+    })
+  }, React__default.createElement(Button, {
+    variant: "outlined",
+    size: "large",
+    align: "start",
+    onClick: onClick.bind(null, token),
+    type: selected ? 'primary' : undefined,
+    prefix: React__default.createElement(TokenImage, {
+      src: token.image
+    }),
+    suffix: ((_token$balance = token.balance) == null ? void 0 : _token$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
+      variant: "body2"
+    }, token.balance.amount), React__default.createElement(Typography, {
+      variant: "caption"
+    }, token.balance.usdValue + "$"))
+  }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, token.symbol), React__default.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, token.name))));
+}
+
+var _excluded$G = ["style"];
+var PAGE_SIZE = 20;
+function TokenList(props) {
+  var list = props.list,
+    searchedText = props.searchedText,
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelected = function changeSelected(token) {
+    setSelected(token);
+    onChange(token);
+  };
+  var isSelected = function isSelected(token) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.map(function (item) {
+        return item.symbol + item.address;
+      }).indexOf(token.symbol + token.address) > -1;
+    }
+    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
+  };
+  var _useState2 = useState(true),
+    hasNextPage = _useState2[0],
+    setHasNextPage = _useState2[1];
+  var _useState3 = useState(list),
+    tokens = _useState3[0],
+    setTokens = _useState3[1];
+  var loadNextPage = function loadNextPage() {
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
+  };
+  useEffect(function () {
+    setTokens(list.slice(0, PAGE_SIZE));
+  }, [searchedText, list]);
+  useEffect(function () {
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+  var innerElementType = forwardRef(function (_ref, ref) {
+    var style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    return React__default.createElement("div", Object.assign({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: ref,
+      style: _extends({}, style, {
+        height: parseFloat(style == null ? void 0 : style.height) + 8 * 2 + "px"
+      })
+    }, rest));
+  });
+  return React__default.createElement(VirtualizedList, {
+    Item: function Item(_ref2) {
+      var index = _ref2.index,
+        style = _ref2.style;
+      return React__default.createElement(TokenItem, {
+        token: tokens[index],
+        style: style,
+        onClick: changeSelected,
+        selected: isSelected(tokens[index])
+      });
+    },
+    hasNextPage: hasNextPage,
+    itemCount: tokens.length,
+    loadNextPage: loadNextPage,
+    innerElementType: innerElementType,
+    size: 56
+  });
+}
+
+var Container$1 = /*#__PURE__*/styled('div', {
+  flex: '1'
+});
+var LoaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%'
+});
+var filterTokens = function filterTokens(list, searchedFor) {
+  return list.filter(function (token) {
+    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
+  });
+};
+function TokenSelector(props) {
+  var list = props.list,
+    type = props.type,
+    selected = props.selected,
+    onChange = props.onChange,
+    hasHeader = props.hasHeader,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Token",
+    hasHeader: hasHeader,
+    onBack: onBack
+  }, function (searchedFor) {
+    var filteredTokens = filterTokens(list, searchedFor);
+    return React__default.createElement(Container$1, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredTokens.length ? React__default.createElement(TokenList, {
+      searchedText: searchedFor,
+      list: filteredTokens,
+      selected: selected,
+      selectedList: selectedList,
+      multiSelect: multiSelect,
+      onChange: onChange
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Token",
+      searchedFor: searchedFor
+    })));
+  });
+}
+
+var ListContainer$1 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+var filterBlockchains = function filterBlockchains(list, searchedFor) {
+  return list.filter(function (blockchain) {
+    return containsText(blockchain.name, searchedFor) || containsText(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,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    hasHeader: hasHeader,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Network",
+    onBack: onBack
+  }, function (searchedFor) {
+    var filteredBlockchains = filterBlockchains(list, searchedFor);
+    return React__default.createElement(ListContainer$1, {
+      style: listContainerStyle,
+      key: "1"
+    }, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
+      list: filteredBlockchains,
+      selected: selected,
+      multiSelect: multiSelect,
+      selectedList: selectedList,
+      onChange: onChange
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Blockchain",
+      searchedFor: searchedFor
+    })));
+  });
+}
+
+var _excluded$H = ["label", "id"];
+var CheckboxContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var CheckboxRoot = /*#__PURE__*/styled(Root$1, {
+  borderRadius: '5px',
+  width: 20,
+  padding: 0,
+  height: 20,
+  border: '1px solid $foreground',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginRight: '$2',
+  backgroundColor: '$neutral-100'
+});
+var Label$1 = /*#__PURE__*/styled('label', {
+  color: '$foreground',
+  fontSize: '$m',
+  marginLeft: '$8'
+});
+function Checkbox(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+  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, {
+    className: "_text",
+    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',
+  transition: 'all 0.35s',
+  color: '$foreground',
+  '&:hover': {
+    backgroundColor: '$success700',
+    color: '$background'
+  },
+  variants: {
+    selected: {
+      "true": {
+        backgroundColor: '$success',
+        color: '$background'
+      },
+      "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, 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',
+  zIndex: 10
+});
+var Row = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var ModalHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+var ContentContainer$1 = /*#__PURE__*/styled('div', {});
+function Modal(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    action = props.action,
+    contentStyle = props.contentStyle;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  useEffect(function () {
+    if (open) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'unset';
+  }, [open]);
+  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(Row, null, action, React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  }))), React__default.createElement(ContentContainer$1, {
+    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', {
+  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(DisconnectIcon, null)));
+};
+
+var WalletImage = /*#__PURE__*/styled('img', {
+  width: '$24',
+  height: '$24',
+  marginRight: '$12'
+});
+var Text = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var ExtendedButton = /*#__PURE__*/styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        outline: '1px solid $primary',
+        borderColor: '$primary',
+        '&:hover': {
+          borderColor: '$primary'
+        }
+      }
+    }
+  }
+});
+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(ExtendedButton, {
+    type: state === WalletState.CONNECTED ? 'primary' : undefined,
+    disabled: state == WalletState.CONNECTING,
+    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(Text, null, React__default.createElement(Typography, {
+    variant: "h5",
+    noWrap: false
+  }, name), state === WalletState.CONNECTED ? React__default.createElement(Typography, {
+    variant: "caption",
+    noWrap: false,
+    color: "primary"
+  }, "Connected") : null));
+}
+
+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 StyledSwitchRoot = /*#__PURE__*/styled(Root$2, {
+  boxSizing: 'border-box',
+  boxShadow: 'none',
+  borderStyle: 'solid',
+  width: '42px',
+  height: '22px',
+  backgroundColor: '$neutrals600',
+  borderColor: '$neutrals600',
+  borderRadius: '99999px',
+  position: 'relative',
+  padding: '0',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    backgroundColor: '$success',
+    borderColor: '$success'
+  },
+  '-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: '$white',
+  transition: ' transform 300ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+  '&[data-state="checked"]': {
+    transform: 'translateX(20px)'
+  }
+});
+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 MainContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    loaded: {
+      "true": {
+        overflowY: 'auto'
+      }
+    }
+  }
+});
+var LiquiditySourceType = /*#__PURE__*/styled('div', {
+  position: 'sticky',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  top: '0',
+  backgroundColor: '$background',
+  zIndex: '9999',
+  paddingTop: '$8',
+  paddingBottom: '$8'
+});
+var LiquidityImage = /*#__PURE__*/styled('img', {
+  width: '$20',
+  maxHeight: '$20',
+  marginRight: '$16'
+});
+var LoaderContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center'
+});
+function LiquiditySourceList(props) {
+  var list = props.list,
+    onChange = props.onChange,
+    listContainerStyle = props.listContainerStyle,
+    loadingStatus = props.loadingStatus,
+    searchedFor = props.searchedFor;
+  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 isSelected = function isSelected(liquiditySource) {
+    return !!selected.find(function (item) {
+      return liquiditySource.title === item.title;
+    });
+  };
+  useEffect(function () {
+    setSelected(list.filter(function (item) {
+      return item.selected;
+    }));
+  }, [list]);
+  var sections = groupLiquiditySources(list);
+  var bridges = sections.bridge;
+  var exchanges = sections.exchange;
+  var totalBridges = bridges.length;
+  var totalExchanges = exchanges.length;
+  // TODO: This is not performant
+  var totalSelectedBridges = bridges.filter(isSelected).length;
+  var totalSelectedExchanges = exchanges.filter(isSelected).length;
+  return React__default.createElement(MainContainer$1, {
+    style: listContainerStyle,
+    loaded: loadingStatus === 'success'
+  }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
+    variant: "h5"
+  }, "Bridges"), React__default.createElement(Typography, {
+    variant: "body1",
+    color: "neutrals800"
+  }, totalSelectedBridges === totalBridges ? totalBridges : totalSelectedBridges + " / " + totalBridges)), React__default.createElement(Spacer, {
+    size: 12,
+    direction: "vertical"
+  }), loadingStatus === 'loading' && React__default.createElement(LoaderContainer$1, null, React__default.createElement(Spinner, {
+    size: 24
+  })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, totalBridges ? bridges.map(function (liquiditySource, index) {
+    return React__default.createElement(LiquiditySourceItem, {
+      liquiditySource: liquiditySource,
+      key: index,
+      selected: isSelected(liquiditySource),
+      onChange: changeLiquiditySources
+    });
+  }) : React__default.createElement(NotFoundAlert, {
+    catergory: "Bridge",
+    searchedFor: searchedFor
+  }))), React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
+    variant: "h5"
+  }, "Exchanges"), React__default.createElement(Typography, {
+    variant: "body1",
+    color: "neutrals800"
+  }, totalSelectedExchanges === totalExchanges ? totalExchanges : totalSelectedExchanges + " / " + totalExchanges)), React__default.createElement(Spacer, {
+    size: 12,
+    direction: "vertical"
+  }), loadingStatus === 'loading' && React__default.createElement(LoaderContainer$1, null, React__default.createElement(Spinner, {
+    size: 24
+  })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus == 'success' && React__default.createElement(React__default.Fragment, null, totalExchanges ? exchanges.map(function (liquiditySource, index) {
+    return React__default.createElement(LiquiditySourceItem, {
+      liquiditySource: liquiditySource,
+      key: index,
+      selected: isSelected(liquiditySource),
+      onChange: changeLiquiditySources
+    });
+  }) : React__default.createElement(NotFoundAlert, {
+    catergory: "Exchange",
+    searchedFor: searchedFor
+  }))));
+}
+var LiquiditySourceItem = function LiquiditySourceItem(_ref) {
+  var liquiditySource = _ref.liquiditySource,
+    selected = _ref.selected,
+    onChange = _ref.onChange;
+  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'
+    },
+    onClick: onChange.bind(null, liquiditySource)
+  }, React__default.createElement(Typography, {
+    variant: "body1"
+  }, liquiditySource.title));
+};
+
+var filterLiquiditySources = function filterLiquiditySources(liquiditySources, searchedFor) {
+  return liquiditySources.filter(function (liquiditySource) {
+    return containsText(liquiditySource.title, searchedFor || '');
+  });
+};
+function LiquiditySourcesSelector(props) {
+  var list = props.list,
+    onChange = props.onChange,
+    onBack = props.onBack,
+    hasHeader = props.hasHeader,
+    listContainerStyle = props.listContainerStyle,
+    toggleAll = props.toggleAll,
+    loadingStatus = props.loadingStatus;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search By Name",
+    title: "Liquidity Sources",
+    TopButton: React__default.createElement(Button, {
+      variant: "ghost",
+      type: "primary",
+      onClick: toggleAll
+    }, list.find(function (item) {
+      return item.selected;
+    }) ? 'Deselect all' : 'Select all'),
+    hasHeader: hasHeader,
+    onBack: onBack
+  }, function (searchedFor) {
+    return React__default.createElement(LiquiditySourceList, {
+      listContainerStyle: listContainerStyle,
+      list: filterLiquiditySources(list, searchedFor),
+      onChange: onChange,
+      loadingStatus: loadingStatus,
+      searchedFor: searchedFor
+    });
+  });
+}
+
+var Row$1 = /*#__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$1, 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.name), React__default.createElement(Typography, {
+      variant: "caption"
+    }, getConciseAddress(w.address)), React__default.createElement(Circle, {
+      checked: checked
+    }, React__default.createElement(SolidCircle, {
+      checked: checked
+    })));
+  }));
+}
+
+var StyledRoot = /*#__PURE__*/styled(Root$3, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24'
+      }
+    }
+  }
+});
+var ItemContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$8'
+});
+var StyledItem = /*#__PURE__*/styled(Item, {
+  padding: '0',
+  width: '20px',
+  height: '20px',
+  borderRadius: '100%',
+  cursor: 'pointer',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
+  '&:hover': {
+    borderColor: '$neutrals600'
+  }
+});
+var Container$3 = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
+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: '$success'
+  }
+});
+var Label$2 = /*#__PURE__*/styled('label', {
+  paddingLeft: '$8',
+  cursor: 'pointer',
+  color: '$foreground'
+});
+function Radio(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'vertical' : _props$direction,
+    style = props.style;
+  return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
+    onValueChange: onChange,
+    value: value,
+    direction: direction,
+    style: style
+  }, props.options.map(function (option, index) {
+    return React__default.createElement(ItemContainer, {
+      key: index
+    }, React__default.createElement(StyledItem, {
+      value: option.value,
+      id: option.value
+    }, React__default.createElement(StyledIndicator, null)), React__default.createElement(Label$2, {
+      className: "_text",
+      htmlFor: option.value
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, option.label)));
+  })));
+}
+
+var BaseContainer = /*#__PURE__*/styled('div', {
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  padding: '$16'
+});
+var Title = /*#__PURE__*/styled(Typography, {
+  marginBottom: '$16'
+});
+var SlippageChipsContainer = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  rowGap: '$16',
+  gridTemplateColumns: 'repeat(auto-fill, 64px)'
+});
+var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+  cursor: 'pointer'
+});
+var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32'
+});
+var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
+  marginLeft: '$8'
+});
+var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
+  marginTop: '$32'
+});
+var Head = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$16'
+});
+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,
+    toggleInfiniteApprove = props.toggleInfiniteApprove,
+    infiniteApprove = props.infiniteApprove,
+    loadingStatus = props.loadingStatus;
+  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(Head, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Slippage tolerance per swap"), customSlippage ? React__default.createElement(Typography, {
+    variant: "caption",
+    color: "error"
+  }, customSlippage, "% Custom") : undefined), 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'
+    }
+  }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
+    variant: "body2"
+  }, "Theme"), React__default.createElement(Radio, {
+    value: 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(InfiniteContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Infinite Approval"), React__default.createElement(Switch, {
+    checked: infiniteApprove,
+    onChange: toggleInfiniteApprove
+  })), React__default.createElement(LiquiditySourceContainer, null, React__default.createElement(Button, {
+    onClick: onLiquiditySourcesClick,
+    align: "start",
+    variant: "ghost",
+    loading: loadingStatus === 'loading',
+    suffix: React__default.createElement(LiquiditySourceNumber, null, loadingStatus === 'success' && React__default.createElement(Typography, {
+      variant: "body2",
+      color: "neutrals800"
+    }, liquiditySources.length !== selectedLiquiditySources.length ? selectedLiquiditySources.length + " / " + liquiditySources.length : liquiditySources.length), loadingStatus === 'failed' && React__default.createElement(Typography, {
+      variant: "body2",
+      color: "$error500"
+    }, "Loading failed"), React__default.createElement(StyledAngleRight, null))
+  }, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Liquidity Sources"))));
+  return React__default.createElement(SecondaryPage, {
+    title: "Settings",
+    textField: false,
+    onBack: onBack
+  }, PageContent);
+}
+
+var MainContainer$2 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$10',
+  boxShadow: '$s',
+  width: '100%',
+  minWidth: '375px',
+  maxWidth: '512px',
+  maxHeight: '595px',
+  padding: '$16',
+  boxSizing: 'border-box',
+  backgroundColor: '$background',
+  variants: {
+    fixedHeight: {
+      "true": {
+        height: '595px'
+      },
+      "false": {
+        height: 'auto'
+      }
+    }
+  }
+});
+function SwapContainer(props) {
+  var children = props.children,
+    style = props.style,
+    _props$fixedHeight = props.fixedHeight,
+    fixedHeight = _props$fixedHeight === void 0 ? true : _props$fixedHeight;
+  return React__default.createElement(MainContainer$2, {
+    style: style,
+    id: "swap-box",
+    fixedHeight: fixedHeight
+  }, children);
+}
+
+var TokenContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  '& .amount': {
+    fontWeight: 'bold'
+  }
+});
+var TokenImage$1 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  width: '$24',
+  height: '$24',
+  img: {
+    width: '100%',
+    display: 'block'
+  },
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400'
+  }
+});
+function Token(props) {
+  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage$1, null, React__default.createElement("img", {
+    src: props.data.token.logo,
+    alt: ""
+  }), React__default.createElement("div", {
+    className: "overlay"
+  }, React__default.createElement("img", {
+    src: props.data.blockchain.logo,
+    alt: props.data.blockchain.name
+  }))), React__default.createElement(Spacer, {
+    size: 8
+  }), React__default.createElement("span", {
+    className: "amount"
+  }, props.data.amount), React__default.createElement(Spacer, {
+    size: 4
+  }), props.data.token.symbol);
+}
+
+var Container$4 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12'
+  },
+  '&.running': {
+    color: '$foreground'
+  },
+  '&.failed,&.success': {
+    color: '$neutrals600'
+  },
+  '&.failed .status': {
+    color: '$error'
+  },
+  '&.success .status': {
+    color: '$success'
+  }
+});
+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(Button, {
+    variant: "ghost",
+    size: "free",
+    fullWidth: true,
+    onClick: onClick.bind(null, swap.requestId)
+  }, React__default.createElement(Container$4, {
+    className: "" + status
+  }, React__default.createElement("div", {
+    className: "info"
+  }, React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: firstStep.fromLogo,
+        symbol: firstStep.fromSymbol
+      },
+      blockchain: {
+        // @ts-ignore
+        logo: firstStep.fromBlockchainLogo,
+        name: firstStep.fromBlockchain
+      },
+      amount: swap.inputAmount
+    }
+  }), React__default.createElement(Spacer, {
+    size: 12
+  }), React__default.createElement(ArrowRightIcon, {
+    size: 12
+  }), React__default.createElement(Spacer, {
+    size: 12
+  }), React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: lastStep.toLogo,
+        symbol: lastStep.toSymbol
+      },
+      blockchain: {
+        // @ts-ignore
+        logo: lastStep.toBlockchainLogo,
+        name: lastStep.toBlockchain
+      },
+      amount: lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || ''
+    }
+  })), React__default.createElement("div", {
+    className: "status"
+  }, status === 'running' ? React__default.createElement(Spinner, {
+    size: 24,
+    color: "primary"
+  }) : status)));
+}
+
+var Container$5 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Color = /*#__PURE__*/styled('div', {
+  border: '1px solid $neutrals300',
+  borderRadius: '$5',
+  width: '$32',
+  height: '$32'
+});
+var Cover = /*#__PURE__*/styled('div', {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+});
+var Popover = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  zIndex: '2',
+  variants: {
+    place: {
+      top: {
+        top: '-241px'
+      },
+      bottom: {},
+      left: {
+        top: '-50%',
+        left: '-225px'
+      },
+      right: {
+        top: '-50%',
+        right: '-225px'
+      }
+    }
+  }
+});
+var Label$3 = /*#__PURE__*/styled('label', {
+  display: 'inline-block',
+  fontSize: '$14',
+  marginBottom: '$4',
+  color: '$foreground'
+});
+function ColorPicker(_ref) {
+  var color = _ref.color,
+    onChangeColor = _ref.onChangeColor,
+    label = _ref.label,
+    place = _ref.place;
+  var _useState = useState(false),
+    displayColorPicker = _useState[0],
+    setDisplayColorPicker = _useState[1];
+  return React__default.createElement(Container$5, null, React__default.createElement(Label$3, {
+    className: "_text"
+  }, label), React__default.createElement(Button, {
+    variant: "outlined",
+    prefix: React__default.createElement(Color, {
+      style: {
+        backgroundColor: color
+      }
+    }),
+    fullWidth: true,
+    align: "start",
+    size: "large",
+    onClick: function onClick() {
+      return setDisplayColorPicker(function (prev) {
+        return !prev;
+      });
+    }
+  }, color), displayColorPicker && React__default.createElement(Popover, {
+    place: place
+  }, React__default.createElement(Cover, {
+    onClick: function onClick() {
+      return setDisplayColorPicker(false);
+    }
+  }), React__default.createElement(ChromePicker, {
+    color: color,
+    onChange: onChangeColor
+  })));
+}
+
+var BackDrop$1 = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  zIndex: 9999999,
+  backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$10'
+});
+var DrawerContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  boxShadow: '$s',
+  background: '$background',
+  padding: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  zIndex: 9999999,
+  borderRadius: '$10',
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%'
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%'
+      }
+    }
+  }
+});
+var DrawerHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+var Body = /*#__PURE__*/styled('div', {
+  overflowY: 'auto',
+  height: '100%'
+});
+var Footer = /*#__PURE__*/styled('footer', {
+  width: '100%',
+  marginTop: '$28'
+});
+function Drawer(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    _props$anchor = props.anchor,
+    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? false : _props$showClose,
+    footer = props.footer,
+    container = props.container;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  return React__default.createElement(React__default.Fragment, null, open && container && createPortal(React__default.createElement(BackDrop$1, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(DrawerContainer, {
+    anchor: anchor,
+    style: containerStyle
+  }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), showClose && React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
+}
+
+var MainContainer$3 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+var Section = /*#__PURE__*/styled('div', {
+  paddingBottom: '$32',
+  marginBottom: '$32',
+  borderBottom: '1px solid $neutrals400'
+});
+var Footer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var AlertContainer = /*#__PURE__*/styled('div', {
+  padding: '$16 0'
+});
+var ConfirmButton = /*#__PURE__*/styled(Button, {
+  marginTop: '$16'
+});
+var Container$6 = /*#__PURE__*/styled('div', {
+  paddingBottom: '$24',
+  '.title': {
+    paddingBottom: '$8',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.num': {
+    backgroundColor: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+var Alerts = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function ConfirmSwap(props) {
+  var onBack = props.onBack,
+    loading = props.loading,
+    onConfirm = props.onConfirm,
+    requiredWallets = props.requiredWallets,
+    selectableWallets = props.selectableWallets,
+    onChange = props.onChange,
+    confirmDisabled = props.confirmDisabled,
+    isExperimentalChain = props.isExperimentalChain,
+    handleConnectChain = props.handleConnectChain,
+    confirmButtonTitle = props.confirmButtonTitle,
+    errors = props.errors,
+    warnings = props.warnings,
+    extraMessages = props.extraMessages;
+  return React__default.createElement(SecondaryPage, {
+    textField: false,
+    title: "Confirm Swap",
+    onBack: onBack,
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
+      fullWidth: true,
+      loading: loading,
+      type: "primary",
+      variant: "contained",
+      onClick: onConfirm,
+      disabled: confirmDisabled
+    }, confirmButtonTitle))
+  }, React__default.createElement(MainContainer$3, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
+      type: "error",
+      key: index
+    }, error));
+  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
+      type: "warning",
+      key: index
+    }, warning));
+  }))), props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
+    size: 16,
+    direction: "vertical"
+  }) : null, props.previewRoutes) : null, requiredWallets.map(function (wallet, index) {
+    var list = selectableWallets.filter(function (w) {
+      return wallet === w.chain;
+    });
+    return React__default.createElement(Container$6, {
+      key: index
+    }, React__default.createElement("div", {
+      className: "title"
+    }, React__default.createElement("div", {
+      className: "num"
+    }, index + 1), React__default.createElement(Spacer, {
+      size: 8
+    }), React__default.createElement(Typography, {
+      variant: "body2"
+    }, "Your ", wallet, " Wallet")), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
+      type: "error"
+    }, "You need to connect a compatible wallet with ", wallet)), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+      variant: "contained",
+      type: "primary",
+      align: "grow",
+      onClick: function onClick() {
+        return handleConnectChain == null ? void 0 : handleConnectChain(wallet);
+      }
+    }, "Add " + wallet + " chain to Cosmos wallets")), list.length != 0 && React__default.createElement(SelectableWalletList, {
+      list: list,
+      onChange: onChange
+    }));
+  })));
+}
+
+var Group = /*#__PURE__*/styled('div', {
+  '.group-title': {
+    textTransform: 'uppercase'
+  }
+});
+var Container$7 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+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 SwapsGroup = function SwapsGroup(props) {
+  var list = props.list,
+    onSwapClick = props.onSwapClick,
+    groupBy = props.groupBy;
+  var groups = groupBy ? groupBy(list) : [{
+    title: 'History',
+    swaps: list
+  }];
+  return React__default.createElement(React__default.Fragment, null, groups.filter(function (group) {
+    return group.swaps.length > 0;
+  }).map(function (group, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Group, {
+      key: index
+    }, React__default.createElement(Typography, {
+      variant: "body2",
+      color: "neutrals600",
+      className: "group-title"
+    }, group.title), group.swaps.map(function (swap, index) {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(SwapDetail, {
+        key: index,
+        swap: swap,
+        status: swap.status,
+        onClick: onSwapClick
+      }), React__default.createElement(Divider, {
+        size: 12
+      }));
+    })), React__default.createElement(Divider, {
+      size: 24
+    }));
+  }));
+};
+function History(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? [] : _ref$list,
+    onBack = _ref.onBack,
+    onSwapClick = _ref.onSwapClick,
+    groupBy = _ref.groupBy;
+  return React__default.createElement(SecondaryPage, {
+    onBack: onBack,
+    textField: true,
+    textFieldPlaceholder: "Search By Blockchain Or Token Or Request ID",
+    title: "Swaps"
+  }, function (searchedFor) {
+    var filterSwaps = filteredHistory(list, searchedFor);
+    return React__default.createElement(Container$7, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
+      list: filterSwaps,
+      onSwapClick: onSwapClick,
+      groupBy: groupBy
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Swap"
+    }));
+  });
+}
+
+var getAlertType = function getAlertType(messageType) {
+  if (!messageType || messageType === 'info') return 'secondary';else return messageType;
+};
+var DetailedMessage = /*#__PURE__*/styled('div', {
+  width: '90%',
+  overflowWrap: 'break-word',
+  color: '$error500 !important'
+});
+var SuccessText = /*#__PURE__*/styled(Typography, {
+  color: '$success500 !important'
+});
+var SwapMessages = function SwapMessages(props) {
+  var shortMessage = props.shortMessage,
+    detailedMessage = props.detailedMessage,
+    currentStepBlockchain = props.currentStepBlockchain,
+    type = props.type,
+    lastConvertedTokenInFailedSwap = props.lastConvertedTokenInFailedSwap;
+  var _useState = useState(false),
+    expandedMessage = _useState[0],
+    setExpandedMessage = _useState[1];
+  var allowedNumberOfChars = detailedMessage["long"] ? 0 : 150;
+  var shouldShowMoreDetailsButton = !expandedMessage && detailedMessage.content.length > allowedNumberOfChars;
+  return React__default.createElement(Alert, Object.assign({
+    type: getAlertType(type),
+    title: shortMessage
+  }, shouldShowMoreDetailsButton && {
+    footer: React__default.createElement(Button, {
+      variant: "outlined",
+      type: "primary",
+      onClick: setExpandedMessage.bind(null, function (prevState) {
+        return !prevState;
+      })
+    }, "Show more details")
+  }, !!props.switchNetwork && {
+    footer: React__default.createElement(Button, {
+      variant: 'outlined',
+      type: "primary",
+      onClick: props.switchNetwork
+    }, "Change network to ", currentStepBlockchain)
+  }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, shouldShowMoreDetailsButton && !expandedMessage ? detailedMessage.content.substring(0, allowedNumberOfChars) + (allowedNumberOfChars > 0 ? '...' : '') : detailedMessage.content)) : null, !!lastConvertedTokenInFailedSwap && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
+    variant: "body2"
+  }, "on your\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
+    variant: "body2"
+  }, "wallet"))));
+};
+
+var _excluded$I = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
+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 Dot$1 = /*#__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 StyledAnchor = /*#__PURE__*/styled('a', {
+  color: '$primary',
+  fontWeight: '$600',
+  marginLeft: '$12'
+});
+var SwapInfoContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: '$16',
+  borderBottom: '1px solid $neutrals300'
+});
+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$1 = /*#__PURE__*/styled('div', {
+  width: '0',
+  minHeight: '$16',
+  marginLeft: '$12',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit'
+});
+var Row$2 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: '$14',
+  padding: '$8 0',
+  '.name': {
+    color: '$neutrals600'
+  },
+  '.value': {
+    display: 'flex',
+    alignItems: 'center',
+    color: '$neutrals800'
+  },
+  '.status': {
+    fontWeight: 'bold',
+    textTransform: 'uppercase'
+  },
+  '.status.failed': {
+    color: '$error'
+  },
+  '.status.success': {
+    color: '$success'
+  }
+});
+var RequestId = /*#__PURE__*/styled('div', {
+  width: '150px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  '@md': {
+    width: 'auto'
+  }
+});
+var ExtraDetails = /*#__PURE__*/styled('div', {
+  padding: '$8 0',
+  color: '$neutrals600',
+  fontSize: '$12'
+});
+var StepContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    hasNotStarted: {
+      "true": {
+        filter: 'grayscale(100%)'
+      }
+    },
+    isRunning: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
+var SwapFlowContainer = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+function SwapHistory(props) {
+  var pendingSwap = props.pendingSwap,
+    onBack = props.onBack,
+    onCopy = props.onCopy,
+    isCopied = props.isCopied,
+    onCancel = props.onCancel,
+    date = props.date,
+    onRetry = props.onRetry,
+    extraMessageProps = _objectWithoutPropertiesLoose(props, _excluded$I);
+  var _useState = useState(false),
+    showDrawer = _useState[0],
+    setShowDrawer = _useState[1];
+  return React__default.createElement(SecondaryPage, {
+    title: "Swap Details",
+    textField: false,
+    onBack: onBack,
+    Footer: React__default.createElement(React__default.Fragment, null, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Button, {
+      variant: "outlined",
+      fullWidth: true,
+      type: "error",
+      onClick: setShowDrawer.bind(null, true)
+    }, "Cancel"), !!onRetry && React__default.createElement(Button, {
+      variant: "contained",
+      fullWidth: true,
+      type: "primary",
+      onClick: onRetry
+    }, "Try again"))
+  }, React__default.createElement("div", null, React__default.createElement(SwapInfoContainer, null, React__default.createElement(Row$2, null, React__default.createElement("div", {
+    className: "name"
+  }, "Request ID:"), React__default.createElement("div", {
+    className: "value requestId",
+    onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
+  }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
+    size: 4
+  }), React__default.createElement(Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement(Row$2, null, React__default.createElement("div", {
+    className: "name"
+  }, "Status:"), React__default.createElement("div", {
+    className: "value status " + ((pendingSwap == null ? void 0 : pendingSwap.status) || '')
+  }, pendingSwap == null ? void 0 : pendingSwap.status, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Spinner, {
+    size: 16,
+    color: "primary"
+  }))), React__default.createElement(ExtraDetails, null, date))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
+    size: 32
+  }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+    return React__default.createElement(StepContainer$1, {
+      key: index,
+      hasNotStarted: step.status === 'created',
+      isRunning: step.status != 'failed' && step.status != 'success' && step.status != 'created'
+    }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
+      logo: step.fromLogo,
+      symbol: step.fromSymbol,
+      // @ts-ignore
+      chainLogo: step.fromBlockchainLogo,
+      blockchain: step.fromBlockchain,
+      amount: pendingSwap.inputAmount
+    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1
+    // @ts-ignore
+    , {
+      // @ts-ignore
+      src: step.swapperLogo,
+      alt: step.swapperId
+    }), React__default.createElement("div", null, React__default.createElement(Typography, {
+      ml: 4,
+      variant: "caption"
+    },
+    // @ts-ignore
+    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"
+    }, "$",
+    // @ts-ignore
+    step.feeInUsd, ' ', "estimated gas fee")))), React__default.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
+      return React__default.createElement(InternalDetail, {
+        key: index
+      }, 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,
+      // @ts-ignore
+      chainLogo: step.toBlockchainLogo,
+      blockchain: step.toBlockchain,
+      amount: step.outputAmount || ''
+    }));
+  }), React__default.createElement(Divider, {
+    size: 32
+  })), React__default.createElement(Drawer, {
+    onClose: setShowDrawer.bind(null, false),
+    open: showDrawer,
+    showClose: true,
+    anchor: "bottom",
+    title: "Cancel Progress",
+    content: React__default.createElement(Alert, {
+      type: "warning"
+    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction\xA0", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")),
+    footer: React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, React__default.createElement(Button, {
+      variant: "contained",
+      type: "success",
+      onClick: setShowDrawer.bind(null, false)
+    }, "Skip"), React__default.createElement(Spacer, {
+      size: 16
+    }), React__default.createElement(Button, {
+      variant: "contained",
+      type: "error",
+      onClick: function onClick() {
+        onCancel(pendingSwap.requestId);
+        setShowDrawer(false);
+      }
+    }, "Cancel progress")),
+    container: document.getElementById('swap-box')
+  }));
+}
+
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+//# sourceMappingURL=ui.esm.js.map