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

package/dist/ui.esm.js

@@ -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'
+      }
     }
   }
 });
@@ -1475,6 +1485,13 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$18'
         }
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15'
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -1642,6 +1659,14 @@ var StepContainer = /*#__PURE__*/styled('div', {
         textAlign: 'center',
         justifyContent: 'center'
       }
+    },
+    success: {
+      "true": {
+        filter: 'none'
+      },
+      "false": {
+        filter: 'grayscale(100%)'
+      }
     }
   }
 });
@@ -1662,18 +1687,23 @@ var Detail = /*#__PURE__*/styled('div', {
 });
 var SubTitle = /*#__PURE__*/styled(Typography, {
   color: '$neutrals600',
-  display: 'block'
-});
-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;
+  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, {
@@ -1684,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)));
 }
 
@@ -1912,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',
@@ -1949,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'
 });
@@ -2084,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,
@@ -2100,7 +2165,7 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$E = ["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',
@@ -2445,7 +2510,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2463,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',
@@ -2478,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,
@@ -2508,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),
@@ -2581,7 +2638,7 @@ function Header(props) {
   }, props.title), props.suffix || React__default.createElement("div", null));
 }
 
-var _excluded$F = ["label", "prefix", "suffix", "children", "size", "style"];
+var _excluded$G = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
   padding: '1px',
@@ -2594,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',
@@ -2654,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', {
@@ -2668,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$F);
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$G);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
     className: "_text"
   }, inputAttributes.id && {
@@ -2728,10 +2793,10 @@ function SecondaryPage(props) {
   })), props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
 }
 
-var containsText = function containsText(text, searchText) {
+function containsText(text, searchText) {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-};
-var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLength) {
+}
+function getConciseAddress(address, maxChars, ellipsisLength) {
   if (maxChars === void 0) {
     maxChars = 8;
   }
@@ -2743,7 +2808,19 @@ var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLe
   var start = Math.ceil((address.length - maxChars) / 2);
   var end = address.length - maxChars;
   return "" + address.substr(start, maxChars) + '.'.repeat(ellipsisLength) + address.substr(end);
-};
+}
+function limitDecimalPlaces(numberString, maxDecimalPlaces) {
+  if (maxDecimalPlaces === void 0) {
+    maxDecimalPlaces = 4;
+  }
+  var number = parseFloat(numberString);
+  if (isNaN(number)) return numberString; // Return the original string if it's not a valid number
+  else {
+    var multiplier = Math.pow(10, maxDecimalPlaces);
+    var roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
+}
 
 var SpacerContainer = /*#__PURE__*/styled('div', {
   variants: {
@@ -2932,7 +3009,7 @@ function Alert(props) {
     }
   }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
     className: "title",
-    variant: "h6",
+    variant: "title",
     color: type
   }, title), !!children && React__default.createElement(Spacer, {
     size: 8,
@@ -3001,10 +3078,8 @@ function VirtualizedList(props) {
   });
 }
 
-var TokenImage = /*#__PURE__*/styled('img', {
-  width: '$32',
-  maxHeight: '$32',
-  marginRight: '$16'
+var TokenImageContainer = /*#__PURE__*/styled('div', {
+  paddingRight: '$16'
 });
 var TokenNameContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3037,9 +3112,10 @@ function TokenItem(props) {
     align: "start",
     onClick: onClick.bind(null, token),
     type: selected ? 'primary' : undefined,
-    prefix: React__default.createElement(TokenImage, {
-      src: token.image
-    }),
+    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, {
@@ -3053,7 +3129,7 @@ function TokenItem(props) {
   }, token.name))));
 }
 
