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

package/dist/ui.esm.js

@@ -1,13 +1,13 @@
 import React__default, { createElement, forwardRef, Fragment, useState, useEffect } from 'react';
-import { Indicator, Root } from '@radix-ui/react-checkbox';
-import { createPortal } from 'react-dom';
-import { detectInstallLink } from '@rango-dev/wallets-shared';
-import { Root as Root$1, Thumb } from '@radix-ui/react-switch';
-import { Root as Root$2, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
+import { 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 { Provider, Root as Root$3, Portal, Trigger, Content as Content$1, Arrow as Arrow$1 } from '@radix-ui/react-tooltip';
+import { Indicator, Root as Root$1 } from '@radix-ui/react-checkbox';
+import { createPortal } from 'react-dom';
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import { Root as Root$2, Thumb } from '@radix-ui/react-switch';
+import { Root as Root$3, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
 import { ChromePicker } from 'react-color';
 
 function _extends() {
@@ -78,7 +78,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',
@@ -133,8 +135,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'
@@ -529,26 +531,34 @@ var HistoryIcon = function HistoryIcon(_ref) {
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return createElement(SvgWithFillColor, Object.assign({
+  return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
     color: color,
     fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
   }, props), createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
-  }), createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
-  }), createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
+    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 () {
@@ -596,21 +606,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), 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), createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
   }), 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 () {
@@ -826,12 +834,72 @@ DownloadIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$l = ["size", "color"];
+var _excluded$l = ["color", "size"];
+var ChevronRightIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("polyline", {
+    points: "9 18 15 12 9 6"
+  }));
+});
+ChevronRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$m = ["size", "color"];
+var ArrowRightIcon = function ArrowRightIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }), createElement("polyline", {
+    points: "12 5 19 12 12 19"
+  }));
+};
+ArrowRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$n = ["size", "color"];
 var RetryRightIcon = function RetryRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -851,12 +919,12 @@ RetryRightIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$m = ["size", "color"];
+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$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -876,12 +944,12 @@ RetryLeftIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$n = ["size", "color"];
+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$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -901,12 +969,12 @@ TryAgainIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$o = ["size", "color"];
+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$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -932,12 +1000,12 @@ VerticalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$p = ["size", "color"];
+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$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -963,39 +1031,43 @@ HorizontalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$q = ["color", "size"];
+var _excluded$s = ["color", "size"];
 var RetryIcon = /*#__PURE__*/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 createElement(SvgWithFillColor, Object.assign({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+  return 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
+  }), createElement("polyline", {
+    points: "23 4 23 10 17 10"
   }), 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$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$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1022,12 +1094,12 @@ WalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$s = ["size", "color"];
+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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1062,12 +1134,12 @@ AddWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$t = ["size", "color"];
+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$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1102,12 +1174,12 @@ DeleteWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$u = ["size", "color"];
+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$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1138,12 +1210,12 @@ CheckWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$v = ["size", "color"];
+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$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1178,12 +1250,48 @@ SwapWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$w = ["size", "color"];
+var _excluded$y = ["color", "size"];
+var DisconnectIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    color: color,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "_icon"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+  }), createElement("polyline", {
+    points: "16 17 21 12 16 7"
+  }), createElement("line", {
+    x1: "21",
+    y1: "12",
+    x2: "9",
+    y2: "12"
+  }));
+});
+DisconnectIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$z = ["size", "color"];
 var BagIcon = function BagIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1213,11 +1321,11 @@ BagIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$x = ["size"];
+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$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1250,12 +1358,12 @@ CloseIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$y = ["size", "color"];
+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$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1276,12 +1384,12 @@ SignatureIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$z = ["size", "color"];
+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$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1307,10 +1415,9 @@ CopyIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$A = ["children", "className"];
+var _excluded$D = ["children", "className", "color"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
-  color: '$foreground',
   display: 'inline-block',
   variants: {
     variant: {
@@ -1356,13 +1463,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
       },
       h5: {
         fontSize: '$16',
-        fontWeight: '$600',
-        '@md': {
-          fontSize: '$18'
-        },
-        '@lg': {
-          fontSize: '$20'
-        }
+        fontWeight: '$600'
       },
       h6: {
         fontSize: '$14',
@@ -1391,6 +1492,10 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$16'
         }
       },
+      body3: {
+        fontSize: '$12',
+        fontWeight: '$400'
+      },
       caption: {
         fontSize: '$10',
         fontWeight: '$400',
@@ -1476,9 +1581,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$D);
+  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 () {
@@ -1503,12 +1615,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',
@@ -1541,7 +1661,8 @@ var Detail = /*#__PURE__*/styled('div', {
   }
 });
 var SubTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals600'
+  color: '$neutrals600',
+  display: 'block'
 });
 function StepDetail(_ref) {
   var logo = _ref.logo,
@@ -1558,17 +1679,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)));
 }
 
@@ -1697,6 +1819,99 @@ function Spinner(_ref) {
   });
 }
 
+var TooltipTrigger = /*#__PURE__*/styled(Trigger, {
+  border: 0,
+  padding: 0,
+  backgroundColor: 'transparent'
+});
+var TooltipContent = /*#__PURE__*/styled(Content$1, {
+  borderRadius: '$5',
+  padding: '$4 $8',
+  fontSize: '$14',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: '$primary',
+        color: '$white'
+      },
+      error: {
+        backgroundColor: '$error',
+        color: '$white'
+      },
+      warning: {
+        backgroundColor: '$warning',
+        color: '$white'
+      },
+      success: {
+        backgroundColor: '$success',
+        color: '$white'
+      },
+      gray: {
+        backgroundColor: '$neutrals300',
+        color: '$black'
+      },
+      black: {
+        backgroundColor: '$black',
+        color: '$white'
+      },
+      white: {
+        backgroundColor: '$white',
+        color: '$black'
+      }
+    }
+  }
+});
+var TooltipArrow = /*#__PURE__*/styled(Arrow, {
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary'
+      },
+      error: {
+        fill: '$error'
+      },
+      warning: {
+        fill: '$warning'
+      },
+      success: {
+        fill: '$success'
+      },
+      gray: {
+        fill: '$neutrals300'
+      },
+      black: {
+        fill: '$black'
+      },
+      white: {
+        fill: '$white'
+      }
+    }
+  }
+});
+var ChildrenWrapper = /*#__PURE__*/styled('div', {
+  display: 'inline-block'
+});
+function Tooltip(_ref) {
+  var children = _ref.children,
+    content = _ref.content,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'top' : _ref$side,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'gray' : _ref$color;
+  return React__default.createElement(Provider, null, React__default.createElement(Root, null, React__default.createElement(TooltipTrigger, {
+    asChild: true
+  }, React__default.createElement(ChildrenWrapper, null, children)), React__default.createElement(Portal, null, React__default.createElement(TooltipContent, {
+    color: color,
+    side: side,
+    sideOffset: 5
+  }, content, React__default.createElement(TooltipArrow, {
+    color: color
+  })))));
+}
+
 var Container = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
   border: '1px solid $neutrals300',
@@ -1731,7 +1946,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', {
@@ -1789,7 +2004,7 @@ var GasContainer = /*#__PURE__*/styled('div', {
     margin: '$8'
   }
 });
-var FeeContainer = /*#__PURE__*/styled('div', {
+var CostContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -1832,7 +2047,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,
@@ -1842,13 +2059,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"
@@ -1879,8 +2100,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$E = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _ghost, _css, _css2, _css3;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
   fontSize: '$16',
@@ -1890,6 +2111,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: {
@@ -1902,6 +2128,8 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
       }
     },
     size: {
+      compact: {},
+      free: {},
       small: {
         height: '$32'
       },
@@ -1918,28 +2146,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',
@@ -1973,24 +2202,25 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
   compoundVariants: [{
     type: 'primary',
     variant: 'contained',
-    css: (_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)
+      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'
@@ -2022,24 +2252,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'
@@ -2071,24 +2301,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'
@@ -2120,24 +2350,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'
@@ -2166,6 +2396,12 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
         color: '$success700'
       }
     }
+  }, {
+    size: 'compact',
+    css: {
+      padding: '$2 $4',
+      fontSize: '$12'
+    }
   }],
   defaultVariants: {
     size: 'medium',
@@ -2209,7 +2445,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2285,9 +2521,70 @@ function BlockchainsList(props) {
   }));
 }
 
