@rango-dev/ui 0.1.10-next.91 → 0.1.10-next.92

package/dist/ui.cjs.development.js

@@ -6,6 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var RadixTooltip = require('@radix-ui/react-tooltip');
 var RadixCheckbox = require('@radix-ui/react-checkbox');
 var reactDom = require('react-dom');
 var walletsShared = require('@rango-dev/wallets-shared');
@@ -14,7 +15,6 @@ var RadioGroup = require('@radix-ui/react-radio-group');
 var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
 var AutoSizer = _interopDefault(require('react-virtualized-auto-sizer'));
-var RadixTooltip = require('@radix-ui/react-tooltip');
 var reactColor = require('react-color');
 
 function _extends() {
@@ -85,7 +85,9 @@ var theme = {
     error100: '#F7D4D6',
     error300: '#FF3333',
     error500: '#FF0000',
-    error700: '#E60000'
+    error700: '#E60000',
+    // Only use this color when you are going to use white for both dark and light theme.
+    white: '#fff'
   },
   space: {
     2: '2px',
@@ -140,8 +142,8 @@ var theme = {
   borderWidths: {},
   borderStyles: {},
   radii: {
-    5: '5px',
-    10: '10px'
+    5: '8px',
+    10: '12px'
   },
   shadows: {
     s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
@@ -536,26 +538,34 @@ var HistoryIcon = function HistoryIcon(_ref) {
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return React.createElement(SvgWithFillColor, Object.assign({
+  return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
     color: color,
     fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
   }, props), React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
-  }), React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
-  }), React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+  }), React.createElement("polyline", {
+    points: "14 2 14 8 20 8"
+  }), React.createElement("line", {
+    x1: "16",
+    y1: "13",
+    x2: "8",
+    y2: "13"
+  }), React.createElement("line", {
+    x1: "16",
+    y1: "17",
+    x2: "8",
+    y2: "17"
+  }), React.createElement("polyline", {
+    points: "10 9 9 9 8 9"
   }));
 };
 HistoryIcon.toString = function () {
@@ -603,21 +613,19 @@ var SettingsIcon = function SettingsIcon(_ref) {
     height: size,
     viewBox: "0 0 24 24",
     color: color,
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
-  }, props), React.createElement("path", {
-    d: "M12.5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
-    strokeWidth: 1.5,
-    strokeMiterlimit: 10,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+  }, props), React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
   }), React.createElement("path", {
-    d: "M2.5 12.88v-1.76c0-1.04.85-1.9 1.9-1.9 1.81 0 2.55-1.28 1.64-2.85-.52-.9-.21-2.07.7-2.59l1.73-.99c.79-.47 1.81-.19 2.28.6l.11.19c.9 1.57 2.38 1.57 3.29 0l.11-.19c.47-.79 1.49-1.07 2.28-.6l1.73.99c.91.52 1.22 1.69.7 2.59-.91 1.57-.17 2.85 1.64 2.85 1.04 0 1.9.85 1.9 1.9v1.76c0 1.04-.85 1.9-1.9 1.9-1.81 0-2.55 1.28-1.64 2.85.52.91.21 2.07-.7 2.59l-1.73.99c-.79.47-1.81.19-2.28-.6l-.11-.19c-.9-1.57-2.38-1.57-3.29 0l-.11.19c-.47.79-1.49 1.07-2.28.6l-1.73-.99a1.899 1.899 0 0 1-.7-2.59c.91-1.57.17-2.85-1.64-2.85-1.05 0-1.9-.86-1.9-1.9Z",
-    strokeWidth: 1.5,
-    strokeMiterlimit: 10,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    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 () {
@@ -833,12 +841,41 @@ DownloadIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$l = ["size", "color"];
+var _excluded$l = ["color", "size"];
+var ChevronRightIcon = /*#__PURE__*/React.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 React.createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("polyline", {
+    points: "9 18 15 12 9 6"
+  }));
+});
+ChevronRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$m = ["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$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -858,12 +895,12 @@ RetryRightIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$m = ["size", "color"];
+var _excluded$n = ["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$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -883,12 +920,12 @@ RetryLeftIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$n = ["size", "color"];
+var _excluded$o = ["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$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -908,12 +945,12 @@ TryAgainIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$o = ["size", "color"];
+var _excluded$p = ["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$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -939,12 +976,12 @@ VerticalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$p = ["size", "color"];
+var _excluded$q = ["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$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -970,39 +1007,43 @@ HorizontalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$q = ["color", "size"];
+var _excluded$r = ["color", "size"];
 var RetryIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var color = _ref.color,
+  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$q);
-  return React.createElement(SvgWithFillColor, Object.assign({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  return React.createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
     color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
     className: "_icon"
   }, props, {
     ref: forwardedRef
+  }), React.createElement("polyline", {
+    points: "23 4 23 10 17 10"
   }), React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.016 13.45c.199-.384.002-.842-.397-1.005-.406-.166-.864.033-1.077.416A6.17 6.17 0 0 1 13 15.345a6.051 6.051 0 0 1-4.244.513 6.127 6.127 0 0 1-3.543-2.425 6.286 6.286 0 0 1 .73-8.095A6.089 6.089 0 0 1 9.86 3.604a6.07 6.07 0 0 1 4.083 1.286 6.196 6.196 0 0 1 1.65 1.97l-1.053.363a.302.302 0 0 0-.073.534l2.607 1.758a.3.3 0 0 0 .45-.155l1.01-3.007a.298.298 0 0 0-.38-.378l-1.057.365a7.79 7.79 0 0 0-2.194-2.713 7.627 7.627 0 0 0-5.13-1.615A7.65 7.65 0 0 0 4.852 4.19a7.898 7.898 0 0 0-.917 10.17 7.7 7.7 0 0 0 4.452 3.048 7.604 7.604 0 0 0 5.333-.644 7.757 7.757 0 0 0 3.297-3.315Z",
-    fill: color
+    d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10"
   }));
 });
 RetryIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$r = ["size", "color"];
