@rango-dev/ui 0.1.12 → 0.1.13-next.2

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useCopyToClipboard } from './useCopyToClipboard';

package/dist/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1 @@
+export declare function useCopyToClipboard(resetInterval?: number): readonly [boolean, (text: string | number) => void];

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './components';
 export * from './containers';
 export * from './theme';
 export * from './types';
+export * from './hooks';

package/dist/ui.cjs.development.js

@@ -16,6 +16,7 @@ var walletsShared = require('@rango-dev/wallets-shared');
 var RadixSwitch = require('@radix-ui/react-switch');
 var RadioGroup = require('@radix-ui/react-radio-group');
 var reactColor = require('react-color');
+var copy = _interopDefault(require('copy-to-clipboard'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -555,9 +556,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), React.createElement("path", {
@@ -624,9 +625,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"
@@ -866,9 +867,9 @@ var ChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRe
     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
@@ -893,9 +894,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), React.createElement("line", {
@@ -1063,9 +1064,9 @@ var RetryIcon = /*#__PURE__*/React.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
@@ -1282,9 +1283,9 @@ var DisconnectIcon = /*#__PURE__*/React.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
@@ -2664,12 +2665,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'
       }
     },
@@ -2710,7 +2720,6 @@ var Input = /*#__PURE__*/styled('input', {
   border: 'none',
   borderRadius: '$5',
   outline: 'none',
-  fontSize: '$l',
   backgroundColor: 'transparent',
   '-webkit-appearance': 'none',
   margin: 0,
@@ -3224,9 +3233,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, {
@@ -3266,8 +3275,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);
@@ -3447,7 +3456,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',
@@ -3734,7 +3746,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",
@@ -4102,6 +4114,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": {
@@ -4139,6 +4170,9 @@ var TokenContainer = /*#__PURE__*/styled('div', {
 });
 var TokenImage = /*#__PURE__*/styled('div', {
   position: 'relative',
+  'img': {
+    borderRadius: '50%'
+  },
   '.overlay': {
     position: 'absolute',
     right: -4,
@@ -4497,7 +4531,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",
@@ -4508,7 +4544,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",
@@ -4567,15 +4605,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
@@ -4608,7 +4647,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);
@@ -4661,7 +4700,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"
@@ -4944,6 +4985,28 @@ function SwapHistory(props) {
   }));
 }
 
+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];
+}
+
 exports.AddCircleIcon = AddCircleIcon;
 exports.AddIcon = AddIcon;
 exports.AddWalletIcon = AddWalletIcon;
@@ -5027,4 +5090,5 @@ exports.globalCss = globalCss;
 exports.keyframes = keyframes;
 exports.lightTheme = lightTheme;
 exports.styled = styled;
+exports.useCopyToClipboard = useCopyToClipboard;
 //# sourceMappingURL=ui.cjs.development.js.map