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

package/dist/ui.esm.js

@@ -1,4 +1,4 @@
-import React__default, { forwardRef, createElement, useState, Fragment, useEffect, useRef } from 'react';
+import React__default, { createElement, forwardRef, Fragment, useState, useEffect, useRef } from 'react';
 import { Indicator, Root } from '@radix-ui/react-checkbox';
 import { createPortal } from 'react-dom';
 import { detectInstallLink } from '@rango-dev/wallets-shared';
@@ -250,7 +250,7 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
 });
 
 var _excluded = ["size", "color"];
-var DeleteCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var DeleteCircleIcon = function DeleteCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -269,13 +269,13 @@ var DeleteCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 DeleteCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$1 = ["size", "color"];
-var CheckSquareIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var CheckSquareIcon = function CheckSquareIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -299,13 +299,13 @@ var CheckSquareIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 CheckSquareIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$2 = ["size", "color"];
-var AddIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var AddIcon = function AddIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -324,13 +324,13 @@ var AddIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AddIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$3 = ["size", "color"];
-var InfoCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var InfoCircleIcon = function InfoCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -356,13 +356,13 @@ var InfoCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinejoin: "round",
     stroke: "#fff"
   }));
-});
+};
 InfoCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$4 = ["size", "color"];
-var AddCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var AddCircleIcon = function AddCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -381,13 +381,13 @@ var AddCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AddCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$5 = ["size", "color"];
-var MinusCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var MinusCircleIcon = function MinusCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -406,13 +406,13 @@ var MinusCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 MinusCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$6 = ["size", "color"];
-var CheckCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var CheckCircleIcon = function CheckCircleIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -438,13 +438,13 @@ var CheckCircleIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinejoin: "round",
     stroke: "#fff"
   }));
-});
+};
 CheckCircleIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$7 = ["size", "color"];
-var CheckIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var CheckIcon = function CheckIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -462,13 +462,13 @@ var CheckIcon = /*#__PURE__*/forwardRef(function (_ref) {
     fillRule: "evenodd",
     clipRule: "evenodd"
   }));
-});
+};
 CheckIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$8 = ["size", "color"];
-var BanIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var BanIcon = function BanIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -488,13 +488,13 @@ var BanIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 BanIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$9 = ["size", "color"];
-var WarningIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var WarningIcon = function WarningIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -518,13 +518,13 @@ var WarningIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 WarningIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$a = ["size", "color"];
-var HistoryIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var HistoryIcon = function HistoryIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -550,13 +550,13 @@ var HistoryIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var GasIcon = function GasIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -580,13 +580,13 @@ var GasIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 GasIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$c = ["size", "color"];
-var SettingsIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var SettingsIcon = function SettingsIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -612,13 +612,13 @@ var SettingsIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SettingsIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$d = ["size", "color"];
-var TrashIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var TrashIcon = function TrashIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -637,13 +637,13 @@ var TrashIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 TrashIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$e = ["size", "color"];
-var SearchMinusIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var SearchMinusIcon = function SearchMinusIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -662,13 +662,13 @@ var SearchMinusIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SearchMinusIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$f = ["size", "color"];
-var SearchIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var SearchIcon = function SearchIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -687,13 +687,13 @@ var SearchIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 SearchIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$g = ["size", "color"];
-var AngleRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var AngleRightIcon = function AngleRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -713,13 +713,13 @@ var AngleRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleRightIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$h = ["size", "color"];
-var AngleUpIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var AngleUpIcon = function AngleUpIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -739,18 +739,18 @@ var AngleUpIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleUpIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$i = ["size", "color"];
-var AngleDownIcon = /*#__PURE__*/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 createElement(SvgWithStrokeColor, Object.assign({
+  return React__default.createElement(SvgWithStrokeColor, Object.assign({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
@@ -758,20 +758,20 @@ var AngleDownIcon = /*#__PURE__*/forwardRef(function (_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
-  }, props), 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__*/forwardRef(function (_ref) {
+var AngleLeftIcon = function AngleLeftIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -791,13 +791,13 @@ var AngleLeftIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 AngleDownIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$k = ["size", "color"];
-var DownloadIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var DownloadIcon = function DownloadIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -821,13 +821,13 @@ var DownloadIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 DownloadIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$l = ["size", "color"];
-var RetryRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var RetryRightIcon = function RetryRightIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -846,13 +846,13 @@ var RetryRightIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 RetryRightIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$m = ["size", "color"];
-var RetryLeftIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var RetryLeftIcon = function RetryLeftIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -871,13 +871,13 @@ var RetryLeftIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 RetryLeftIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$n = ["size", "color"];
-var TryAgainIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var TryAgainIcon = function TryAgainIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -896,13 +896,13 @@ var TryAgainIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 TryAgainIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$o = ["size", "color"];
-var VerticalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var VerticalSwapIcon = function VerticalSwapIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -927,13 +927,13 @@ var VerticalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 VerticalSwapIcon.toString = function () {
   return '._icon';
 };
 
 var _excluded$p = ["size", "color"];
-var HorizontalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var HorizontalSwapIcon = function HorizontalSwapIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -958,7 +958,7 @@ var HorizontalSwapIcon = /*#__PURE__*/forwardRef(function (_ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
-});
+};
 HorizontalSwapIcon.toString = function () {
   return '._icon';
 };
@@ -991,7 +991,7 @@ RetryIcon.toString = function () {
 };
 
 var _excluded$r = ["size", "color"];
-var WalletIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var WalletIcon = function WalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1017,13 +1017,13 @@ var WalletIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var AddWalletIcon = function AddWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1057,13 +1057,13 @@ var AddWalletIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var DeleteWalletIcon = function DeleteWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1097,13 +1097,13 @@ var DeleteWalletIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var CheckWalletIcon = function CheckWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1133,13 +1133,13 @@ var CheckWalletIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var SwapWalletIcon = function SwapWalletIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1173,13 +1173,13 @@ var SwapWalletIcon = /*#__PURE__*/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__*/forwardRef(function (_ref) {
+var BagIcon = function BagIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1208,7 +1208,7 @@ var BagIcon = /*#__PURE__*/forwardRef(function (_ref) {
     fill: color,
     d: "M0 0h32v32H0z"
   }))));
-});
+};
 BagIcon.toString = function () {
   return '._icon';
 };
@@ -1251,7 +1251,7 @@ CloseIcon.toString = function () {
 };
 
 var _excluded$y = ["size", "color"];
-var SignatureIcon = /*#__PURE__*/forwardRef(function (_ref) {
+var SignatureIcon = function SignatureIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     color = _ref.color,
@@ -1271,7 +1271,7 @@ var SignatureIcon = /*#__PURE__*/forwardRef(function (_ref) {
       clipRule: 'evenodd'
     }
   }));
-});
+};
 SignatureIcon.toString = function () {
   return '._icon';
 };
