@rango-dev/ui 0.1.13 → 0.1.14-next.10

package/dist/ui.esm.js

@@ -1,5005 +0,0 @@
-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';
-import copy from 'copy-to-clipboard';
-
-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)
-    },
-    disabled: {
-      "true": {
-        stroke: '$neutrals400'
-      }
-    }
-  }
-});
-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)
-    },
-    disabled: {
-      "true": {
-        stroke: '$neutrals400'
-      }
-    }
-  }
-});
-
-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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "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'
-        }
-      },
-      title: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$15'
-        }
-      },
-      body1: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        '@md': {
-          fontSize: '$16'
-        },
-        '@lg': {
-          fontSize: '$18'
-        }
-      },
-      body2: {
-        fontSize: '$14',
-        fontWeight: '$400'
-      },
-      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'
-      }
-    },
-    success: {
-      "true": {
-        filter: 'none'
-      },
-      "false": {
-        filter: 'grayscale(100%)'
-      }
-    }
-  }
-});
-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',
-  paddingLeft: '$8'
-});
-function StepDetail(props) {
-  var logo = props.logo,
-    chainLogo = props.chainLogo,
-    amount = props.amount,
-    symbol = props.symbol,
-    blockchain = props.blockchain,
-    estimatedAmount = props.estimatedAmount,
-    _props$success = props.success,
-    success = _props$success === void 0 ? true : _props$success,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'horizontal' : _props$direction;
-  return React__default.createElement(StepContainer, {
-    direction: direction,
-    success: success
-  }, 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'
-  }, amount && React__default.createElement(Typography, {
-    noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'title'
-  }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
-    noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'title',
-    color: '$neutrals600'
-  }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
-    variant: direction === 'vertical' ? 'body2' : 'title',
-    noWrap: true
-  }, 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 FilledCircle = /*#__PURE__*/styled('span', {
-  width: '10px',
-  height: '10px',
-  backgroundColor: '$primary',
-  borderRadius: '99999px'
-});
-
-var _excluded$E = ["size"];
-var ImageContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '.image': {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain'
-  }
-});
-function Image(props) {
-  var size = props.size,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$E);
-  return React__default.createElement(ImageContainer, {
-    css: {
-      width: size + 'px',
-      height: size + 'px'
-    }
-  }, React__default.createElement("img", Object.assign({
-    className: "image"
-  }, otherProps)));
-}
-
-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 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(Image, {
-      src: swap.swapperLogo,
-      alt: swap.swapperId,
-      size: 20
-    }), 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$F = ["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$F);
-  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 ListContainer = /*#__PURE__*/styled('div', {
-  display: 'grid',
-  gap: '.5rem',
-  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  alignContent: 'baseline',
-  width: '100%',
-  height: '100%'
-});
-var ImageContainer$1 = /*#__PURE__*/styled('div', {
-  paddingRight: '$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(ImageContainer$1, null, React__default.createElement(Image, {
-        size: 24,
-        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$G = ["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',
-  overflowX: 'hidden',
-  transition: 'border-color ease .3s',
-  '&:focus-within': {
-    borderColor: '$success',
-    outline: '1px solid $success'
-  },
-  variants: {
-    size: {
-      small: {
-        '& input': {
-          fontSize: '$14'
-        },
-        height: '$32'
-      },
-      medium: {
-        '& input': {
-          fontSize: '$15'
-        },
-        height: '$40'
-      },
-      large: {
-        '& input': {
-          fontSize: '$16'
-        },
-        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',
-  backgroundColor: 'transparent',
-  '-webkit-appearance': 'none',
-  margin: 0,
-  '&:disabled': {
-    cursor: 'not-allowed'
-  },
-  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0
-  },
-  '&[type="number"]': {
-    '-moz-appearance': 'textfield'
-  }
-});
-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$G);
-  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);
-}
-
-function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-}
-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);
-}
-function limitDecimalPlaces(numberString, maxDecimalPlaces) {
-  if (maxDecimalPlaces === void 0) {
-    maxDecimalPlaces = 4;
-  }
-  var number = parseFloat(numberString);
-  if (isNaN(number)) return numberString; // Return the original string if it's not a valid number
-  else {
-    var multiplier = Math.pow(10, maxDecimalPlaces);
-    var roundedNumber = Math.round(number * multiplier) / multiplier;
-    return roundedNumber.toString();
-  }
-}
-
-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: 4
-  }))), 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: "title",
-    color: type
-  }, title), !!children && React__default.createElement(Spacer, {
-    size: 4,
-    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 TokenImageContainer = /*#__PURE__*/styled('div', {
-  paddingRight: '$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(TokenImageContainer, null, React__default.createElement(Image, {
-      src: token.image,
-      size: 32
-    })),
-    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$H = ["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.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$H);
-    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 LoaderContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
-  paddingTop: '33%',
-  flex: 1
-});
-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,
-    hasHeader = props.hasHeader,
-    onChange = props.onChange,
-    onBack = props.onBack,
-    loadingStatus = props.loadingStatus;
-  return React__default.createElement(SecondaryPage, {
-    textField: true,
-    hasHeader: hasHeader,
-    title: "Select " + type + " token",
-    onBack: onBack,
-    textFieldPlaceholder: "Search tokens by name"
-  }, function (searchedFor) {
-    var filteredTokens = filterTokens(list, searchedFor);
-    return loadingStatus === 'loading' ? React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
-      size: 24
-    })) : loadingStatus === 'failed' ? React__default.createElement(LoadingFailedAlert, null) : filteredTokens.length ? React__default.createElement(TokenList, {
-      searchedText: searchedFor,
-      list: filteredTokens,
-      selected: selected,
-      onChange: onChange
-    }) : React__default.createElement(NotFoundAlert, {
-      catergory: "Token",
-      searchedFor: searchedFor
-    });
-  });
-}
-
-var ListContainer$1 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto',
-  padding: '0 $4'
-});
-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 blockchains by name",
-    title: "Select " + type + " Blockchain",
-    onBack: onBack
-  }, function (searchedFor) {
-    var filteredBlockchains = filterBlockchains(list, searchedFor);
-    return React__default.createElement(React__default.Fragment, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
-      size: 24
-    })), React__default.createElement(ListContainer$1, {
-      style: listContainerStyle,
-      key: "1"
-    }, 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$I = ["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$I);
-  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'
-});
-function Modal(props) {
-  var title = props.title,
-    content = props.content,
-    open = props.open,
-    onClose = props.onClose,
-    containerStyle = props.containerStyle,
-    action = props.action;
-  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
-  }))), 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 WalletImageContainer = /*#__PURE__*/styled('div', {
-  paddingRight: '$12',
-  '& img': {
-    borderRadius: '50%'
-  }
-});
-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(WalletImageContainer, null, React__default.createElement(Image, {
-      src: image,
-      size: 24
-    })),
-    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',
-        padding: '0 $4'
-      }
-    }
-  }
-});
-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 LiquidityImageContainer = /*#__PURE__*/styled('div', {
-  paddingRight: '$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(LiquidityImageContainer, null, React__default.createElement(Image, {
-      src: liquiditySource.logo,
-      size: 20
-    })),
-    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$1 = /*#__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$1, {
-      checked: checked,
-      onClick: onClick.bind(null, w),
-      key: index
-    }, React__default.createElement(Image, {
-      src: w.image,
-      alt: w.walletType,
-      size: 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$2 = /*#__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$2, 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: '$16',
-  cursor: 'pointer'
-});
-var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
-  display: 'flex',
-  justifyContent: 'space-between',
-  marginTop: '$16'
-});
-var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
-  marginLeft: '$8'
-});
-var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
-  marginTop: '$16'
-});
-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: "body2"
-  }, "Slippage tolerance"), 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: "body2"
-  }, "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: "body2"
-  }, "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',
-  padding: '$16',
-  boxSizing: 'border-box',
-  backgroundColor: '$background',
-  overflow: 'hidden',
-  '& *': {
-    boxSizing: 'border-box',
-    listStyleType: 'none',
-    '&::-webkit-scrollbar': {
-      width: '$8',
-      height: '$8'
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
-      borderRadius: '$10'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500'
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300'
-    }
-  },
-  variants: {
-    fixedHeight: {
-      "true": {
-        height: '595px',
-        maxHeight: '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',
-  width: '160px',
-  '& .amount': {
-    fontWeight: 'bold'
-  },
-  '& .estimated': {
-    color: '$neutrals600'
-  }
-});
-var TokenImage = /*#__PURE__*/styled('div', {
-  position: 'relative',
-  'img': {
-    borderRadius: '50%'
-  },
-  '.overlay': {
-    position: 'absolute',
-    right: -4,
-    bottom: -4,
-    width: '$16',
-    height: '$16',
-    padding: '$2',
-    borderRadius: '50%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '$background',
-    border: '1px solid $neutrals400'
-  }
-});
-function Token(props) {
-  var _props$data = props.data,
-    token = _props$data.token,
-    blockchain = _props$data.blockchain,
-    amount = _props$data.amount,
-    estimatedAmount = _props$data.estimatedAmount;
-  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage, null, React__default.createElement(Image, {
-    src: token.logo,
-    alt: "",
-    size: 24
-  }), React__default.createElement("div", {
-    className: "overlay"
-  }, React__default.createElement(Image, {
-    src: blockchain.logo,
-    alt: blockchain.name,
-    size: 12
-  }))), React__default.createElement(Spacer, {
-    size: 8
-  }), !!amount && React__default.createElement("span", {
-    className: "amount"
-  }, props.data.amount), !amount && estimatedAmount && React__default.createElement("span", {
-    className: "amount estimated"
-  }, props.data.estimatedAmount), React__default.createElement(Spacer, {
-    size: 4
-  }), token.symbol);
-}
-
-var Container$3 = /*#__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'
-  },
-  '&.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$3, {
-    className: "" + status
-  }, React__default.createElement("div", {
-    className: "info"
-  }, React__default.createElement(Token, {
-    data: {
-      token: {
-        logo: firstStep.fromLogo,
-        symbol: firstStep.fromSymbol
-      },
-      blockchain: {
-        logo: firstStep.fromBlockchainLogo || '',
-        name: firstStep.fromBlockchain
-      },
-      amount: limitDecimalPlaces(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: {
-        logo: lastStep.toBlockchainLogo || '',
-        name: lastStep.toBlockchain
-      },
-      amount: limitDecimalPlaces(lastStep.outputAmount || ''),
-      estimatedAmount: limitDecimalPlaces(lastStep.expectedOutputAmountHumanReadable || '')
-    }
-  })), React__default.createElement("div", {
-    className: "status"
-  }, status === 'running' ? React__default.createElement(Spinner, {
-    size: 24,
-    color: "primary"
-  }) : status)));
-}
-
-var Container$4 = /*#__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$4, 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: "h6"
-  }, 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$5 = /*#__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, {
-      key: index
-    }, React__default.createElement(Spacer, {
-      direction: "vertical"
-    }), React__default.createElement(Alert, Object.assign({
-      type: "error",
-      key: index
-    }, typeof error === 'string' ? {
-      title: error
-    } : {
-      children: error
-    })));
-  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
-    return React__default.createElement(React__default.Fragment, {
-      key: index
-    }, React__default.createElement(Spacer, {
-      direction: "vertical"
-    }), React__default.createElement(Alert, Object.assign({
-      type: "warning",
-      key: index
-    }, typeof warning === 'string' ? {
-      title: warning
-    } : {
-      children: 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$5, {
-      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'
-  }
-});
-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, {
-      key: index
-    }, React__default.createElement(Group, null, React__default.createElement(Typography, {
-      variant: "body2",
-      color: "neutrals600",
-      className: "group-title"
-    }, group.title), group.swaps.map(function (swap) {
-      return React__default.createElement(React__default.Fragment, {
-        key: swap.requestId
-      }, React__default.createElement(SwapDetail, {
-        swap: swap,
-        status: swap.status,
-        onClick: onSwapClick
-      }), React__default.createElement(Divider, {
-        size: 12
-      }));
-    })), React__default.createElement(Divider, {
-      size: 24
-    }));
-  }));
-}
-
-var Container$6 = /*#__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);
-  });
-};
-function History(props) {
-  var _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    onBack = props.onBack,
-    onSwapClick = props.onSwapClick,
-    groupBy = props.groupBy,
-    loading = props.loading;
-  return React__default.createElement(SecondaryPage, {
-    onBack: onBack,
-    textField: true,
-    textFieldPlaceholder: "Search by blockchain, token or request Id",
-    title: "Swaps"
-  }, function (searchedFor) {
-    var filterSwaps = filteredHistory(list, searchedFor);
-    return React__default.createElement(React__default.Fragment, null, loading && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
-      size: 24
-    })), React__default.createElement(Container$6, null, !loading && React__default.createElement(React__default.Fragment, 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: function onClick() {
-        (props == null ? void 0 : props.switchNetwork) && props.switchNetwork()["catch"](function () {});
-      }
-    }, "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$J = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
-var SwapperContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$4',
-  variants: {
-    created: {
-      "true": {
-        filter: 'grayscale(100%)'
-      }
-    },
-    running: {
-      "true": {
-        animation: pulse + " 2s ease-in-out infinite"
-      }
-    }
-  }
-});
-var FeeContainer = /*#__PURE__*/styled('div', {
-  paddingLeft: '$16',
-  color: '$neutrals800'
-});
-var Fee = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var RelativeContainer$1 = /*#__PURE__*/styled('div', {
-  position: 'relative'
-});
-var Dot$1 = /*#__PURE__*/styled('div', {
-  width: '$8',
-  height: '$8',
-  backgroundColor: '$foreground',
-  borderRadius: '4px',
-  marginLeft: '11px'
-});
-var ArrowDown = /*#__PURE__*/styled('div', {
-  width: '0px',
-  height: '0px',
-  borderLeft: '5px solid transparent',
-  borderRight: '5px solid transparent',
-  borderTop: '5px solid $foreground',
-  marginLeft: '$10'
-});
-var StyledAnchor = /*#__PURE__*/styled('a', {
-  color: '$primary',
-  fontWeight: '$600'
-});
-var SwapInfoContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  paddingBottom: '$16',
-  borderBottom: '1px solid $neutrals300'
-});
-var InternalDetailsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  '.details': {
-    padding: '$8 0'
-  }
-});
-var InternalDetail = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  margin: '$12 0 $12 $20'
-});
-var DescriptionContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var Description = /*#__PURE__*/styled(Typography, {
-  color: '$success',
-  paddingLeft: '$4'
-});
-var Line$1 = /*#__PURE__*/styled('div', {
-  width: '0',
-  minHeight: '$16',
-  marginLeft: '14px',
-  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',
-    justifyContent: 'flex-end'
-  },
-  '.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: '0',
-  color: '$neutrals600',
-  fontSize: '$10'
-});
-var SwapFlowContainer = /*#__PURE__*/styled('div', {
-  overflowY: 'auto',
-  padding: '$8 $4 $2 $4'
-});
-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$J);
-  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("span", {
-    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("div", {
-    className: "name"
-  }, React__default.createElement("span", {
-    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: 16
-  }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
-    return React__default.createElement("div", {
-      key: index
-    }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
-      logo: step.fromLogo,
-      symbol: step.fromSymbol,
-      chainLogo: step.fromBlockchainLogo || '',
-      blockchain: step.fromBlockchain,
-      amount: pendingSwap.inputAmount
-    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, {
-      created: step.status === 'created',
-      running: !['created', 'success', 'failed'].includes(step.status)
-    }, React__default.createElement(Image, {
-      src: step.swapperLogo || '',
-      alt: step.swapperId,
-      size: 20
-    }), React__default.createElement(FeeContainer, null, React__default.createElement(Typography, {
-      variant: "body2"
-    }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
-      variant: "body2"
-    }, "\xA0 $", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), React__default.createElement("div", {
-      className: "details"
-    }, !!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(Divider, {
-        size: 4
-      }), React__default.createElement(CheckCircleIcon, {
-        color: "primary"
-      }), React__default.createElement(Description, {
-        variant: "body2"
-      }, React__default.createElement(StyledAnchor, {
-        href: item.url,
-        target: "_blank",
-        rel: "noreferrer",
-        key: index
-      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1), " Tx")))));
-    })), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
-      color: "error"
-    }), React__default.createElement(Description, {
-      variant: "body2",
-      color: "$error500"
-    }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
-      logo: step.toLogo,
-      symbol: step.toSymbol,
-      chainLogo: step.toBlockchainLogo || '',
-      blockchain: step.toBlockchain,
-      amount: step.outputAmount || '',
-      estimatedAmount: step.expectedOutputAmountHumanReadable || '',
-      success: step.status === 'success'
-    }));
-  }), 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(Typography, {
-      variant: "body2"
-    }, "Warning: Cancel ", React__default.createElement("u", null, "doesn't revert"), " your transaction if you've already signed and sent a transaction to the blockchain. It only stops next steps from being executed.")),
-    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')
-  }));
-}
-
-function useCopyToClipboard(resetInterval) {
-  var _React$useState = React__default.useState(false),
-    isCopied = _React$useState[0],
-    setCopied = _React$useState[1];
-  var handleCopy = React__default.useCallback(function (text) {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-  React__default.useEffect(function () {
-    var timeout;
-    if (isCopied && resetInterval) {
-      timeout = setTimeout(function () {
-        return setCopied(false);
-      }, resetInterval);
-    }
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [isCopied, resetInterval]);
-  return [isCopied, handleCopy];
-}
-
-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, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled, useCopyToClipboard };
-//# sourceMappingURL=ui.esm.js.map