+var _excluded$s = ["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$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1029,12 +1070,12 @@ WalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$s = ["size", "color"];
+var _excluded$t = ["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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1069,12 +1110,12 @@ AddWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$t = ["size", "color"];
+var _excluded$u = ["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$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1109,12 +1150,12 @@ DeleteWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$u = ["size", "color"];
+var _excluded$v = ["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$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1145,12 +1186,12 @@ CheckWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$v = ["size", "color"];
+var _excluded$w = ["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$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1185,12 +1226,48 @@ SwapWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$w = ["size", "color"];
+var _excluded$x = ["color", "size"];
+var DisconnectIcon = /*#__PURE__*/React.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$x);
+  return React.createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+  }), React.createElement("polyline", {
+    points: "16 17 21 12 16 7"
+  }), React.createElement("line", {
+    x1: "21",
+    y1: "12",
+    x2: "9",
+    y2: "12"
+  }));
+});
+DisconnectIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$y = ["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$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1220,11 +1297,11 @@ BagIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$x = ["size"];
+var _excluded$z = ["size"];
 var TimeIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return React.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1257,12 +1334,12 @@ CloseIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$y = ["size", "color"];
+var _excluded$A = ["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$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1283,12 +1360,12 @@ SignatureIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$z = ["size", "color"];
+var _excluded$B = ["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$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return React.createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1314,10 +1391,9 @@ CopyIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$A = ["children", "className"];
+var _excluded$C = ["children", "className", "color"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
-  color: '$foreground',
   display: 'inline-block',
   variants: {
     variant: {
@@ -1363,13 +1439,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
       },
       h5: {
         fontSize: '$16',
-        fontWeight: '$600',
-        '@md': {
-          fontSize: '$18'
-        },
-        '@lg': {
-          fontSize: '$20'
-        }
+        fontWeight: '$600'
       },
       h6: {
         fontSize: '$14',
@@ -1398,6 +1468,10 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$16'
         }
       },
+      body3: {
+        fontSize: '$12',
+        fontWeight: '$400'
+      },
       caption: {
         fontSize: '$10',
         fontWeight: '$400',
@@ -1483,9 +1557,16 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
 function Typography(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  var customCss = color ? {
+    color: color.startsWith('$') ? color : "$" + color
+  } : {
+    color: '$foreground'
+  };
   return React__default.createElement(TypographyContainer, Object.assign({
-    className: "_typography _text " + className
+    className: "_typography _text " + (className || ''),
+    css: customCss
   }, props), children);
 }
 Typography.toString = function () {
@@ -1510,12 +1591,20 @@ var Logo = /*#__PURE__*/styled('img', {
   height: '$28',
   borderRadius: '50%'
 });
-var ChainLogo = /*#__PURE__*/styled('img', {
+var ChainLogo = /*#__PURE__*/styled('div', {
   position: 'absolute',
-  bottom: 0,
-  width: '$12',
-  height: '$12',
-  right: 0
+  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',
@@ -1565,17 +1654,18 @@ function StepDetail(_ref) {
   }, React__default.createElement(Logo, {
     src: logo,
     alt: symbol
-  }), React__default.createElement(ChainLogo, {
+  }), React__default.createElement(ChainLogo, null, React__default.createElement("img", {
     src: chainLogo,
     alt: blockchain
-  })), React__default.createElement(Detail, {
+  }))), React__default.createElement(Detail, {
     pl: direction === 'horizontal'
   }, React__default.createElement(Typography, {
     noWrap: true,
     variant: direction === 'vertical' ? 'body2' : 'h6'
   }, amount ? parseFloat(amount).toFixed(2) : '?', " ", symbol), React__default.createElement(SubTitle, {
     noWrap: true,
-    variant: "caption"
+    variant: "caption",
+    color: "neutrals800"
   }, "on ", blockchain)));
 }
 
@@ -1704,6 +1794,99 @@ function Spinner(_ref) {
   });
 }
 
+var TooltipTrigger = /*#__PURE__*/styled(RadixTooltip.Trigger, {
+  border: 0,
+  padding: 0,
+  backgroundColor: 'transparent'
+});
+var TooltipContent = /*#__PURE__*/styled(RadixTooltip.Content, {
+  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(RadixTooltip.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(RadixTooltip.Provider, null, React__default.createElement(RadixTooltip.Root, null, React__default.createElement(TooltipTrigger, {
+    asChild: true
+  }, React__default.createElement(ChildrenWrapper, null, children)), React__default.createElement(RadixTooltip.Portal, null, React__default.createElement(TooltipContent, {
+    color: color,
+    side: side,
+    sideOffset: 5
+  }, content, React__default.createElement(TooltipArrow, {
+    color: color
+  })))));
+}
+
 var Container = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
   border: '1px solid $neutrals300',
@@ -1738,7 +1921,7 @@ var Line = /*#__PURE__*/styled('div', {
 });
 var HR = /*#__PURE__*/styled('hr', {
   width: '100%',
-  background: '$neutrals200',
+  border: '1px solid $neutrals400',
   margin: '$8 0'
 });
 var SwapperLogo = /*#__PURE__*/styled('img', {
@@ -1796,7 +1979,7 @@ var GasContainer = /*#__PURE__*/styled('div', {
     margin: '$8'
   }
 });
-var FeeContainer = /*#__PURE__*/styled('div', {
+var CostContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -1839,7 +2022,9 @@ function BestRoute(props) {
   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(FeeContainer, {
+  })) : 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,
@@ -1849,13 +2034,17 @@ function BestRoute(props) {
     align: "center",
     variant: "caption",
     warning: feeWarning
-  }, error && '-', !!data && "$" + totalFee)), React__default.createElement(HR, null), React__default.createElement(TimeIcon, {
+  }, 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, {
+  }, error && '-', !!data && "~" + totalTime + "m")))), React__default.createElement(BestRouteContainer, null, loading && React__default.createElement(Spinner, {
     color: "primary"
   }), error && React__default.createElement(ErrorMsg, {
     variant: "caption"
@@ -1886,8 +2075,8 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$B = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
-var _ghost, _css, _css2, _css3, _css4;
+var _excluded$D = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _ghost, _css, _css2, _css3;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
   fontSize: '$16',
@@ -1897,6 +2086,11 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  transition: 'all 0.35s',
+  border: '0',
+  '&:active': {
+    transform: 'scale(0.95)'
+  },
   variants: {
     align: {
       start: {
@@ -1909,6 +2103,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
       }
     },
     size: {
+      compact: {},
       small: {
         height: '$32'
       },
@@ -1925,28 +2120,29 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
         color: '$foreground',
         border: 0,
         '&:hover': {
-          backgroundColor: '$neutrals200',
-          color: '$foreground'
+          backgroundColor: '$neutrals200'
         },
         '&:disabled': {
-          background: '$neutrals400 !important'
+          background: '$neutrals400'
+        },
+        '&:disabled:hover': {
+          background: '$neutrals400',
+          transform: 'unset'
         }
       },
       outlined: {
-        backgroundColor: '$background !important',
-        borderColor: '$neutrals400 !important',
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        borderColor: '$neutrals400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600 !important',
-          color: '$neutrals500 !important'
+          borderColor: '$neutrals600'
         },
         '&:disabled': {
-          borderColor: '$neutrals300 !important',
-          color: '$neutrals400 !important'
-        },
-        background: 'transparent',
-        border: 1,
-        borderStyle: 'solid'
+          borderColor: '$neutrals300',
+          color: '$neutrals400'
+        }
       },
       ghost: (_ghost = {
         color: '$foreground',
@@ -1980,24 +2176,25 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   compoundVariants: [{
     type: 'primary',
     variant: 'contained',
-    css: (_css = {
-      background: '$primary',
-      $$color: '$colors$background'
-    }, _css["." + darkTheme + " &"] = {
-      $$color: '$colors$foreground'
-    }, _css.color = '$$color !important', _css['&:hover'] = {
-      background: '$primary700'
-    }, _css['&:visited'] = {
-      background: '$primary900'
-    }, _css['&:focus'] = {
-      background: '$primary600'
-    }, _css)
-  }, {
-    type: 'primary',
-    variant: 'outlined',
+    css: {
+      background: '$primary',
+      color: '$white',
+      '&:hover': {
+        background: '$primary700'
+      },
+      '&:visited': {
+        background: '$primary900'
+      },
+      '&:focus': {
+        background: '$primary600'
+      }
+    }
+  }, {
+    type: 'primary',
+    variant: 'outlined',
     css: {
       color: '$primary !important',
-      borderColor: '$primary !important',
+      borderColor: '$primary',
       '&:hover': {
         color: '$primary700 !important',
         borderColor: '$primary700 !important'
@@ -2029,24 +2226,24 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   }, {
     type: 'error',
     variant: 'contained',
-    css: (_css2 = {
+    css: (_css = {
       background: '$error',
       $$color: '$colors$background'
-    }, _css2["." + darkTheme + " &"] = {
+    }, _css["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css2.color = '$$color !important', _css2['&:hover'] = {
+    }, _css.color = '$$color !important', _css['&:hover'] = {
       background: '$error300'
-    }, _css2['&:visited'] = {
+    }, _css['&:visited'] = {
       background: '$error700'
-    }, _css2['&:focus'] = {
+    }, _css['&:focus'] = {
       background: '$error700'
-    }, _css2)
+    }, _css)
   }, {
     type: 'error',
     variant: 'outlined',
     css: {
       color: '$error !important',
-      borderColor: '$error !important',
+      borderColor: '$error',
       '&:hover': {
         color: '$error300 !important',
         borderColor: '$error300 !important'
@@ -2078,24 +2275,24 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   }, {
     type: 'warning',
     variant: 'contained',
-    css: (_css3 = {
+    css: (_css2 = {
       background: '$warning',
       $$color: '$colors$background'
-    }, _css3["." + darkTheme + " &"] = {
+    }, _css2["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css3.color = '$$color !important', _css3['&:hover'] = {
+    }, _css2.color = '$$color !important', _css2['&:hover'] = {
       background: '$warning300'
-    }, _css3['&:visited'] = {
+    }, _css2['&:visited'] = {
       background: '$warning700'
-    }, _css3['&:focus'] = {
+    }, _css2['&:focus'] = {
       background: '$warning700'
-    }, _css3)
+    }, _css2)
   }, {
     type: 'warning',
     variant: 'outlined',
     css: {
       color: '$warning !important',
-      borderColor: '$warning !important',
+      borderColor: '$warning',
       '&:hover': {
         color: '$warning300 !important',
         borderColor: '$warning300 !important'
@@ -2127,24 +2324,24 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   }, {
     type: 'success',
     variant: 'contained',
-    css: (_css4 = {
+    css: (_css3 = {
       background: '$success',
       $$color: '$colors$background'
-    }, _css4["." + darkTheme + " &"] = {
+    }, _css3["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css4.color = '$$color !important', _css4['&:hover'] = {
+    }, _css3.color = '$$color !important', _css3['&:hover'] = {
       background: '$success300'
-    }, _css4['&:visited'] = {
+    }, _css3['&:visited'] = {
       background: '$success700'
-    }, _css4['&:focus'] = {
+    }, _css3['&:focus'] = {
       background: '$success700'
-    }, _css4)
+    }, _css3)
   }, {
     type: 'success',
     variant: 'outlined',
     css: {
       color: '$success !important',
-      borderColor: '$success !important',
+      borderColor: '$success',
       '&:hover': {
         color: '$success300 !important',
         borderColor: '$success300 !important'
@@ -2173,6 +2370,12 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
         color: '$success700'
       }
     }
+  }, {
+    size: 'compact',
+    css: {
+      padding: '$2 $4',
+      fontSize: '$12'
+    }
   }],
   defaultVariants: {
     size: 'medium',
@@ -2216,7 +2419,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2292,7 +2495,7 @@ function BlockchainsList(props) {
   }));
 }
 
-var _excluded$C = ["label", "prefix", "suffix", "children", "size", "style"];
+var _excluded$E = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
   boxSizing: 'border-box',
@@ -2306,7 +2509,8 @@ var InputContainer = /*#__PURE__*/styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary'
+    borderColor: '$success',
+    outline: '1px solid $success'
   },
   variants: {
     size: {
@@ -2377,7 +2581,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     suffix = props.suffix,
     size = props.size,
     style = props.style,
-    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$C);
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$E);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
     className: "_text"
   }, inputAttributes.id && {
@@ -2457,61 +2661,182 @@ function SecondaryPage(props) {
   })), React__default.createElement(ContentContainer, null, props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
 }
 
+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', {
-  display: 'flex',
   width: '100%',
-  alignItems: 'center',
   padding: '$16',
   borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  '.main': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.footer': {
+    paddingTop: '$8'
+  },
+  '&.hasIcon .footer': {
+    paddingLeft: '$32'
+  },
   variants: {
     type: {
       primary: {
-        backgroundColor: '$primary200'
+        color: '$primary200'
       },
       secondary: {
-        backgroundColor: '$neutrals400'
+        color: '$secondary'
       },
       success: {
-        backgroundColor: '$success300'
+        color: '$success300'
       },
       warning: {
-        backgroundColor: '$warning500'
+        color: '$warning500'
       },
       error: {
-        backgroundColor: '$error300'
+        color: '$error300'
       }
     }
   }
 });
-var ContentContainer$1 = /*#__PURE__*/styled('div', {});
-var TitleContainer = /*#__PURE__*/styled('div', {
-  marginBottom: '$8'
-});
-var IconContainer = /*#__PURE__*/styled('div', {
-  marginRight: '$24'
-});
-var StyledTypography = /*#__PURE__*/styled(Typography, {
-  color: darkTheme.colors.foreground.value
-});
 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
-  }, showIcon && React__default.createElement(IconContainer, null, type === 'success' && React__default.createElement(CheckCircleIcon, {
-    color: "success",
-    size: 28
+    type: type,
+    className: showIcon ? 'hasIcon' : ''
+  }, React__default.createElement("div", {
+    className: "main"
+  }, showIcon && React__default.createElement(React__default.Fragment, null, type === 'success' && React__default.createElement(CheckCircleIcon, {
+    color: type,
+    size: 24
   }), type === 'warning' && React__default.createElement(WarningIcon, {
-    color: "white",
-    size: 28
+    color: type,
+    size: 24
   }), type === 'error' && React__default.createElement(InfoCircleIcon, {
-    color: "error",
-    size: 28
-  })), React__default.createElement(ContentContainer$1, null, title && React__default.createElement(TitleContainer, null, React__default.createElement(StyledTypography, {
-    variant: "h6"
-  }, title)), children));
+    color: type,
+    size: 24
+  }), React__default.createElement(Spacer, {
+    size: 8
+  })), title && React__default.createElement(Typography, {
+    variant: "h6",
+    color: type
+  }, title), children), props.footer ? React__default.createElement("div", {
+    className: "footer"
+  }, props.footer) : null);
 }
 
 var containsText = function containsText(text, searchText) {
@@ -2563,15 +2888,11 @@ function BlockchainSelector(props) {
       multiSelect: multiSelect,
       selectedList: selectedList,
       onChange: onChange
-    }) : React__default.createElement(Alert, {
-      type: "secondary"
-    }, React__default.createElement(Typography, {
-      variant: "body2"
-    }, searchedFor + " not found"))));
+    }) : React__default.createElement(Alert, null, searchedFor + " not found")));
   });
 }
 
