@rango-dev/ui 0.1.10-next.92 → 0.1.11-next.2

package/dist/ui.esm.js

@@ -1,13 +1,13 @@
 import React__default, { createElement, forwardRef, Fragment, useState, useEffect } from 'react';
-import { Provider, Root, Portal, Trigger, Content as Content$1, Arrow as Arrow$1 } from '@radix-ui/react-tooltip';
+import { Provider, Root, Portal, Trigger, Content as Content$1, Arrow } from '@radix-ui/react-tooltip';
+import { VariableSizeList } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { Indicator, Root as Root$1 } from '@radix-ui/react-checkbox';
 import { createPortal } from 'react-dom';
 import { detectInstallLink } from '@rango-dev/wallets-shared';
 import { Root as Root$2, Thumb } from '@radix-ui/react-switch';
 import { Root as Root$3, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
-import { VariableSizeList } from 'react-window';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import { ChromePicker } from 'react-color';
 
 function _extends() {
@@ -864,11 +864,42 @@ ChevronRightIcon.toString = function () {
 };
 
 var _excluded$m = ["size", "color"];
-var RetryRightIcon = function RetryRightIcon(_ref) {
+var ArrowRightIcon = function ArrowRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  return createElement(SvgWithStrokeColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    color: color,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }), createElement("polyline", {
+    points: "12 5 19 12 12 19"
+  }));
+};
+ArrowRightIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$n = ["size", "color"];
+var RetryRightIcon = function RetryRightIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -888,12 +919,12 @@ RetryRightIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$n = ["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$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -913,12 +944,12 @@ RetryLeftIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$o = ["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$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -938,12 +969,12 @@ TryAgainIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$p = ["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$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -969,12 +1000,12 @@ VerticalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$q = ["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$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1000,13 +1031,13 @@ HorizontalSwapIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$r = ["color", "size"];
+var _excluded$s = ["color", "size"];
 var RetryIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   return createElement(SvgWithStrokeColor, Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1031,12 +1062,12 @@ RetryIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$s = ["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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1063,12 +1094,12 @@ WalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$t = ["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$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1103,12 +1134,12 @@ AddWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$u = ["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$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1143,12 +1174,12 @@ DeleteWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$v = ["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$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1179,12 +1210,12 @@ CheckWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$w = ["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$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1219,13 +1250,13 @@ SwapWalletIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$x = ["color", "size"];
+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$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   return createElement(SvgWithStrokeColor, Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1255,12 +1286,12 @@ DisconnectIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$y = ["size", "color"];
+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$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1290,11 +1321,11 @@ BagIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$z = ["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$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
@@ -1327,12 +1358,12 @@ CloseIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$A = ["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$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1353,12 +1384,12 @@ SignatureIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$B = ["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$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return createElement(SvgWithFillColor, Object.assign({
     width: size,
     height: size,
@@ -1384,7 +1415,7 @@ CopyIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$C = ["children", "className", "color"];
+var _excluded$D = ["children", "className", "color"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   display: 'inline-block',
@@ -1551,7 +1582,7 @@ function Typography(_ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var customCss = color ? {
     color: color.startsWith('$') ? color : "$" + color
   } : {
@@ -1630,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,
@@ -1832,7 +1864,7 @@ var TooltipContent = /*#__PURE__*/styled(Content$1, {
     }
   }
 });
-var TooltipArrow = /*#__PURE__*/styled(Arrow$1, {
+var TooltipArrow = /*#__PURE__*/styled(Arrow, {
   variants: {
     color: {
       primary: {
@@ -2068,7 +2100,7 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$D = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _excluded$E = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
@@ -2097,6 +2129,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     },
     size: {
       compact: {},
+      free: {},
       small: {
         height: '$32'
       },
@@ -2412,7 +2445,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2488,9 +2521,70 @@ function BlockchainsList(props) {
   }));
 }
 
-var _excluded$E = ["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',
@@ -2574,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$E);
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$F);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
     className: "_text"
   }, inputAttributes.id && {
@@ -2594,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,
@@ -2635,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
@@ -2651,9 +2723,28 @@ 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: {
@@ -2789,7 +2880,7 @@ var MainContainer = /*#__PURE__*/styled('div', {
         color: '$primary200'
       },
       secondary: {
-        color: '$secondary'
+        color: '$foreground'
       },
       success: {
         color: '$success300'
@@ -2813,7 +2904,14 @@ function Alert(props) {
     className: showIcon ? 'hasIcon' : ''
   }, React__default.createElement("div", {
     className: "main"
-  }, showIcon && React__default.createElement(React__default.Fragment, null, type === 'success' && React__default.createElement(CheckCircleIcon, {
+  }, 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, {
@@ -2824,240 +2922,461 @@ function Alert(props) {
     size: 24
   }), React__default.createElement(Spacer, {
     size: 8
-  })), title && React__default.createElement(Typography, {
+  }))), 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), props.footer ? React__default.createElement("div", {
+  }, 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;
-};
-
-var ListContainer$1 = /*#__PURE__*/styled('div', {
-  height: '450px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-var filterBlockchains = function filterBlockchains(list, searchedFor) {
-  return list.filter(function (blockchain) {
-    return containsText(blockchain.name, searchedFor) || containsText(blockchain.displayName, searchedFor);
-  });
-};
-function BlockchainSelector(props) {
-  var type = props.type,
-    list = props.list,
-    onChange = props.onChange,
-    selected = props.selected,
-    onBack = props.onBack,
-    loadingStatus = props.loadingStatus,
-    hasHeader = props.hasHeader,
-    listContainerStyle = props.listContainerStyle,
-    multiSelect = props.multiSelect,
-    selectedList = props.selectedList;
-  return React__default.createElement(SecondaryPage, {
-    textField: true,
-    hasHeader: hasHeader,
-    textFieldPlaceholder: "Search Blockchain By Name",
-    title: "Select " + type + " Network",
-    onBack: onBack
-  }, function (searchedFor) {
-    var filteredBlockchains = filterBlockchains(list, searchedFor);
-    return React__default.createElement(ListContainer$1, {
-      style: listContainerStyle,
-      key: "1"
-    }, loadingStatus === 'loading' && React__default.createElement("div", 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, {
-      list: filteredBlockchains,
-      selected: selected,
-      multiSelect: multiSelect,
-      selectedList: selectedList,
-      onChange: onChange
-    }) : React__default.createElement(Alert, null, searchedFor + " not found")));
+function LoadingFailedAlert() {
+  return React__default.createElement(Alert, {
+    type: "error",
+    title: " Error connecting server, please reload the app and try again."
   });
 }
 
-var _excluded$F = ["label", "id"];
-var CheckboxContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var CheckboxRoot = /*#__PURE__*/styled(Root$1, {
-  borderRadius: '5px',
-  width: 20,
-  padding: 0,
-  height: 20,
-  border: '1px solid $foreground',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: '$2',
-  backgroundColor: '$neutral-100'
-});
-var Label$1 = /*#__PURE__*/styled('label', {
-  color: '$foreground',
-  fontSize: '$m',
-  marginLeft: '$8'
-});
-function Checkbox(_ref) {
-  var label = _ref.label,
-    id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
-  return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
-    id: id
-  }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
-    size: 20
-  }))), React__default.createElement(Label$1, {
-    className: "_text",
-    htmlFor: id
-  }, label));
+function NotFoundAlert(props) {
+  var catergory = props.catergory,
+    searchedFor = props.searchedFor;
+  return React__default.createElement(Alert, {
+    type: "secondary",
+    title: catergory + " " + (searchedFor ? "'" + searchedFor + "'" : '') + " not found."
+  });
 }
 
-var ChipCointainer = /*#__PURE__*/styled('div', {
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '$5',
-  padding: '$4 $8',
-  height: '32',
-  fontSize: '$14',
-  cursor: 'pointer',
-  transition: 'all 0.35s',
-  color: '$foreground',
-  '&:hover': {
-    backgroundColor: '$success700',
-    color: '$background'
-  },
-  variants: {
-    selected: {
-      "true": {
-        backgroundColor: '$success',
-        color: '$background'
-      },
-      "false": {
-        backgroundColor: '$background'
-      }
-    }
-  }
-});
-function Chip(props) {
-  var label = props.label,
-    selected = props.selected,
-    prefix = props.prefix,
-    suffix = props.suffix,
-    onClick = props.onClick,
-    style = props.style;
-  return React__default.createElement(ChipCointainer, {
-    selected: selected,
-    onClick: onClick,
-    style: style
-  }, prefix || null, label, suffix || null);
+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 BackDrop = /*#__PURE__*/styled('div', {
-  position: 'fixed',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  top: '0',
-  left: '0',
-  width: '100vw',
-  height: '100vh',
-  backgroundColor: 'rgba(0,0,0,.1)'
-});
-var ModalContainer = /*#__PURE__*/styled('div', {
-  backgroundColor: '$background',
-  borderRadius: '$10',
-  padding: '$16 $16',
-  display: 'flex',
-  flexDirection: 'column',
-  boxShadow: '$s',
-  zIndex: 10
+var TokenImage = /*#__PURE__*/styled('img', {
+  width: '$32',
+  maxHeight: '$32',
+  marginRight: '$16'
 });
-var Row = /*#__PURE__*/styled('div', {
+var TokenNameContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
-  alignItems: 'center'
+  flexDirection: 'column'
 });
-var ModalHeader = /*#__PURE__*/styled('div', {
+var TokenAmountContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16'
+  flexDirection: 'column',
+  alignItems: 'flex-end'
 });
-var ContentContainer$1 = /*#__PURE__*/styled('div', {});
-function Modal(props) {
-  var title = props.title,
-    content = props.content,
-    open = props.open,
-    onClose = props.onClose,
-    containerStyle = props.containerStyle,
-    action = props.action,
-    contentStyle = props.contentStyle;
-  var handleBackDropClick = function handleBackDropClick(event) {
-    if (event.target === event.currentTarget) onClose();
+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.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 () {
-    if (open) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'unset';
-  }, [open]);
-  return React__default.createElement(React__default.Fragment, null, open && createPortal(React__default.createElement(BackDrop, {
-    onClick: handleBackDropClick
-  }, React__default.createElement(ModalContainer, {
-    style: containerStyle
-  }, React__default.createElement(ModalHeader, null, React__default.createElement(Typography, {
-    variant: "h4"
-  }, title), React__default.createElement(Row, null, action, React__default.createElement(CloseIcon, {
-    size: 24,
-    onClick: onClose
-  }))), React__default.createElement(ContentContainer$1, {
-    style: contentStyle
-  }, content))), document.body));
+    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 WalletState;
-(function (WalletState) {
-  WalletState["NOT_INSTALLED"] = "not installed";
-  WalletState["DISCONNECTED"] = "disconnected";
-  WalletState["CONNECTING"] = "connecting";
-  WalletState["CONNECTED"] = "connected";
-})(WalletState || (WalletState = {}));
-
-var StateIconContainer = /*#__PURE__*/styled('span', {
+var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center'
+  width: '100%',
+  paddingTop: '5%',
+  flex: 1
 });
-var State = function State(_ref) {
-  var walletState = _ref.walletState,
-    installLink = _ref.installLink;
-  return React__default.createElement(Fragment, null, walletState !== WalletState.DISCONNECTED && React__default.createElement(StateIconContainer, null, walletState === WalletState.NOT_INSTALLED && React__default.createElement("a", {
-    href: detectInstallLink(installLink),
-    target: "_blank"
-  }, React__default.createElement(DownloadIcon, {
-    size: 24,
-    color: "success"
-  })), walletState === WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === WalletState.CONNECTED && React__default.createElement(DisconnectIcon, null)));
+var filterTokens = function filterTokens(list, searchedFor) {
+  return list.filter(function (token) {
+    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
+  });
 };
-
-var WalletImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  height: '$24',
-  marginRight: '$12'
-});
-var Text = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column'
-});
-var ExtendedButton = /*#__PURE__*/styled(Button, {
-  variants: {
+function TokenSelector(props) {
+  var list = props.list,
+    type = props.type,
+    selected = props.selected,
+    hasHeader = props.hasHeader,
+    onChange = props.onChange,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    hasHeader: hasHeader,
+    title: "Select " + type + " Token",
+    onBack: onBack,
+    textFieldPlaceholder: "Search Token By Name"
+  }, function (searchedFor) {
+    var filteredTokens = filterTokens(list, searchedFor);
+    return loadingStatus === 'loading' ? React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })) : loadingStatus === 'failed' ? React__default.createElement(LoadingFailedAlert, null) : filteredTokens.length ? React__default.createElement(TokenList, {
+      searchedText: searchedFor,
+      list: filteredTokens,
+      selected: selected,
+      onChange: onChange
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Token",
+      searchedFor: searchedFor
+    });
+  });
+}
+
+var ListContainer$1 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+var filterBlockchains = function filterBlockchains(list, searchedFor) {
+  return list.filter(function (blockchain) {
+    return containsText(blockchain.name, searchedFor) || containsText(blockchain.displayName, searchedFor);
+  });
+};
+function BlockchainSelector(props) {
+  var type = props.type,
+    list = props.list,
+    onChange = props.onChange,
+    selected = props.selected,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus,
+    hasHeader = props.hasHeader,
+    listContainerStyle = props.listContainerStyle,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    hasHeader: hasHeader,
+    textFieldPlaceholder: "Search Blockchain By Name",
+    title: "Select " + type + " Network",
+    onBack: onBack
+  }, function (searchedFor) {
+    var filteredBlockchains = filterBlockchains(list, searchedFor);
+    return React__default.createElement(ListContainer$1, {
+      style: listContainerStyle,
+      key: "1"
+    }, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
+      list: filteredBlockchains,
+      selected: selected,
+      multiSelect: multiSelect,
+      selectedList: selectedList,
+      onChange: onChange
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Blockchain",
+      searchedFor: searchedFor
+    })));
+  });
+}
+
+var _excluded$H = ["label", "id"];
+var CheckboxContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var CheckboxRoot = /*#__PURE__*/styled(Root$1, {
+  borderRadius: '5px',
+  width: 20,
+  padding: 0,
+  height: 20,
+  border: '1px solid $foreground',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginRight: '$2',
+  backgroundColor: '$neutral-100'
+});
+var Label$1 = /*#__PURE__*/styled('label', {
+  color: '$foreground',
+  fontSize: '$m',
+  marginLeft: '$8'
+});
+function Checkbox(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+  return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
+    id: id
+  }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
+    size: 20
+  }))), React__default.createElement(Label$1, {
+    className: "_text",
+    htmlFor: id
+  }, label));
+}
+
+var ChipCointainer = /*#__PURE__*/styled('div', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  padding: '$4 $8',
+  height: '32',
+  fontSize: '$14',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  color: '$foreground',
+  '&:hover': {
+    backgroundColor: '$success700',
+    color: '$background'
+  },
+  variants: {
+    selected: {
+      "true": {
+        backgroundColor: '$success',
+        color: '$background'
+      },
+      "false": {
+        backgroundColor: '$background'
+      }
+    }
+  }
+});
+function Chip(props) {
+  var label = props.label,
+    selected = props.selected,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    onClick = props.onClick,
+    style = props.style;
+  return React__default.createElement(ChipCointainer, {
+    selected: selected,
+    onClick: onClick,
+    style: style
+  }, prefix || null, label, suffix || null);
+}
+
+var BackDrop = /*#__PURE__*/styled('div', {
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  top: '0',
+  left: '0',
+  width: '100vw',
+  height: '100vh',
+  backgroundColor: 'rgba(0,0,0,.1)'
+});
+var ModalContainer = /*#__PURE__*/styled('div', {
+  backgroundColor: '$background',
+  borderRadius: '$10',
+  padding: '$16 $16',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '$s',
+  zIndex: 10
+});
+var Row = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var ModalHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+function Modal(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    action = props.action;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  useEffect(function () {
+    if (open) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'unset';
+  }, [open]);
+  return React__default.createElement(React__default.Fragment, null, open && createPortal(React__default.createElement(BackDrop, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(ModalContainer, {
+    style: containerStyle
+  }, React__default.createElement(ModalHeader, null, React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), React__default.createElement(Row, null, action, React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  }))), content)), document.body));
+}
+
+var WalletState;
+(function (WalletState) {
+  WalletState["NOT_INSTALLED"] = "not installed";
+  WalletState["DISCONNECTED"] = "disconnected";
+  WalletState["CONNECTING"] = "connecting";
+  WalletState["CONNECTED"] = "connected";
+})(WalletState || (WalletState = {}));
+
+var StateIconContainer = /*#__PURE__*/styled('span', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var State = function State(_ref) {
+  var walletState = _ref.walletState,
+    installLink = _ref.installLink;
+  return React__default.createElement(Fragment, null, walletState !== WalletState.DISCONNECTED && React__default.createElement(StateIconContainer, null, walletState === WalletState.NOT_INSTALLED && React__default.createElement("a", {
+    href: detectInstallLink(installLink),
+    target: "_blank"
+  }, React__default.createElement(DownloadIcon, {
+    size: 24,
+    color: "success"
+  })), walletState === WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === WalletState.CONNECTED && React__default.createElement(DisconnectIcon, null)));
+};
+
+var WalletImage = /*#__PURE__*/styled('img', {
+  width: '$24',
+  height: '$24',
+  marginRight: '$12'
+});
+var Text = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var ExtendedButton = /*#__PURE__*/styled(Button, {
+  variants: {
     type: {
       primary: {
         outline: '1px solid $primary',
@@ -3078,7 +3397,7 @@ function Wallet(props) {
     installLink = props.installLink;
   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');
@@ -3185,14 +3504,21 @@ var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
     })
   };
 };
+var MainContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    loaded: {
+      "true": {
+        overflowY: 'auto'
+      }
+    }
+  }
+});
 var LiquiditySourceType = /*#__PURE__*/styled('div', {
   position: 'sticky',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
@@ -3203,10 +3529,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;
     })),
