@rango-dev/ui 0.1.10-next.78 → 0.1.10-next.80

package/dist/ui.cjs.development.js

@@ -1547,39 +1547,6 @@ function StepDetail(_ref) {
   }, "on ", blockchain)));
 }
 
-var secondsToString = function secondsToString(s) {
-  var minutes = parseInt((s / 60).toString()).toString();
-  return "" + minutes;
-};
-var totalArrivalTime = function totalArrivalTime(data) {
-  var _data$result, _data$result$swaps;
-  return (data == null ? void 0 : (_data$result = data.result) == null ? void 0 : (_data$result$swaps = _data$result.swaps) == null ? void 0 : _data$result$swaps.reduce(function (a, b) {
-    return a + b.estimatedTimeInSeconds;
-  }, 0)) || 0;
-};
-var rawFees = function rawFees(data) {
-  var _data$result2, _data$result2$swaps;
-  return ((data == null ? void 0 : (_data$result2 = data.result) == null ? void 0 : (_data$result2$swaps = _data$result2.swaps) == null ? void 0 : _data$result2$swaps.flatMap(function (s) {
-    return s.fee.map(function (f) {
-      return {
-        swapperId: s.swapperId,
-        fee: f
-      };
-    });
-  })) || []).reduce(function (partialSum, a) {
-    return partialSum + parseFloat(a.fee.amount);
-  }, 0).toFixed(3);
-};
-var decimalNumber = function decimalNumber(number, toFixed) {
-  if (number === void 0) {
-    number = '0';
-  }
-  return parseFloat(number).toFixed(toFixed);
-};
-var containsText = function containsText(text, searchText) {
-  return text.toLowerCase().includes(searchText.toLowerCase());
-};
-
 var waveSquares = /*#__PURE__*/keyframes({
   '0%': {
     backgroundPosition: '-468px 0'
@@ -1772,6 +1739,17 @@ var ArrowRight = /*#__PURE__*/styled('div', {
   borderBottom: '5px solid transparent',
   borderLeft: '5px solid $foreground'
 });
+var pulse = /*#__PURE__*/keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
 var GasContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$neutrals300',
   borderRadius: '5px',
@@ -1786,6 +1764,27 @@ var GasContainer = /*#__PURE__*/styled('div', {
     margin: '$8'
   }
 });
+var FeeContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  variants: {
+    warning: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
+var TotalFee = /*#__PURE__*/styled(Typography, {
+  variants: {
+    warning: {
+      "true": {
+        color: '$warning300'
+      }
+    }
+  }
+});
 var SkeletonContainer$1 = /*#__PURE__*/styled('div', {
   padding: '$4',
   '@md': {
@@ -1797,33 +1796,34 @@ var SwapperContainer = /*#__PURE__*/styled('div', {
   justifyContent: 'center',
   alignItems: 'center'
 });
-function BestRoute(_ref) {
+function BestRoute(props) {
   var _data$result;
-  var data = _ref.data,
-    loading = _ref.loading,
-    error = _ref.error;
-  var fee,
-    time = '';
-  if (!!data) {
-    fee = rawFees(data);
-    time = secondsToString(totalArrivalTime(data));
-  }
+  var data = props.data,
+    loading = props.loading,
+    error = props.error,
+    totalFee = props.totalFee,
+    feeWarning = props.feeWarning,
+    totalTime = props.totalTime;
   return React__default.createElement(Container, null, loading ? React__default.createElement(SkeletonContainer$1, null, React__default.createElement(Skeleton, {
     width: 48,
     height: 94
-  })) : React__default.createElement(GasContainer, null, React__default.createElement(GasIcon, {
-    size: 20
-  }), React__default.createElement(Typography, {
+  })) : React__default.createElement(GasContainer, null, React__default.createElement(FeeContainer, {
+    warning: feeWarning
+  }, React__default.createElement(GasIcon, {
+    size: 20,
+    color: feeWarning ? 'warning' : undefined
+  }), React__default.createElement(TotalFee, {
     mt: 4,
     align: "center",
-    variant: "caption"
-  }, error && '-', !!data && "$" + fee), React__default.createElement(HR, null), React__default.createElement(TimeIcon, {
+    variant: "caption",
+    warning: feeWarning
+  }, error && '-', !!data && "$" + totalFee)), React__default.createElement(HR, null), React__default.createElement(TimeIcon, {
     size: 20
   }), React__default.createElement(Typography, {
     mt: 4,
     align: "center",
     variant: "caption"
-  }, error && '-', !!data && "~" + time + "m")), React__default.createElement(BestRouteContainer, null, loading && React__default.createElement(Spinner, {
+  }, error && '-', !!data && "~" + totalTime + "m")), React__default.createElement(BestRouteContainer, null, loading && React__default.createElement(Spinner, {
     color: "primary"
   }), error && React__default.createElement(ErrorMsg, {
     variant: "caption"
@@ -2414,9 +2414,7 @@ function SecondaryPage(props) {
     },
     value: searchedFor,
     autoFocus: true
-  })), React__default.createElement(ContentContainer, null, props.textField && React__default.createElement(props.Content, {
-    searchedFor: searchedFor
-  }), !props.textField && props.Content), Footer);
+  })), React__default.createElement(ContentContainer, null, props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
 }
 
 var MainContainer = /*#__PURE__*/styled('div', {
@@ -2445,10 +2443,7 @@ var MainContainer = /*#__PURE__*/styled('div', {
     }
   }
 });
-var ContentContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column'
-});
+var ContentContainer$1 = /*#__PURE__*/styled('div', {});
 var TitleContainer = /*#__PURE__*/styled('div', {
   marginBottom: '$8'
 });
@@ -2460,7 +2455,7 @@ var StyledTypography = /*#__PURE__*/styled(Typography, {
 });
 function Alert(props) {
   var type = props.type,
-    description = props.description,
+    children = props.children,
     title = props.title;
   var showIcon = ['error', 'success', 'warning'].includes(type);
   return React__default.createElement(MainContainer, {
@@ -2476,11 +2471,13 @@ function Alert(props) {
     size: 28
   })), React__default.createElement(ContentContainer$1, null, title && React__default.createElement(TitleContainer, null, React__default.createElement(StyledTypography, {
     variant: "h6"
-  }, title)), React__default.createElement(StyledTypography, {
-    variant: "body2"
-  }, description)));
+  }, title)), children));
 }
 
