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

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() {
@@ -218,6 +218,11 @@ var SvgWithStrokeColor = /*#__PURE__*/styled('svg', {
       }, _white["." + darkTheme + " &"] = {
         $$color: '$colors$foreground'
       }, _white.stroke = '$$color', _white)
+    },
+    disabled: {
+      "true": {
+        stroke: '$neutrals400'
+      }
     }
   }
 });
@@ -247,6 +252,11 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
       }, _white2["." + darkTheme + " &"] = {
         $$color: '$colors$foreground'
       }, _white2.fill = '$$color', _white2)
+    },
+    disabled: {
+      "true": {
+        stroke: '$neutrals400'
+      }
     }
   }
 });
@@ -864,11 +874,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 +929,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 +954,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 +979,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 +1010,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 +1041,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 +1072,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 +1104,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 +1144,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 +1184,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 +1220,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 +1260,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 +1296,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 +1331,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 +1368,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 +1394,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 +1425,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',
@@ -1444,6 +1485,13 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$18'
         }
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15'
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -1551,7 +1599,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
   } : {
@@ -1611,6 +1659,14 @@ var StepContainer = /*#__PURE__*/styled('div', {
         textAlign: 'center',
         justifyContent: 'center'
       }
+    },
+    success: {
+      "true": {
+        filter: 'none'
+      },
+      "false": {
+        filter: 'grayscale(100%)'
+      }
     }
   }
 });
@@ -1630,18 +1686,24 @@ var Detail = /*#__PURE__*/styled('div', {
   }
 });
 var SubTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals600'
-});
-function StepDetail(_ref) {
-  var logo = _ref.logo,
-    chainLogo = _ref.chainLogo,
-    amount = _ref.amount,
-    symbol = _ref.symbol,
-    blockchain = _ref.blockchain,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  color: '$neutrals600',
+  display: 'block',
+  paddingLeft: '$8'
+});
+function StepDetail(props) {
+  var logo = props.logo,
+    chainLogo = props.chainLogo,
+    amount = props.amount,
+    symbol = props.symbol,
+    blockchain = props.blockchain,
+    estimatedAmount = props.estimatedAmount,
+    _props$success = props.success,
+    success = _props$success === void 0 ? true : _props$success,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction;
   return React__default.createElement(StepContainer, {
-    direction: direction
+    direction: direction,
+    success: success
   }, React__default.createElement(StepLogoContainer, {
     direction: direction
   }, React__default.createElement(Logo, {
@@ -1652,13 +1714,20 @@ function StepDetail(_ref) {
     alt: blockchain
   }))), React__default.createElement(Detail, {
     pl: direction === 'horizontal'
-  }, React__default.createElement(Typography, {
+  }, amount && React__default.createElement(Typography, {
     noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'h6'
-  }, amount ? parseFloat(amount).toFixed(2) : '?', " ", symbol), React__default.createElement(SubTitle, {
+    variant: direction === 'vertical' ? 'body2' : 'title'
+  }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
+    noWrap: true,
+    variant: direction === 'vertical' ? 'body2' : 'title',
+    color: '$neutrals600'
+  }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
+    variant: direction === 'vertical' ? 'body2' : 'title',
+    noWrap: true
+  }, symbol), React__default.createElement(SubTitle, {
     noWrap: true,
     variant: "caption",
-    color: "neutrals800"
+    color: "$neutrals800"
   }, "on ", blockchain)));
 }
 
@@ -1832,7 +1901,7 @@ var TooltipContent = /*#__PURE__*/styled(Content$1, {
     }
   }
 });
-var TooltipArrow = /*#__PURE__*/styled(Arrow$1, {
+var TooltipArrow = /*#__PURE__*/styled(Arrow, {
   variants: {
     color: {
       primary: {
@@ -1880,6 +1949,37 @@ function Tooltip(_ref) {
   })))));
 }
 
+var FilledCircle = /*#__PURE__*/styled('span', {
+  width: '10px',
+  height: '10px',
+  backgroundColor: '$primary',
+  borderRadius: '99999px'
+});
+
+var _excluded$E = ["size"];
+var ImageContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.image': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  }
+});
+function Image(props) {
+  var size = props.size,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+  return React__default.createElement(ImageContainer, {
+    css: {
+      width: size + 'px',
+      height: size + 'px'
+    }
+  }, React__default.createElement("img", Object.assign({
+    className: "image"
+  }, otherProps)));
+}
+
 var Container = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
   border: '1px solid $neutrals300',
@@ -1917,10 +2017,6 @@ var HR = /*#__PURE__*/styled('hr', {
   border: '1px solid $neutrals400',
   margin: '$8 0'
 });
-var SwapperLogo = /*#__PURE__*/styled('img', {
-  width: '$16',
-  height: '$16'
-});
 var RelativeContainer = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