-var _excluded$C = ["label", "prefix", "suffix", "children", "size", "style"];
+var DividerContainer = /*#__PURE__*/styled('div', {
+  variants: {
+    size: {
+      4: {
+        height: '$4'
+      },
+      8: {
+        height: '$8'
+      },
+      12: {
+        height: '$12'
+      },
+      16: {
+        height: '$16'
+      },
+      18: {
+        height: '$18'
+      },
+      20: {
+        height: '$20'
+      },
+      24: {
+        height: '$24'
+      },
+      32: {
+        height: '$32'
+      }
+    }
+  }
+});
+function Divider(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size;
+  return React__default.createElement(DividerContainer, {
+    size: size
+  });
+}
+
+var HeaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$8 0',
+  position: 'relative'
+});
+var BackButton = /*#__PURE__*/styled(Button, {
+  padding: '$8'
+});
+function Header(props) {
+  return React__default.createElement(HeaderContainer, null, props.onBack ? React__default.createElement(BackButton, {
+    variant: "ghost",
+    size: "small",
+    onClick: props.onBack
+  }, React__default.createElement(AngleLeftIcon, {
+    size: 24
+  })) : null, props.prefix, React__default.createElement(Typography, {
+    variant: "h4"
+  }, props.title), props.suffix || React__default.createElement("div", null));
+}
+
+var _excluded$F = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
+  padding: '1px',
   boxSizing: 'border-box',
   border: '1px solid $neutrals400',
   borderRadius: '$5',
@@ -2299,7 +2596,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: {
@@ -2370,7 +2668,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$F);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
     className: "_text"
   }, inputAttributes.id && {
@@ -2390,36 +2688,15 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   })), suffix || null));
 });
 
-var Container$1 = /*#__PURE__*/styled('div', {
+var ContentContainer = /*#__PURE__*/styled('div', {
+  overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
-  height: '100%',
-  width: '100%',
-  padding: '$12 0',
-  position: 'relative',
-  '@lg': {
-    padding: '$16 0'
-  }
-});
-var HeaderContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginBottom: '$16',
-  position: 'relative'
-});
-var BackIcon = /*#__PURE__*/styled(AngleLeftIcon, {
-  position: 'absolute',
-  left: '0'
-});
-var StyledBackIcon = /*#__PURE__*/styled(BackIcon, {
-  cursor: 'pointer'
-});
-var ContentContainer = /*#__PURE__*/styled('div', {
   flex: '1',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  marginTop: '$16'
+  padding: '0 $4'
+});
+var TextFieldContainer = /*#__PURE__*/styled('div', {
+  padding: '1px'
 });
 function SecondaryPage(props) {
   var title = props.title,
@@ -2431,12 +2708,11 @@ function SecondaryPage(props) {
   var _useState = useState(''),
     searchedFor = _useState[0],
     setSearchedFor = _useState[1];
-  return React__default.createElement(Container$1, null, hasHeader && React__default.createElement(HeaderContainer, null, React__default.createElement(StyledBackIcon, {
-    size: 24,
-    onClick: onBack
-  }), React__default.createElement(Typography, {
-    variant: "h4"
-  }, title), TopButton), props.textField && React__default.createElement("div", null, React__default.createElement(TextField, {
+  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
@@ -2447,75 +2723,455 @@ function SecondaryPage(props) {
     },
     value: searchedFor,
     autoFocus: true
-  })), React__default.createElement(ContentContainer, null, props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
+  }), React__default.createElement(Divider, {
+    size: 16
+  })), props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
+}
+
+var containsText = function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+};
+var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLength) {
+  if (maxChars === void 0) {
+    maxChars = 8;
+  }
+  if (ellipsisLength === void 0) {
+    ellipsisLength = 3;
+  }
+  if (!address) return null;
+  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  var start = Math.ceil((address.length - maxChars) / 2);
+  var end = address.length - maxChars;
+  return "" + address.substr(start, maxChars) + '.'.repeat(ellipsisLength) + address.substr(end);
+};
+
+var SpacerContainer = /*#__PURE__*/styled('div', {
+  variants: {
+    size: {
+      4: {},
+      8: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {}
+    },
+    direction: {
+      vertical: {},
+      horizontal: {}
+    }
+  },
+  compoundVariants: [{
+    size: 4,
+    direction: 'horizontal',
+    css: {
+      width: '$4'
+    }
+  }, {
+    size: 4,
+    direction: 'vertical',
+    css: {
+      height: '$4'
+    }
+  }, {
+    size: 8,
+    direction: 'horizontal',
+    css: {
+      width: '$8'
+    }
+  }, {
+    size: 8,
+    direction: 'vertical',
+    css: {
+      height: '$8'
+    }
+  }, {
+    size: 12,
+    direction: 'horizontal',
+    css: {
+      width: '$12'
+    }
+  }, {
+    size: 12,
+    direction: 'vertical',
+    css: {
+      height: '$12'
+    }
+  }, {
+    size: 16,
+    direction: 'horizontal',
+    css: {
+      width: '$16'
+    }
+  }, {
+    size: 16,
+    direction: 'vertical',
+    css: {
+      height: '$16'
+    }
+  }, {
+    size: 18,
+    direction: 'horizontal',
+    css: {
+      width: '$18'
+    }
+  }, {
+    size: 18,
+    direction: 'vertical',
+    css: {
+      height: '$18'
+    }
+  }, {
+    size: 20,
+    direction: 'horizontal',
+    css: {
+      width: '$20'
+    }
+  }, {
+    size: 20,
+    direction: 'vertical',
+    css: {
+      height: '$20'
+    }
+  }, {
+    size: 24,
+    direction: 'horizontal',
+    css: {
+      width: '$24'
+    }
+  }, {
+    size: 24,
+    direction: 'vertical',
+    css: {
+      height: '$24'
+    }
+  }]
+});
+function Spacer(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  return React__default.createElement(SpacerContainer, {
+    size: size,
+    direction: direction
+  });
 }
 
 var MainContainer = /*#__PURE__*/styled('div', {
-  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: '$foreground'
       },
       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, 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: "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
+  }))), React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flexDirection: 'column',
+      width: '100%'
+    }
+  }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
+    className: "title",
+    variant: "h6",
+    color: type
+  }, title), !!children && React__default.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  })), children)), props.footer ? React__default.createElement("div", {
+    className: "footer"
+  }, props.footer) : null);
 }
 
-var containsText = function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-};
+function LoadingFailedAlert() {
+  return React__default.createElement(Alert, {
+    type: "error",
+    title: " Error connecting server, please reload the app and try again."
+  });
+}
 
