@rango-dev/ui 0.1.11-next.3 → 0.1.11-next.5

package/dist/components/Icon/types.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export interface IconProps extends React.SVGAttributes<SVGElement> {
     size?: 12 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
     color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+    disabled?: boolean;
 }
 export declare type Icon = 'DeleteCircleIcon' | 'CheckSquareIcon' | 'AddIcon' | 'InfoCircleIcon' | 'AddCircleIcon' | 'MinusCircleIcon' | 'CheckCircleIcon' | 'CheckIcon' | 'BanIcon' | 'WarningIcon' | 'HistoryIcon' | 'GasIcon' | 'SettingsIcon' | 'TrashIcon' | 'SearchMinusIcon' | 'SearchIcon' | 'AngleRightIcon' | 'AngleUpIcon' | 'AngleDownIcon' | 'AngleLeftIcon' | 'DownloadIcon' | 'RetryRightIcon' | 'RetryLeftIcon' | 'TryAgainIcon' | 'VerticalSwapIcon' | 'HorizontalSwapIcon' | 'RetryIcon' | 'WalletIcon' | 'AddWalletIcon' | 'DeleteWalletIcon' | 'CheckWalletIcon' | 'SwapWalletIcon' | 'BagIcon' | 'TimeIcon' | 'CloseIcon' | 'SignatureIcon' | 'CopyIcon';

package/dist/components/StepDetail/StepDetail.d.ts

@@ -5,6 +5,8 @@ export interface PropTypes {
     amount: string;
     symbol: string;
     blockchain: string;
+    estimatedAmount?: string;
     direction?: 'horizontal' | 'vertical';
+    success?: boolean;
 }
-export declare function StepDetail({ logo, chainLogo, amount, symbol, blockchain, direction, }: PropsWithChildren<PropTypes>): JSX.Element;
+export declare function StepDetail(props: PropsWithChildren<PropTypes>): JSX.Element;

package/dist/components/common/Image.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type PropTypes = {
+    size: number;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+export declare function Image(props: PropTypes): JSX.Element;
+export {};

package/dist/components/common/index.d.ts

@@ -1 +1,2 @@
 export { FilledCircle } from './FilledCircle';
+export { Image } from './Image';

package/dist/containers/SwapHistory/SwapHistory.d.ts

@@ -4,8 +4,8 @@ import { PropTypes as SwapMessagesPropTypes } from './SwapMessages';
 export declare const SwapperContainer: any;
 export declare const BodyError: any;
 export declare const ErrorMsg: any;
+export declare const FeeContainer: any;
 export declare const Fee: any;
-export declare const SwapperLogo: any;
 export declare const RelativeContainer: any;
 export declare const Footer: any;
 export declare const Dot: any;

package/dist/ui.cjs.development.js

@@ -225,6 +225,11 @@ var SvgWithStrokeColor = /*#__PURE__*/styled('svg', {
       }, _white["." + darkTheme + " &"] = {
         $$color: '$colors$foreground'
       }, _white.stroke = '$$color', _white)
+    },
+    disabled: {
+      "true": {
+        stroke: '$neutrals400'
+      }
     }
   }
 });
@@ -254,6 +259,11 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
       }, _white2["." + darkTheme + " &"] = {
         $$color: '$colors$foreground'
       }, _white2.fill = '$$color', _white2)
+    },
+    disabled: {
+      "true": {
+        stroke: '$neutrals400'
+      }
     }
   }
 });
@@ -1649,6 +1659,14 @@ var StepContainer = /*#__PURE__*/styled('div', {
         textAlign: 'center',
         justifyContent: 'center'
       }
+    },
+    success: {
+      "true": {
+        filter: 'none'
+      },
+      "false": {
+        filter: 'grayscale(100%)'
+      }
     }
   }
 });
@@ -1669,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, {
@@ -1691,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, {
+  }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
+    noWrap: true,
+    variant: direction === 'vertical' ? 'body2' : 'h6',
+    color: '$neutrals500'
+  }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
+    variant: direction === 'vertical' ? 'body2' : 'h6',
+    noWrap: true
+  }, symbol), React__default.createElement(SubTitle, {
     noWrap: true,
     variant: "caption",
-    color: "neutrals800"
+    color: "$neutrals800"
   }, "on ", blockchain)));
 }
 
@@ -1919,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',
@@ -1956,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'
 });
@@ -2091,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,
@@ -2107,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',
@@ -2452,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
@@ -2470,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',
@@ -2485,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,
@@ -2515,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),
@@ -2588,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',
@@ -2675,7 +2725,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 && {
@@ -3020,10 +3070,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',
@@ -3056,9 +3104,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, {
@@ -3072,7 +3121,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,
@@ -3112,7 +3161,7 @@ function TokenList(props) {
   }, [tokens.length]);
   var innerElementType = React.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,
@@ -3227,7 +3276,7 @@ function BlockchainSelector(props) {
   });
 }
 