@@ -2052,9 +2148,10 @@ function BestRoute(props) {
       chainLogo: swap.from.blockchainLogo,
       blockchain: swap.from.blockchain,
       amount: swap.fromAmount
-    }), React__default.createElement(Dot, null)), React__default.createElement(SwapperContainer, null, React__default.createElement(Line, null), React__default.createElement(SwapperLogo, {
+    }), React__default.createElement(Dot, null)), React__default.createElement(SwapperContainer, null, React__default.createElement(Line, null), React__default.createElement(Image, {
       src: swap.swapperLogo,
-      alt: swap.swapperId
+      alt: swap.swapperId,
+      size: 20
     }), React__default.createElement(Line, null)), index + 1 === ((_data$result2 = data.result) == null ? void 0 : _data$result2.swaps.length) && React__default.createElement(ArrowRight, null), React__default.createElement(StepDetail, {
       direction: "vertical",
       logo: swap.to.logo,
@@ -2068,7 +2165,7 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$D = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _excluded$F = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
@@ -2097,6 +2194,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     },
     size: {
       compact: {},
+      free: {},
       small: {
         height: '$32'
       },
@@ -2412,7 +2510,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2430,13 +2528,6 @@ function Button(_ref) {
   }), suffix);
 }
 
-var FilledCircle = /*#__PURE__*/styled('span', {
-  width: '10px',
-  height: '10px',
-  backgroundColor: '$primary',
-  borderRadius: '99999px'
-});
-
 var ListContainer = /*#__PURE__*/styled('div', {
   display: 'grid',
   gap: '.5rem',
@@ -2445,10 +2536,8 @@ var ListContainer = /*#__PURE__*/styled('div', {
   width: '100%',
   height: '100%'
 });
-var Image = /*#__PURE__*/styled('img', {
-  width: '1.5rem',
-  maxHeight: '1.5rem',
-  marginRight: '$4'
+var ImageContainer$1 = /*#__PURE__*/styled('div', {
+  paddingRight: '$4'
 });
 function BlockchainsList(props) {
   var list = props.list,
@@ -2475,9 +2564,10 @@ function BlockchainsList(props) {
       type: isSelect(blockchain.name) ? 'primary' : undefined,
       variant: "outlined",
       size: "large",
-      prefix: React__default.createElement(Image, {
+      prefix: React__default.createElement(ImageContainer$1, null, React__default.createElement(Image, {
+        size: 24,
         src: blockchain.logo
-      }),
+      })),
       suffix: isSelect(blockchain.name) ? React__default.createElement(FilledCircle, null) : undefined,
       align: "start",
       onClick: changeSelectedBlockchain.bind(null, blockchain),
@@ -2488,9 +2578,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$G = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
+  padding: '1px',
   boxSizing: 'border-box',
   border: '1px solid $neutrals400',
   borderRadius: '$5',
@@ -2500,6 +2651,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -2560,6 +2712,13 @@ var Input = /*#__PURE__*/styled('input', {
   margin: 0,
   '&:disabled': {
     cursor: 'not-allowed'
+  },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield'
   }
 });
 var Label = /*#__PURE__*/styled('label', {
@@ -2574,7 +2733,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$G);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
     className: "_text"
   }, inputAttributes.id && {
@@ -2594,36 +2753,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 +2773,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,7 +2788,38 @@ 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);
+}
+
+function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
+function getConciseAddress(address, maxChars, ellipsisLength) {
+  if (maxChars === void 0) {
+    maxChars = 8;
+  }
+  if (ellipsisLength === void 0) {
+    ellipsisLength = 3;
+  }
+  if (!address) return null;
+  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  var start = Math.ceil((address.length - maxChars) / 2);
+  var end = address.length - maxChars;
+  return "" + address.substr(start, maxChars) + '.'.repeat(ellipsisLength) + address.substr(end);
+}
+function limitDecimalPlaces(numberString, maxDecimalPlaces) {
+  if (maxDecimalPlaces === void 0) {
+    maxDecimalPlaces = 4;
+  }
+  var number = parseFloat(numberString);
+  if (isNaN(number)) return numberString; // Return the original string if it's not a valid number
+  else {
+    var multiplier = Math.pow(10, maxDecimalPlaces);
+    var roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
 }
 
 var SpacerContainer = /*#__PURE__*/styled('div', {
@@ -2789,7 +2957,7 @@ var MainContainer = /*#__PURE__*/styled('div', {
         color: '$primary200'
       },
       secondary: {
-        color: '$secondary'
+        color: '$foreground'
       },
       success: {
         color: '$success300'
@@ -2813,7 +2981,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,68 +2999,293 @@ function Alert(props) {
     size: 24
   }), React__default.createElement(Spacer, {
     size: 8
-  })), title && React__default.createElement(Typography, {
-    variant: "h6",
+  }))), React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flexDirection: 'column',
+      width: '100%'
+    }
+  }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
+    className: "title",
+    variant: "title",
     color: type
-  }, title), children), 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;
-};
+function LoadingFailedAlert() {
+  return React__default.createElement(Alert, {
+    type: "error",
+    title: " Error connecting server, please reload the app and try again."
+  });
+}
 