+var containsText = function containsText(text, searchText) {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+};
+
 var ListContainer$1 = /*#__PURE__*/styled('div', {
   height: '450px',
   display: 'flex',
@@ -2508,28 +2505,29 @@ function BlockchainSelector(props) {
     hasHeader: hasHeader,
     textFieldPlaceholder: "Search Blockchain By Name",
     title: "Select " + type + " Network",
-    onBack: onBack,
-    Content: function Content(_ref) {
-      var searchedFor = _ref.searchedFor;
-      var filteredBlockchains = filterBlockchains(list, searchedFor);
-      return React__default.createElement(ListContainer$1, {
-        style: listContainerStyle
-      }, loadingStatus === 'loading' && React__default.createElement("div", null, React__default.createElement(Spinner, {
-        size: 24
-      })), loadingStatus === 'failed' && React__default.createElement(Alert, {
-        type: "error",
-        description: "Error connecting server, please reload the app and try again"
-      }), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length > 0 ? React__default.createElement(BlockchainsList, {
-        list: filteredBlockchains,
-        selected: selected,
-        multiSelect: multiSelect,
-        selectedList: selectedList,
-        onChange: onChange
-      }) : React__default.createElement(Alert, {
-        type: "secondary",
-        description: searchedFor + " not found"
-      })));
-    }
+    onBack: onBack
+  }, function (searchedFor) {
+    var filteredBlockchains = filterBlockchains(list, searchedFor);
+    return React__default.createElement(ListContainer$1, {
+      style: listContainerStyle,
+      key: "1"
+    }, loadingStatus === 'loading' && React__default.createElement("div", null, React__default.createElement(Spinner, {
+      size: 24
+    })), loadingStatus === 'failed' && React__default.createElement(Alert, {
+      type: "error"
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, "Error connecting server, please reload the app and try again")), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length > 0 ? React__default.createElement(BlockchainsList, {
+      list: filteredBlockchains,
+      selected: selected,
+      multiSelect: multiSelect,
+      selectedList: selectedList,
+      onChange: onChange
+    }) : React__default.createElement(Alert, {
+      type: "secondary"
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, searchedFor + " not found"))));
   });
 }
 
