@rango-dev/ui 0.1.10-next.69 → 0.1.10-next.71

package/dist/ui.esm.js

@@ -8,6 +8,7 @@ import { VariableSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Provider, Root as Root$3, Portal, Trigger, Content as Content$1, Arrow as Arrow$1 } from '@radix-ui/react-tooltip';
+import { ChromePicker } from 'react-color';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1568,7 +1569,7 @@ var decimalNumber = function decimalNumber(number, toFixed) {
   return parseFloat(number).toFixed(toFixed);
 };
 var containsText = function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+  return text.toLowerCase().includes(searchText.toLowerCase());
 };
 
 var waveSquares = /*#__PURE__*/keyframes({
@@ -1843,10 +1844,6 @@ function BestRoute(_ref) {
   }, "No routes found")));
 }
 
-var containsText$1 = function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-};
-
 var _excluded$A = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3, _css4;
 var ButtonContainer = /*#__PURE__*/styled('button', {
@@ -2216,7 +2213,9 @@ var Image = /*#__PURE__*/styled('img', {
 });
 function BlockchainsList(props) {
   var list = props.list,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   var _useState = useState(props.selected),
     selected = _useState[0],
     setSelected = _useState[1];
@@ -2224,15 +2223,23 @@ function BlockchainsList(props) {
     setSelected(blockchain);
     onChange(blockchain);
   };
+  var isSelect = function isSelect(name) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.findIndex(function (item) {
+        return name === item.name;
+      }) > -1;
+    }
+    return name === (selected == null ? void 0 : selected.name);
+  };
   return React__default.createElement(ListContainer, null, list.map(function (blockchain, index) {
     return React__default.createElement(Button, {
-      type: blockchain.name === (selected == null ? void 0 : selected.name) ? 'primary' : undefined,
+      type: isSelect(blockchain.name) ? 'primary' : undefined,
       variant: "outlined",
       size: "large",
       prefix: React__default.createElement(Image, {
         src: blockchain.logo
       }),
-      suffix: blockchain.name === (selected == null ? void 0 : selected.name) ? React__default.createElement(FilledCircle, null) : undefined,
+      suffix: isSelect(blockchain.name) ? React__default.createElement(FilledCircle, null) : undefined,
       align: "start",
       onClick: changeSelectedBlockchain.bind(null, blockchain),
       key: index
@@ -2317,7 +2324,7 @@ var Input = /*#__PURE__*/styled('input', {
 });
 var Label = /*#__PURE__*/styled('label', {
   display: 'inline-block',
-  fontSize: '$16',
+  fontSize: '$14',
   marginBottom: '$4'
 });
 var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -2468,7 +2475,7 @@ var ListContainer$1 = /*#__PURE__*/styled('div', {
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
-    return containsText$1(blockchain.name, searchedFor) || containsText$1(blockchain.displayName, searchedFor);
+    return containsText(blockchain.name, searchedFor) || containsText(blockchain.displayName, searchedFor);
   });
 };
 function BlockchainSelector(props) {
@@ -2479,12 +2486,14 @@ function BlockchainSelector(props) {
     onBack = props.onBack,
     loadingStatus = props.loadingStatus,
     hasHeader = props.hasHeader,
-    listContainerStyle = props.listContainerStyle;
+    listContainerStyle = props.listContainerStyle,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   return React__default.createElement(SecondaryPage, {
     textField: true,
+    hasHeader: hasHeader,
     textFieldPlaceholder: "Search Blockchain By Name",
     title: "Select " + type + " Network",
-    hasHeader: hasHeader,
     onBack: onBack,
     Content: function Content(_ref) {
       var searchedFor = _ref.searchedFor;
@@ -2499,6 +2508,8 @@ function BlockchainSelector(props) {
       }), 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",
@@ -2599,7 +2610,12 @@ var ModalContainer = /*#__PURE__*/styled('div', {
   padding: '$16 $16',
   display: 'flex',
   flexDirection: 'column',
-  boxShadow: '$s'
+  boxShadow: '$s',
+  zIndex: 10
+});
+var Row = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center'
 });
 var ModalHeader = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -2608,15 +2624,14 @@ var ModalHeader = /*#__PURE__*/styled('div', {
   position: 'relative',
   marginBottom: '$16'
 });
-var ContentContainer$2 = /*#__PURE__*/styled('div', {
-  overflowY: 'scroll'
-});
+var ContentContainer$2 = /*#__PURE__*/styled('div', {});
 function Modal(props) {
   var title = props.title,
     content = props.content,
     open = props.open,
     onClose = props.onClose,
     containerStyle = props.containerStyle,
+    action = props.action,
     contentStyle = props.contentStyle;
   var handleBackDropClick = function handleBackDropClick(event) {
     if (event.target === event.currentTarget) onClose();
@@ -2627,10 +2642,10 @@ function Modal(props) {
     style: containerStyle
   }, React__default.createElement(ModalHeader, null, React__default.createElement(Typography, {
     variant: "h4"
-  }, title), React__default.createElement(CloseIcon, {
+  }, title), React__default.createElement(Row, null, action, React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
-  })), React__default.createElement(ContentContainer$2, {
+  }))), React__default.createElement(ContentContainer$2, {
     style: contentStyle
   }, content))), document.body));
 }
@@ -2956,7 +2971,7 @@ function LiquiditySourceList(props) {
 
 var filterLiquiditySources = function filterLiquiditySources(liquiditySources, searchedFor) {
   return liquiditySources.filter(function (liquiditySource) {
-    return containsText$1(liquiditySource.title, searchedFor || '');
+    return containsText(liquiditySource.title, searchedFor || '');
   });
 };
 var ActionButton = /*#__PURE__*/styled(Button, {
@@ -2994,7 +3009,7 @@ function LiquiditySourcesSelector(props) {
   });
 }
 
-var Row = /*#__PURE__*/styled('div', {
+var Row$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexWrap: 'wrap'
 });
@@ -3078,7 +3093,7 @@ function SelectableWalletList(_ref) {
       return item.selected;
     })) == null ? void 0 : _list$find2.walletType) || '');
   }, [list]);