-var ListContainer$1 = /*#__PURE__*/styled('div', {
-  height: '450px',
-  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 NotFoundAlert(props) {
+  var catergory = props.catergory,
+    searchedFor = props.searchedFor;
+  return React__default.createElement(Alert, {
+    type: "secondary",
+    title: catergory + " " + (searchedFor ? "'" + searchedFor + "'" : '') + " not found."
   });
-};
-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",
+}
+
+function VirtualizedList(props) {
+  var itemCount = props.itemCount,
+    hasNextPage = props.hasNextPage,
+    loadNextPage = props.loadNextPage,
+    Item = props.Item,
+    innerElementType = props.innerElementType,
+    size = props.size;
+  var isItemLoaded = function isItemLoaded(index) {
+    return !hasNextPage || index < itemCount;
+  };
+  return React__default.createElement(AutoSizer, null, function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    return React__default.createElement(InfiniteLoader, {
+      isItemLoaded: isItemLoaded,
+      itemCount: hasNextPage ? itemCount + 1 : itemCount,
+      loadMoreItems: loadNextPage,
+      threshold: 1
+    }, function (_ref2) {
+      var onItemsRendered = _ref2.onItemsRendered,
+        ref = _ref2.ref;
+      return React__default.createElement(VariableSizeList, {
+        innerElementType: innerElementType,
+        ref: ref,
+        itemSize: function itemSize() {
+          return size;
+        },
+        itemCount: itemCount,
+        height: height || 0,
+        width: width || 0,
+        onItemsRendered: onItemsRendered
+      }, function (_ref3) {
+        var index = _ref3.index,
+          style = _ref3.style;
+        return isItemLoaded(index) ? React__default.createElement(Item, {
+          index: index,
+          style: style
+        }) : null;
+      });
+    });
+  });
+}
+
+var TokenImageContainer = /*#__PURE__*/styled('div', {
+  paddingRight: '$16'
+});
+var TokenNameContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+var TokenAmountContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end'
+});
+function TokenItem(props) {
+  var _token$balance;
+  var token = props.token,
+    style = props.style,
+    onClick = props.onClick,
+    selected = props.selected;
+  return React__default.createElement("div", {
+    style: _extends({
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%'
+    }, style, {
+      height: '48px',
+      top: parseFloat(style == null ? void 0 : style.top) + 0 + "px",
+      padding: '0 4px'
+    })
+  }, React__default.createElement(Button, {
+    variant: "outlined",
+    size: "large",
+    align: "start",
+    onClick: onClick.bind(null, token),
+    type: selected ? 'primary' : undefined,
+    prefix: React__default.createElement(TokenImageContainer, null, React__default.createElement(Image, {
+      src: token.image,
+      size: 32
+    })),
+    suffix: ((_token$balance = token.balance) == null ? void 0 : _token$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
+      variant: "body2"
+    }, token.balance.amount), React__default.createElement(Typography, {
+      variant: "caption"
+    }, token.balance.usdValue + "$"))
+  }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, token.symbol), React__default.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, token.name))));
+}
+
+var _excluded$H = ["style"];
+var PAGE_SIZE = 20;
+function TokenList(props) {
+  var list = props.list,
+    searchedText = props.searchedText,
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  var _useState = useState(props.selected),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var changeSelected = function changeSelected(token) {
+    setSelected(token);
+    onChange(token);
+  };
+  var isSelected = function isSelected(token) {
+    if (multiSelect && selectedList) {
+      return selectedList.map(function (item) {
+        return item.symbol + item.address;
+      }).indexOf(token.symbol + token.address) > -1;
+    }
+    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
+  };
+  var _useState2 = useState(true),
+    hasNextPage = _useState2[0],
+    setHasNextPage = _useState2[1];
+  var _useState3 = useState(list),
+    tokens = _useState3[0],
+    setTokens = _useState3[1];
+  var loadNextPage = function loadNextPage() {
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
+  };
+  useEffect(function () {
+    setTokens(list.slice(0, PAGE_SIZE));
+  }, [searchedText, list]);
+  useEffect(function () {
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+  var innerElementType = forwardRef(function (_ref, ref) {
+    var style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    return React__default.createElement("div", Object.assign({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: ref,
+      style: _extends({}, style, {
+        height: parseFloat(style == null ? void 0 : style.height) + 8 * 2 + "px"
+      })
+    }, rest));
+  });
+  return React__default.createElement(VirtualizedList, {
+    Item: function Item(_ref2) {
+      var index = _ref2.index,
+        style = _ref2.style;
+      return React__default.createElement(TokenItem, {
+        token: tokens[index],
+        style: style,
+        onClick: changeSelected,
+        selected: isSelected(tokens[index])
+      });
+    },
+    hasNextPage: hasNextPage,
+    itemCount: tokens.length,
+    loadNextPage: loadNextPage,
+    innerElementType: innerElementType,
+    size: 56
+  });
+}
+
+var LoaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1
+});
+var filterTokens = function filterTokens(list, searchedFor) {
+  return list.filter(function (token) {
+    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
+  });
+};
+function TokenSelector(props) {
+  var list = props.list,
+    type = props.type,
+    selected = props.selected,
+    hasHeader = props.hasHeader,
+    onChange = props.onChange,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    hasHeader: hasHeader,
+    title: "Select " + type + " Token",
+    onBack: onBack,
+    textFieldPlaceholder: "Search 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',
+  padding: '0 $4'
+});
+var filterBlockchains = function filterBlockchains(list, searchedFor) {
+  return list.filter(function (blockchain) {
+    return containsText(blockchain.name, searchedFor) || containsText(blockchain.displayName, searchedFor);
+  });
+};
+function BlockchainSelector(props) {
+  var type = props.type,
+    list = props.list,
+    onChange = props.onChange,
+    selected = props.selected,
+    onBack = props.onBack,
+    loadingStatus = props.loadingStatus,
+    hasHeader = props.hasHeader,
+    listContainerStyle = props.listContainerStyle,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
+  return React__default.createElement(SecondaryPage, {
+    textField: true,
+    hasHeader: hasHeader,
+    textFieldPlaceholder: "Search Blockchain By Name",
     title: "Select " + type + " Network",
     onBack: onBack
   }, function (searchedFor) {
     var filteredBlockchains = filterBlockchains(list, searchedFor);
-    return React__default.createElement(ListContainer$1, {
+    return React__default.createElement(React__default.Fragment, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), React__default.createElement(ListContainer$1, {
       style: listContainerStyle,
       key: "1"
-    }, loadingStatus === '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, {
+    }, loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
       list: filteredBlockchains,
       selected: selected,
       multiSelect: multiSelect,
       selectedList: selectedList,
       onChange: onChange
-    }) : React__default.createElement(Alert, null, searchedFor + " not found")));
+    }) : React__default.createElement(NotFoundAlert, {
+      catergory: "Blockchain",
+      searchedFor: searchedFor
+    }))));
   });
 }
 