-var _excluded$G = ["style"];
+var _excluded$H = ["style"];
 var PAGE_SIZE = 20;
 function TokenList(props) {
   var list = props.list,
@@ -3070,7 +3146,7 @@ function TokenList(props) {
   };
   var isSelected = function isSelected(token) {
     if (multiSelect && selectedList) {
-      return selectedList === 'all' || selectedList.map(function (item) {
+      return selectedList.map(function (item) {
         return item.symbol + item.address;
       }).indexOf(token.symbol + token.address) > -1;
     }
@@ -3093,7 +3169,7 @@ function TokenList(props) {
   }, [tokens.length]);
   var innerElementType = forwardRef(function (_ref, ref) {
     var style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     return React__default.createElement("div", Object.assign({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: ref,
@@ -3121,15 +3197,12 @@ function TokenList(props) {
   });
 }
 
-var Container$1 = /*#__PURE__*/styled('div', {
-  flex: '1'
-});
 var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  position: 'absolute',
-  top: '50%'
+  paddingTop: '33%',
+  flex: 1
 });
 var filterTokens = function filterTokens(list, searchedFor) {
   return list.filter(function (token) {
@@ -3140,38 +3213,35 @@ 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,
+    onChange = props.onChange,
     onBack = props.onBack,
     loadingStatus = props.loadingStatus;
   return React__default.createElement(SecondaryPage, {
     textField: true,
-    textFieldPlaceholder: "Search Blockchain By Name",
-    title: "Select " + type + " Token",
     hasHeader: hasHeader,
-    onBack: onBack
+    title: "Select " + type + " Token",
+    onBack: onBack,
+    textFieldPlaceholder: "Search Token By Name"
   }, function (searchedFor) {
     var filteredTokens = filterTokens(list, searchedFor);
-    return React__default.createElement(Container$1, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+    return loadingStatus === 'loading' ? React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
       size: 24
-    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredTokens.length ? React__default.createElement(TokenList, {
+    })) : loadingStatus === 'failed' ? React__default.createElement(LoadingFailedAlert, null) : filteredTokens.length ? React__default.createElement(TokenList, {
       searchedText: searchedFor,
       list: filteredTokens,
       selected: selected,
-      selectedList: selectedList,
-      multiSelect: multiSelect,
       onChange: onChange
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Token",
       searchedFor: searchedFor
-    })));
+    });
   });
 }
 
 var ListContainer$1 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  padding: '0 $4'
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
@@ -3197,12 +3267,12 @@ function BlockchainSelector(props) {
     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(LoaderContainer, null, React__default.createElement(Spinner, {
-      size: 24
-    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
+    }, 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,
@@ -3211,11 +3281,11 @@ function BlockchainSelector(props) {
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Blockchain",
       searchedFor: searchedFor
-    })));
+    }))));
   });
 }
 