@@ -3240,10 +3572,9 @@ function LiquiditySourceList(props) {
   // TODO: This is not performant
   var totalSelectedBridges = bridges.filter(isSelected).length;
   var totalSelectedExchanges = exchanges.filter(isSelected).length;
-  return React__default.createElement("div", {
-    style: _extends({
-      height: '450px'
-    }, listContainerStyle)
+  return React__default.createElement(MainContainer$1, {
+    style: listContainerStyle,
+    loaded: loadingStatus === 'success'
   }, React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
     variant: "h5"
   }, "Bridges"), React__default.createElement(Typography, {
@@ -3252,14 +3583,19 @@ function LiquiditySourceList(props) {
   }, totalSelectedBridges === totalBridges ? totalBridges : totalSelectedBridges + " / " + totalBridges)), React__default.createElement(Spacer, {
     size: 12,
     direction: "vertical"
-  }), bridges.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, null, React__default.createElement(Typography, {
+  }) : React__default.createElement(NotFoundAlert, {
+    catergory: "Bridge",
+    searchedFor: searchedFor
+  }))), React__default.createElement("div", null, React__default.createElement(LiquiditySourceType, null, React__default.createElement(Typography, {
     variant: "h5"
   }, "Exchanges"), React__default.createElement(Typography, {
     variant: "body1",
@@ -3267,14 +3603,19 @@ function LiquiditySourceList(props) {
   }, totalSelectedExchanges === totalExchanges ? totalExchanges : totalSelectedExchanges + " / " + totalExchanges)), React__default.createElement(Spacer, {
     size: 12,
     direction: "vertical"
-  }), exchanges.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,
@@ -3304,22 +3645,19 @@ 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
@@ -3332,7 +3670,9 @@ function LiquiditySourcesSelector(props) {
     return React__default.createElement(LiquiditySourceList, {
       listContainerStyle: listContainerStyle,
       list: filterLiquiditySources(list, searchedFor),
-      onChange: onChange
+      onChange: onChange,
+      loadingStatus: loadingStatus,
+      searchedFor: searchedFor
     });
   });
 }