-var _excluded$F = ["label", "id"];
+var _excluded$I = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -2910,7 +3310,7 @@ var Label$1 = /*#__PURE__*/styled('label', {
 function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
     id: id
   }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
@@ -2993,15 +3393,13 @@ var ModalHeader = /*#__PURE__*/styled('div', {
   position: 'relative',
   marginBottom: '$16'
 });
-var ContentContainer$1 = /*#__PURE__*/styled('div', {});
 function Modal(props) {
   var title = props.title,
     content = props.content,
     open = props.open,
     onClose = props.onClose,
     containerStyle = props.containerStyle,
-    action = props.action,
-    contentStyle = props.contentStyle;
+    action = props.action;
   var handleBackDropClick = function handleBackDropClick(event) {
     if (event.target === event.currentTarget) onClose();
   };
@@ -3017,9 +3415,7 @@ function Modal(props) {
   }, 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));
+  }))), content)), document.body));
 }
 
 var WalletState;
@@ -3047,10 +3443,8 @@ var State = function State(_ref) {
   })), 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 WalletImageContainer = /*#__PURE__*/styled('div', {
+  paddingRight: '$12'
 });
 var Text = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3078,7 +3472,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');
@@ -3087,9 +3481,10 @@ function Wallet(props) {
     align: "start",
     variant: "outlined",
     size: "large",
-    prefix: React__default.createElement(WalletImage, {
-      src: image
-    }),
+    prefix: React__default.createElement(WalletImageContainer, null, React__default.createElement(Image, {
+      src: image,
+      size: 24
+    })),
     suffix: React__default.createElement(State, {
       walletState: state,
       installLink: installLink
@@ -3185,28 +3580,40 @@ var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
     })
   };
 };
+var MainContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    loaded: {
+      "true": {
+        overflowY: 'auto',
+        padding: '0 $4'
+      }
+    }
+  }
+});
 var LiquiditySourceType = /*#__PURE__*/styled('div', {
   position: 'sticky',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
   paddingBottom: '$8'
 });