-var ListContainer$1 = /*#__PURE__*/styled('div', {
-  height: '450px',
+function NotFoundAlert(props) {
+  var catergory = props.catergory,
+    searchedFor = props.searchedFor;
+  return React__default.createElement(Alert, {
+    type: "secondary",
+    title: catergory + " " + (searchedFor ? "'" + searchedFor + "'" : '') + " not found."
+  });
+}
+
+function VirtualizedList(props) {
+  var itemCount = props.itemCount,
+    hasNextPage = props.hasNextPage,
+    loadNextPage = props.loadNextPage,
+    Item = props.Item,
+    innerElementType = props.innerElementType,
+    size = props.size;
+  var isItemLoaded = function isItemLoaded(index) {
+    return !hasNextPage || index < itemCount;
+  };
+  return React__default.createElement(AutoSizer, null, function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    return React__default.createElement(InfiniteLoader, {
+      isItemLoaded: isItemLoaded,
+      itemCount: hasNextPage ? itemCount + 1 : itemCount,
+      loadMoreItems: loadNextPage,
+      threshold: 1
+    }, function (_ref2) {
+      var onItemsRendered = _ref2.onItemsRendered,
+        ref = _ref2.ref;
+      return React__default.createElement(VariableSizeList, {
+        innerElementType: innerElementType,
+        ref: ref,
+        itemSize: function itemSize() {
+          return size;
+        },
+        itemCount: itemCount,
+        height: height || 0,
+        width: width || 0,
+        onItemsRendered: onItemsRendered
+      }, function (_ref3) {
+        var index = _ref3.index,
+          style = _ref3.style;
+        return isItemLoaded(index) ? React__default.createElement(Item, {
+          index: index,
+          style: style
+        }) : null;
+      });
+    });
+  });
+}
+
+var TokenImage = /*#__PURE__*/styled('img', {
+  width: '$32',
+  maxHeight: '$32',
+  marginRight: '$16'
+});
+var TokenNameContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var TokenAmountContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end'
+});
+function TokenItem(props) {
+  var _token$balance;
+  var token = props.token,
+    style = props.style,
+    onClick = props.onClick,
+    selected = props.selected;
+  return React__default.createElement("div", {
+    style: _extends({
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%'
+    }, style, {
+      height: '48px',
+      top: parseFloat(style == null ? void 0 : style.top) + 0 + "px",
+      padding: '0 4px'
+    })
+  }, React__default.createElement(Button, {
+    variant: "outlined",
+    size: "large",
+    align: "start",
+    onClick: onClick.bind(null, token),
+    type: selected ? 'primary' : undefined,
+    prefix: React__default.createElement(TokenImage, {
+      src: token.image
+    }),
+    suffix: ((_token$balance = token.balance) == null ? void 0 : _token$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
+      variant: "body2"
+    }, token.balance.amount), React__default.createElement(Typography, {
+      variant: "caption"
+    }, token.balance.usdValue + "$"))
+  }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, token.symbol), React__default.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, token.name))));
+}
+
+var _excluded$G = ["style"];
+var PAGE_SIZE = 20;
+function TokenList(props) {
+  var list = props.list,
+    searchedText = props.searchedText,
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelected = function changeSelected(token) {
+    setSelected(token);
+    onChange(token);
+  };
+  var isSelected = function isSelected(token) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.map(function (item) {
+        return item.symbol + item.address;
+      }).indexOf(token.symbol + token.address) > -1;
+    }
+    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
+  };
+  var _useState2 = useState(true),
+    hasNextPage = _useState2[0],
+    setHasNextPage = _useState2[1];
+  var _useState3 = useState(list),
+    tokens = _useState3[0],
+    setTokens = _useState3[1];
+  var loadNextPage = function loadNextPage() {
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
+  };
+  useEffect(function () {
+    setTokens(list.slice(0, PAGE_SIZE));
+  }, [searchedText, list]);
+  useEffect(function () {
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+  var innerElementType = forwardRef(function (_ref, ref) {
+    var style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    return React__default.createElement("div", Object.assign({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: ref,
+      style: _extends({}, style, {
+        height: parseFloat(style == null ? void 0 : style.height) + 8 * 2 + "px"
+      })
+    }, rest));
+  });
+  return React__default.createElement(VirtualizedList, {
+    Item: function Item(_ref2) {
+      var index = _ref2.index,
+        style = _ref2.style;
+      return React__default.createElement(TokenItem, {
+        token: tokens[index],
+        style: style,
+        onClick: changeSelected,
+        selected: isSelected(tokens[index])
+      });
+    },
+    hasNextPage: hasNextPage,
+    itemCount: tokens.length,
+    loadNextPage: loadNextPage,
+    innerElementType: innerElementType,
+    size: 56
+  });
+}
+
+var Container$1 = /*#__PURE__*/styled('div', {
+  flex: '1'
+});
+var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center'
+  width: '100%',
+  position: 'absolute',
+  top: '50%'
+});
+var filterTokens = function filterTokens(list, searchedFor) {
+  return list.filter(function (token) {
+    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
+  });
+};
+function TokenSelector(props) {
+  var list = props.list,
+    type = props.type,
+    selected = props.selected,
+    onChange = props.onChange,
+    hasHeader = props.hasHeader,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Token",
+    hasHeader: hasHeader,
+    onBack: onBack
+  }, function (searchedFor) {
+    var filteredTokens = filterTokens(list, searchedFor);
+    return React__default.createElement(Container$1, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredTokens.length ? React__default.createElement(TokenList, {
+      searchedText: searchedFor,
+      list: filteredTokens,
+      selected: selected,
+      selectedList: selectedList,
+      multiSelect: multiSelect,
+      onChange: onChange
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Token",
+      searchedFor: searchedFor
+    })));
+  });
+}
+
+var ListContainer$1 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
@@ -2544,32 +3200,27 @@ function BlockchainSelector(props) {
     return React__default.createElement(ListContainer$1, {
       style: listContainerStyle,
       key: "1"
-    }, loadingStatus === 'loading' && React__default.createElement("div", null, React__default.createElement(Spinner, {
+    }, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
       size: 24
-    })), loadingStatus === 'failed' && React__default.createElement(Alert, {
-      type: "error"
-    }, React__default.createElement(Typography, {
-      variant: "body2"
-    }, "Error connecting server, please reload the app and try again")), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length > 0 ? React__default.createElement(BlockchainsList, {
+    })), 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(Alert, {
-      type: "secondary"
-    }, React__default.createElement(Typography, {
-      variant: "body2"
-    }, searchedFor + " not found"))));
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Blockchain",
+      searchedFor: searchedFor
+    })));
   });
 }
 
-var _excluded$D = ["label", "id"];
+var _excluded$H = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
-var CheckboxRoot = /*#__PURE__*/styled(Root, {
+var CheckboxRoot = /*#__PURE__*/styled(Root$1, {
   borderRadius: '5px',
   width: 20,
   padding: 0,
@@ -2589,7 +3240,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$H);
   return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
     id: id
   }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
@@ -2609,13 +3260,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'
@@ -2634,9 +3289,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', {
@@ -2670,7 +3323,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,
@@ -2694,7 +3347,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));
 }