@@ -3376,7 +3716,7 @@ var SolidCircle = /*#__PURE__*/styled('div', {
     }
   }
 });
-var Container$2 = /*#__PURE__*/styled('div', {
+var Container$1 = /*#__PURE__*/styled('div', {
   border: '1.5px solid',
   borderRadius: '$5',
   padding: '$12',
@@ -3423,7 +3763,7 @@ function SelectableWalletList(_ref) {
   }, [list]);
   return React__default.createElement(Row$1, null, list.map(function (w, index) {
     var checked = active === w.walletType;
-    return React__default.createElement(Container$2, {
+    return React__default.createElement(Container$1, {
       checked: checked,
       onClick: onClick.bind(null, w),
       key: index
@@ -3434,7 +3774,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
@@ -3474,7 +3816,7 @@ var StyledItem = /*#__PURE__*/styled(Item, {
     borderColor: '$neutrals600'
   }
 });
-var Container$3 = /*#__PURE__*/styled('div', {
+var Container$2 = /*#__PURE__*/styled('div', {
   display: 'flex'
 });
 var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
@@ -3504,7 +3846,7 @@ function Radio(props) {
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
-  return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
+  return React__default.createElement(Container$2, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
     value: value,
     direction: direction,
@@ -3579,7 +3921,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];
@@ -3647,14 +3990,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",
-    color: "neutrals800"
-  }, liquiditySources.length !== selectedLiquiditySources.length ? selectedLiquiditySources.length + " / " + liquiditySources.length : liquiditySources.length), React__default.createElement(StyledAngleRight, null))));
+  }, "Liquidity Sources"))));
   return React__default.createElement(SecondaryPage, {
     title: "Settings",
     textField: false,
@@ -3662,107 +4012,114 @@ function Settings(props) {
   }, PageContent);
 }
 
-var MainContainer$1 = /*#__PURE__*/styled('div', {
-  borderRadius: '$10',
-  maxWidth: '512px',
-  boxShadow: '$s',
-  minWidth: '375px',
-  width: '100%',
-  backgroundColor: '$background',
-  height: 'fit-content',
+var MainContainer$2 = /*#__PURE__*/styled('div', {
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
-  alignItems: 'end',
+  borderRadius: '$10',
+  boxShadow: '$s',
+  width: '100%',
+  minWidth: '375px',
+  maxWidth: '512px',
+  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
-  position: 'relative'
-});
-var ContentContainer$2 = /*#__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$2, 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'
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400'
   }
 });
-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%',
+function Token(props) {
+  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage$1, null, React__default.createElement("img", {
+    src: props.data.token.logo,
+    alt: ""
+  }), React__default.createElement("div", {
+    className: "overlay"
+  }, React__default.createElement("img", {
+    src: props.data.blockchain.logo,
+    alt: props.data.blockchain.name
+  }))), React__default.createElement(Spacer, {
+    size: 8
+  }), React__default.createElement("span", {
+    className: "amount"
+  }, props.data.amount), React__default.createElement(Spacer, {
+    size: 4
+  }), props.data.token.symbol);
+}
+
+var Container$3 = /*#__PURE__*/styled('div', {
+  position: 'relative',
   display: 'flex',
-  justifyContent: 'center',
-  '@md': {
-    top: '40%',
-    right: '-8px'
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12'
+  },
+  '&.running': {
+    color: '$foreground'
+  },
+  '&.failed,&.success': {
+    color: '$neutrals600'
+  },
+  '&.failed .status': {
+    color: '$error'
+  },
+  '&.success .status': {
+    color: '$success'
   }
 });
 function SwapDetail(_ref) {
@@ -3771,234 +4128,56 @@ function SwapDetail(_ref) {
     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;
-      });
-    });
-  });
-}
-
-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"
-    })
-  }, 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$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]);
-  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("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
-    });
-  });
+  return React__default.createElement(Button, {
+    variant: "ghost",
+    size: "free",
+    fullWidth: true,
+    onClick: onClick.bind(null, swap.requestId)
+  }, React__default.createElement(Container$3, {
+    className: "" + status
+  }, React__default.createElement("div", {
+    className: "info"
+  }, React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: firstStep.fromLogo,
+        symbol: firstStep.fromSymbol
+      },
+      blockchain: {
+        // @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', {
+var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var Color = /*#__PURE__*/styled('div', {
@@ -4048,7 +4227,7 @@ function ColorPicker(_ref) {
   var _useState = useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
-  return React__default.createElement(Container$5, null, React__default.createElement(Label$3, {
+  return React__default.createElement(Container$4, null, React__default.createElement(Label$3, {
     className: "_text"
   }, label), React__default.createElement(Button, {
     variant: "outlined",
@@ -4169,129 +4348,15 @@ 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 MainContainer$3 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
 });
-var SwapperLogo$1 = /*#__PURE__*/styled('img', {
-  width: '$16',
-  height: '$16'
-});
-var RelativeContainer$1 = /*#__PURE__*/styled('div', {
-  position: 'relative'
-});
-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 BestRouteContainer$1 = /*#__PURE__*/styled('div', {
-  overflow: 'auto'
-});
-var Alerts = /*#__PURE__*/styled('div', {
-  paddingBottom: '$16'
-});
-function ConfirmSwap(props) {
-  var _bestRoute$result;
-  var bestRoute = props.bestRoute,
-    onBack = props.onBack,
-    onConfirm = props.onConfirm,
-    loading = props.loading,
-    errors = props.errors,
-    warnings = props.warnings,
-    extraMessages = props.extraMessages,
-    confirmButtonTitle = props.confirmButtonTitle,
-    confirmButtonDisabled = props.confirmButtonDisabled;
-  return React__default.createElement(SecondaryPage, {
-    textField: false,
-    title: "Swap",
-    onBack: onBack,
-    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
-      type: "primary",
-      fullWidth: true,
-      loading: loading,
-      variant: "contained",
-      onClick: onConfirm,
-      disabled: confirmButtonDisabled
-    }, confirmButtonTitle))
-  }, React__default.createElement(MainContainer$2, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
-      direction: "vertical"
-    }), React__default.createElement(Alert, {
-      type: "error",
-      key: index
-    }, error));
-  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
-      direction: "vertical"
-    }), React__default.createElement(Alert, {
-      type: "warning",
-      key: index
-    }, warning));
-  }))), 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 Section = /*#__PURE__*/styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
   borderBottom: '1px solid $neutrals400'
 });