-var LiquidityImage = /*#__PURE__*/styled('img', {
-  width: '$20',
-  maxHeight: '$20',
-  marginRight: '$16'
+var LiquidityImageContainer = /*#__PURE__*/styled('div', {
+  paddingRight: '$16'
+});
+var LoaderContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center'
 });
 function LiquiditySourceList(props) {
   var list = props.list,
     onChange = props.onChange,
-    listContainerStyle = props.listContainerStyle;
+    listContainerStyle = props.listContainerStyle,
+    loadingStatus = props.loadingStatus,
+    searchedFor = props.searchedFor;
   var _useState = useState(list.filter(function (item) {
       return item.selected;
     })),
@@ -3240,10 +3647,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 +3658,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 +3678,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,
@@ -3284,9 +3700,10 @@ var LiquiditySourceItem = function LiquiditySourceItem(_ref) {
     size: "large",
     align: "start",
     variant: "outlined",
-    prefix: React__default.createElement(LiquidityImage, {
-      src: liquiditySource.logo
-    }),
+    prefix: React__default.createElement(LiquidityImageContainer, null, React__default.createElement(Image, {
+      src: liquiditySource.logo,
+      size: 20
+    })),
     suffix: React__default.createElement(Switch, {
       checked: selected
     }),
@@ -3304,22 +3721,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 +3746,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 +3792,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,18 +3839,19 @@ 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
-    }, React__default.createElement("img", {
+    }, React__default.createElement(Image, {
       src: w.image,
       alt: w.walletType,
-      width: 24,
-      height: 24
+      size: 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 +3891,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 +3921,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,
@@ -3540,13 +3957,13 @@ var SlippageChipsContainer = /*#__PURE__*/styled('div', {
 var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
   cursor: 'pointer'
 });
 var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
   marginLeft: '$8'
@@ -3557,7 +3974,7 @@ var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
   justifyContent: 'center'
 });
 var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var Head = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3579,7 +3996,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 +4065,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 +4087,118 @@ function Settings(props) {
   }, PageContent);
 }
 
-var MainContainer$1 = /*#__PURE__*/styled('div', {
+var MainContainer$2 = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
   borderRadius: '$10',
-  maxWidth: '512px',
   boxShadow: '$s',
-  minWidth: '375px',
   width: '100%',
-  backgroundColor: '$background',
-  height: 'fit-content',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'end',
+  minWidth: '375px',
+  maxWidth: '512px',
   padding: '$16',
   boxSizing: 'border-box',
-  position: 'relative'
-});
-var ContentContainer$2 = /*#__PURE__*/styled('div', {
-  width: '100%'
-});
-function SwapContainer(props) {
-  var children = props.children,
-    style = props.style;
-  return React__default.createElement(MainContainer$1, {
-    style: style,
-    id: "swap-box"
-  }, React__default.createElement(ContentContainer$2, null, children));
-}
-
-var Container$4 = /*#__PURE__*/styled('div', {
-  position: 'relative'
-});
-var ButtonContainer$1 = /*#__PURE__*/styled('div', {
-  paddingTop: '$8'
-});
-var SwapContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  '@md': {
-    padding: '$12'
-  },
-  '&:hover': {
-    borderColor: '$primary'
-  },
+  backgroundColor: '$background',
   variants: {
-    status: {
-      failed: {
-        borderColor: '$error'
-      },
-      running: {
-        borderColor: '$neutrals400'
+    fixedHeight: {
+      "true": {
+        height: '595px',
+        maxHeight: '595px'
       },
-      success: {
-        borderColor: '$success'
+      "false": {
+        height: 'auto'
       }
     }
   }
 });
-var Arrow = /*#__PURE__*/styled('div', {
+function SwapContainer(props) {
+  var children = props.children,
+    style = props.style,
+    _props$fixedHeight = props.fixedHeight,
+    fixedHeight = _props$fixedHeight === void 0 ? true : _props$fixedHeight;
+  return React__default.createElement(MainContainer$2, {
+    style: style,
+    id: "swap-box",
+    fixedHeight: fixedHeight
+  }, children);
+}
+
+var TokenContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-var Line$1 = /*#__PURE__*/styled('div', {
-  height: '0',
-  width: '$20',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-  '@md': {
-    width: '$36'
+  alignItems: 'center',
+  width: '160px',
+  '& .amount': {
+    fontWeight: 'bold'
   },
-  '@lg': {
-    width: '$48'
+  '& .estimated': {
+    color: '$neutrals600'
   }
 });
-var Dot$1 = /*#__PURE__*/styled('div', {
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$foreground',
-  borderRadius: '50%',
-  '@lg': {
-    width: '$8',
-    height: '$8'
+var TokenImage = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400'
   }
 });
-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) {
+  var _props$data = props.data,
+    token = _props$data.token,
+    blockchain = _props$data.blockchain,
+    amount = _props$data.amount,
+    estimatedAmount = _props$data.estimatedAmount;
+  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage, null, React__default.createElement(Image, {
+    src: token.logo,
+    alt: "",
+    size: 24
+  }), React__default.createElement("div", {
+    className: "overlay"
+  }, React__default.createElement(Image, {
+    src: blockchain.logo,
+    alt: blockchain.name,
+    size: 12
+  }))), React__default.createElement(Spacer, {
+    size: 8
+  }), !!amount && React__default.createElement("span", {
+    className: "amount"
+  }, props.data.amount), !amount && estimatedAmount && React__default.createElement("span", {
+    className: "amount estimated"
+  }, props.data.estimatedAmount), React__default.createElement(Spacer, {
+    size: 4
+  }), token.symbol);
+}
+
+var Container$3 = /*#__PURE__*/styled('div', {
+  position: 'relative',
   display: 'flex',
-  justifyContent: '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'
+  },
+  '&.failed .status': {
+    color: '$error'
+  },
+  '&.success .status': {
+    color: '$success'
   }
 });
 function SwapDetail(_ref) {
@@ -3771,234 +4207,55 @@ 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, {
+  return React__default.createElement(Button, {
+    variant: "ghost",
+    size: "free",
+    fullWidth: true,
     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;
+  }, React__default.createElement(Container$3, {
+    className: "" + status
+  }, React__default.createElement("div", {
+    className: "info"
+  }, React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: firstStep.fromLogo,
+        symbol: firstStep.fromSymbol
+      },
+      blockchain: {
+        logo: firstStep.fromBlockchainLogo || '',
+        name: firstStep.fromBlockchain
+      },
+      amount: limitDecimalPlaces(swap.inputAmount)
     }
-    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(Spacer, {
+    size: 12
+  }), React__default.createElement(ArrowRightIcon, {
+    size: 12
+  }), React__default.createElement(Spacer, {
+    size: 12
+  }), React__default.createElement(Token, {
+    data: {
+      token: {
+        logo: lastStep.toLogo,
+        symbol: lastStep.toSymbol
+      },
+      blockchain: {
+        logo: lastStep.toBlockchainLogo || '',
+        name: lastStep.toBlockchain
+      },
+      amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+      estimatedAmount: limitDecimalPlaces(lastStep.expectedOutputAmountHumanReadable || '')
     }
-  }, React__default.createElement(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
-    });
-  });
+  })), 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 +4305,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",
@@ -4126,172 +4383,58 @@ var DrawerContainer = /*#__PURE__*/styled('div', {
     }
   }
 });
