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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.81",
+  "version": "0.1.10-next.82",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/TokenList/TokenItem.tsx

@@ -0,0 +1,70 @@
+import { Token } from 'rango-sdk';
+import React, { CSSProperties } from 'react';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { TokenWithAmount } from './TokenList';
+
+const TokenImage = styled('img', {
+  width: '$32',
+  maxHeight: '$32',
+  marginRight: '$16',
+});
+
+const TokenNameContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const TokenAmountContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+});
+
+interface PropTypes {
+  token: TokenWithAmount;
+  selected: boolean;
+  onClick: (token: Token) => void;
+  style?: CSSProperties;
+}
+
+export function TokenItem(props: PropTypes) {
+  const { token, style, onClick, selected } = props;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        ...style,
+        height: '48px',
+        top: `${parseFloat(style?.top as string) + 0}px`,
+      }}
+    >
+      <Button
+        variant="outlined"
+        size="large"
+        align="start"
+        onClick={onClick.bind(null, token)}
+        type={selected ? 'primary' : undefined}
+        prefix={<TokenImage src={token.image} />}
+        suffix={
+          token.balance?.amount && (
+            <TokenAmountContainer>
+              <Typography variant="body2">{token.balance.amount}</Typography>
+              <Typography variant="caption">
+                {`${token.balance.usdValue}$`}
+              </Typography>
+            </TokenAmountContainer>
+          )
+        }
+      >
+        <TokenNameContainer>
+          <Typography variant="body1">{token.symbol}</Typography>
+          <Typography variant="body2">{token.name}</Typography>
+        </TokenNameContainer>
+      </Button>
+    </div>
+  );
+}

package/src/components/TokenList/TokenList.tsx

@@ -1,12 +1,8 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { CommonProps } from 'react-window';
-import { styled } from '../../theme';
 import { Token } from 'rango-sdk';
