@rango-dev/ui 0.1.11-next.4 → 0.1.11-next.6

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/containers/SwapHistory/SwapHistory.d.ts

@@ -4,6 +4,7 @@ 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 RelativeContainer: any;
 export declare const Footer: any;

package/dist/ui.cjs.development.js

@@ -1614,37 +1614,6 @@ Typography.toString = function () {
   return '._typography';
 };
 
-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 StepLogoContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
   width: '$28',
@@ -1658,18 +1627,25 @@ var StepLogoContainer = /*#__PURE__*/styled('div', {
     }
   }
 });
+var Logo = /*#__PURE__*/styled('img', {
+  width: '$28',
+  height: '$28',
+  borderRadius: '50%'
+});
 var ChainLogo = /*#__PURE__*/styled('div', {
   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'
+  border: '1px solid $neutrals400',
+  img: {
+    width: '100%',
+    display: 'block'
+  }
 });
 var StepContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -1683,6 +1659,14 @@ var StepContainer = /*#__PURE__*/styled('div', {
         textAlign: 'center',
         justifyContent: 'center'
       }
+    },
+    success: {
+      "true": {
+        filter: 'none'
+      },
+      "false": {
+        filter: 'grayscale(100%)'
+      }
     }
   }
 });
@@ -1703,37 +1687,47 @@ 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(Image, {
+  }, React__default.createElement(Logo, {
     src: logo,
-    alt: symbol,
-    size: 28
-  }), React__default.createElement(ChainLogo, null, React__default.createElement(Image, {
+    alt: symbol
+  }), React__default.createElement(ChainLogo, null, React__default.createElement("img", {
     src: chainLogo,
-    alt: blockchain,
-    size: 12
+    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)));
 }
 
@@ -1955,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',
@@ -3207,7 +3232,8 @@ function TokenSelector(props) {
 }
 
 var ListContainer$1 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  padding: '0 $4'
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
@@ -3549,7 +3575,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   variants: {
     loaded: {
       "true": {
-        overflowY: 'auto'
+        overflowY: 'auto',
+        padding: '0 $4'
       }
     }
   }
@@ -4632,7 +4659,22 @@ var _excluded$J = ["pendingSwap", "onBack", "onCopy", "isCopied", "onCancel", "d
 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',
@@ -4646,7 +4688,7 @@ var Dot$1 = /*#__PURE__*/styled('div', {
   height: '$8',
   backgroundColor: '$foreground',
   borderRadius: '4px',
-  marginLeft: '$8'
+  marginLeft: '11px'
 });
 var ArrowDown = /*#__PURE__*/styled('div', {
   width: '0px',
@@ -4654,7 +4696,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',
@@ -4682,13 +4724,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'
 });
@@ -4731,22 +4770,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,
@@ -4796,39 +4822,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(Image
-    // @ts-ignore
-    , {
-      // @ts-ignore
-      src: step.swapperLogo,
+    }), 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: 16
-    }), React__default.createElement("div", null, React__default.createElement(Typography, {
-      ml: 4,
+      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, {
@@ -4841,17 +4858,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