-var DrawerHeader = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16'
-});
-var Body = /*#__PURE__*/styled('div', {
-  overflowY: 'auto',
-  height: '100%'
-});
-var Footer = /*#__PURE__*/styled('footer', {
-  width: '100%',
-  marginTop: '$28'
-});
-function Drawer(props) {
-  var title = props.title,
-    content = props.content,
-    open = props.open,
-    onClose = props.onClose,
-    containerStyle = props.containerStyle,
-    _props$anchor = props.anchor,
-    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
-    _props$showClose = props.showClose,
-    showClose = _props$showClose === void 0 ? false : _props$showClose,
-    footer = props.footer,
-    container = props.container;
-  var handleBackDropClick = function handleBackDropClick(event) {
-    if (event.target === event.currentTarget) onClose();
-  };
-  return React__default.createElement(React__default.Fragment, null, open && container && createPortal(React__default.createElement(BackDrop$1, {
-    onClick: handleBackDropClick
-  }, React__default.createElement(DrawerContainer, {
-    anchor: anchor,
-    style: containerStyle
-  }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
-    variant: "h4"
-  }, title), showClose && React__default.createElement(CloseIcon, {
-    size: 24,
-    onClick: onClose
-  })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
-}
-
-var MainContainer$2 = /*#__PURE__*/styled('div', {
-  overflow: 'hidden'
-});
-var Line$2 = /*#__PURE__*/styled('div', {
-  width: '0',
-  marginLeft: '$12',
-  height: '36px',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit'
-});
-var SwapperContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  marginLeft: '6px'
-});
-var Fee = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center'
-});
-var SwapperLogo$1 = /*#__PURE__*/styled('img', {
-  width: '$16',
-  height: '$16'
-});
-var 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 DrawerHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
 });