@@ -2721,7 +3374,7 @@ var State = function State(_ref) {
   }, React__default.createElement(DownloadIcon, {
     size: 24,
     color: "success"
-  })), walletState === WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === WalletState.CONNECTED && React__default.createElement(FilledCircle, null)));
+  })), walletState === WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === WalletState.CONNECTED && React__default.createElement(DisconnectIcon, null)));
 };
 
 var WalletImage = /*#__PURE__*/styled('img', {
@@ -2729,6 +3382,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,
@@ -2736,9 +3406,9 @@ function Wallet(props) {
     state = props.state,
     _onClick = props.onClick,
     installLink = props.installLink;
-  return React__default.createElement(Button, {
+  return React__default.createElement(ExtendedButton, {
     type: state === WalletState.CONNECTED ? 'primary' : undefined,
-    disabled: !state,
+    disabled: state == WalletState.CONNECTING,
     onClick: function onClick() {
       if (state === WalletState.NOT_INSTALLED) {
         window.open(detectInstallLink(installLink), '_blank');
@@ -2754,10 +3424,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 === WalletState.CONNECTED ? React__default.createElement(Typography, {
+    variant: "caption",
+    noWrap: false,
+    color: "primary"
+  }, "Connected") : null));
 }
 
 var ModalContent = /*#__PURE__*/styled('div', {
@@ -2789,107 +3463,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(Root$1, {
-  boxSizing: 'border-box',
-  boxShadow: 'none',
-  borderStyle: 'solid',
-  width: '42px',
-  height: '22px',
-  backgroundColor: '$neutrals300',
-  borderColor: '$neutrals400',
-  borderRadius: '99999px',
-  position: 'relative',
-  padding: '0',
-  cursor: 'pointer',
-  '&[data-state="checked"]': {
-    backgroundColor: '$primary100'
+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)'
 });
@@ -2900,13 +3488,12 @@ var StyledSwitchThumb = /*#__PURE__*/styled(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) {
@@ -2928,12 +3515,21 @@ var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
     })
   };
 };
-var LiquiditySourceType = /*#__PURE__*/styled(Typography, {
+var MainContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    loaded: {
+      "true": {
+        overflowY: 'auto'
+      }
+    }
+  }
+});
+var LiquiditySourceType = /*#__PURE__*/styled('div', {
   position: 'sticky',
-  display: 'block',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
@@ -2944,10 +3540,16 @@ var LiquidityImage = /*#__PURE__*/styled('img', {
   maxHeight: '$20',
   marginRight: '$16'
 });
+var LoaderContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center'
+});
 function LiquiditySourceList(props) {
   var list = props.list,
     onChange = props.onChange,
-    listContainerStyle = props.listContainerStyle;
+    listContainerStyle = props.listContainerStyle,
+    loadingStatus = props.loadingStatus,
+    searchedFor = props.searchedFor;
   var _useState = useState(list.filter(function (item) {
       return item.selected;
     })),
@@ -2973,35 +3575,58 @@ function LiquiditySourceList(props) {
       return item.selected;
     }));
   }, [list]);
-  return React__default.createElement("div", {
-    style: _extends({
-      height: '450px'
-    }, listContainerStyle)
-  }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, {
+  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(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) {
+  }), 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("div", null, React__default.createElement(LiquiditySourceType, {
+  }) : 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(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) {
+  }), 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,
@@ -3020,7 +3645,6 @@ var LiquiditySourceItem = function LiquiditySourceItem(_ref) {
     style: {
       marginBottom: '12px'
     },
-    type: selected ? 'primary' : undefined,
     onClick: onChange.bind(null, liquiditySource)
   }, React__default.createElement(Typography, {
     variant: "body1"
@@ -3032,43 +3656,41 @@ var filterLiquiditySources = function filterLiquiditySources(liquiditySources, s
     return containsText(liquiditySource.title, searchedFor || '');
   });
 };
-var ActionButton = /*#__PURE__*/styled(Button, {
-  position: 'absolute',
-  right: 0
-});
 function LiquiditySourcesSelector(props) {
   var list = props.list,
     onChange = props.onChange,
     onBack = props.onBack,
     hasHeader = props.hasHeader,
     listContainerStyle = props.listContainerStyle,
-    toggleAll = props.toggleAll;
+    toggleAll = props.toggleAll,
+    loadingStatus = props.loadingStatus;
   return React__default.createElement(SecondaryPage, {
     textField: true,
     textFieldPlaceholder: "Search By Name",
     title: "Liquidity Sources",
-    TopButton: React__default.createElement(ActionButton, {
+    TopButton: React__default.createElement(Button, {
       variant: "ghost",
       type: "primary",
       onClick: toggleAll
     }, list.find(function (item) {
       return item.selected;
-    }) ? 'Clear all' : 'Select all'),
+    }) ? 'Deselect all' : 'Select all'),
     hasHeader: hasHeader,
     onBack: onBack
   }, function (searchedFor) {
     return React__default.createElement(LiquiditySourceList, {
       listContainerStyle: listContainerStyle,
       list: filterLiquiditySources(list, searchedFor),
-      onChange: onChange
+      onChange: onChange,
+      loadingStatus: loadingStatus,
+      searchedFor: searchedFor
     });
   });
 }
 
 var Row$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'center'
+  flexWrap: 'wrap'
 });
 var Circle = /*#__PURE__*/styled('div', {
   width: 12,
@@ -3163,7 +3785,9 @@ function SelectableWalletList(_ref) {
       height: 24
     }), React__default.createElement(Typography, {
       variant: "body2"
-    }, w.name), React__default.createElement(Circle, {
+    }, w.name), React__default.createElement(Typography, {
+      variant: "caption"
+    }, getConciseAddress(w.address)), React__default.createElement(Circle, {
       checked: checked
     }, React__default.createElement(SolidCircle, {
       checked: checked
@@ -3171,7 +3795,7 @@ function SelectableWalletList(_ref) {
   }));
 }
 
-var StyledRoot = /*#__PURE__*/styled(Root$2, {
+var StyledRoot = /*#__PURE__*/styled(Root$3, {
   variants: {
     direction: {
       horizontal: {
@@ -3193,14 +3817,14 @@ var ItemContainer = /*#__PURE__*/styled('div', {
 });
 var StyledItem = /*#__PURE__*/styled(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', {
@@ -3219,7 +3843,7 @@ var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
     width: '10px',
     height: '10px',
     borderRadius: '50%',
-    backgroundColor: '$primary'
+    backgroundColor: '$success'
   }
 });
 var Label$2 = /*#__PURE__*/styled('label', {
@@ -3255,7 +3879,7 @@ function Radio(props) {
 
 var BaseContainer = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals200',
+  backgroundColor: '$neutrals300',
   padding: '$16'
 });
 var Title = /*#__PURE__*/styled(Typography, {
@@ -3288,6 +3912,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,
@@ -3302,7 +3932,8 @@ function Settings(props) {
     selectedTheme = props.selectedTheme,
     onThemeChange = props.onThemeChange,
     toggleInfiniteApprove = props.toggleInfiniteApprove,
-    infiniteApprove = props.infiniteApprove;
+    infiniteApprove = props.infiniteApprove,
+    loadingStatus = props.loadingStatus;
   var _useState = useState(props.selectedSlippage),
     selectedSlippage = _useState[0],
     setSelectedSlippage = _useState[1];
@@ -3310,9 +3941,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() {
@@ -3320,7 +3954,7 @@ function Settings(props) {
         changeSlippage(slippage);
       },
       selected: !customSlippage && slippage === selectedSlippage,
-      label: slippage.toString() + " %",
+      label: slippage.toString() + "%",
       style: {
         marginRight: '8px'
       }
@@ -3336,11 +3970,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"
@@ -3368,13 +4001,21 @@ function Settings(props) {
   }, "Infinite Approval"), React__default.createElement(Switch, {
     checked: infiniteApprove,
     onChange: toggleInfiniteApprove
-  })), React__default.createElement(LiquiditySourceContainer, {
-    onClick: onLiquiditySourcesClick
+  })), React__default.createElement(LiquiditySourceContainer, null, React__default.createElement(Button, {
+    onClick: onLiquiditySourcesClick,
+    align: "start",
+    variant: "ghost",
+    loading: loadingStatus === 'loading',
+    suffix: React__default.createElement(LiquiditySourceNumber, null, loadingStatus === 'success' && React__default.createElement(Typography, {
+      variant: "body2",
+      color: "neutrals800"
+    }, liquiditySources.length !== selectedLiquiditySources.length ? selectedLiquiditySources.length + " / " + liquiditySources.length : liquiditySources.length), loadingStatus === 'failed' && React__default.createElement(Typography, {
+      variant: "body2",
+      color: "$error500"
+    }, "Loading failed"), React__default.createElement(StyledAngleRight, null))
   }, React__default.createElement(Typography, {
     variant: "body1"
-  }, "Liquidity Sources"), React__default.createElement(LiquiditySourceNumber, null, React__default.createElement(Typography, {
-    variant: "body2"
-  }, "( " + selectedLiquiditySources.length + " / " + liquiditySources.length + " )"), React__default.createElement(StyledAngleRight, null))));
+  }, "Liquidity Sources"))));
   return React__default.createElement(SecondaryPage, {
     title: "Settings",
     textField: false,
@@ -3382,433 +4023,169 @@ function Settings(props) {
   }, PageContent);
 }
 
-var MainContainer$1 = /*#__PURE__*/styled('div', {
+var MainContainer$2 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
   borderRadius: '$10',
-  maxWidth: '512px',
   boxShadow: '$s',
-  minWidth: '375px',
   width: '100%',
-  backgroundColor: '$background',
-  height: 'fit-content',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'end',
-  padding: '$16 $24',
+  minWidth: '375px',
+  maxWidth: '512px',
+  maxHeight: '595px',
+  padding: '$16',
   boxSizing: 'border-box',
-  position: 'relative'
-});
-var ContentContainer$3 = /*#__PURE__*/styled('div', {
-  width: '100%'
+  backgroundColor: '$background',
+  variants: {
+    fixedHeight: {
+      "true": {
+        height: '595px'
+      },
+      "false": {
+        height: 'auto'
+      }
+    }
+  }
 });
 function SwapContainer(props) {
   var children = props.children,
-    style = props.style;
-  return React__default.createElement(MainContainer$1, {
+    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"
-  }, React__default.createElement(ContentContainer$3, null, children));
+    id: "swap-box",
+    fixedHeight: fixedHeight
+  }, children);
 }
 
-var Container$4 = /*#__PURE__*/styled('div', {
-  position: 'relative'
-});
-var ButtonContainer$1 = /*#__PURE__*/styled('div', {
-  paddingTop: '$8'
-});
-var SwapContainer$1 = /*#__PURE__*/styled('div', {
+var TokenContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
-  justifyContent: 'space-between',
-  '@md': {
-    padding: '$12'
-  },
-  '&:hover': {
-    borderColor: '$primary'
-  },
-  variants: {
-    status: {
-      failed: {
-        borderColor: '$error'
-      },
-      running: {
-        borderColor: '$neutrals400'
-      },
-      success: {
-        borderColor: '$success'
-      }
-    }
+  alignItems: 'center',
+  '& .amount': {
+    fontWeight: 'bold'
   }
 });
-var Arrow = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-var Line$1 = /*#__PURE__*/styled('div', {
-  height: '0',
-  width: '$20',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-  '@md': {
-    width: '$36'
+var TokenImage$1 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  width: '$24',
+  height: '$24',
+  img: {
+    width: '100%',
+    display: 'block'
   },
-  '@lg': {
-    width: '$48'
-  }
-});
-var Dot$1 = /*#__PURE__*/styled('div', {
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$foreground',
-  borderRadius: '50%',
-  '@lg': {
-    width: '$8',
-    height: '$8'
-  }
-});
-var ArrowRight$1 = /*#__PURE__*/styled('div', {
-  width: '0px',
-  height: '0px',
-  borderTop: '5px solid transparent',
-  borderBottom: '5px solid transparent',
-  borderLeft: '5px solid $foreground'
-});
-var StatusContainer = /*#__PURE__*/styled('div', {
-  position: 'absolute',
-  right: '-8px',
-  top: '30%',
-  background: '$background',
-  borderRadius: '50%',
-  display: 'flex',
-  justifyContent: 'center',
-  '@md': {
-    top: '40%',
-    right: '-8px'
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400'
   }
 });
-function SwapDetail(_ref) {
-  var swap = _ref.swap,
-    status = _ref.status,
-    onClick = _ref.onClick;
-  var firstStep = swap.steps[0];
-  var lastStep = swap.steps[swap.steps.length - 1];
-  return React__default.createElement(Container$4, {
-    onClick: onClick.bind(null, swap.requestId)
-  }, React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
-    variant: "outlined",
-    align: "grow",
-    size: "large",
-    type: status === 'failed' ? 'error' : status === 'success' ? 'success' : undefined
-  }, React__default.createElement(SwapContainer$1, null, React__default.createElement(StepDetail, {
-    logo: firstStep.fromLogo,
-    symbol: firstStep.fromSymbol,
-    chainLogo: firstStep.fromBlockchainLogo,
-    blockchain: firstStep.fromBlockchain,
-    amount: swap.inputAmount
-  }), React__default.createElement(Arrow, null, React__default.createElement(Dot$1, null), React__default.createElement(Line$1, null), React__default.createElement(ArrowRight$1, null)), React__default.createElement(StepDetail, {
-    logo: lastStep.toLogo,
-    symbol: lastStep.toSymbol,
-    chainLogo: lastStep.toBlockchainLogo,
-    blockchain: lastStep.toBlockchain,
-    amount: lastStep.outputAmount
-  })))), React__default.createElement(StatusContainer, null, status === 'running' ? React__default.createElement(TryAgainIcon, {
-    size: 16
-  }) : status === 'failed' ? React__default.createElement(InfoCircleIcon, {
-    size: 18,
-    color: "error"
-  }) : React__default.createElement(CheckCircleIcon, {
-    size: 18,
-    color: "success"
-  })));
-}
-
-function VirtualizedList(props) {
-  var itemCount = props.itemCount,
-    hasNextPage = props.hasNextPage,
-    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;
-      });
-    });
-  });
+function Token(props) {
+  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage$1, null, React__default.createElement("img", {
+    src: props.data.token.logo,
+    alt: ""
+  }), React__default.createElement("div", {
+    className: "overlay"
+  }, React__default.createElement("img", {
+    src: props.data.blockchain.logo,
+    alt: props.data.blockchain.name
+  }))), React__default.createElement(Spacer, {
+    size: 8
+  }), React__default.createElement("span", {
+    className: "amount"
+  }, props.data.amount), React__default.createElement(Spacer, {
+    size: 4
+  }), props.data.token.symbol);
 }
 