-var _excluded$D = ["label", "id"];
+var _excluded$F = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -2596,7 +2917,7 @@ var Label$1 = /*#__PURE__*/styled('label', {
 function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
     id: id
   }, props), React__default.createElement(RadixCheckbox.Indicator, null, React__default.createElement(CheckIcon, {
@@ -2616,13 +2937,17 @@ var ChipCointainer = /*#__PURE__*/styled('div', {
   height: '32',
   fontSize: '$14',
   cursor: 'pointer',
+  transition: 'all 0.35s',
+  color: '$foreground',
   '&:hover': {
-    backgroundColor: '$neutrals300'
+    backgroundColor: '$success700',
+    color: '$background'
   },
   variants: {
     selected: {
       "true": {
-        backgroundColor: '$neutrals400'
+        backgroundColor: '$success',
+        color: '$background'
       },
       "false": {
         backgroundColor: '$background'
@@ -2641,9 +2966,7 @@ function Chip(props) {
     selected: selected,
     onClick: onClick,
     style: style
-  }, prefix || null, React__default.createElement(Typography, {
-    variant: "body2"
-  }, label), suffix || null);
+  }, prefix || null, label, suffix || null);
 }
 
 var BackDrop = /*#__PURE__*/styled('div', {
@@ -2677,7 +3000,7 @@ var ModalHeader = /*#__PURE__*/styled('div', {
   position: 'relative',
   marginBottom: '$16'
 });
-var ContentContainer$2 = /*#__PURE__*/styled('div', {});
+var ContentContainer$1 = /*#__PURE__*/styled('div', {});
 function Modal(props) {
   var title = props.title,
     content = props.content,
@@ -2701,7 +3024,7 @@ function Modal(props) {
   }, title), React__default.createElement(Row, null, action, React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
-  }))), React__default.createElement(ContentContainer$2, {
+  }))), React__default.createElement(ContentContainer$1, {
     style: contentStyle
   }, content))), document.body));
 }
