@rango-dev/ui 0.1.12 → 0.1.13

package/dist/ui.esm.js

@@ -9,6 +9,7 @@ import { detectInstallLink } from '@rango-dev/wallets-shared';
 import { Root as Root$2, Thumb } from '@radix-ui/react-switch';
 import { Root as Root$3, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
 import { ChromePicker } from 'react-color';
+import copy from 'copy-to-clipboard';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -548,9 +549,9 @@ var HistoryIcon = function HistoryIcon(_ref) {
     color: color,
     fill: "none",
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
   }, props), createElement("path", {
@@ -617,9 +618,9 @@ var SettingsIcon = function SettingsIcon(_ref) {
     viewBox: "0 0 24 24",
     color: color,
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
@@ -859,9 +860,9 @@ var ChevronRightIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     className: "_icon"
   }, props, {
     ref: forwardedRef
@@ -886,9 +887,9 @@ var ArrowRightIcon = function ArrowRightIcon(_ref) {
     color: color,
     fill: "none",
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     xmlns: "http://www.w3.org/2000/svg",
     className: "_icon"
   }, props), createElement("line", {
@@ -1056,9 +1057,9 @@ var RetryIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     className: "_icon"
   }, props, {
     ref: forwardedRef
@@ -1275,9 +1276,9 @@ var DisconnectIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     className: "_icon"
   }, props, {
     ref: forwardedRef
@@ -2657,12 +2658,21 @@ var InputContainer = /*#__PURE__*/styled('div', {
   variants: {
     size: {
       small: {
+        '& input': {
+          fontSize: '$14'
+        },
         height: '$32'
       },
       medium: {
+        '& input': {
+          fontSize: '$15'
+        },
         height: '$40'
       },
       large: {
+        '& input': {
+          fontSize: '$16'
+        },
         height: '$48'
       }
     },
@@ -2703,7 +2713,6 @@ var Input = /*#__PURE__*/styled('input', {
   border: 'none',
   borderRadius: '$5',
   outline: 'none',
-  fontSize: '$l',
   backgroundColor: 'transparent',
   '-webkit-appearance': 'none',
   margin: 0,
@@ -3217,9 +3226,9 @@ function TokenSelector(props) {
   return React__default.createElement(SecondaryPage, {
     textField: true,
     hasHeader: hasHeader,
-    title: "Select " + type + " Token",
+    title: "Select " + type + " token",
     onBack: onBack,
-    textFieldPlaceholder: "Search Token By Name"
+    textFieldPlaceholder: "Search tokens by name"
   }, function (searchedFor) {
     var filteredTokens = filterTokens(list, searchedFor);
     return loadingStatus === 'loading' ? React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
@@ -3259,8 +3268,8 @@ function BlockchainSelector(props) {
   return React__default.createElement(SecondaryPage, {
     textField: true,
     hasHeader: hasHeader,
-    textFieldPlaceholder: "Search Blockchain By Name",
-    title: "Select " + type + " Network",
+    textFieldPlaceholder: "Search blockchains by name",
+    title: "Select " + type + " Blockchain",
     onBack: onBack
   }, function (searchedFor) {
     var filteredBlockchains = filterBlockchains(list, searchedFor);
@@ -3441,7 +3450,10 @@ var State = function State(_ref) {
 };
 
 var WalletImageContainer = /*#__PURE__*/styled('div', {
-  paddingRight: '$12'
+  paddingRight: '$12',
+  '& img': {
+    borderRadius: '50%'
+  }
 });
 var Text = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3728,7 +3740,7 @@ function LiquiditySourcesSelector(props) {
     loadingStatus = props.loadingStatus;
   return React__default.createElement(SecondaryPage, {
     textField: true,
-    textFieldPlaceholder: "Search By Name",
+    textFieldPlaceholder: "Search by name",
     title: "Liquidity Sources",
     TopButton: React__default.createElement(Button, {
       variant: "ghost",
@@ -4096,6 +4108,25 @@ var MainContainer$2 = /*#__PURE__*/styled('div', {
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
+  overflow: 'hidden',
+  '& *': {
+    boxSizing: 'border-box',
+    listStyleType: 'none',
+    '&::-webkit-scrollbar': {
+      width: '$8',
+      height: '$8'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '$neutrals400',
+      borderRadius: '$10'
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: '$neutrals500'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '$neutrals300'
+    }
+  },
   variants: {
     fixedHeight: {
       "true": {
@@ -4133,6 +4164,9 @@ var TokenContainer = /*#__PURE__*/styled('div', {
 });
 var TokenImage = /*#__PURE__*/styled('div', {
   position: 'relative',
+  'img': {
+    borderRadius: '50%'
+  },
   '.overlay': {
     position: 'absolute',
     right: -4,
@@ -4491,7 +4525,9 @@ function ConfirmSwap(props) {
       disabled: confirmDisabled
     }, confirmButtonTitle))
   }, React__default.createElement(MainContainer$3, 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(React__default.Fragment, null, React__default.createElement(Spacer, {
+    return React__default.createElement(React__default.Fragment, {
+      key: index
+    }, React__default.createElement(Spacer, {
       direction: "vertical"
     }), React__default.createElement(Alert, Object.assign({
       type: "error",
@@ -4502,7 +4538,9 @@ function ConfirmSwap(props) {
       children: error
     })));
   }), warnings == null ? void 0 : warnings.map(function (warning, index) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+    return React__default.createElement(React__default.Fragment, {
+      key: index
+    }, React__default.createElement(Spacer, {
       direction: "vertical"
     }), React__default.createElement(Alert, Object.assign({
       type: "warning",
@@ -4561,15 +4599,16 @@ function SwapsGroup(props) {
   return React__default.createElement(React__default.Fragment, null, groups.filter(function (group) {
     return group.swaps.length > 0;
   }).map(function (group, index) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Group, {
+    return React__default.createElement(React__default.Fragment, {
       key: index
-    }, React__default.createElement(Typography, {
+    }, React__default.createElement(Group, null, React__default.createElement(Typography, {
       variant: "body2",
       color: "neutrals600",
       className: "group-title"
-    }, group.title), group.swaps.map(function (swap, index) {
-      return React__default.createElement(React__default.Fragment, null, React__default.createElement(SwapDetail, {
-        key: index,
+    }, group.title), group.swaps.map(function (swap) {
+      return React__default.createElement(React__default.Fragment, {
+        key: swap.requestId
+      }, React__default.createElement(SwapDetail, {
         swap: swap,
         status: swap.status,
         onClick: onSwapClick
@@ -4602,7 +4641,7 @@ function History(props) {
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
-    textFieldPlaceholder: "Search by Network, Token or Request ID",
+    textFieldPlaceholder: "Search by blockchain, token or request Id",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
@@ -4655,7 +4694,9 @@ var SwapMessages = function SwapMessages(props) {
     footer: React__default.createElement(Button, {
       variant: 'outlined',
       type: "primary",
-      onClick: props.switchNetwork
+      onClick: function onClick() {
+        (props == null ? void 0 : props.switchNetwork) && props.switchNetwork()["catch"](function () {});
+      }
     }, "Change network to ", currentStepBlockchain)
   }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
     variant: "body2"
@@ -4938,5 +4979,27 @@ function SwapHistory(props) {
   }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+function useCopyToClipboard(resetInterval) {
+  var _React$useState = React__default.useState(false),
+    isCopied = _React$useState[0],
+    setCopied = _React$useState[1];
+  var handleCopy = React__default.useCallback(function (text) {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+  React__default.useEffect(function () {
+    var timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(function () {
+        return setCopied(false);
+      }, resetInterval);
+    }
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+  return [isCopied, handleCopy];
+}
+
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled, useCopyToClipboard };
 //# sourceMappingURL=ui.esm.js.map