@rango-dev/ui 0.1.10-next.74 → 0.1.10-next.76

package/dist/ui.cjs.development.js

@@ -257,7 +257,7 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
 });
 
 var _excluded = ["size", "color"];
-var DeleteCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var DeleteCircleIcon = function DeleteCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -276,13 +276,13 @@ var DeleteCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 DeleteCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$1 = ["size", "color"];
-var CheckSquareIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var CheckSquareIcon = function CheckSquareIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -306,13 +306,13 @@ var CheckSquareIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 CheckSquareIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$2 = ["size", "color"];
-var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AddIcon = function AddIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -331,13 +331,13 @@ var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AddIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$3 = ["size", "color"];
-var InfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var InfoCircleIcon = function InfoCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -363,13 +363,13 @@ var InfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinejoin: "round",
     stroke: "#fff"
   }));
-});
+};
 InfoCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$4 = ["size", "color"];
-var AddCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AddCircleIcon = function AddCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -388,13 +388,13 @@ var AddCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AddCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$5 = ["size", "color"];
-var MinusCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var MinusCircleIcon = function MinusCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -413,13 +413,13 @@ var MinusCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 MinusCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$6 = ["size", "color"];
-var CheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var CheckCircleIcon = function CheckCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -445,13 +445,13 @@ var CheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinejoin: "round",
     stroke: "#fff"
   }));
-});
+};
 CheckCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$7 = ["size", "color"];
-var CheckIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var CheckIcon = function CheckIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -469,13 +469,13 @@ var CheckIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     fillRule: "evenodd",
     clipRule: "evenodd"
   }));
-});
+};
 CheckIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$8 = ["size", "color"];
-var BanIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var BanIcon = function BanIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -495,13 +495,13 @@ var BanIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 BanIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$9 = ["size", "color"];
-var WarningIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var WarningIcon = function WarningIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -525,13 +525,13 @@ var WarningIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 WarningIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$a = ["size", "color"];
-var HistoryIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var HistoryIcon = function HistoryIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -557,13 +557,13 @@ var HistoryIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
   }));
-});
+};
 HistoryIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$b = ["size", "color"];
-var GasIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var GasIcon = function GasIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -587,13 +587,13 @@ var GasIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 GasIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$c = ["size", "color"];
-var SettingsIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var SettingsIcon = function SettingsIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -619,13 +619,13 @@ var SettingsIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SettingsIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$d = ["size", "color"];
-var TrashIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var TrashIcon = function TrashIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -644,13 +644,13 @@ var TrashIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 TrashIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$e = ["size", "color"];
-var SearchMinusIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var SearchMinusIcon = function SearchMinusIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -669,13 +669,13 @@ var SearchMinusIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SearchMinusIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$f = ["size", "color"];
-var SearchIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var SearchIcon = function SearchIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -694,13 +694,13 @@ var SearchIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SearchIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$g = ["size", "color"];
-var AngleRightIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AngleRightIcon = function AngleRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -720,13 +720,13 @@ var AngleRightIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleRightIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$h = ["size", "color"];
-var AngleUpIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AngleUpIcon = function AngleUpIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -746,18 +746,18 @@ var AngleUpIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleUpIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$i = ["size", "color"];
-var AngleDownIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AngleDownIcon = function AngleDownIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
-  return React.createElement(SvgWithStrokeColor, Object.assign({
+  return React__default.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
@@ -765,20 +765,20 @@ var AngleDownIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
-  }, props), React.createElement("path", {
+  }, props), React__default.createElement("path", {
     d: "m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95",
     strokeWidth: 1.5,
     strokeMiterlimit: 10,
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleDownIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$j = ["size", "color"];
-var AngleLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AngleLeftIcon = function AngleLeftIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -798,13 +798,13 @@ var AngleLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleDownIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$k = ["size", "color"];
-var DownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var DownloadIcon = function DownloadIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -828,13 +828,13 @@ var DownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 DownloadIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$l = ["size", "color"];
-var RetryRightIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var RetryRightIcon = function RetryRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -853,13 +853,13 @@ var RetryRightIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 RetryRightIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$m = ["size", "color"];
-var RetryLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var RetryLeftIcon = function RetryLeftIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -878,13 +878,13 @@ var RetryLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 RetryLeftIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$n = ["size", "color"];
-var TryAgainIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var TryAgainIcon = function TryAgainIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -903,13 +903,13 @@ var TryAgainIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 TryAgainIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$o = ["size", "color"];
-var VerticalSwapIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var VerticalSwapIcon = function VerticalSwapIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -934,13 +934,13 @@ var VerticalSwapIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 VerticalSwapIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$p = ["size", "color"];
-var HorizontalSwapIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var HorizontalSwapIcon = function HorizontalSwapIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -965,7 +965,7 @@ var HorizontalSwapIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 HorizontalSwapIcon.toString = function () {
   return '._icon';
 };
@@ -998,7 +998,7 @@ RetryIcon.toString = function () {
 };
 
 var _excluded$r = ["size", "color"];
-var WalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var WalletIcon = function WalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1024,13 +1024,13 @@ var WalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M4.5 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Z"
   }));