-import { Button } from '../Button/Button';
-import { Typography } from '../Typography';
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
-import { CSSProperties } from '@stitches/react';
-import { containsText } from '../../helper';
+import { TokenItem } from './TokenItem';
 
 export interface TokenWithAmount extends Token {
   balance?: {
@@ -25,40 +21,6 @@ export interface PropTypes {
   selectedList?: TokenWithAmount[] | 'all';
 }
 
-const TokenImage = styled('img', {
-  width: '$32',
-  maxHeight: '$32',
-  marginRight: '$16',
-});
-
-const TokenNameContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const TokenAmountContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-end',
-});
-
-const filterTokens = (
-  list: Token[],
-  searchedText: string,
-  outputCount?: number
-) => {
-  if (searchedText)
-    return list
-      .filter(
-        (token) =>
-          containsText(token.symbol, searchedText) ||
-          containsText(token.address || '', searchedText) ||
-          containsText(token.name || '', searchedText)
-      )
-      .slice(0, outputCount);
-  else return list.slice(0, outputCount);
-};
-
 export function TokenList(props: PropTypes) {
   const { list, searchedText, onChange, multiSelect, selectedList } = props;
 
@@ -69,7 +31,7 @@ export function TokenList(props: PropTypes) {
     onChange(token);
   };
 
-  const isSelect = (token: Token) => {
+  const isSelected = (token: Token) => {
     if (multiSelect && selectedList) {
       return (
         selectedList === 'all' ||
@@ -83,79 +45,20 @@ export function TokenList(props: PropTypes) {
     );
   };
 
-  const Token = ({
-    filteredTokens,
-    index,
-    style,
-  }: {
-    filteredTokens: TokenWithAmount[];
-    index: number;
-    style: CSSProperties | undefined;
-  }) => {
-    const currentToken = filteredTokens[index];
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          width: '100%',
-          ...style,
-          height: '48px',
-          top: `${parseFloat(style?.top as string) + 0}px`,
-        }}
-      >
-        <Button
-          variant="outlined"
-          size="large"
-          align="start"
-          onClick={changeSelected.bind(null, currentToken)}
-          type={isSelect(currentToken) ? 'primary' : undefined}
-          prefix={<TokenImage src={currentToken.image} />}
-          suffix={
-            currentToken.balance?.amount && (
-              <TokenAmountContainer>
-                <Typography variant="body2">
-                  {currentToken.balance.amount}
-                </Typography>
-                <Typography variant="caption">
-                  {`${currentToken.balance.usdValue}$`}
-                </Typography>
-              </TokenAmountContainer>
-            )
-          }
-        >
-          <TokenNameContainer>
-            <Typography variant="body1">{currentToken.symbol}</Typography>
-            <Typography variant="body2">{currentToken.name}</Typography>
-          </TokenNameContainer>
-        </Button>
-      </div>
-    );
-  };
-
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const [isNextPageLoading, setIsNextPageLoading] = useState<boolean>(false);
-  const [filteredTokens, setFilteredTokens] = useState<TokenWithAmount[]>(list);
+  const [tokens, setTokens] = useState<TokenWithAmount[]>(list);
 
   const loadNextPage = () => {
-    setIsNextPageLoading(true);
-    setTimeout(() => {
-      setIsNextPageLoading(false);
-      setFilteredTokens(
-        filterTokens(list, searchedText, filteredTokens.length + PAGE_SIZE)
-      );
-    }, 0);
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
   };
 
   useEffect(() => {
-    setFilteredTokens(filterTokens(list, searchedText, PAGE_SIZE));
+    setTokens(list.slice(0, PAGE_SIZE));
   }, [searchedText]);
 
   useEffect(() => {
-    setHasNextPage(
-      filterTokens(list, searchedText).length > filterTokens.length
-    );
-  }, [filteredTokens.length]);
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
 
   const innerElementType: React.FC<CommonProps> = forwardRef(
     ({ style, ...rest }, ref) => {
@@ -165,7 +68,6 @@ export function TokenList(props: PropTypes) {
           ref={ref as any}
           style={{
             ...style,
-            // eslint-disable-next-line react/prop-types
             height: `${parseFloat(style?.height as string) + 8 * 2}px`,
           }}
           {...rest}
@@ -178,11 +80,15 @@ export function TokenList(props: PropTypes) {
     <div style={{ height: '450px' }}>
       <VirtualizedList
         Item={({ index, style }) => (
-          <Token filteredTokens={filteredTokens} style={style} index={index} />
+          <TokenItem
+            token={tokens[index]}
+            style={style}
+            onClick={changeSelected}
+            selected={isSelected(tokens[index])}
+          />
         )}
         hasNextPage={hasNextPage}
-        isNextPageLoading={isNextPageLoading}
-        itemCount={filteredTokens.length}
+        itemCount={tokens.length}
         loadNextPage={loadNextPage}
         innerElementType={innerElementType}
         size={56}

package/src/components/TokenSelector/TokenSelector.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { containsText } from '../../helper';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
 import { TokenList } from '../TokenList';
 import { TokenWithAmount } from '../TokenList/TokenList';
@@ -14,6 +15,14 @@ export interface PropTypes {
   selectedList?: TokenWithAmount[] | 'all';
 }
 
+const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
+  list.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );
+
 export function TokenSelector(props: PropTypes) {
   const {
     list,
@@ -37,7 +46,7 @@ export function TokenSelector(props: PropTypes) {
       {(searchedFor) => (
         <TokenList
           searchedText={searchedFor}
-          list={list}
+          list={filterTokens(list, searchedFor)}
           selected={selected}
           selectedList={selectedList}
           multiSelect={multiSelect}

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useRef } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ReactElementType, VariableSizeList as List } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -15,8 +15,6 @@ export type VirtualizedListItem = ({
 type PropTypes = {
   itemCount: number;
   hasNextPage: boolean;
-  isNextPageLoading: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   loadNextPage: () => void;
   Item: VirtualizedListItem;
   innerElementType: ReactElementType | undefined;
@@ -24,39 +22,25 @@ type PropTypes = {
 };
 
 export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
-  const {
-    itemCount,
-    hasNextPage,
-    isNextPageLoading,
-    loadNextPage,
-    Item,
-    innerElementType,
-    size,
-  } = props;
-  const listRef = useRef<any>(null);
+  const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
+    props;
 
   const isItemLoaded = (index: number) => !hasNextPage || index < itemCount;
 
   return (
-    <InfiniteLoader
-      isItemLoaded={isItemLoaded}
-      itemCount={hasNextPage ? itemCount + 1 : itemCount}
-      loadMoreItems={
-        isNextPageLoading
-          ? () => {
-              // do nothing
-            }
-          : loadNextPage
-      }
-      threshold={1}
-    >
-      {({ onItemsRendered }) => {
-        return (
-          <AutoSizer>
-            {({ width, height }) => (
+    <AutoSizer>
+      {({ width, height }) => (
+        <InfiniteLoader
+          isItemLoaded={isItemLoaded}
+          itemCount={hasNextPage ? itemCount + 1 : itemCount}
+          loadMoreItems={loadNextPage}
+          threshold={1}
+        >
+          {({ onItemsRendered, ref }) => {
+            return (
               <List
                 innerElementType={innerElementType}
-                ref={listRef}
+                ref={ref}
                 itemSize={() => size}
                 itemCount={itemCount}
                 height={height}
@@ -69,10 +53,10 @@ export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
                   ) : null
                 }
               </List>
-            )}
-          </AutoSizer>
-        );
-      }}
-    </InfiniteLoader>
+            );
+          }}
+        </InfiniteLoader>
+      )}
+    </AutoSizer>
   );
 }