-var TokenImage = /*#__PURE__*/styled('img', {
-  width: '$32',
-  maxHeight: '$32',
-  marginRight: '$16'
-});
-var TokenNameContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column'
-});
-var TokenAmountContainer = /*#__PURE__*/styled('div', {
+var Container$4 = /*#__PURE__*/styled('div', {
+  position: 'relative',
   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"
-    })
-  }, React__default.createElement(Button, {
-    variant: "outlined",
-    size: "large",
-    align: "start",
-    onClick: onClick.bind(null, token),
-    type: selected ? 'primary' : undefined,
-    prefix: React__default.createElement(TokenImage, {
-      src: token.image
-    }),
-    suffix: ((_token$balance = token.balance) == null ? void 0 : _token$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
-      variant: "body2"
-    }, token.balance.amount), React__default.createElement(Typography, {
-      variant: "caption"
-    }, token.balance.usdValue + "$"))
-  }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
-    variant: "body1"
-  }, token.symbol), React__default.createElement(Typography, {
-    variant: "body2"
-  }, token.name))));
-}
-
-var _excluded$E = ["style"];
-var PAGE_SIZE = 20;
-function TokenList(props) {
-  var list = props.list,
-    searchedText = props.searchedText,
-    onChange = props.onChange,
-    multiSelect = props.multiSelect,
-    selectedList = props.selectedList;
-  var _useState = useState(props.selected),
-    selected = _useState[0],
-    setSelected = _useState[1];
-  var changeSelected = function changeSelected(token) {
-    setSelected(token);
-    onChange(token);
-  };
-  var isSelected = function isSelected(token) {
-    if (multiSelect && selectedList) {
-      return selectedList === 'all' || selectedList.map(function (item) {
-        return item.symbol + item.address;
-      }).indexOf(token.symbol + token.address) > -1;
-    }
-    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
-  };
-  var _useState2 = useState(true),
-    hasNextPage = _useState2[0],
-    setHasNextPage = _useState2[1];
-  var _useState3 = useState(list),
-    tokens = _useState3[0],
-    setTokens = _useState3[1];
-  var loadNextPage = function loadNextPage() {
-    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
-  };
-  useEffect(function () {
-    setTokens(list.slice(0, PAGE_SIZE));
-  }, [searchedText]);
-  useEffect(function () {
-    setHasNextPage(list.length > tokens.length);
-  }, [tokens.length]);
-  var innerElementType = forwardRef(function (_ref, ref) {
-    var style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
-    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("div", {
-    style: {
-      height: '450px'
-    }
-  }, 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 filterTokens = function filterTokens(list, searchedFor) {
-  return list.filter(function (token) {
-    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
-  });
-};
-function TokenSelector(props) {
-  var list = props.list,
-    type = props.type,
-    selected = props.selected,
-    onChange = props.onChange,
-    hasHeader = props.hasHeader,
-    multiSelect = props.multiSelect,
-    selectedList = props.selectedList,
-    onBack = props.onBack;
-  return React__default.createElement(SecondaryPage, {
-    textField: true,
-    textFieldPlaceholder: "Search Blockchain By Name",
-    title: "Select " + type + " Token",
-    hasHeader: hasHeader,
-    onBack: onBack
-  }, function (searchedFor) {
-    return React__default.createElement(TokenList, {
-      searchedText: searchedFor,
-      list: filterTokens(list, searchedFor),
-      selected: selected,
-      selectedList: selectedList,
-      multiSelect: multiSelect,
-      onChange: onChange
-    });
-  });
-}
-
-var TooltipTrigger = /*#__PURE__*/styled(Trigger, {
-  border: 0,
-  padding: 0,
-  backgroundColor: 'transparent'
-});
-var TooltipContent = /*#__PURE__*/styled(Content$1, {
-  borderRadius: '$5',
-  padding: '$4 $8',
-  fontSize: '$14',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: '$primary',
-        color: '$white'
-      },
-      error: {
-        backgroundColor: '$error',
-        color: '$white'
-      },
-      warning: {
-        backgroundColor: '$warning',
-        color: '$white'
-      },
-      success: {
-        backgroundColor: '$success',
-        color: '$white'
-      },
-      gray: {
-        backgroundColor: '$neutrals300',
-        color: '$black'
-      },
-      black: {
-        backgroundColor: '$black',
-        color: '$white'
-      },
-      white: {
-        backgroundColor: '$white',
-        color: '$black'
-      }
-    }
-  }
-});
-var TooltipArrow = /*#__PURE__*/styled(Arrow$1, {
-  variants: {
-    color: {
-      primary: {
-        fill: '$primary'
-      },
-      error: {
-        fill: '$error'
-      },
-      warning: {
-        fill: '$warning'
-      },
-      success: {
-        fill: '$success'
-      },
-      gray: {
-        fill: '$neutrals300'
-      },
-      black: {
-        fill: '$black'
-      },
-      white: {
-        fill: '$white'
-      }
-    }
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12'
+  },
+  '&.running': {
+    color: '$foreground'
+  },
+  '&.failed,&.success': {
+    color: '$neutrals600'
+  },
+  '&.failed .status': {
+    color: '$error'
+  },
+  '&.success .status': {
+    color: '$success'
   }
 });
-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$3, 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
-  })))));
+function SwapDetail(_ref) {
+  var swap = _ref.swap,
+    status = _ref.status,
+    onClick = _ref.onClick;
+  var firstStep = swap.steps[0];
+  var lastStep = swap.steps[swap.steps.length - 1];
+  return React__default.createElement(Button, {
+    variant: "ghost",
+    size: "free",
+    fullWidth: true,
+    onClick: onClick.bind(null, swap.requestId)
+  }, React__default.createElement(Container$4, {
+    className: "" + status
+  }, React__default.createElement("div", {
+    className: "info"
+  }, React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: firstStep.fromLogo,
+        symbol: firstStep.fromSymbol
+      },
+      blockchain: {
+        // @ts-ignore
+        logo: firstStep.fromBlockchainLogo,
+        name: firstStep.fromBlockchain
+      },
+      amount: swap.inputAmount
+    }
+  }), React__default.createElement(Spacer, {
+    size: 12
+  }), React__default.createElement(ArrowRightIcon, {
+    size: 12
+  }), React__default.createElement(Spacer, {
+    size: 12
+  }), React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: lastStep.toLogo,
+        symbol: lastStep.toSymbol
+      },
+      blockchain: {
+        // @ts-ignore
+        logo: lastStep.toBlockchainLogo,
+        name: lastStep.toBlockchain
+      },
+      amount: lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || ''
+    }
+  })), React__default.createElement("div", {
+    className: "status"
+  }, status === 'running' ? React__default.createElement(Spinner, {
+    size: 24,
+    color: "primary"
+  }) : status)));
 }
 
 var Container$5 = /*#__PURE__*/styled('div', {
@@ -3982,93 +4359,74 @@ function Drawer(props) {
   })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
 }
 
