TW-993: Assets rework. Pagination logic. Refactor

package.json

@@ -82,7 +82,6 @@
     "@types/react-modal": "3.13.1",
     "@types/react-text-mask": "^5.4.11",
     "@types/react-transition-group": "4.4.5",
-    "@types/react-virtualized": "^9.21.21",
     "@types/resolve": "^1.20.2",
     "@types/scryptsy": "^2.0.0",
     "@types/typedarray-to-buffer": "^4.0.0",
@@ -168,7 +167,6 @@
     "react-redux": "^8.0.2",
     "react-text-mask": "^5.5.0",
     "react-transition-group": "4.4.2",
-    "react-virtualized": "^9.22.3",
     "redux-observable": "^2.0.0",
     "redux-persist": "^6.0.0",
     "regexparam": "1.3.0",

src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx

@@ -31,7 +31,7 @@ export const CollectibleItem = memo<Props>(({ assetSlug, accountPkh, chainId, ar
   const { popup } = useAppEnv();
   const metadata = useCollectibleMetadataSelector(assetSlug);
   const toDisplayRef = useRef<HTMLDivElement>(null);
-  const [displayed, setDisplayed] = useState(true);
+  const [isInViewport, setIsInViewport] = useState(false);
   const balanceAtomic = useBalanceSelector(accountPkh, chainId, assetSlug);
 
   const decimals = metadata?.decimals;
@@ -56,9 +56,9 @@ export const CollectibleItem = memo<Props>(({ assetSlug, accountPkh, chainId, ar
     return { floorPrice, decimals: currency.decimals, symbol: currency.symbol };
   }, [details]);
 
-  const handleIntersection = useCallback(() => void setDisplayed(true), []);
+  const handleIntersection = useCallback(() => void setIsInViewport(true), []);
 
-  useIntersectionDetection(toDisplayRef, handleIntersection, !displayed);
+  useIntersectionDetection(toDisplayRef, handleIntersection, !isInViewport);
 
   const assetName = getAssetName(metadata);
 
@@ -73,7 +73,7 @@ export const CollectibleItem = memo<Props>(({ assetSlug, accountPkh, chainId, ar
         )}
         title={assetName}
       >
-        {displayed && (
+        {isInViewport && (
           <CollectibleItemImage
             assetSlug={assetSlug}
             metadata={metadata}

src/app/templates/PaymentProviderInput/PaymentProvidersMenu/PaymentProviderOption.tsx

@@ -2,7 +2,6 @@ import React, { FC, useMemo } from 'react';
 
 import { isDefined } from '@rnw-community/shared';
 import classNames from 'clsx';
-import { ListRowProps } from 'react-virtualized';
 
 import { useCryptoCurrenciesSelector } from 'app/store/buy-with-credit-card/selectors';
 import { TopUpProviderIcon } from 'app/templates/TopUpProviderIcon';
@@ -13,10 +12,11 @@ import { formatAmountToTargetSize } from 'lib/utils/amounts';
 import { MoneyRange } from '../MoneyRange';
 import { PaymentProviderTag, PaymentProviderTagProps } from './PaymentProviderTag';
 
-interface Props extends Partial<Pick<ListRowProps, 'style'>> {
+interface Props {
   value: PaymentProviderInterface;
   isSelected: boolean;
   shouldShowSeparator: boolean;
+  style?: React.CSSProperties;
 }
 
 export const PaymentProviderOption: FC<Props> = ({ value, isSelected, shouldShowSeparator, style }) => {

src/app/templates/SwapForm/SwapFormInput/AssetsMenu/AssetOption.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
 import classNames from 'clsx';
-import { ListRowProps } from 'react-virtualized';
 
 import { AssetIcon } from 'app/templates/AssetIcon';
 import { AssetItemContent } from 'app/templates/AssetItemContent';
@@ -11,7 +10,7 @@ import { isTruthy } from 'lib/utils';
 
 import { AssetsMenuSelectors } from './selectors';
 
-interface Props extends Partial<Pick<ListRowProps, 'style'>> {
+interface Props {
   assetSlug: string;
   selected?: boolean;
 }

src/app/templates/TopUpInput/CurrencyOption.tsx

@@ -1,19 +1,19 @@
 import React, { FC } from 'react';
 
 import classNames from 'clsx';
-import { ListRowProps } from 'react-virtualized';
 
 import { getAssetSymbolToDisplay } from 'lib/buy-with-credit-card/get-asset-symbol-to-display';
 
 import { StaticCurrencyImage } from './StaticCurrencyImage';
 import { CurrencyBase } from './types';
 import { getProperNetworkFullName } from './utils';
 
-interface Props extends Partial<Pick<ListRowProps, 'style'>> {
+interface Props {
   isFiat?: boolean;
   currency: CurrencyBase;
   isSelected: boolean;
   fitIcons?: boolean | ((currency: CurrencyBase) => boolean);
+  style?: React.CSSProperties;
 }
 
 export const CurrencyOption: FC<Props> = ({ currency, isFiat, isSelected, fitIcons, style }) => (

yarn.lock

@@ -1115,7 +1115,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
   integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
@@ -3343,15 +3343,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized@^9.21.21":
-  version "9.21.21"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.21.tgz#65c96f25314f0fb3d40536929dc78112753b49e1"
-  integrity sha512-Exx6I7p4Qn+BBA1SRyj/UwQlZ0I0Pq7g7uhAp0QQ4JWzZunqEqNBGTmCmMmS/3N9wFgAGWuBD16ap7k8Y14VPA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/react" "^17"
-
-"@types/react@*", "@types/[email protected]", "@types/react@^17":
+"@types/react@*", "@types/[email protected]":
   version "18.0.15"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
   integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
@@ -5170,11 +5162,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
-clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -5956,7 +5943,7 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1, dom-helpers@^5.1.3:
+dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -10612,18 +10599,6 @@ [email protected]:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtualized@^9.22.3:
-  version "9.22.3"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
-  integrity sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    clsx "^1.0.4"
-    dom-helpers "^5.1.3"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.4"
-
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"