-var Footer$2 = /*#__PURE__*/styled('div', {
+var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -4301,7 +4366,7 @@ var AlertContainer = /*#__PURE__*/styled('div', {
 var ConfirmButton = /*#__PURE__*/styled(Button, {
   marginTop: '$16'
 });
-var Container$6 = /*#__PURE__*/styled('div', {
+var Container$5 = /*#__PURE__*/styled('div', {
   paddingBottom: '$24',
   '.title': {
     paddingBottom: '$8',
@@ -4321,7 +4386,10 @@ var Container$6 = /*#__PURE__*/styled('div', {
     alignItems: 'center'
   }
 });
-function ConfirmWallets(props) {
+var Alerts = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function ConfirmSwap(props) {
   var onBack = props.onBack,
     loading = props.loading,
     onConfirm = props.onConfirm,
@@ -4330,27 +4398,45 @@ function ConfirmWallets(props) {
     onChange = props.onChange,
     confirmDisabled = props.confirmDisabled,
     isExperimentalChain = props.isExperimentalChain,
-    handleConnectChain = props.handleConnectChain;
+    handleConnectChain = props.handleConnectChain,
+    confirmButtonTitle = props.confirmButtonTitle,
+    errors = props.errors,
+    warnings = props.warnings,
+    extraMessages = props.extraMessages;
   return React__default.createElement(SecondaryPage, {
     textField: false,
     title: "Confirm Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer$2, null, React__default.createElement(ConfirmButton, {
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
       fullWidth: true,
       loading: loading,
       type: "primary",
       variant: "contained",
       onClick: onConfirm,
       disabled: confirmDisabled
-    }, "Confirm Swap"))
-  }, props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
+    }, confirmButtonTitle))
+  }, React__default.createElement(MainContainer$3, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
+      type: "error",
+      key: index
+    }, error));
+  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
+      type: "warning",
+      key: index
+    }, warning));
+  }))), props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
     size: 16,
     direction: "vertical"
   }) : null, props.previewRoutes) : null, requiredWallets.map(function (wallet, index) {
     var list = selectableWallets.filter(function (w) {
       return wallet === w.chain;
     });
-    return React__default.createElement(Container$6, {
+    return React__default.createElement(Container$5, {
       key: index
     }, React__default.createElement("div", {
       className: "title"
@@ -4373,34 +4459,16 @@ function ConfirmWallets(props) {
       list: list,
       onChange: onChange
     }));
-  }));
-}
-
-function groupingOfSwaps(list) {
-  return list.reduce(function (acc, swap) {
-    var categoryIndex = acc.findIndex(function (item) {
-      return swap.status === 'running' && item.title == 'Active Swaps' || swap.status !== 'running' && item.title == 'Recent Swaps';
-    });
-    if (categoryIndex > -1) {
-      acc[categoryIndex].swaps.push(swap);
-    } else {
-      acc.push({
-        title: swap.status === 'running' ? 'Active Swaps' : 'Recent Swaps',
-        swaps: [swap]
-      });
-    }
-    return acc;
-  }, []);
+  })));
 }
 
-var BodyError = /*#__PURE__*/styled('div', {
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
+var Group = /*#__PURE__*/styled('div', {
+  '.group-title': {
+    textTransform: 'uppercase'
+  }
 });
-var ErrorMsg$1 = /*#__PURE__*/styled(Typography, {
-  color: '$error'
+var Container$6 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
 });
 var filteredHistory = function filteredHistory(list, searchedFor) {
   return list.filter(function (swap) {
@@ -4409,30 +4477,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
     }));
   }));
 };
@@ -4440,28 +4512,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$6, 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'
 });
@@ -4480,30 +4650,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: {
@@ -4519,43 +4710,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',
@@ -4563,23 +4768,30 @@ function SwapHistory(props) {
     }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
-      chainLogo: step.fromBlockchainLogo,
+      // @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, {
-      src: step.swapperLogo,
+    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
+      src:
+      // @ts-ignore
+      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, {
@@ -4599,28 +4811,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,
-      chainLogo: step.toBlockchainLogo,
+      // @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',
@@ -4645,5 +4854,5 @@ function SwapHistory(props) {
   }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, 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