@@ -2727,7 +3050,7 @@ var State = function State(_ref) {
   }, React__default.createElement(DownloadIcon, {
     size: 24,
     color: "success"
-  })), walletState === exports.WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === exports.WalletState.CONNECTED && React__default.createElement(FilledCircle, null)));
+  })), walletState === exports.WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === exports.WalletState.CONNECTED && React__default.createElement(DisconnectIcon, null)));
 };
 
 var WalletImage = /*#__PURE__*/styled('img', {
@@ -2735,6 +3058,23 @@ var WalletImage = /*#__PURE__*/styled('img', {
   height: '$24',
   marginRight: '$12'
 });
+var Text = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var ExtendedButton = /*#__PURE__*/styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        outline: '1px solid $primary',
+        borderColor: '$primary',
+        '&:hover': {
+          borderColor: '$primary'
+        }
+      }
+    }
+  }
+});
 function Wallet(props) {
   var name = props.name,
     type = props.type,
@@ -2742,7 +3082,7 @@ function Wallet(props) {
     state = props.state,
     _onClick = props.onClick,
     installLink = props.installLink;
-  return React__default.createElement(Button, {
+  return React__default.createElement(ExtendedButton, {
     type: state === exports.WalletState.CONNECTED ? 'primary' : undefined,
     disabled: !state,
     onClick: function onClick() {
@@ -2760,10 +3100,14 @@ function Wallet(props) {
       walletState: state,
       installLink: installLink
     })
-  }, React__default.createElement(Typography, {
+  }, React__default.createElement(Text, null, React__default.createElement(Typography, {
     variant: "h5",
     noWrap: false
-  }, name));
+  }, name), state === exports.WalletState.CONNECTED ? React__default.createElement(Typography, {
+    variant: "caption",
+    noWrap: false,
+    color: "primary"
+  }, "Connected") : null));
 }
 
 var ModalContent = /*#__PURE__*/styled('div', {
@@ -2795,107 +3139,21 @@ function ConnectWalletsModal(props) {
   });
 }
 
-var SpacerContainer = /*#__PURE__*/styled('div', {
-  variants: {
-    size: {
-      12: {},
-      16: {},
-      18: {},
-      20: {},
-      24: {}
-    },
-    direction: {
-      vertical: {},
-      horizontal: {}
-    }
-  },
-  compoundVariants: [{
-    size: 12,
-    direction: 'horizontal',
-    css: {
-      width: '$12'
-    }
-  }, {
-    size: 12,
-    direction: 'vertical',
-    css: {
-      height: '$12'
-    }
-  }, {
-    size: 16,
-    direction: 'horizontal',
-    css: {
-      width: '$16'
-    }
-  }, {
-    size: 16,
-    direction: 'vertical',
-    css: {
-      height: '$16'
-    }
-  }, {
-    size: 18,
-    direction: 'horizontal',
-    css: {
-      width: '$18'
-    }
-  }, {
-    size: 18,
-    direction: 'vertical',
-    css: {
-      height: '$18'
-    }
-  }, {
-    size: 20,
-    direction: 'horizontal',
-    css: {
-      width: '$20'
-    }
-  }, {
-    size: 20,
-    direction: 'vertical',
-    css: {
-      height: '$20'
-    }
-  }, {
-    size: 24,
-    direction: 'horizontal',
-    css: {
-      width: '$24'
-    }
-  }, {
-    size: 24,
-    direction: 'vertical',
-    css: {
-      height: '$24'
-    }
-  }]
-});
-function Spacer(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 12 : _ref$size,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
-  return React__default.createElement(SpacerContainer, {
-    size: size,
-    direction: direction
-  });
-}
-
 var StyledSwitchRoot = /*#__PURE__*/styled(RadixSwitch.Root, {
   boxSizing: 'border-box',
   boxShadow: 'none',
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals300',
-  borderColor: '$neutrals400',
+  backgroundColor: '$neutrals600',
+  borderColor: '$neutrals600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',
   cursor: 'pointer',
   '&[data-state="checked"]': {
-    backgroundColor: '$primary100'
+    backgroundColor: '$success',
+    borderColor: '$success'
   },
   '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)'
 });
@@ -2906,13 +3164,12 @@ var StyledSwitchThumb = /*#__PURE__*/styled(RadixSwitch.Thumb, {
   display: 'block',
   width: '18px',
   height: '18px',
-  backgroundColor: '$neutrals500',
+  backgroundColor: '$white',
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
   '&[data-state="checked"]': {
-    transform: 'translateX(20px)',
-    backgroundColor: '$primary'
+    transform: 'translateX(20px)'
   }
 });
 function Switch(props) {
@@ -2934,9 +3191,11 @@ var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
     })
   };
 };
