@rango-dev/ui 0.1.10-next.80 → 0.1.10-next.82

package/dist/ui.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, forwardRef, Fragment, useState, useEffect, useRef } from 'react';
+import React__default, { createElement, forwardRef, Fragment, useState, useEffect } from 'react';
 import { Indicator, Root } from '@radix-ui/react-checkbox';
 import { createPortal } from 'react-dom';
 import { detectInstallLink } from '@rango-dev/wallets-shared';
@@ -3227,6 +3227,11 @@ var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   marginTop: '$32',
   cursor: 'pointer'
 });
+var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32'
+});
 var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
   marginLeft: '$8'
 });
@@ -3250,7 +3255,9 @@ function Settings(props) {
     maxSlippage = props.maxSlippage,
     minSlippage = props.minSlippage,
     selectedTheme = props.selectedTheme,
-    onThemeChange = props.onThemeChange;
+    onThemeChange = props.onThemeChange,
+    toggleInfiniteApprove = props.toggleInfiniteApprove,
+    infiniteApprove = props.infiniteApprove;
   var _useState = useState(props.selectedSlippage),
     selectedSlippage = _useState[0],
     setSelectedSlippage = _useState[1];
@@ -3311,6 +3318,11 @@ function Settings(props) {
     style: {
       marginTop: '$24'
     }
+  })), React__default.createElement(InfiniteContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, "Infinite Approval"), React__default.createElement(Switch, {
+    checked: infiniteApprove,
+    onChange: toggleInfiniteApprove
   })), React__default.createElement(LiquiditySourceContainer, {
     onClick: onLiquiditySourcesClick
   }, React__default.createElement(Typography, {
@@ -3465,30 +3477,27 @@ function SwapDetail(_ref) {
 function VirtualizedList(props) {
   var itemCount = props.itemCount,
     hasNextPage = props.hasNextPage,
-    isNextPageLoading = props.isNextPageLoading,
     loadNextPage = props.loadNextPage,
     Item = props.Item,
     innerElementType = props.innerElementType,
     size = props.size;
-  var listRef = useRef(null);
   var isItemLoaded = function isItemLoaded(index) {
     return !hasNextPage || index < itemCount;
   };
-  return React__default.createElement(InfiniteLoader, {
-    isItemLoaded: isItemLoaded,
-    itemCount: hasNextPage ? itemCount + 1 : itemCount,
-    loadMoreItems: isNextPageLoading ? function () {
-      // do nothing
-    } : loadNextPage,
-    threshold: 1
-  }, function (_ref) {
-    var onItemsRendered = _ref.onItemsRendered;
-    return React__default.createElement(AutoSizer, null, function (_ref2) {
-      var width = _ref2.width,
-        height = _ref2.height;
+  return React__default.createElement(AutoSizer, null, function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    return React__default.createElement(InfiniteLoader, {
+      isItemLoaded: isItemLoaded,
+      itemCount: hasNextPage ? itemCount + 1 : itemCount,
+      loadMoreItems: loadNextPage,
+      threshold: 1
+    }, function (_ref2) {
+      var onItemsRendered = _ref2.onItemsRendered,
+        ref = _ref2.ref;
       return React__default.createElement(VariableSizeList, {
         innerElementType: innerElementType,
-        ref: listRef,
+        ref: ref,
         itemSize: function itemSize() {
           return size;
         },
@@ -3508,8 +3517,6 @@ function VirtualizedList(props) {
   });
 }
 
-var _excluded$D = ["style"];
-var PAGE_SIZE = 20;
 var TokenImage = /*#__PURE__*/styled('img', {
   width: '$32',
   maxHeight: '$32',
@@ -3524,11 +3531,44 @@ var TokenAmountContainer = /*#__PURE__*/styled('div', {
   flexDirection: 'column',
   alignItems: 'flex-end'
 });
-var filterTokens = function filterTokens(list, searchedText, outputCount) {
-  if (searchedText) return list.filter(function (token) {
-    return containsText(token.symbol, searchedText) || containsText(token.address || '', searchedText) || containsText(token.name || '', searchedText);
-  }).slice(0, outputCount);else return list.slice(0, outputCount);
-};
+function TokenItem(props) {
+  var _token$balance;
+  var token = props.token,
+    style = props.style,
+    onClick = props.onClick,
+    selected = props.selected;
+  return React__default.createElement("div", {
+    style: _extends({
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%'
+    }, style, {
+      height: '48px',
+      top: parseFloat(style == null ? void 0 : style.top) + 0 + "px"
+    })
+  }, React__default.createElement(Button, {
+    variant: "outlined",
+    size: "large",
+    align: "start",
+    onClick: onClick.bind(null, token),
+    type: selected ? 'primary' : undefined,
+    prefix: React__default.createElement(TokenImage, {
+      src: token.image
+    }),
+    suffix: ((_token$balance = token.balance) == null ? void 0 : _token$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
+      variant: "body2"
+    }, token.balance.amount), React__default.createElement(Typography, {
+      variant: "caption"
+    }, token.balance.usdValue + "$"))
+  }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, token.symbol), React__default.createElement(Typography, {
+    variant: "body2"
+  }, token.name))));
+}
+
+var _excluded$D = ["style"];
+var PAGE_SIZE = 20;
 function TokenList(props) {
   var list = props.list,
     searchedText = props.searchedText,
@@ -3542,7 +3582,7 @@ function TokenList(props) {
     setSelected(token);
     onChange(token);
   };
-  var isSelect = function isSelect(token) {
+  var isSelected = function isSelected(token) {
     if (multiSelect && selectedList) {
       return selectedList === 'all' || selectedList.map(function (item) {
         return item.symbol + item.address;
@@ -3550,71 +3590,28 @@ function TokenList(props) {
     }
     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,
-      index = _ref.index,
-      style = _ref.style;
-    var currentToken = filteredTokens[index];
-    return React__default.createElement("div", {
-      style: _extends({
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%'
-      }, style, {
-        height: '48px',
-        top: parseFloat(style == null ? void 0 : style.top) + 0 + "px"
-      })
-    }, React__default.createElement(Button, {
-      variant: "outlined",
-      size: "large",
-      align: "start",
-      onClick: changeSelected.bind(null, currentToken),
-      type: isSelect(currentToken) ? 'primary' : undefined,
-      prefix: React__default.createElement(TokenImage, {
-        src: currentToken.image
-      }),
-      suffix: ((_currentToken$balance = currentToken.balance) == null ? void 0 : _currentToken$balance.amount) && React__default.createElement(TokenAmountContainer, null, React__default.createElement(Typography, {
-        variant: "body2"
-      }, currentToken.balance.amount), React__default.createElement(Typography, {
-        variant: "caption"
-      }, currentToken.balance.usdValue + "$"))
-    }, React__default.createElement(TokenNameContainer, null, React__default.createElement(Typography, {
-      variant: "body1"
-    }, currentToken.symbol), React__default.createElement(Typography, {
-      variant: "body2"
-    }, currentToken.name))));
-  };
   var _useState2 = useState(true),
     hasNextPage = _useState2[0],
     setHasNextPage = _useState2[1];
-  var _useState3 = useState(false),
-    isNextPageLoading = _useState3[0],
-    setIsNextPageLoading = _useState3[1];
-  var _useState4 = useState(list),
-    filteredTokens = _useState4[0],
-    setFilteredTokens = _useState4[1];
+  var _useState3 = useState(list),
+    tokens = _useState3[0],
+    setTokens = _useState3[1];
   var loadNextPage = function loadNextPage() {
-    setIsNextPageLoading(true);
-    setTimeout(function () {
-      setIsNextPageLoading(false);
-      setFilteredTokens(filterTokens(list, searchedText, filteredTokens.length + PAGE_SIZE));
-    }, 0);
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
   };
   useEffect(function () {
-    setFilteredTokens(filterTokens(list, searchedText, PAGE_SIZE));
+    setTokens(list.slice(0, PAGE_SIZE));
   }, [searchedText]);
   useEffect(function () {
-    setHasNextPage(filterTokens(list, searchedText).length > filterTokens.length);
-  }, [filteredTokens.length]);
-  var innerElementType = forwardRef(function (_ref2, ref) {
-    var style = _ref2.style,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+  var innerElementType = forwardRef(function (_ref, ref) {
+    var style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
     return React__default.createElement("div", Object.assign({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: ref,
       style: _extends({}, style, {
-        // eslint-disable-next-line react/prop-types
         height: parseFloat(style == null ? void 0 : style.height) + 8 * 2 + "px"
       })
     }, rest));
@@ -3624,24 +3621,29 @@ function TokenList(props) {
       height: '450px'
     }
   }, React__default.createElement(VirtualizedList, {
-    Item: function Item(_ref3) {
-      var index = _ref3.index,
-        style = _ref3.style;
-      return React__default.createElement(Token, {
-        filteredTokens: filteredTokens,
+    Item: function Item(_ref2) {
+      var index = _ref2.index,
+        style = _ref2.style;
+      return React__default.createElement(TokenItem, {
+        token: tokens[index],
         style: style,
-        index: index
+        onClick: changeSelected,
+        selected: isSelected(tokens[index])
       });
     },
     hasNextPage: hasNextPage,
-    isNextPageLoading: isNextPageLoading,
-    itemCount: filteredTokens.length,
+    itemCount: tokens.length,
     loadNextPage: loadNextPage,
     innerElementType: innerElementType,
     size: 56
   }));
 }
 
+var filterTokens = function filterTokens(list, searchedFor) {
+  return list.filter(function (token) {
+    return containsText(token.symbol, searchedFor) || containsText(token.address || '', searchedFor) || containsText(token.name || '', searchedFor);
+  });
+};
 function TokenSelector(props) {
   var list = props.list,
     type = props.type,
@@ -3660,7 +3662,7 @@ function TokenSelector(props) {
   }, function (searchedFor) {
     return React__default.createElement(TokenList, {
       searchedText: searchedFor,
-      list: list,
+      list: filterTokens(list, searchedFor),
       selected: selected,
       selectedList: selectedList,
       multiSelect: multiSelect,