-var _excluded$H = ["label", "id"];
+var _excluded$I = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -3252,7 +3301,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(RadixCheckbox.Indicator, null, React__default.createElement(CheckIcon, {
@@ -3384,10 +3433,8 @@ var State = function State(_ref) {
   })), walletState === exports.WalletState.CONNECTING && React__default.createElement(Spinner, null), walletState === exports.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',
@@ -3424,9 +3471,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
@@ -3542,10 +3590,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',
@@ -3643,9 +3689,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
     }),
@@ -3785,11 +3832,10 @@ function SelectableWalletList(_ref) {
       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, {
@@ -4074,14 +4120,8 @@ var TokenContainer = /*#__PURE__*/styled('div', {
     fontWeight: 'bold'
   }
 });
-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,
@@ -4090,19 +4130,24 @@ 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", {
+  return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage, null, React__default.createElement(Image, {
     src: props.data.token.logo,
-    alt: ""
+    alt: "",
+    size: 24
   }), React__default.createElement("div", {
     className: "overlay"
-  }, React__default.createElement("img", {
+  }, React__default.createElement(Image, {
     src: props.data.blockchain.logo,
-    alt: props.data.blockchain.name
+    alt: props.data.blockchain.name,
+    size: 12
   }))), React__default.createElement(Spacer, {
     size: 8
   }), React__default.createElement("span", {
@@ -4536,7 +4581,7 @@ function History(_ref) {
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
-    textFieldPlaceholder: "Search By Blockchain Or Token Or Request ID",
+    textFieldPlaceholder: "Search by Blockchain/Token/Request Id",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
@@ -4608,20 +4653,31 @@ var SwapMessages = function SwapMessages(props) {
   }, "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: '$4'
 });
 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'
 });
@@ -4630,7 +4686,7 @@ var Dot$1 = /*#__PURE__*/styled('div', {
   height: '$8',
   backgroundColor: '$foreground',
   borderRadius: '4px',
-  marginLeft: '$8'
+  marginLeft: '11px'
 });
 var ArrowDown = /*#__PURE__*/styled('div', {
   width: '0px',
@@ -4638,7 +4694,7 @@ 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',
@@ -4666,13 +4722,10 @@ var Description = /*#__PURE__*/styled(Typography, {
   color: '$success',
   marginLeft: '$8'
 });
-var Error = /*#__PURE__*/styled(Description, {
-  color: '$error'
-});
 var Line$1 = /*#__PURE__*/styled('div', {
   width: '0',
   minHeight: '$16',
-  marginLeft: '$12',
+  marginLeft: '14px',
   border: '1px dashed $foreground',
   borderRadius: 'inherit'
 });
@@ -4715,22 +4768,9 @@ var ExtraDetails = /*#__PURE__*/styled('div', {
   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"
-      }
-    }
-  }
-});
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  paddingTop: '$8'
 });
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
@@ -4740,7 +4780,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 = React.useState(false),
     showDrawer = _useState[0],
     setShowDrawer = _useState[1];
@@ -4780,37 +4820,30 @@ function SwapHistory(props) {
   }))), React__default.createElement(ExtraDetails, null, date))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
     size: 32
   }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
-    return React__default.createElement(StepContainer$1, {
-      key: index,
-      hasNotStarted: step.status === 'created',
-      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 || '',
       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, {
-      src:
-      // @ts-ignore
-      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, " from ", step.fromSymbol, " to ", step.toSymbol, "\xA0 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", null, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
       return React__default.createElement(InternalDetail, {
         key: index
       }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
@@ -4823,17 +4856,19 @@ function SwapHistory(props) {
         rel: "noreferrer",
         key: index
       }, "TX-Link"));
-    }), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
+    })), 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: "body2",
+      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 || '',
       blockchain: step.toBlockchain,
-      amount: step.outputAmount || ''
+      amount: step.outputAmount || '',
+      estimatedAmount: step.expectedOutputAmountHumanReadable || '',
+      success: step.status === 'success'
     }));
   }), React__default.createElement(Divider, {
     size: 32
@@ -4911,6 +4946,7 @@ exports.Header = Header;
 exports.History = History;
 exports.HistoryIcon = HistoryIcon;
 exports.HorizontalSwapIcon = HorizontalSwapIcon;
+exports.Image = Image;
 exports.InfoCircleIcon = InfoCircleIcon;
 exports.LiquiditySourcesSelector = LiquiditySourcesSelector;
 exports.LoadingFailedAlert = LoadingFailedAlert;