feat: [lw-12079] add virtualization to the list of nfts #1635

vetalcore · 2025-01-09T10:30:49Z

Checklist

JIRA - LW-12079
Proper tests implemented

Proposed solution

use Grid component from the react-virtuoso lib
refactor useFetchImage to queue fetching images if necessary (limit max parallel requests)
handle external image resources and edge cases

Testing

Consider checking:

NFTs main layout
NFTs folders
NFTs search and asset picker (when creating a folder)
impersonated wallet with more than a thousand NFTs
assets picker in send drawer
tokens list / wallet avatar / address card (loading image assets)
stake pools grid (should be no regression)

apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.tsx

apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/Grid.module.scss

apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/NftsLayout.tsx

pczeglik-iohk · 2025-01-09T10:43:12Z

Allure Report

allure-report-publisher generated test report!

processReports: ✅ test report for 91d64ffd

	passed	failed	skipped	flaky	total	result
Total	34	0	3	0	37	✅

apps/browser-extension-wallet/src/utils/get-asset-image-url.ts

packages/common/src/ui/hooks/useFetchImage.ts

packages/common/src/ui/components/VirtualisedGrid/VirtualisedGrid.module.scss

apps/browser-extension-wallet/test/__mocks__/set-env-vars.js

apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/NftsLayout.tsx

packages/common/src/ui/hooks/useFetchImage.ts

packages/core/src/ui/components/Nft/NftGrid.tsx

apps/browser-extension-wallet/src/features/nfts/components/Nfts.tsx

mchappell

Great teamwork @vetalcore @przemyslaw-wlodek 💪

…tchImage generic

Use a MutationObserver to wait for the scroll target of the VirtualiseGrid component to be found in the DOM. Combine it with useState to trigger re-renders when its found.

…ize-the-list-of-nfts

sonarqubecloud · 2025-01-20T22:36:33Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.0% Duplication on New Code

See analysis details on SonarQube Cloud

vetalcore requested a review from a team as a code owner January 9, 2025 10:30

vetalcore assigned vetalcore and przemyslaw-wlodek and unassigned vetalcore Jan 9, 2025

vetalcore commented Jan 9, 2025

View reviewed changes

przemyslaw-wlodek force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch 2 times, most recently from 46f3d2c to 64e9081 Compare January 10, 2025 00:11

vetalcore force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch 3 times, most recently from 211c003 to bf633fc Compare January 13, 2025 13:33

vetalcore commented Jan 13, 2025

View reviewed changes

przemyslaw-wlodek assigned vetalcore Jan 14, 2025

przemyslaw-wlodek requested a review from mchappell January 14, 2025 09:48

przemyslaw-wlodek force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch from 2a02a6c to 06918ea Compare January 14, 2025 10:41

mchappell requested changes Jan 14, 2025

View reviewed changes

przemyslaw-wlodek force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch from c69aa3d to e8c518d Compare January 14, 2025 11:57

mchappell approved these changes Jan 14, 2025

View reviewed changes

vetalcore and others added 12 commits January 15, 2025 14:20

feat: [lw-12079] add virtualization to the list of nfts

49c0565

WIP

dd9c0f5

feat: [lw-12016] create reusable virtualised nfts grid component

94db16c

fix(core): nft list and folder key prop management

35e7a38

fix(common,extension): handle external URLs, data urls and make useFe…

0cd089a

…tchImage generic

feat: [lw-12016] add virtualisation on nfts tab for popup view

68ee97e

fix(common): check blob size in useFetchImage

61330e5

feat: [lw-12079] add virtualization to folders of nfts

1cb4eff

feat: [lw-12079] fix not properly positioned context menu

06ea5d3

test(common): update useFetchImage unit tests

6093268

feat: [lw-12079] add search by folder names

3f5f00d

refactor(common,extension): address cr comments

ec26db2

przemyslaw-wlodek added 3 commits January 15, 2025 14:20

refactor(common,core,extension): address cr comments

fc13b49

test(extension): update env vars mock

dd73f4e

test(common): update useFetchImage unit tests

579f89e

przemyslaw-wlodek force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch from 47a7e66 to 579f89e Compare January 15, 2025 13:20

przemyslaw-wlodek and others added 9 commits January 15, 2025 17:35

perf(common): create another layer for virtualized grid

1eeee53

fix(extension): add proper scrollableTargetId to NftGrid

a4ebbf6

fix: resolve sdet issues

35f80ba

fix: resolve sdet issues

69913cf

fix: fix empty nfts picker for send flow in popup view

9e8d0b6

Merge branch 'main' into feat/lw-12079-virtualize-the-list-of-nfts

2e97290

fix(common): add fallback for missing env var and stub in tests

3ed31ad

test: e2e - fix tests checking exact src values

9d32051

fix(common): wait for scroll target in dom [LW-12079]

e112c26

Use a MutationObserver to wait for the scroll target of the VirtualiseGrid component to be found in the DOM. Combine it with useState to trigger re-renders when its found.

DominikGuzei force-pushed the feat/lw-12079-virtualize-the-list-of-nfts branch from 6b49cd3 to e112c26 Compare January 20, 2025 19:45

vetalcore added 6 commits January 20, 2025 23:40

fix: revert drawer popup styles, fix prettier formatting

c006ad5

Merge remote-tracking branch 'origin/main' into feat/lw-12079-virtual…

ab5a002

…ize-the-list-of-nfts

fix: resolve sonarcloud issues

3f2652e

fix: resolve ci issues

46365c1

fix: resolve sonarcloud issues

3194959

fix: resolve sonarcloud issues

91d64ff

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [lw-12079] add virtualization to the list of nfts #1635

feat: [lw-12079] add virtualization to the list of nfts #1635

vetalcore commented Jan 9, 2025 •

edited by przemyslaw-wlodek

Loading

pczeglik-iohk commented Jan 9, 2025 •

edited

Loading

mchappell left a comment

sonarqubecloud bot commented Jan 20, 2025

feat: [lw-12079] add virtualization to the list of nfts #1635

Are you sure you want to change the base?

feat: [lw-12079] add virtualization to the list of nfts #1635

Conversation

vetalcore commented Jan 9, 2025 • edited by przemyslaw-wlodek Loading

Checklist

Proposed solution

Testing

pczeglik-iohk commented Jan 9, 2025 • edited Loading

Allure Report

mchappell left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 20, 2025

Quality Gate passed

vetalcore commented Jan 9, 2025 •

edited by przemyslaw-wlodek

Loading

pczeglik-iohk commented Jan 9, 2025 •

edited

Loading