-var LiquiditySourceType = /*#__PURE__*/styled(Typography, {
+var LiquiditySourceType = /*#__PURE__*/styled('div', {
   position: 'sticky',
-  display: 'block',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   top: '0',
   marginTop: '$8',
   marginBottom: '$8',
@@ -2979,28 +3238,42 @@ function LiquiditySourceList(props) {
       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("div", {
     style: _extends({
       height: '450px'
     }, listContainerStyle)
-  }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, {
+  }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
     variant: "h5"
-  }, "Bridges"), React__default.createElement(Spacer, {
-    size: 16,
+  }, "Bridges"), React__default.createElement(Typography, {
+    variant: "body1",
+    color: "neutrals800"
+  }, totalSelectedBridges === totalBridges ? totalBridges : totalSelectedBridges + " / " + totalBridges)), React__default.createElement(Spacer, {
+    size: 12,
     direction: "vertical"
-  }), groupLiquiditySources(list).bridge.map(function (liquiditySource, index) {
+  }), bridges.map(function (liquiditySource, index) {
     return React__default.createElement(LiquiditySourceItem, {
       liquiditySource: liquiditySource,
       key: index,
       selected: isSelected(liquiditySource),
       onChange: changeLiquiditySources
     });
-  })), React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, {
+  })), React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
     variant: "h5"