-var Alerts = /*#__PURE__*/styled('div', {
-  paddingBottom: '$16'
+var Body = /*#__PURE__*/styled('div', {
+  overflowY: 'auto',
+  height: '100%'
 });
-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 Footer = /*#__PURE__*/styled('footer', {
+  width: '100%',
+  marginTop: '$28'
+});
+function Drawer(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    _props$anchor = props.anchor,
+    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? false : _props$showClose,
+    footer = props.footer,
+    container = props.container;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  return React__default.createElement(React__default.Fragment, null, open && container && createPortal(React__default.createElement(BackDrop$1, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(DrawerContainer, {
+    anchor: anchor,
+    style: containerStyle
+  }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
+    variant: "h6"
+  }, title), showClose && React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
 }
 
+var MainContainer$3 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
 var Section = /*#__PURE__*/styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
   borderBottom: '1px solid $neutrals400'
 });
-var Footer$2 = /*#__PURE__*/styled('div', {
+var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -4301,7 +4444,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 +4464,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 +4476,53 @@ 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, Object.assign({
+      type: "error",
+      key: index
+    }, typeof error === 'string' ? {
+      title: error
+    } : {
+      children: error
+    })));
+  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, Object.assign({
+      type: "warning",
+      key: index
+    }, typeof warning === 'string' ? {
+      title: warning
+    } : {
+      children: warning
+    })));
+  }))), props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
     size: 16,
     direction: "vertical"
   }) : null, props.previewRoutes) : null, requiredWallets.map(function (wallet, index) {
     var list = selectableWallets.filter(function (w) {
       return wallet === w.chain;
     });
-    return React__default.createElement(Container$6, {
+    return React__default.createElement(Container$5, {
       key: index
     }, React__default.createElement("div", {
       className: "title"
@@ -4362,7 +4534,7 @@ function ConfirmWallets(props) {
       variant: "body2"
     }, "Your ", wallet, " Wallet")), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
       type: "error"
-    }, "You need to connect a compatible wallet with ", wallet)), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+    }, "You need to connect a compatible wallet with ", wallet, ".")), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
       variant: "contained",
       type: "primary",
       align: "grow",
@@ -4373,101 +4545,202 @@ 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 ErrorMsg$1 = /*#__PURE__*/styled(Typography, {
-  color: '$error'
-});
-var filteredHistory = function filteredHistory(list, searchedFor) {
-  return list.filter(function (swap) {
-    var firstStep = swap.steps[0];
-    var lastStep = swap.steps[swap.steps.length - 1];
-    return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
-  });
-};
 var Group = /*#__PURE__*/styled('div', {
-  marginBottom: '$24',
-  paddingRight: '$8',
-  maxHeight: '600px'
-});
-var GroupTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals500'
+  '.group-title': {
+    textTransform: 'uppercase'
+  }
 });
-var SwapsGroup = function SwapsGroup(props) {
+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
     }));
   }));
+}
+
+var Container$6 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+var filteredHistory = function filteredHistory(list, searchedFor) {
+  return list.filter(function (swap) {
+    var firstStep = swap.steps[0];
+    var lastStep = swap.steps[swap.steps.length - 1];
+    return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
+  });
 };
-function History(_ref) {
-  var _ref$list = _ref.list,
-    list = _ref$list === void 0 ? [] : _ref$list,
-    onBack = _ref.onBack,
-    onSwapClick = _ref.onSwapClick;
+function History(props) {
+  var _props$list = props.list,
+    list = _props$list === void 0 ? [] : _props$list,
+    onBack = props.onBack,
+    onSwapClick = props.onSwapClick,
+    groupBy = props.groupBy,
+    loading = props.loading;
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
-    textFieldPlaceholder: "Search By Blockchain Or Token",
+    textFieldPlaceholder: "Search by Network, Token or Request ID",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
-    return filterSwaps.length ? React__default.createElement(SwapsGroup, {
+    return React__default.createElement(React__default.Fragment, null, loading && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), React__default.createElement(Container$6, null, !loading && React__default.createElement(React__default.Fragment, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
       list: filterSwaps,
-      onSwapClick: onSwapClick
-    }) : 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: "body3"
+  }, 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: "body3"
+  }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
+    variant: "body3"
+  }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
+    variant: "body3"
+  }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
+    variant: "body3"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
+    variant: "body3"
+  }, "on your\xA0"), React__default.createElement(SuccessText, {
+    variant: "body3"
+  }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
+    variant: "body3"
+  }, "wallet"))));
+};
+
+var _excluded$J = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
+var SwapperContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$4',
+  variants: {
+    created: {
+      "true": {
+        filter: 'grayscale(100%)'
+      }
+    },
+    running: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
+var FeeContainer = /*#__PURE__*/styled('div', {
+  paddingLeft: '$16'
+});
+var Fee = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
+});
+var RelativeContainer$1 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Dot$1 = /*#__PURE__*/styled('div', {
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$foreground',
+  borderRadius: '4px',
+  marginLeft: '11px'
+});
+var ArrowDown = /*#__PURE__*/styled('div', {
+  width: '0px',
+  height: '0px',
+  borderLeft: '5px solid transparent',
+  borderRight: '5px solid transparent',
+  borderTop: '5px solid $foreground',
+  marginLeft: '$10'
+});
 var StyledAnchor = /*#__PURE__*/styled('a', {
   color: '$primary',
-  fontWeight: '$600',
-  marginLeft: '$12'
+  fontWeight: '$600'
+});
+var SwapInfoContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: '$16',
+  borderBottom: '1px solid $neutrals300'
 });
 var InternalDetailsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
