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

package/dist/components/Settings/Settings.d.ts

@@ -14,6 +14,8 @@ export interface PropTypes {
     selectedTheme: Theme;
     onThemeChange: (theme: Theme) => void;
     onBack: () => void;
+    infiniteApprove: boolean;
+    toggleInfiniteApprove: (infinite: boolean) => void;
 }
 export declare function Settings(props: PropTypes): JSX.Element;
 export {};

package/dist/components/TokenList/TokenItem.d.ts

@@ -0,0 +1,11 @@
+import { Token } from 'rango-sdk';
+import { CSSProperties } from 'react';
+import { TokenWithAmount } from './TokenList';
+interface PropTypes {
+    token: TokenWithAmount;
+    selected: boolean;
+    onClick: (token: Token) => void;
+    style?: CSSProperties;
+}
+export declare function TokenItem(props: PropTypes): JSX.Element;
+export {};

package/dist/components/VirtualizedList/VirtualizedList.d.ts

@@ -8,7 +8,6 @@ export declare type VirtualizedListItem = ({ index, style, }: {
 declare type PropTypes = {
     itemCount: number;
     hasNextPage: boolean;
-    isNextPageLoading: boolean;
     loadNextPage: () => void;
     Item: VirtualizedListItem;
     innerElementType: ReactElementType | undefined;

package/dist/ui.cjs.development.js

@@ -3233,6 +3233,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'
 });
@@ -3256,7 +3261,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 = React.useState(props.selectedSlippage),
     selectedSlippage = _useState[0],
     setSelectedSlippage = _useState[1];
@@ -3317,6 +3324,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, {
@@ -3471,30 +3483,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 = React.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(reactWindow.VariableSizeList, {
         innerElementType: innerElementType,
-        ref: listRef,
+        ref: ref,
         itemSize: function itemSize() {
           return size;
         },
@@ -3514,8 +3523,6 @@ function VirtualizedList(props) {
   });
 }
 
-var _excluded$D = ["style"];
-var PAGE_SIZE = 20;
 var TokenImage = /*#__PURE__*/styled('img', {
   width: '$32',
   maxHeight: '$32',
@@ -3530,11 +3537,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,
@@ -3548,7 +3588,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;
@@ -3556,71 +3596,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 = React.useState(true),
     hasNextPage = _useState2[0],
     setHasNextPage = _useState2[1];
-  var _useState3 = React.useState(false),
-    isNextPageLoading = _useState3[0],
-    setIsNextPageLoading = _useState3[1];
-  var _useState4 = React.useState(list),
-    filteredTokens = _useState4[0],
-    setFilteredTokens = _useState4[1];
+  var _useState3 = React.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));
   };
   React.useEffect(function () {
-    setFilteredTokens(filterTokens(list, searchedText, PAGE_SIZE));
+    setTokens(list.slice(0, PAGE_SIZE));
   }, [searchedText]);
   React.useEffect(function () {
-    setHasNextPage(filterTokens(list, searchedText).length > filterTokens.length);
-  }, [filteredTokens.length]);
-  var innerElementType = React.forwardRef(function (_ref2, ref) {
-    var style = _ref2.style,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+  var innerElementType = React.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));
@@ -3630,24 +3627,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,
@@ -3666,7 +3668,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,