-  }, "Exchanges"), React__default.createElement(Spacer, {
-    size: 16,
+  }, "Exchanges"), React__default.createElement(Typography, {
+    variant: "body1",
+    color: "neutrals800"
+  }, totalSelectedExchanges === totalExchanges ? totalExchanges : totalSelectedExchanges + " / " + totalExchanges)), React__default.createElement(Spacer, {
+    size: 12,
     direction: "vertical"
-  }), groupLiquiditySources(list).exchange.map(function (liquiditySource, index) {
+  }), exchanges.map(function (liquiditySource, index) {
     return React__default.createElement(LiquiditySourceItem, {
       liquiditySource: liquiditySource,
       key: index,
@@ -3026,7 +3299,6 @@ var LiquiditySourceItem = function LiquiditySourceItem(_ref) {
     style: {
       marginBottom: '12px'
     },
-    type: selected ? 'primary' : undefined,
     onClick: onChange.bind(null, liquiditySource)
   }, React__default.createElement(Typography, {
     variant: "body1"
@@ -3059,7 +3331,7 @@ function LiquiditySourcesSelector(props) {
       onClick: toggleAll
     }, list.find(function (item) {
       return item.selected;
-    }) ? 'Clear all' : 'Select all'),
+    }) ? 'Deselect all' : 'Select all'),
     hasHeader: hasHeader,
     onBack: onBack
   }, function (searchedFor) {
@@ -3073,8 +3345,7 @@ function LiquiditySourcesSelector(props) {
 
 var Row$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'center'
+  flexWrap: 'wrap'
 });
 var Circle = /*#__PURE__*/styled('div', {
   width: 12,
@@ -3199,14 +3470,14 @@ var ItemContainer = /*#__PURE__*/styled('div', {
 });
 var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
   padding: '0',
-  backgroundColor: '$neutrals300',
   width: '20px',
   height: '20px',
   borderRadius: '100%',
-  border: 'none',
   cursor: 'pointer',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
   '&:hover': {
-    backgroundColor: '$neutrals400'
+    borderColor: '$neutrals600'
   }
 });
 var Container$3 = /*#__PURE__*/styled('div', {
@@ -3225,7 +3496,7 @@ var StyledIndicator = /*#__PURE__*/styled(RadioGroup.Indicator, {
     width: '10px',
     height: '10px',
     borderRadius: '50%',
-    backgroundColor: '$primary'
+    backgroundColor: '$success'
   }
 });
 var Label$2 = /*#__PURE__*/styled('label', {
@@ -3261,7 +3532,7 @@ function Radio(props) {
 
 var BaseContainer = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals200',
+  backgroundColor: '$neutrals300',
   padding: '$16'
 });
 var Title = /*#__PURE__*/styled(Typography, {
@@ -3294,6 +3565,12 @@ var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
 var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
   marginTop: '$32'
 });
+var Head = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$16'
+});
 function Settings(props) {
   var slippages = props.slippages,
     selectedLiquiditySources = props.selectedLiquiditySources,
@@ -3316,9 +3593,12 @@ function Settings(props) {
     setSelectedSlippage(slippage);
     onSlippageChange(slippage);
   };
-  var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Title, {
+  var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Head, null, React__default.createElement(Typography, {
     variant: "body1"
-  }, "Slippage tolerance per swap"), React__default.createElement(SlippageChipsContainer, null, slippages.map(function (slippage, index) {
+  }, "Slippage tolerance per swap"), customSlippage ? React__default.createElement(Typography, {
+    variant: "caption",
+    color: "error"
+  }, customSlippage, "% Custom") : undefined), React__default.createElement(SlippageChipsContainer, null, slippages.map(function (slippage, index) {
     return React__default.createElement(Chip, {
       key: index,
       onClick: function onClick() {
@@ -3326,7 +3606,7 @@ function Settings(props) {
         changeSlippage(slippage);
       },
       selected: !customSlippage && slippage === selectedSlippage,
-      label: slippage.toString() + " %",
+      label: slippage.toString() + "%",
       style: {
         marginRight: '8px'
       }
@@ -3342,11 +3622,10 @@ function Settings(props) {
       variant: "body2"
     }, "%"),
     size: "small",
-    placeholder: "Custom",
+    placeholder: "Custom %",
     style: {
       width: '128px',
-      flexGrow: 'initial',
-      borderColor: customSlippage ? '$success' : 'initial'
+      flexGrow: 'initial'
     }
   }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
     variant: "body2"
@@ -3379,8 +3658,9 @@ function Settings(props) {
   }, React__default.createElement(Typography, {
     variant: "body1"
   }, "Liquidity Sources"), React__default.createElement(LiquiditySourceNumber, null, React__default.createElement(Typography, {
-    variant: "body2"
-  }, "( " + selectedLiquiditySources.length + " / " + liquiditySources.length + " )"), React__default.createElement(StyledAngleRight, null))));
+    variant: "body2",
+    color: "neutrals800"
+  }, liquiditySources.length !== selectedLiquiditySources.length ? selectedLiquiditySources.length + " / " + liquiditySources.length : liquiditySources.length), React__default.createElement(StyledAngleRight, null))));
   return React__default.createElement(SecondaryPage, {
     title: "Settings",
     textField: false,
@@ -3399,11 +3679,11 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',
-  padding: '$16 $24',
+  padding: '$16',
   boxSizing: 'border-box',
   position: 'relative'
 });