@@ -2851,6 +2849,7 @@ var StyledSwitchRoot = /*#__PURE__*/styled(RadixSwitch.Root, {
   borderColor: '$neutrals400',
   borderRadius: '99999px',
   position: 'relative',
+  padding: '0',
   cursor: 'pointer',
   '&[data-state="checked"]': {
     backgroundColor: '$primary100'
@@ -2894,6 +2893,7 @@ var groupLiquiditySources = function groupLiquiditySources(liquiditySources) {
 };
 var LiquiditySourceType = /*#__PURE__*/styled(Typography, {
   position: 'sticky',
+  display: 'block',
   top: '0',
   marginTop: '$8',
   marginBottom: '$8',
@@ -2924,15 +2924,18 @@ function LiquiditySourceList(props) {
         return item.title != clickedItem.title;
       });
     });
-    setTimeout(function () {
-      onChange(clickedItem);
-    }, 200);
+    onChange(clickedItem);
   };
   var isSelected = function isSelected(liquiditySource) {
     return !!selected.find(function (item) {
       return liquiditySource.title === item.title;
     });
   };
+  React.useEffect(function () {
+    setSelected(list.filter(function (item) {
+      return item.selected;
+    }));
+  }, [list]);
   return React__default.createElement("div", {
     style: _extends({
       height: '450px'
@@ -3015,15 +3018,13 @@ function LiquiditySourcesSelector(props) {
       return item.selected;
     }) ? 'Clear all' : 'Select all'),
     hasHeader: hasHeader,
-    onBack: onBack,
-    Content: function Content(_ref) {
-      var searchedFor = _ref.searchedFor;
-      return React__default.createElement(LiquiditySourceList, {
-        listContainerStyle: listContainerStyle,
-        list: filterLiquiditySources(list, searchedFor),
-        onChange: onChange
-      });
-    }
+    onBack: onBack
+  }, function (searchedFor) {
+    return React__default.createElement(LiquiditySourceList, {
+      listContainerStyle: listContainerStyle,
+      list: filterLiquiditySources(list, searchedFor),
+      onChange: onChange
+    });
   });
 }
 
@@ -3154,6 +3155,7 @@ var ItemContainer = /*#__PURE__*/styled('div', {
   marginRight: '$8'
 });
 var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
+  padding: '0',
   backgroundColor: '$neutrals300',
   width: '20px',
   height: '20px',
@@ -3217,10 +3219,13 @@ var BaseContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$neutrals200',
   padding: '$16'
 });
+var Title = /*#__PURE__*/styled(Typography, {
+  marginBottom: '$16'
+});
 var SlippageChipsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexWrap: 'wrap',
-  marginTop: '$16'
+  display: 'grid',
+  rowGap: '$16',
+  gridTemplateColumns: 'repeat(auto-fill, 64px)'
 });
 var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
@@ -3229,7 +3234,7 @@ var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   cursor: 'pointer'
 });
 var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
-  marginLeft: '8px'
+  marginLeft: '$8'
 });
 var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3259,7 +3264,7 @@ function Settings(props) {
     setSelectedSlippage(slippage);
     onSlippageChange(slippage);
   };