-var _excluded$H = ["label", "id"];
+var _excluded$I = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -3240,7 +3310,7 @@ var Label$1 = /*#__PURE__*/styled('label', {
 function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    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, {
@@ -3323,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();
   };
@@ -3347,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;
@@ -3377,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',
@@ -3417,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
@@ -3519,7 +3584,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   variants: {
     loaded: {
       "true": {
-        overflowY: 'auto'
+        overflowY: 'auto',
+        padding: '0 $4'
       }
     }
   }
@@ -3535,10 +3601,8 @@ var LiquiditySourceType = /*#__PURE__*/styled('div', {
   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',
@@ -3636,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
     }),
@@ -3727,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',
@@ -3774,15 +3839,14 @@ 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(Typography, {
@@ -3827,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, {
@@ -3857,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,
@@ -3893,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'
@@ -3910,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',
@@ -4032,14 +4096,14 @@ var MainContainer$2 = /*#__PURE__*/styled('div', {
   width: '100%',
   minWidth: '375px',
   maxWidth: '512px',
-  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
   variants: {
     fixedHeight: {
       "true": {
-        height: '595px'
+        height: '595px',
+        maxHeight: '595px'
       },
       "false": {
         height: 'auto'
@@ -4062,18 +4126,16 @@ function SwapContainer(props) {
 var TokenContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center',
+  width: '160px',
   '& .amount': {
     fontWeight: 'bold'
+  },
+  '& .estimated': {
+    color: '$neutrals600'
   }
 });
-var TokenImage$1 = /*#__PURE__*/styled('div', {
+var TokenImage = /*#__PURE__*/styled('div', {
   position: 'relative',
-  width: '$24',
-  height: '$24',
-  img: {
-    width: '100%',
-    display: 'block'
-  },
   '.overlay': {
     position: 'absolute',
     right: -4,
@@ -4082,29 +4144,41 @@ var TokenImage$1 = /*#__PURE__*/styled('div', {
     height: '$16',
     padding: '$2',
     borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     backgroundColor: '$background',
     border: '1px solid $neutrals400'
   }
 });
 function Token(props) {
-  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage$1, null, React__default.createElement("img", {
-    src: props.data.token.logo,
-    alt: ""
+  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("img", {
-    src: props.data.blockchain.logo,
-    alt: props.data.blockchain.name
+  }, React__default.createElement(Image, {
+    src: blockchain.logo,
+    alt: blockchain.name,
+    size: 12
   }))), React__default.createElement(Spacer, {
     size: 8
-  }), React__default.createElement("span", {
+  }), !!amount && React__default.createElement("span", {
     className: "amount"
-  }, props.data.amount), React__default.createElement(Spacer, {
+  }, props.data.amount), !amount && estimatedAmount && React__default.createElement("span", {
+    className: "amount estimated"
+  }, props.data.estimatedAmount), React__default.createElement(Spacer, {
     size: 4
-  }), props.data.token.symbol);
+  }), token.symbol);
 }
 
-var Container$4 = /*#__PURE__*/styled('div', {
+var Container$3 = /*#__PURE__*/styled('div', {
   position: 'relative',
   display: 'flex',
   justifyContent: 'space-between',
@@ -4120,12 +4194,6 @@ var Container$4 = /*#__PURE__*/styled('div', {
     fontWeight: 'bold',
     fontSize: '$12'
   },
-  '&.running': {
-    color: '$foreground'
-  },
-  '&.failed,&.success': {
-    color: '$neutrals600'
-  },
   '&.failed .status': {
     color: '$error'
   },
@@ -4144,7 +4212,7 @@ function SwapDetail(_ref) {
     size: "free",
     fullWidth: true,
     onClick: onClick.bind(null, swap.requestId)
-  }, React__default.createElement(Container$4, {
+  }, React__default.createElement(Container$3, {
     className: "" + status
   }, React__default.createElement("div", {
     className: "info"
@@ -4155,11 +4223,10 @@ function SwapDetail(_ref) {
         symbol: firstStep.fromSymbol
       },
       blockchain: {
-        // @ts-ignore
-        logo: firstStep.fromBlockchainLogo,
+        logo: firstStep.fromBlockchainLogo || '',
         name: firstStep.fromBlockchain
       },
-      amount: swap.inputAmount
+      amount: limitDecimalPlaces(swap.inputAmount)
     }
   }), React__default.createElement(Spacer, {
     size: 12
@@ -4174,11 +4241,11 @@ function SwapDetail(_ref) {
         symbol: lastStep.toSymbol
       },
       blockchain: {
-        // @ts-ignore
-        logo: lastStep.toBlockchainLogo,
+        logo: lastStep.toBlockchainLogo || '',
         name: lastStep.toBlockchain
       },
-      amount: lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || ''
+      amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+      estimatedAmount: limitDecimalPlaces(lastStep.expectedOutputAmountHumanReadable || '')
     }
   })), React__default.createElement("div", {
     className: "status"
@@ -4188,7 +4255,7 @@ function SwapDetail(_ref) {
   }) : status)));
 }
 
-var Container$5 = /*#__PURE__*/styled('div', {
+var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var Color = /*#__PURE__*/styled('div', {
@@ -4238,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",
@@ -4352,7 +4419,7 @@ function Drawer(props) {
     anchor: anchor,
     style: containerStyle
   }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
-    variant: "h4"
+    variant: "h6"
   }, title), showClose && React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
@@ -4377,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',
@@ -4429,17 +4496,25 @@ function ConfirmSwap(props) {
   }, 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, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "error",
       key: index
-    }, error));
+    }, 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, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "warning",
       key: index
-    }, warning));
+    }, 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"
@@ -4447,7 +4522,7 @@ function ConfirmSwap(props) {
     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"
@@ -4459,7 +4534,7 @@ function ConfirmSwap(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",
@@ -4478,17 +4553,7 @@ var Group = /*#__PURE__*/styled('div', {
     textTransform: 'uppercase'
   }
 });
-var Container$7 = /*#__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);
-  });
-};
-var SwapsGroup = function SwapsGroup(props) {
+function SwapsGroup(props) {
   var list = props.list,
     onSwapClick = props.onSwapClick,
     groupBy = props.groupBy;
@@ -4518,27 +4583,41 @@ var SwapsGroup = function SwapsGroup(props) {
       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,
-    groupBy = _ref.groupBy;
+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 Or Request ID",
+    textFieldPlaceholder: "Search by Network, Token or Request ID",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
-    return React__default.createElement(Container$7, null, 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,
       groupBy: groupBy
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Swap"
-    }));
+    }))));
   });
 }
 
@@ -4582,38 +4661,49 @@ var SwapMessages = function SwapMessages(props) {
       onClick: props.switchNetwork
     }, "Change network to ", currentStepBlockchain)
   }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
-    variant: "body2"
+    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: "body2"
+    variant: "body3"
   }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "on your\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "wallet"))));
 };
 
-var _excluded$I = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
+var _excluded$J = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "date", "onRetry", "previewInputs"];
 var SwapperContainer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginLeft: '6px'
+  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 SwapperLogo$1 = /*#__PURE__*/styled('img', {
-  width: '$16',
-  height: '$16'
-});
 var RelativeContainer$1 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
@@ -4622,7 +4712,7 @@ var Dot$1 = /*#__PURE__*/styled('div', {
   height: '$8',
   backgroundColor: '$foreground',
   borderRadius: '4px',
-  marginLeft: '$8'
+  marginLeft: '11px'
 });
 var ArrowDown = /*#__PURE__*/styled('div', {
   width: '0px',
@@ -4630,12 +4720,11 @@ var ArrowDown = /*#__PURE__*/styled('div', {
   borderLeft: '5px solid transparent',
   borderRight: '5px solid transparent',
   borderTop: '5px solid $foreground',
-  marginLeft: '$8'
+  marginLeft: '$10'
 });
 var StyledAnchor = /*#__PURE__*/styled('a', {
   color: '$primary',
-  fontWeight: '$600',
-  marginLeft: '$12'
+  fontWeight: '$600'
 });
 var SwapInfoContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4644,11 +4733,14 @@ var SwapInfoContainer = /*#__PURE__*/styled('div', {
   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',
@@ -4656,15 +4748,12 @@ 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$1 = /*#__PURE__*/styled('div', {
   width: '0',
   minHeight: '$16',
-  marginLeft: '$12',
+  marginLeft: '14px',
   border: '1px dashed $foreground',
   borderRadius: 'inherit'
 });
@@ -4680,7 +4769,8 @@ var Row$2 = /*#__PURE__*/styled('div', {
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800'
+    color: '$neutrals800',
+    justifyContent: 'flex-end'
   },
   '.status': {
     fontWeight: 'bold',
@@ -4703,26 +4793,13 @@ var RequestId = /*#__PURE__*/styled('div', {
   }
 });
 var ExtraDetails = /*#__PURE__*/styled('div', {
-  padding: '$8 0',
+  padding: '0',
   color: '$neutrals600',
-  fontSize: '$12'
-});
-var StepContainer$1 = /*#__PURE__*/styled('div', {
-  variants: {
-    hasNotStarted: {
-      "true": {
-        filter: 'grayscale(100%)'
-      }
-    },
-    isRunning: {
-      "true": {
-        animation: pulse + " 2s ease-in-out infinite"
-      }
-    }
-  }
+  fontSize: '$10'
 });
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  padding: '$8 $4 $2 $4'
 });
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
@@ -4732,7 +4809,7 @@ function SwapHistory(props) {
     onCancel = props.onCancel,
     date = props.date,
     onRetry = props.onRetry,
-    extraMessageProps = _objectWithoutPropertiesLoose(props, _excluded$I);
+    extraMessageProps = _objectWithoutPropertiesLoose(props, _excluded$J);
   var _useState = useState(false),
     showDrawer = _useState[0],
     setShowDrawer = _useState[1];
@@ -4753,7 +4830,7 @@ function SwapHistory(props) {
     }, "Try again"))
   }, React__default.createElement("div", null, React__default.createElement(SwapInfoContainer, null, React__default.createElement(Row$2, null, React__default.createElement("div", {
     className: "name"
-  }, "Request ID:"), React__default.createElement("div", {
+  }, "Request Id:", React__default.createElement("span", {
     className: "value requestId",
     onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
   }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
@@ -4762,71 +4839,69 @@ function SwapHistory(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement(Row$2, null, React__default.createElement("div", {
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement("div", {
     className: "name"
-  }, "Status:"), React__default.createElement("div", {
+  }, 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: 32
+  })), 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(StepContainer$1, {
-      key: index,
-      hasNotStarted: step.status === 'created',
-      isRunning: step.status != 'failed' && step.status != 'success' && step.status != 'created'
+    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,
-      // @ts-ignore
-      chainLogo: step.fromBlockchainLogo,
+      chainLogo: step.fromBlockchainLogo || '',
       blockchain: step.fromBlockchain,
       amount: pendingSwap.inputAmount
-    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1
-    // @ts-ignore
-    , {
-      // @ts-ignore
-      src: step.swapperLogo,
-      alt: step.swapperId
-    }), React__default.createElement("div", null, React__default.createElement(Typography, {
-      ml: 4,
+    }), 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"
-    },
-    // @ts-ignore
-    step.swapperType, ' ', "from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
-      ml: 4,
+    }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       variant: "caption"
-    }, "$",
-    // @ts-ignore
-    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$1, 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,
-      // @ts-ignore
-      chainLogo: step.toBlockchainLogo,
+      chainLogo: step.toBlockchainLogo || '',
       blockchain: step.toBlockchain,
-      amount: step.outputAmount || ''
+      amount: step.outputAmount || '',
+      estimatedAmount: step.expectedOutputAmountHumanReadable || '',
+      success: step.status === 'success'
     }));
   }), React__default.createElement(Divider, {
     size: 32
@@ -4838,10 +4913,9 @@ function SwapHistory(props) {
     title: "Cancel Progress",
     content: React__default.createElement(Alert, {
       type: "warning"
-    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction\xA0", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")),
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, "Warning: Cancel ", React__default.createElement("u", null, "doesn't revert"), " your transaction if you've already signed and sent a transaction to the blockchain. It only stops next steps from being executed.")),
     footer: React__default.createElement("div", {
       style: {
         display: 'flex',
@@ -4866,5 +4940,5 @@ function SwapHistory(props) {
   }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+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