-var ContentContainer$3 = /*#__PURE__*/styled('div', {
+var ContentContainer$2 = /*#__PURE__*/styled('div', {
   width: '100%'
 });
 function SwapContainer(props) {
@@ -3412,7 +3692,7 @@ function SwapContainer(props) {
   return React__default.createElement(MainContainer$1, {
     style: style,
     id: "swap-box"
-  }, React__default.createElement(ContentContainer$3, null, children));
+  }, React__default.createElement(ContentContainer$2, null, children));
 }
 
 var Container$4 = /*#__PURE__*/styled('div', {
@@ -3620,7 +3900,7 @@ function TokenItem(props) {
   }, token.name))));
 }
 
-var _excluded$E = ["style"];
+var _excluded$G = ["style"];
 var PAGE_SIZE = 20;
 function TokenList(props) {
   var list = props.list,
@@ -3660,7 +3940,7 @@ function TokenList(props) {
   }, [tokens.length]);
   var innerElementType = React.forwardRef(function (_ref, ref) {
     var style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
     return React__default.createElement("div", Object.assign({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: ref,
@@ -3724,99 +4004,6 @@ function TokenSelector(props) {
   });
 }
 
-var TooltipTrigger = /*#__PURE__*/styled(RadixTooltip.Trigger, {
-  border: 0,
-  padding: 0,
-  backgroundColor: 'transparent'
-});
-var TooltipContent = /*#__PURE__*/styled(RadixTooltip.Content, {
-  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(RadixTooltip.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(RadixTooltip.Provider, null, React__default.createElement(RadixTooltip.Root, null, React__default.createElement(TooltipTrigger, {
-    asChild: true
-  }, React__default.createElement(ChildrenWrapper, null, children)), React__default.createElement(RadixTooltip.Portal, null, React__default.createElement(TooltipContent, {
-    color: color,
-    side: side,
-    sideOffset: 5
-  }, content, React__default.createElement(TooltipArrow, {
-    color: color
-  })))));
-}
-
 var Container$5 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
@@ -4033,13 +4220,6 @@ var ArrowDown = /*#__PURE__*/styled('div', {
   borderTop: '5px solid $foreground',
   marginLeft: '$8'
 });
-var UpdateIcon = /*#__PURE__*/styled(RetryIcon, {
-  position: 'absolute',
-  right: '0'
-});
-var StyledUpdateIcon = /*#__PURE__*/styled(UpdateIcon, {
-  cursor: 'pointer'
-});
 var BestRouteContainer$1 = /*#__PURE__*/styled('div', {
   overflow: 'auto'
 });
@@ -4049,7 +4229,6 @@ var Alerts = /*#__PURE__*/styled('div', {
 function ConfirmSwap(props) {
   var _bestRoute$result;
   var bestRoute = props.bestRoute,
-    onRefresh = props.onRefresh,
     onBack = props.onBack,
     onConfirm = props.onConfirm,
     loading = props.loading,
@@ -4069,11 +4248,7 @@ function ConfirmSwap(props) {
       variant: "contained",
       onClick: onConfirm,
       disabled: confirmButtonDisabled
-    }, confirmButtonTitle)),
-    TopButton: React__default.createElement(StyledUpdateIcon, {
-      size: 24,
-      onClick: onRefresh
-    })
+    }, confirmButtonTitle))
   }, React__default.createElement(MainContainer$2, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
@@ -4117,6 +4292,11 @@ function ConfirmSwap(props) {
   }))));
 }
 
