From 76301704974caa640fb57b14ee786832fc101b5f Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 9 Nov 2023 15:32:58 +0200 Subject: [PATCH] TW-993: Assets rework. Pagination logic. Refactor --- package.json | 2 -- .../CollectiblesTab/CollectibleItem.tsx | 8 ++--- .../PaymentProviderOption.tsx | 4 +-- .../SwapFormInput/AssetsMenu/AssetOption.tsx | 3 +- .../templates/TopUpInput/CurrencyOption.tsx | 4 +-- yarn.lock | 31 ++----------------- 6 files changed, 12 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 7b9c6395e..ce95aea7e 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx b/src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx index a4d920367..aabd3552a 100644 --- a/src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx +++ b/src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx @@ -31,7 +31,7 @@ export const CollectibleItem = memo(({ assetSlug, accountPkh, chainId, ar const { popup } = useAppEnv(); const metadata = useCollectibleMetadataSelector(assetSlug); const toDisplayRef = useRef(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(({ 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(({ assetSlug, accountPkh, chainId, ar )} title={assetName} > - {displayed && ( + {isInViewport && ( > { +interface Props { value: PaymentProviderInterface; isSelected: boolean; shouldShowSeparator: boolean; + style?: React.CSSProperties; } export const PaymentProviderOption: FC = ({ value, isSelected, shouldShowSeparator, style }) => { diff --git a/src/app/templates/SwapForm/SwapFormInput/AssetsMenu/AssetOption.tsx b/src/app/templates/SwapForm/SwapFormInput/AssetsMenu/AssetOption.tsx index fd69527d2..6ff483f83 100644 --- a/src/app/templates/SwapForm/SwapFormInput/AssetsMenu/AssetOption.tsx +++ b/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> { +interface Props { assetSlug: string; selected?: boolean; } diff --git a/src/app/templates/TopUpInput/CurrencyOption.tsx b/src/app/templates/TopUpInput/CurrencyOption.tsx index 50623bce9..7a68b1a1a 100644 --- a/src/app/templates/TopUpInput/CurrencyOption.tsx +++ b/src/app/templates/TopUpInput/CurrencyOption.tsx @@ -1,7 +1,6 @@ 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'; @@ -9,11 +8,12 @@ import { StaticCurrencyImage } from './StaticCurrencyImage'; import { CurrencyBase } from './types'; import { getProperNetworkFullName } from './utils'; -interface Props extends Partial> { +interface Props { isFiat?: boolean; currency: CurrencyBase; isSelected: boolean; fitIcons?: boolean | ((currency: CurrencyBase) => boolean); + style?: React.CSSProperties; } export const CurrencyOption: FC = ({ currency, isFiat, isSelected, fitIcons, style }) => ( diff --git a/yarn.lock b/yarn.lock index 4e2bf0b60..d3be46620 100644 --- a/yarn.lock +++ b/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/react@18.0.15", "@types/react@^17": +"@types/react@*", "@types/react@18.0.15": 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 @@ clsx@1.1.1: 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 @@ react-transition-group@4.4.2: 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" - react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"