-});
+};
 WalletIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$s = ["size", "color"];
-var AddWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var AddWalletIcon = function AddWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1064,13 +1064,13 @@ var AddWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M5.309 15.475a.75.75 0 0 1 .75.75v2.99a.75.75 0 0 1-1.5 0v-2.99a.75.75 0 0 1 .75-.75Z"
   }));
-});
+};
 AddWalletIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$t = ["size", "color"];
-var DeleteWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var DeleteWalletIcon = function DeleteWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1104,13 +1104,13 @@ var DeleteWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M6.948 16.136a.75.75 0 0 1-.002 1.06l-2.12 2.11a.75.75 0 0 1-1.058-1.063l2.12-2.11a.75.75 0 0 1 1.06.003Z"
   }));
-});
+};
 DeleteWalletIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$u = ["size", "color"];
-var CheckWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var CheckWalletIcon = function CheckWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1140,13 +1140,13 @@ var CheckWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M7.538 16.215a.75.75 0 0 1-.042 1.06l-2.13 1.97a.75.75 0 0 1-1.04-.02l-.99-.99a.75.75 0 1 1 1.062-1.06l.48.48 1.6-1.48a.75.75 0 0 1 1.06.04Z"
   }));
-});
+};
 CheckWalletIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$v = ["size", "color"];
-var SwapWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var SwapWalletIcon = function SwapWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1180,13 +1180,13 @@ var SwapWalletIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     clipRule: "evenodd",
     d: "M6.735 18.735a.75.75 0 0 1 1.061 0l1.22 1.22a.75.75 0 0 1 0 1.061l-1.22 1.22a.75.75 0 1 1-1.06-1.06l.689-.69-.69-.69a.75.75 0 0 1 0-1.06Z"
   }));
-});
+};
 SwapWalletIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$w = ["size", "color"];
-var BagIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var BagIcon = function BagIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1215,7 +1215,7 @@ var BagIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
     fill: color,
     d: "M0 0h32v32H0z"
   }))));
-});
+};
 BagIcon.toString = function () {
   return '._icon';
 };
@@ -1258,7 +1258,7 @@ CloseIcon.toString = function () {
 };
 
 var _excluded$y = ["size", "color"];
-var SignatureIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
+var SignatureIcon = function SignatureIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1278,7 +1278,7 @@ var SignatureIcon = /*#__PURE__*/React.forwardRef(function (_ref) {
       clipRule: 'evenodd'
     }
   }));
-});
+};
 SignatureIcon.toString = function () {
   return '._icon';
 };