+  display: 'flex',
+  '.details': {
+    padding: '$8 0'
+  }
 });
 var InternalDetail = /*#__PURE__*/styled('div', {
   display: 'flex',
-  padding: '$10'
+  margin: '$12 0 $12 $20'
 });
 var DescriptionContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4475,152 +4748,174 @@ var DescriptionContainer = /*#__PURE__*/styled('div', {
 });
 var Description = /*#__PURE__*/styled(Typography, {
   color: '$success',
-  marginLeft: '$8'
-});
-var Error = /*#__PURE__*/styled(Description, {
-  color: '$error'
+  paddingLeft: '$4'
 });
-var Line$3 = /*#__PURE__*/styled('div', {
+var Line$1 = /*#__PURE__*/styled('div', {
   width: '0',
   minHeight: '$16',
-  marginLeft: '$12',
+  marginLeft: '14px',
   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',
+    justifyContent: 'flex-end'
+  },
+  '.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: '0',
+  color: '$neutrals600',
+  fontSize: '$10'
 });
-var StepContainer$1 = /*#__PURE__*/styled('div', {
-  variants: {
-    hasNotStarted: {
-      "true": {
-        filter: 'grayscale(100%)'
-      }
-    },
-    isRunning: {
-      "true": {
-        animation: pulse + " 2s ease-in-out infinite"
-      }
-    }
-  }
+var SwapFlowContainer = /*#__PURE__*/styled('div', {
+  overflowY: 'auto',
+  padding: '$8 $4 $2 $4'
 });
 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$J);
   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("span", {
+    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) {
-    return React__default.createElement(StepContainer$1, {
-      key: index,
-      hasNotStarted: step.status === 'created',
-      isRunning: step.status != 'failed' && step.status != 'success' && step.status != 'created'
+  }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
+    size: 4
+  }), React__default.createElement(Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement("div", {
+    className: "name"
+  }, React__default.createElement("span", {
+    className: "value status " + ((pendingSwap == null ? void 0 : pendingSwap.status) || '')
+  }, pendingSwap == null ? void 0 : pendingSwap.status, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Spinner, {
+    size: 16,
+    color: "primary"
+  })), React__default.createElement(ExtraDetails, null, date))))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
+    size: 16
+  }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+    return React__default.createElement("div", {
+      key: index
     }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
-      chainLogo: step.fromBlockchainLogo,
+      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,
-      alt: step.swapperId
-    }), React__default.createElement("div", null, React__default.createElement(Typography, {
-      ml: 4,
+    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, {
+      created: step.status === 'created',
+      running: !['created', 'success', 'failed'].includes(step.status)
+    }, React__default.createElement(Image, {
+      src: step.swapperLogo || '',
+      alt: step.swapperId,
+      size: 20
+    }), React__default.createElement(FeeContainer, null, React__default.createElement(Typography, {
       variant: "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, {
-      ml: 4,
+    }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       variant: "caption"
-    }, "$", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
+    }, "\xA0 $", 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), React__default.createElement("div", {
+      className: "details"
+    }, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
       return React__default.createElement(InternalDetail, {
         key: index
-      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
-        color: "success"
+      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(Divider, {
+        size: 4
+      }), React__default.createElement(CheckCircleIcon, {
+        color: "primary"
       }), React__default.createElement(Description, {
-        variant: "body2"
-      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1)))), React__default.createElement(StyledAnchor, {
+        variant: "body3"
+      }, React__default.createElement(StyledAnchor, {
         href: item.url,
         target: "_blank",
         rel: "noreferrer",
         key: index
-      }, "TX-Link"));
-    }), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
+      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1), " Tx")))));
+    })), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
       color: "error"
-    }), React__default.createElement(Error, {
-      variant: "body2"
+    }), React__default.createElement(Description, {
+      variant: "body3",
+      color: "$error500"
     }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: step.toLogo,
       symbol: step.toSymbol,
-      chainLogo: step.toBlockchainLogo,
+      chainLogo: step.toBlockchainLogo || '',
       blockchain: step.toBlockchain,
-      amount: step.outputAmount
+      amount: step.outputAmount || '',
+      estimatedAmount: step.expectedOutputAmountHumanReadable || '',
+      success: step.status === 'success'
     }));
-  }), (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, {
-      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")))),
+    }, "Warning: Cancel ", React__default.createElement("u", null, "doesn't revert"), " your transaction if you've already signed and sent a transaction to the blockchain. It only stops next steps from being executed.")),
     footer: React__default.createElement("div", {
       style: {
         display: 'flex',
@@ -4645,5 +4940,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, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
 //# sourceMappingURL=ui.esm.js.map