@@ -1280,6 +1280,7 @@ var _excluded$z = ["children"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
+  display: 'inline-block',
   variants: {
     variant: {
       h1: {
@@ -1821,7 +1822,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(Fragment, {
+      key: index
+    }, index === 0 && React__default.createElement(RelativeContainer, null, React__default.createElement(StepDetail, {
       direction: "vertical",
       logo: swap.from.logo,
       symbol: swap.from.symbol,
@@ -2427,7 +2430,7 @@ var MainContainer = /*#__PURE__*/styled('div', {
         backgroundColor: '$success300'
       },
       warning: {
-        backgroundColor: '$warning300'
+        backgroundColor: '$warning500'
       },
       error: {
         backgroundColor: '$error300'
@@ -2445,6 +2448,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,
@@ -2456,13 +2462,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)));
 }
@@ -3016,7 +3023,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,
@@ -3111,7 +3119,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
@@ -3184,8 +3192,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, {
@@ -3730,6 +3740,9 @@ var TooltipArrow = /*#__PURE__*/styled(Arrow$1, {
     }
   }
 });
+var ChildrenWrapper = /*#__PURE__*/styled('div', {
+  display: 'inline-block'
+});
 function Tooltip(_ref) {
   var children = _ref.children,
     content = _ref.content,
@@ -3737,7 +3750,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(Provider, null, React__default.createElement(Root$3, null, React__default.createElement(TooltipTrigger, null, children), React__default.createElement(Portal, null, React__default.createElement(TooltipContent, {
+  return React__default.createElement(Provider, null, React__default.createElement(Root$3, null, React__default.createElement(TooltipTrigger, {
+    asChild: true
+  }, React__default.createElement(ChildrenWrapper, null, children)), React__default.createElement(Portal, null, React__default.createElement(TooltipContent, {
     color: color,
     side: side,
     sideOffset: 5
@@ -3886,7 +3901,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(Fragment, {
+        key: index
+      }, React__default.createElement(Alerts, null, error && React__default.createElement(Alert, {
         description: error,
         type: "error"
       }), warning && React__default.createElement(Alert, {
@@ -3941,7 +3958,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,
@@ -4019,11 +4036,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
@@ -4091,7 +4111,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(Fragment, {
+        key: index
+      }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
         logo: step.fromLogo,
         symbol: step.fromSymbol,
         chainLogo: step.fromBlockchainLogo,
@@ -4111,7 +4133,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"