-var MainContainer$2 = /*#__PURE__*/styled('div', {
-  overflow: 'hidden'
-});
-var Line$2 = /*#__PURE__*/styled('div', {
-  width: '0',
-  marginLeft: '$12',
-  height: '36px',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit'
-});
-var SwapperContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  marginLeft: '6px'
-});
-var Fee = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var SwapperLogo$1 = /*#__PURE__*/styled('img', {
-  width: '$16',
-  height: '$16'
+var MainContainer$3 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
 });
-var RelativeContainer$1 = /*#__PURE__*/styled('div', {
-  position: 'relative'
+var Section = /*#__PURE__*/styled('div', {
+  paddingBottom: '$32',
+  marginBottom: '$32',
+  borderBottom: '1px solid $neutrals400'
 });
 var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
-var Dot$2 = /*#__PURE__*/styled('div', {
-  width: '$8',
-  height: '$8',
-  backgroundColor: '$foreground',
-  borderRadius: '4px',
-  marginLeft: '$8'
-});
-var ArrowDown = /*#__PURE__*/styled('div', {
-  width: '0px',
-  height: '0px',
-  borderLeft: '5px solid transparent',
-  borderRight: '5px solid transparent',
-  borderTop: '5px solid $foreground',
-  marginLeft: '$8'
-});
-var UpdateIcon = /*#__PURE__*/styled(RetryIcon, {
-  position: 'absolute',
-  right: '0'
+var AlertContainer = /*#__PURE__*/styled('div', {
+  padding: '$16 0'
 });
-var StyledUpdateIcon = /*#__PURE__*/styled(UpdateIcon, {
-  cursor: 'pointer'
+var ConfirmButton = /*#__PURE__*/styled(Button, {
+  marginTop: '$16'
 });
-var BestRouteContainer$1 = /*#__PURE__*/styled('div', {
-  overflow: 'auto'
+var Container$6 = /*#__PURE__*/styled('div', {
+  paddingBottom: '$24',
+  '.title': {
+    paddingBottom: '$8',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.num': {
+    backgroundColor: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
 });
 var Alerts = /*#__PURE__*/styled('div', {
   paddingBottom: '$16'
 });
 function ConfirmSwap(props) {
-  var _bestRoute$result;
-  var bestRoute = props.bestRoute,
-    onRefresh = props.onRefresh,
-    onBack = props.onBack,
-    onConfirm = props.onConfirm,
+  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,
-    confirmButtonTitle = props.confirmButtonTitle,
-    confirmButtonDisabled = props.confirmButtonDisabled;
+    extraMessages = props.extraMessages;
   return React__default.createElement(SecondaryPage, {
     textField: false,
-    title: "Swap",
+    title: "Confirm Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
-      type: "primary",
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
       fullWidth: true,
       loading: loading,
+      type: "primary",
       variant: "contained",
       onClick: onConfirm,
-      disabled: confirmButtonDisabled
-    }, confirmButtonTitle)),
-    TopButton: React__default.createElement(StyledUpdateIcon, {
-      size: 24,
-      onClick: onRefresh
-    })
-  }, 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) {
+      disabled: confirmDisabled
+    }, confirmButtonTitle))
+  }, React__default.createElement(MainContainer$3, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
     }), React__default.createElement(Alert, {
@@ -4082,91 +4440,26 @@ function ConfirmSwap(props) {
       type: "warning",
       key: index
     }, warning));
-  }))), React__default.createElement(BestRouteContainer$1, null, bestRoute == null ? void 0 : (_bestRoute$result = bestRoute.result) == null ? void 0 : _bestRoute$result.swaps.map(function (swap, index) {
-    var _bestRoute$result2;
-    return React__default.createElement(Fragment, {
-      key: index
-    }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
-      logo: swap.from.logo,
-      symbol: swap.from.symbol,
-      chainLogo: swap.from.blockchainLogo,
-      blockchain: swap.from.blockchain,
-      amount: swap.fromAmount
-    }), React__default.createElement(Dot$2, null)), React__default.createElement(Line$2, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
-      src: swap.swapperLogo,
-      alt: swap.swapperId
-    }), React__default.createElement("div", null, React__default.createElement(Typography, {
-      ml: 4,
-      variant: "caption"
-    }, swap.swapperType, " from ", swap.from.symbol, " to", ' ', swap.to.symbol, " via ", swap.swapperId, ' '), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
-      ml: 4,
-      variant: "caption"
-    }, "$", swap.feeInUsd, " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
-      logo: swap.to.logo,
-      symbol: swap.to.symbol,
-      chainLogo: swap.to.blockchainLogo,
-      blockchain: swap.to.blockchain,
-      amount: swap.toAmount
-    }));
-  }))));
-}
-
-var Footer$2 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var AlertContainer = /*#__PURE__*/styled('div', {
-  padding: '$16 0'
-});
-var ConfirmButton = /*#__PURE__*/styled(Button, {
-  marginTop: '$16'
-});
-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];
-  return React__default.createElement(SecondaryPage, {
-    textField: false,
-    title: "Confirm Swap",
-    onBack: onBack,
-    Footer: React__default.createElement(Footer$2, null, React__default.createElement(ConfirmButton, {
-      fullWidth: true,
-      loading: loading,
-      type: "primary",
-      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) {
+  }))), 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",
@@ -4180,31 +4473,13 @@ function ConfirmWallets(props) {
   })));
 }
 