@@ -1287,6 +1287,7 @@ var _excluded$z = ["children"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
+  display: 'inline-block',
   variants: {
     variant: {
       h1: {
@@ -1828,7 +1829,9 @@ function BestRoute(_ref) {
     variant: "caption"
   }, error), !!data && ((_data$result = data.result) == null ? void 0 : _data$result.swaps.map(function (swap, index) {
     var _data$result2;
-    return React__default.createElement(React__default.Fragment, null, index === 0 && React__default.createElement(RelativeContainer, null, React__default.createElement(StepDetail, {
+    return React__default.createElement(React.Fragment, {
+      key: index
+    }, index === 0 && React__default.createElement(RelativeContainer, null, React__default.createElement(StepDetail, {
       direction: "vertical",
       logo: swap.from.logo,
       symbol: swap.from.symbol,
@@ -2434,7 +2437,7 @@ var MainContainer = /*#__PURE__*/styled('div', {
         backgroundColor: '$success300'
       },
       warning: {
-        backgroundColor: '$warning300'
+        backgroundColor: '$warning500'
       },
       error: {
         backgroundColor: '$error300'
@@ -2452,6 +2455,9 @@ var TitleContainer = /*#__PURE__*/styled('div', {
 var IconContainer = /*#__PURE__*/styled('div', {
   marginRight: '$24'
 });
+var StyledTypography = /*#__PURE__*/styled(Typography, {
+  color: darkTheme.colors.foreground.value
+});
 function Alert(props) {
   var type = props.type,
     description = props.description,
@@ -2463,13 +2469,14 @@ function Alert(props) {
     color: "success",
     size: 28
   }), type === 'warning' && React__default.createElement(WarningIcon, {
+    color: "white",
     size: 28
   }), type === 'error' && React__default.createElement(InfoCircleIcon, {
     color: "error",
     size: 28
-  })), React__default.createElement(ContentContainer$1, null, title && React__default.createElement(TitleContainer, null, React__default.createElement(Typography, {
+  })), React__default.createElement(ContentContainer$1, null, title && React__default.createElement(TitleContainer, null, React__default.createElement(StyledTypography, {
     variant: "h6"
-  }, title)), React__default.createElement(Typography, {
+  }, title)), React__default.createElement(StyledTypography, {
     variant: "body2"
   }, description)));
 }
@@ -3022,7 +3029,8 @@ function LiquiditySourcesSelector(props) {
 
 var Row$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  flexWrap: 'wrap'
+  flexWrap: 'wrap',
+  justifyContent: 'center'
 });
 var Circle = /*#__PURE__*/styled('div', {
   width: 12,
@@ -3117,7 +3125,7 @@ function SelectableWalletList(_ref) {
       height: 24
     }), React__default.createElement(Typography, {
       variant: "body2"
-    }, w.walletType), React__default.createElement(Circle, {
+    }, w.name), React__default.createElement(Circle, {
       checked: checked
     }, React__default.createElement(SolidCircle, {
       checked: checked
@@ -3190,8 +3198,10 @@ function Radio(props) {
     defaultValue: defaultValue,
     direction: direction,
     style: style
-  }, props.options.map(function (option) {
-    return React__default.createElement(ItemContainer, null, React__default.createElement(StyledItem, {
+  }, props.options.map(function (option, index) {
+    return React__default.createElement(ItemContainer, {
+      key: index
+    }, React__default.createElement(StyledItem, {
       value: option.value,
       id: option.value
     }, React__default.createElement(StyledIndicator, null)), React__default.createElement(Label$2, {
@@ -3736,6 +3746,9 @@ var TooltipArrow = /*#__PURE__*/styled(RadixTooltip.Arrow, {
     }
   }
 });
+var ChildrenWrapper = /*#__PURE__*/styled('div', {
+  display: 'inline-block'
+});
 function Tooltip(_ref) {
   var children = _ref.children,
     content = _ref.content,
@@ -3743,7 +3756,9 @@ function Tooltip(_ref) {
     side = _ref$side === void 0 ? 'top' : _ref$side,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'gray' : _ref$color;
-  return React__default.createElement(RadixTooltip.Provider, null, React__default.createElement(RadixTooltip.Root, null, React__default.createElement(TooltipTrigger, null, children), React__default.createElement(RadixTooltip.Portal, null, React__default.createElement(TooltipContent, {
+  return React__default.createElement(RadixTooltip.Provider, null, React__default.createElement(RadixTooltip.Root, null, React__default.createElement(TooltipTrigger, {
+    asChild: true
+  }, React__default.createElement(ChildrenWrapper, null, children)), React__default.createElement(RadixTooltip.Portal, null, React__default.createElement(TooltipContent, {
     color: color,
     side: side,
     sideOffset: 5
@@ -3892,7 +3907,9 @@ function ConfirmSwap(_ref) {
     }, "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__default.Fragment, null, React__default.createElement(Alerts, null, error && React__default.createElement(Alert, {
+      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, {
@@ -3947,7 +3964,7 @@ function ConfirmWallets(_ref) {
   var toAmount = decimalNumber(lastStep == null ? void 0 : lastStep.toAmount, 3);
   return React__default.createElement(SecondaryPage, {
     textField: false,
-    title: "Swap",
+    title: "Confirm Swap",
     onBack: onBack,
     Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
       fullWidth: true,
@@ -4025,11 +4042,14 @@ var SwapsGroup = function SwapsGroup(props) {
   var list = props.list,
     onSwapClick = props.onSwapClick;
   var swapsInGroup = groupingOfSwaps(list);
-  return React__default.createElement(React__default.Fragment, null, swapsInGroup.map(function (group) {
-    return React__default.createElement(Group, null, React__default.createElement(GroupTitle, {
+  return React__default.createElement(React__default.Fragment, null, swapsInGroup.map(function (group, index) {
+    return React__default.createElement(Group, {
+      key: index
+    }, React__default.createElement(GroupTitle, {
       variant: "body2"
-    }, group.title), group.swaps.map(function (swap) {
+    }, group.title), group.swaps.map(function (swap, index) {
       return React__default.createElement(SwapDetail, {
+        key: index,
         swap: swap,
         status: swap.status,
         onClick: onSwapClick
@@ -4097,7 +4117,9 @@ function SwapHistory(props) {
     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__default.Fragment, null, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
+      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,
@@ -4117,7 +4139,9 @@ function SwapHistory(props) {
           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, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
+        return React__default.createElement(InternalDetail, {
+          key: index
+        }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
           color: "success"
         }), React__default.createElement(Description, {
           variant: "body2"