+var Section = /*#__PURE__*/styled('div', {
+  paddingBottom: '$32',
+  marginBottom: '$32',
+  borderBottom: '1px solid $neutrals400'
+});
 var Footer$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -4127,22 +4307,36 @@ var AlertContainer = /*#__PURE__*/styled('div', {
 var ConfirmButton = /*#__PURE__*/styled(Button, {
   marginTop: '$16'
 });
+var Container$6 = /*#__PURE__*/styled('div', {
+  paddingBottom: '$24',
+  '.title': {
+    paddingBottom: '$8',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.num': {
+    backgroundColor: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
 function ConfirmWallets(props) {
-  var _swap$result, _swap$result2, _swap$result3;
   var onBack = props.onBack,
     loading = props.loading,
     onConfirm = props.onConfirm,
-    swap = props.swap,
     requiredWallets = props.requiredWallets,
     selectableWallets = props.selectableWallets,
     onChange = props.onChange,
     confirmDisabled = props.confirmDisabled,
     isExperimentalChain = props.isExperimentalChain,
-    handleConnectChain = props.handleConnectChain,
-    fromAmount = props.fromAmount,
-    toAmount = props.toAmount;
-  var firstStep = swap == null ? void 0 : (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
-  var lastStep = swap == null ? void 0 : (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
+    handleConnectChain = props.handleConnectChain;
   return React__default.createElement(SecondaryPage, {
     textField: false,
     title: "Confirm Swap",
@@ -4154,25 +4348,27 @@ function ConfirmWallets(props) {
       variant: "contained",
       onClick: onConfirm,
       disabled: confirmDisabled
-    }, "Confirm"))
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
-    variant: "h6",
-    mb: 12
-  }, "Confirm swap ", fromAmount, " ", firstStep == null ? void 0 : firstStep.from.symbol, " (", firstStep == null ? void 0 : firstStep.from.blockchain, ") to ", toAmount, " ", lastStep == null ? void 0 : lastStep.to.symbol, " (on", lastStep == null ? void 0 : lastStep.to.blockchain, ")"), requiredWallets.map(function (wallet, index) {
+    }, "Confirm Swap"))
+  }, 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("div", {
+    return React__default.createElement(Container$6, {
       key: index
-    }, React__default.createElement(Typography, {
-      variant: "body2",
-      mb: 12,
-      mt: 12
-    }, index + 1, ") Your ", wallet, " Wallet"), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
-      type: "error"
-    }, React__default.createElement(Typography, {
+    }, 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"
-    }, "You should connect a " + wallet + " supported wallet"))), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+    }, "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",
@@ -4183,7 +4379,7 @@ function ConfirmWallets(props) {
       list: list,
       onChange: onChange
     }));
-  })));
+  }));
 }
 
 function groupingOfSwaps(list) {
@@ -4473,6 +4669,7 @@ exports.CheckIcon = CheckIcon;
 exports.CheckSquareIcon = CheckSquareIcon;
 exports.CheckWalletIcon = CheckWalletIcon;
 exports.Checkbox = Checkbox;
+exports.ChevronRightIcon = ChevronRightIcon;
 exports.Chip = Chip;
 exports.CloseIcon = CloseIcon;
 exports.ColorPicker = ColorPicker;
@@ -4482,6 +4679,7 @@ exports.ConnectWalletsModal = ConnectWalletsModal;
 exports.CopyIcon = CopyIcon;
 exports.DeleteCircleIcon = DeleteCircleIcon;
 exports.DeleteWalletIcon = DeleteWalletIcon;
+exports.DisconnectIcon = DisconnectIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.Drawer = Drawer;
 exports.FilledCircle = FilledCircle;