-function groupingOfSwaps(list) {
-  return list.reduce(function (acc, swap) {
-    var categoryIndex = acc.findIndex(function (item) {
-      return swap.status === 'running' && item.title == 'Active Swaps' || swap.status !== 'running' && item.title == 'Recent Swaps';
-    });
-    if (categoryIndex > -1) {
-      acc[categoryIndex].swaps.push(swap);
-    } else {
-      acc.push({
-        title: swap.status === 'running' ? 'Active Swaps' : 'Recent Swaps',
-        swaps: [swap]
-      });
-    }
-    return acc;
-  }, []);
-}
-
-var BodyError = /*#__PURE__*/styled('div', {
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
+var Group = /*#__PURE__*/styled('div', {
+  '.group-title': {
+    textTransform: 'uppercase'
+  }
 });
-var ErrorMsg$1 = /*#__PURE__*/styled(Typography, {
-  color: '$error'
+var Container$7 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
 });
 var filteredHistory = function filteredHistory(list, searchedFor) {
   return list.filter(function (swap) {
@@ -4213,30 +4488,34 @@ var filteredHistory = function filteredHistory(list, searchedFor) {
     return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
   });
 };
-var Group = /*#__PURE__*/styled('div', {
-  marginBottom: '$24',
-  paddingRight: '$8',
-  maxHeight: '600px'
-});
-var GroupTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals500'
-});
 var SwapsGroup = function SwapsGroup(props) {
   var list = props.list,
-    onSwapClick = props.onSwapClick;
-  var swapsInGroup = groupingOfSwaps(list);
-  return React__default.createElement(React__default.Fragment, null, swapsInGroup.map(function (group, index) {
-    return React__default.createElement(Group, {
+    onSwapClick = props.onSwapClick,
+    groupBy = props.groupBy;
+  var groups = groupBy ? groupBy(list) : [{
+    title: 'History',
+    swaps: list
+  }];
+  return React__default.createElement(React__default.Fragment, null, groups.filter(function (group) {
+    return group.swaps.length > 0;
+  }).map(function (group, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Group, {
       key: index
-    }, React__default.createElement(GroupTitle, {
-      variant: "body2"
+    }, React__default.createElement(Typography, {
+      variant: "body2",
+      color: "neutrals600",
+      className: "group-title"
     }, group.title), group.swaps.map(function (swap, index) {
-      return React__default.createElement(SwapDetail, {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(SwapDetail, {
         key: index,
         swap: swap,
         status: swap.status,
         onClick: onSwapClick
-      });
+      }), React__default.createElement(Divider, {
+        size: 12
+      }));
+    })), React__default.createElement(Divider, {
+      size: 24
     }));
   }));
 };
@@ -4244,28 +4523,126 @@ function History(_ref) {
   var _ref$list = _ref.list,
     list = _ref$list === void 0 ? [] : _ref$list,
     onBack = _ref.onBack,
-    onSwapClick = _ref.onSwapClick;
+    onSwapClick = _ref.onSwapClick,
+    groupBy = _ref.groupBy;
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
-    textFieldPlaceholder: "Search By Blockchain Or Token",
+    textFieldPlaceholder: "Search By Blockchain Or Token Or Request ID",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
-    return filterSwaps.length ? React__default.createElement(SwapsGroup, {
+    return React__default.createElement(Container$7, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
       list: filterSwaps,
-      onSwapClick: onSwapClick
-    }) : React__default.createElement(BodyError, null, React__default.createElement(ErrorMsg$1, {
-      variant: "caption"
-    }, "Not Found"));
+      onSwapClick: onSwapClick,
+      groupBy: groupBy
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Swap"
+    }));
   });
 }
 
+var getAlertType = function getAlertType(messageType) {
+  if (!messageType || messageType === 'info') return 'secondary';else return messageType;
+};
+var DetailedMessage = /*#__PURE__*/styled('div', {
+  width: '90%',
+  overflowWrap: 'break-word',
+  color: '$error500 !important'
+});
+var SuccessText = /*#__PURE__*/styled(Typography, {
+  color: '$success500 !important'
+});
+var SwapMessages = function SwapMessages(props) {
+  var shortMessage = props.shortMessage,
+    detailedMessage = props.detailedMessage,
+    currentStepBlockchain = props.currentStepBlockchain,
+    type = props.type,
+    lastConvertedTokenInFailedSwap = props.lastConvertedTokenInFailedSwap;
+  var _useState = useState(false),
+    expandedMessage = _useState[0],
+    setExpandedMessage = _useState[1];
+  var allowedNumberOfChars = detailedMessage["long"] ? 0 : 150;
+  var shouldShowMoreDetailsButton = !expandedMessage && detailedMessage.content.length > allowedNumberOfChars;
+  return React__default.createElement(Alert, Object.assign({
+    type: getAlertType(type),
+    title: shortMessage
+  }, shouldShowMoreDetailsButton && {
+    footer: React__default.createElement(Button, {
+      variant: "outlined",
+      type: "primary",
+      onClick: setExpandedMessage.bind(null, function (prevState) {
+        return !prevState;
+      })
+    }, "Show more details")
+  }, !!props.switchNetwork && {
+    footer: React__default.createElement(Button, {
+      variant: 'outlined',
+      type: "primary",
+      onClick: props.switchNetwork
+    }, "Change network to ", currentStepBlockchain)
+  }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, shouldShowMoreDetailsButton && !expandedMessage ? detailedMessage.content.substring(0, allowedNumberOfChars) + (allowedNumberOfChars > 0 ? '...' : '') : detailedMessage.content)) : null, !!lastConvertedTokenInFailedSwap && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
+    variant: "body2"
+  }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
+    variant: "body2"
+  }, "on your\xA0"), React__default.createElement(SuccessText, {
+    variant: "body2"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
+    variant: "body2"
+  }, "wallet"))));
+};
+
+var _excluded$I = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
+var SwapperContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: '6px'
+});
+var Fee = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var SwapperLogo$1 = /*#__PURE__*/styled('img', {
+  width: '$16',
+  height: '$16'
+});
+var RelativeContainer$1 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Dot$1 = /*#__PURE__*/styled('div', {
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$foreground',
+  borderRadius: '4px',
+  marginLeft: '$8'
+});
+var ArrowDown = /*#__PURE__*/styled('div', {
+  width: '0px',
+  height: '0px',
+  borderLeft: '5px solid transparent',
+  borderRight: '5px solid transparent',
+  borderTop: '5px solid $foreground',
+  marginLeft: '$8'
+});
 var StyledAnchor = /*#__PURE__*/styled('a', {
   color: '$primary',
   fontWeight: '$600',
   marginLeft: '$12'
 });