-  var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Typography, {
+  var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Title, {
     variant: "body1"
   }, "Slippage tolerance per swap"), React__default.createElement(SlippageChipsContainer, null, slippages.map(function (slippage, index) {
     return React__default.createElement(Chip, {
@@ -3291,7 +3296,7 @@ function Settings(props) {
       flexGrow: 'initial',
       borderColor: customSlippage ? '$success' : 'initial'
     }
-  }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Typography, {
+  }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
     variant: "body2"
   }, "Theme"), React__default.createElement(Radio, {
     defaultValue: selectedTheme,
@@ -3316,17 +3321,14 @@ function Settings(props) {
     onClick: onLiquiditySourcesClick
   }, React__default.createElement(Typography, {
     variant: "body1"
-  }, "Liquidity Sources"), React__default.createElement(LiquiditySourceNumber, {
-    onClick: onLiquiditySourcesClick
-  }, React__default.createElement(Typography, {
+  }, "Liquidity Sources"), React__default.createElement(LiquiditySourceNumber, null, React__default.createElement(Typography, {
     variant: "body2"
   }, "( " + selectedLiquiditySources.length + " / " + liquiditySources.length + " )"), React__default.createElement(StyledAngleRight, null))));
   return React__default.createElement(SecondaryPage, {
     title: "Settings",
     textField: false,
-    Content: PageContent,
     onBack: onBack
-  });
+  }, PageContent);
 }
 
 var MainContainer$1 = /*#__PURE__*/styled('div', {
@@ -3340,7 +3342,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',
-  padding: '$16 $24'
+  padding: '$16 $24',
+  boxSizing: 'border-box'
 });
 var ContentContainer$3 = /*#__PURE__*/styled('div', {
   width: '100%'
@@ -3659,18 +3662,16 @@ function TokenSelector(props) {
     textFieldPlaceholder: "Search Blockchain By Name",
     title: "Select " + type + " Token",
     hasHeader: hasHeader,
-    onBack: onBack,
-    Content: function Content(_ref) {
-      var searchedFor = _ref.searchedFor;
-      return React__default.createElement(TokenList, {
-        searchedText: searchedFor,
-        list: list,
-        selected: selected,
-        selectedList: selectedList,
-        multiSelect: multiSelect,
-        onChange: onChange
-      });
-    }
+    onBack: onBack
+  }, function (searchedFor) {
+    return React__default.createElement(TokenList, {
+      searchedText: searchedFor,
+      list: list,
+      selected: selected,
+      selectedList: selectedList,
+      multiSelect: multiSelect,
+      onChange: onChange
+    });
   });
 }
 
@@ -3841,6 +3842,9 @@ function ColorPicker(_ref) {
   })));
 }
 
+var MainContainer$2 = /*#__PURE__*/styled('div', {
+  overflow: 'hidden'
+});
 var Line$2 = /*#__PURE__*/styled('div', {
   width: '0',
   marginLeft: '$12',
@@ -3883,17 +3887,31 @@ var ArrowDown = /*#__PURE__*/styled('div', {
   borderTop: '5px solid $foreground',
   marginLeft: '$8'
 });
+var UpdateIcon = /*#__PURE__*/styled(RetryIcon, {
+  position: 'absolute',
+  right: '0'
+});
+var StyledUpdateIcon = /*#__PURE__*/styled(UpdateIcon, {
+  cursor: 'pointer'
+});
+var BestRouteContainer$1 = /*#__PURE__*/styled('div', {
+  overflow: 'auto'
+});
 var Alerts = /*#__PURE__*/styled('div', {
   paddingBottom: '$16'
 });
-function ConfirmSwap(_ref) {
+function ConfirmSwap(props) {
   var _bestRoute$result;
-  var bestRoute = _ref.bestRoute,
-    onBack = _ref.onBack,
-    onConfirm = _ref.onConfirm,
-    loading = _ref.loading,
-    error = _ref.error,
-    warning = _ref.warning;
+  var bestRoute = props.bestRoute,
+    onRefresh = props.onRefresh,
+    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",
@@ -3903,42 +3921,50 @@ function ConfirmSwap(_ref) {
       fullWidth: true,
       loading: loading,
       variant: "contained",
-      onClick: onConfirm
-    }, "Swap")),
-    Content: 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(React.Fragment, {
-        key: index
-      }, React__default.createElement(Alerts, null, error && React__default.createElement(Alert, {
-        description: error,
-        type: "error"
-      }), warning && React__default.createElement(Alert, {
-        description: warning,
-        type: "warning"
-      })), 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"
-      }, parseFloat(swap.fee[0].amount).toFixed(6), " 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
-      }));
+      onClick: onConfirm,
+      disabled: confirmButtonDisabled
+    }, confirmButtonTitle)),
+    TopButton: React__default.createElement(StyledUpdateIcon, {
+      size: 24,
+      onClick: onRefresh
     })