-  return React__default.createElement(Row, null, list.map(function (w, index) {
+  return React__default.createElement(Row$1, null, list.map(function (w, index) {
     var checked = active === w.walletType;
     return React__default.createElement(Container$2, {
       checked: checked,
@@ -3117,7 +3132,7 @@ var StyledRoot = /*#__PURE__*/styled(Root$2, {
 var ItemContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginRight: '$24'
+  marginRight: '$8'
 });
 var StyledItem = /*#__PURE__*/styled(Item, {
   backgroundColor: '$neutrals300',
@@ -3130,6 +3145,9 @@ var StyledItem = /*#__PURE__*/styled(Item, {
     backgroundColor: '$neutrals400'
   }
 });
+var Container$3 = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
 var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
   display: 'flex',
   alignItems: 'center',
@@ -3147,7 +3165,7 @@ var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
   }
 });
 var Label$2 = /*#__PURE__*/styled('label', {
-  paddingLeft: '$16',
+  paddingLeft: '$8',
   cursor: 'pointer'
 });
 function Radio(props) {
@@ -3156,7 +3174,7 @@ function Radio(props) {
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
-  return React__default.createElement("form", null, React__default.createElement(StyledRoot, {
+  return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
     defaultValue: defaultValue,
     direction: direction,
@@ -3297,6 +3315,7 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   minWidth: '375px',
   width: '100%',
   backgroundColor: '$background',
+  height: 'fit-content',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',
@@ -3313,7 +3332,7 @@ function SwapContainer(props) {
   }, React__default.createElement(ContentContainer$3, null, children));
 }
 
-var Container$3 = /*#__PURE__*/styled('div', {
+var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var ButtonContainer$1 = /*#__PURE__*/styled('div', {
@@ -3395,7 +3414,7 @@ function SwapDetail(_ref) {
     onClick = _ref.onClick;
   var firstStep = swap.steps[0];
   var lastStep = swap.steps[swap.steps.length - 1];
-  return React__default.createElement(Container$3, {
+  return React__default.createElement(Container$4, {
     onClick: onClick.bind(null, swap.requestId)
   }, React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
     variant: "outlined",
@@ -3489,13 +3508,15 @@ var TokenAmountContainer = /*#__PURE__*/styled('div', {
 });
 var filterTokens = function filterTokens(list, searchedText, outputCount) {
   if (searchedText) return list.filter(function (token) {
-    return containsText$1(token.symbol, searchedText) || containsText$1(token.address || '', searchedText) || containsText$1(token.name || '', searchedText);
+    return containsText(token.symbol, searchedText) || containsText(token.address || '', searchedText) || containsText(token.name || '', searchedText);
   }).slice(0, outputCount);else return list.slice(0, outputCount);
 };
 function TokenList(props) {
   var list = props.list,
     searchedText = props.searchedText,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   var _useState = useState(props.selected),
     selected = _useState[0],
     setSelected = _useState[1];
@@ -3503,6 +3524,14 @@ function TokenList(props) {
     setSelected(token);
     onChange(token);
   };
+  var isSelect = function isSelect(token) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.map(function (item) {
+        return item.symbol + item.address;
+      }).indexOf(token.symbol + token.address) > -1;
+    }
+    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
+  };
   var Token = function Token(_ref) {
     var _currentToken$balance;
     var filteredTokens = _ref.filteredTokens,
@@ -3523,7 +3552,7 @@ function TokenList(props) {
       size: "large",
       align: "start",
       onClick: changeSelected.bind(null, currentToken),
-      type: (selected == null ? void 0 : selected.symbol) === currentToken.symbol && (selected == null ? void 0 : selected.address) === currentToken.address ? 'primary' : undefined,
+      type: isSelect(currentToken) ? 'primary' : undefined,
       prefix: React__default.createElement(TokenImage, {
         src: currentToken.image
       }),
@@ -3600,8 +3629,10 @@ function TokenSelector(props) {
     type = props.type,
     selected = props.selected,
     onChange = props.onChange,
-    onBack = props.onBack,
-    hasHeader = props.hasHeader;
+    hasHeader = props.hasHeader,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList,
+    onBack = props.onBack;
   return React__default.createElement(SecondaryPage, {
     textField: true,
     textFieldPlaceholder: "Search Blockchain By Name",
@@ -3614,6 +3645,8 @@ function TokenSelector(props) {
         searchedText: searchedFor,
         list: list,
         selected: selected,
+        selectedList: selectedList,
+        multiSelect: multiSelect,
         onChange: onChange
       });
     }
@@ -3708,6 +3741,80 @@ function Tooltip(_ref) {
   })))));
 }
 
+var Container$5 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Color = /*#__PURE__*/styled('div', {
+  border: '1px solid $neutrals300',
+  borderRadius: '$5',
+  width: '$32',
+  height: '$32'
+});
+var Cover = /*#__PURE__*/styled('div', {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+});
+var Popover = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  zIndex: '2',
+  variants: {
+    place: {
+      top: {
+        top: '-241px'
+      },
+      bottom: {},
+      left: {
+        top: '-50%',
+        left: '-225px'
+      },
+      right: {
+        top: '-50%',
+        right: '-225px'
+      }
+    }
+  }
+});
+function ColorPicker(_ref) {
+  var color = _ref.color,
+    onChangeColor = _ref.onChangeColor,
+    label = _ref.label,
+    place = _ref.place;
+  var _useState = useState(false),
+    displayColorPicker = _useState[0],
+    setDisplayColorPicker = _useState[1];
+  return React__default.createElement(Container$5, null, React__default.createElement(Typography, {
+    mb: 4,
+    variant: "body2"
+  }, label), React__default.createElement(Button, {
+    variant: "outlined",
+    prefix: React__default.createElement(Color, {
+      style: {
+        backgroundColor: color
+      }
+    }),
+    fullWidth: true,
+    align: "start",
+    size: "large",
+    onClick: function onClick() {
+      return setDisplayColorPicker(function (prev) {
+        return !prev;
+      });
+    }
+  }, color), displayColorPicker && React__default.createElement(Popover, {
+    place: place
+  }, React__default.createElement(Cover, {
+    onClick: function onClick() {
+      return setDisplayColorPicker(false);
+    }
+  }), React__default.createElement(ChromePicker, {
+    color: color,
+    onChange: onChangeColor
+  })));
+}
+
 var Line$2 = /*#__PURE__*/styled('div', {
   width: '0',
   marginLeft: '$12',
@@ -4024,5 +4131,5 @@ function SwapHistory(props) {
   });
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, MinusCircleIcon, Modal, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, FilledCircle, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
 //# sourceMappingURL=ui.esm.js.map