+var SwapInfoContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: '$16',
+  borderBottom: '1px solid $neutrals300'
+});
 var InternalDetailsContainer = /*#__PURE__*/styled('div', {
   display: 'flex'
 });
@@ -4284,30 +4661,51 @@ var Description = /*#__PURE__*/styled(Typography, {
 var Error = /*#__PURE__*/styled(Description, {
   color: '$error'
 });
-var Line$3 = /*#__PURE__*/styled('div', {
+var Line$1 = /*#__PURE__*/styled('div', {
   width: '0',
   minHeight: '$16',
   marginLeft: '$12',
   border: '1px dashed $foreground',
   borderRadius: 'inherit'
 });
-var RequestIdContainer = /*#__PURE__*/styled('div', {
-  cursor: 'pointer',
-  backgroundColor: '$neutrals200',
-  padding: '$4',
+var Row$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  justifyContent: 'center',
+  justifyContent: 'space-between',
   alignItems: 'center',
-  borderRadius: '$5',
-  marginBottom: '$16'
+  fontSize: '$14',
+  padding: '$8 0',
+  '.name': {
+    color: '$neutrals600'
+  },
+  '.value': {
+    display: 'flex',
+    alignItems: 'center',
+    color: '$neutrals800'
+  },
+  '.status': {
+    fontWeight: 'bold',
+    textTransform: 'uppercase'
+  },
+  '.status.failed': {
+    color: '$error'
+  },
+  '.status.success': {
+    color: '$success'
+  }
 });
-var RequestId = /*#__PURE__*/styled(Typography, {
-  color: '$warning500'
+var RequestId = /*#__PURE__*/styled('div', {
+  width: '150px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  '@md': {
+    width: 'auto'
+  }
 });
-var CancelButtonContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
+var ExtraDetails = /*#__PURE__*/styled('div', {
+  padding: '$8 0',
+  color: '$neutrals600',
+  fontSize: '$12'
 });
 var StepContainer$1 = /*#__PURE__*/styled('div', {
   variants: {
@@ -4323,43 +4721,57 @@ var StepContainer$1 = /*#__PURE__*/styled('div', {
     }
   }
 });
+var SwapFlowContainer = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
     onBack = props.onBack,
     onCopy = props.onCopy,
     isCopied = props.isCopied,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    date = props.date,
+    onRetry = props.onRetry,
+    extraMessageProps = _objectWithoutPropertiesLoose(props, _excluded$I);
   var _useState = useState(false),
     showDrawer = _useState[0],
     setShowDrawer = _useState[1];
   return React__default.createElement(SecondaryPage, {
     title: "Swap Details",
     textField: false,
-    onBack: onBack
-  }, React__default.createElement("div", {
-    style: {
-      overflow: 'hidden'
-    }
-  }, React__default.createElement("div", null, React__default.createElement(Typography, {
-    variant: "body1"
-  }, " request ID :"), React__default.createElement(RequestIdContainer, {
+    onBack: onBack,
+    Footer: React__default.createElement(React__default.Fragment, null, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Button, {
+      variant: "outlined",
+      fullWidth: true,
+      type: "error",
+      onClick: setShowDrawer.bind(null, true)
+    }, "Cancel"), !!onRetry && React__default.createElement(Button, {
+      variant: "contained",
+      fullWidth: true,
+      type: "primary",
+      onClick: onRetry
+    }, "Try again"))
+  }, React__default.createElement("div", null, React__default.createElement(SwapInfoContainer, null, React__default.createElement(Row$2, null, React__default.createElement("div", {
+    className: "name"
+  }, "Request ID:"), React__default.createElement("div", {
+    className: "value requestId",
     onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
-  }, React__default.createElement(RequestId, {
-    variant: "body1"
-  }, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
-    size: 12
-  }), isCopied ? React__default.createElement(CheckSquareIcon, {
-    color: "success",
-    size: 18
-  }) : React__default.createElement(CopyIcon, {
-    color: "warning",
-    size: 18
-  }))), React__default.createElement("div", {
-    style: {
-      overflow: 'auto',
-      position: 'relative'
-    }
-  }, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+  }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
+    size: 4
+  }), React__default.createElement(Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement(Row$2, null, React__default.createElement("div", {
+    className: "name"
+  }, "Status:"), React__default.createElement("div", {
+    className: "value status " + ((pendingSwap == null ? void 0 : pendingSwap.status) || '')
+  }, pendingSwap == null ? void 0 : pendingSwap.status, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Spinner, {
+    size: 16,
+    color: "primary"
+  }))), React__default.createElement(ExtraDetails, null, date))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
+    size: 32
+  }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
     return React__default.createElement(StepContainer$1, {
       key: index,
       hasNotStarted: step.status === 'created',
@@ -4367,23 +4779,31 @@ function SwapHistory(props) {
     }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
+      // @ts-ignore
       chainLogo: step.fromBlockchainLogo,
       blockchain: step.fromBlockchain,
       amount: pendingSwap.inputAmount
-    }), React__default.createElement(Dot$2, null)), React__default.createElement(Line$3, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
+    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1
+    // @ts-ignore
+    , {
+      // @ts-ignore
       src: step.swapperLogo,
       alt: step.swapperId
     }), React__default.createElement("div", null, React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
+    },
+    // @ts-ignore
+    step.swapperType, ' ', "from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, "$", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
+    }, "$",
+    // @ts-ignore
+    step.feeInUsd, ' ', "estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
       }
-    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$3, null), !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
+    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
       return React__default.createElement(InternalDetail, {
         key: index
       }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
@@ -4403,28 +4823,25 @@ function SwapHistory(props) {
     }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: step.toLogo,
       symbol: step.toSymbol,
+      // @ts-ignore
       chainLogo: step.toBlockchainLogo,
       blockchain: step.toBlockchain,
-      amount: step.outputAmount
+      amount: step.outputAmount || ''
     }));
-  }), (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(CancelButtonContainer, null, React__default.createElement(Button, {
-    variant: "contained",
-    type: "error",
-    onClick: setShowDrawer.bind(null, true)
-  }, "Cancel")))), React__default.createElement(Drawer, {
+  }), 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(React__default.Fragment, null, React__default.createElement(Alert, {
+    content: React__default.createElement(Alert, {
       type: "warning"
-    }, React__default.createElement(Typography, {
-      variant: "body2"
-    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
+    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction\xA0", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
       size: 12,
       direction: "vertical"
-    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")))),
+    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")),
     footer: React__default.createElement("div", {
       style: {
         display: 'flex',
@@ -4449,5 +4866,5 @@ function SwapHistory(props) {
   }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, Drawer, FilledCircle, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
 //# sourceMappingURL=ui.esm.js.map