-  });
+  }, 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(Alert, {
+      type: "error",
+      key: index
+    }, error);
+  }), warnings == null ? void 0 : warnings.map(function (warning, index) {
+    return 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(React.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"
+    }, parseFloat(swap.fee[0].amount).toFixed(6), " 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$1 = /*#__PURE__*/styled('div', {
@@ -3948,63 +3974,66 @@ var Footer$1 = /*#__PURE__*/styled('div', {
 var AlertContainer = /*#__PURE__*/styled('div', {
   padding: '$16 0'
 });
-function ConfirmWallets(_ref) {
+var ConfirmButton = /*#__PURE__*/styled(Button, {
+  marginTop: '$16'
+});
+function ConfirmWallets(props) {
   var _swap$result, _swap$result2, _swap$result3;
-  var onBack = _ref.onBack,
-    loading = _ref.loading,
-    onConfirm = _ref.onConfirm,
-    swap = _ref.swap,
-    requiredWallets = _ref.requiredWallets,
-    selectableWallets = _ref.selectableWallets,
-    onChange = _ref.onChange,
-    confirmDisabled = _ref.confirmDisabled,
-    isExperimentalChain = _ref.isExperimentalChain,
-    handleConnectChain = _ref.handleConnectChain;
+  var onBack = props.onBack,
+    loading = props.loading,
+    onConfirm = props.onConfirm,
+    swap = props.swap,
+    requiredWallets = props.requiredWallets,
+    selectableWallets = props.selectableWallets,
+    onChange = props.onChange,
+    confirmDisabled = props.confirmDisabled,
+    isExperimentalChain = props.isExperimentalChain,
+    handleConnectChain = props.handleConnectChain,
+    fromAmount = props.fromAmount,
+    toAmount = props.toAmount;
   var firstStep = (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
   var lastStep = (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
-  var fromAmount = decimalNumber(firstStep == null ? void 0 : firstStep.fromAmount, 3);
-  var toAmount = decimalNumber(lastStep == null ? void 0 : lastStep.toAmount, 3);
   return React__default.createElement(SecondaryPage, {
     textField: false,
     title: "Confirm Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
       fullWidth: true,
       loading: loading,
       type: "primary",
       variant: "contained",
       onClick: onConfirm,
       disabled: confirmDisabled
-    }, "Confirm")),
-    Content: React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
-      variant: "h6",
-      mb: 12
-    }, "Confirm swap ", fromAmount, " ", lastStep == null ? void 0 : lastStep.from.symbol, " (", firstStep == null ? void 0 : firstStep.from.blockchain, ") to ", toAmount, " ", lastStep == null ? void 0 : lastStep.to.symbol, ' ', "(on ", lastStep == null ? void 0 : lastStep.to.blockchain, ")"), requiredWallets.map(function (wallet, index) {
-      var list = selectableWallets.filter(function (w) {
-        return wallet === w.chain;
-      });
-      return React__default.createElement("div", {
-        key: index
-      }, React__default.createElement(Typography, {
-        variant: "body2",
-        mb: 12,
-        mt: 12
-      }, index + 1, ") Your ", wallet, " Wallet"), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
-        type: "error",
-        description: "You should connect a " + wallet + " supported wallet"
-      })), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
-        variant: "contained",
-        type: "primary",
-        align: "grow",
-        onClick: function onClick() {
-          return handleConnectChain == null ? void 0 : handleConnectChain(wallet);
-        }
-      }, "Add " + wallet + " chain to Cosmos wallets")), list.length != 0 && React__default.createElement(SelectableWalletList, {
-        list: list,
-        onChange: onChange
-      }));
-    }))
-  });
+    }, "Confirm"))
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
+    variant: "h6",
+    mb: 12
+  }, "Confirm swap ", fromAmount, " ", firstStep == null ? void 0 : firstStep.from.symbol, " (", firstStep == null ? void 0 : firstStep.from.blockchain, ") to ", toAmount, " ", lastStep == null ? void 0 : lastStep.to.symbol, " (on", lastStep == null ? void 0 : lastStep.to.blockchain, ")"), requiredWallets.map(function (wallet, index) {
+    var list = selectableWallets.filter(function (w) {
+      return wallet === w.chain;
+    });
+    return React__default.createElement("div", {
+      key: index
+    }, React__default.createElement(Typography, {
+      variant: "body2",
+      mb: 12,
+      mt: 12
+    }, index + 1, ") Your ", wallet, " Wallet"), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
+      type: "error"
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, "You should connect a " + wallet + " supported wallet"))), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+      variant: "contained",
+      type: "primary",
+      align: "grow",
+      onClick: function onClick() {
+        return handleConnectChain == null ? void 0 : handleConnectChain(wallet);
+      }
+    }, "Add " + wallet + " chain to Cosmos wallets")), list.length != 0 && React__default.createElement(SelectableWalletList, {
+      list: list,
+      onChange: onChange
+    }));
+  })));
 }
 
 function groupingOfSwaps(list) {
@@ -4075,17 +4104,15 @@ function History(_ref) {
     onBack: onBack,
     textField: true,
     textFieldPlaceholder: "Search By Blockchain Or Token",
-    title: "History",
-    Content: function Content(_ref2) {
-      var searchedFor = _ref2.searchedFor;
-      var filterSwaps = filteredHistory(list, searchedFor);
-      return filterSwaps.length ? React__default.createElement(SwapsGroup, {
-        list: filterSwaps,
-        onSwapClick: onSwapClick
-      }) : React__default.createElement(BodyError, null, React__default.createElement(ErrorMsg$1, {
-        variant: "caption"
-      }, "Not Found"));
-    }
+    title: "History"
+  }, function (searchedFor) {
+    var filterSwaps = filteredHistory(list, searchedFor);
+    return filterSwaps.length ? React__default.createElement(SwapsGroup, {
+      list: filterSwaps,
+      onSwapClick: onSwapClick
+    }) : React__default.createElement(BodyError, null, React__default.createElement(ErrorMsg$1, {
+      variant: "caption"
+    }, "Not Found"));
   });
 }
 
@@ -4124,55 +4151,54 @@ function SwapHistory(props) {
   return React__default.createElement(SecondaryPage, {
     title: "History",
     textField: false,
-    onBack: onBack,
-    Content: React__default.createElement(React__default.Fragment, null, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
-      return React__default.createElement(React.Fragment, {
+    onBack: onBack
+  }, React__default.createElement(React__default.Fragment, null, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+    return React__default.createElement(React.Fragment, {
+      key: index
+    }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
+      logo: step.fromLogo,
+      symbol: step.fromSymbol,
+      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,
+      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,
+      variant: "caption"
+    }, 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) {
+      return React__default.createElement(InternalDetail, {
         key: index
-      }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
-        logo: step.fromLogo,
-        symbol: step.fromSymbol,
-        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,
-        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,
-        variant: "caption"
-      }, "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) {
-        return React__default.createElement(InternalDetail, {
-          key: index
-        }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
-          color: "success"
-        }), 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, {
-          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, {
-        color: "error"
-      }), React__default.createElement(Error, {
+      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
+        color: "success"
+      }), React__default.createElement(Description, {
         variant: "body2"
-      }, "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,
-        blockchain: step.toBlockchain,
-        amount: step.outputAmount
-      }));
-    }))
-  });
+      }, !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, {
+        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, {
+      color: "error"
+    }), React__default.createElement(Error, {
+      variant: "body2"
+    }, "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,
+      blockchain: step.toBlockchain,
+      amount: step.outputAmount
+    }));
+  })));
 }
 
 exports.AddCircleIcon = AddCircleIcon;