[Cashtab] Toggle "buy nfts" and "manage nfts" for better user presentation
ClosedPublic
Actions

Authored by bytesofman on Sep 13 2024, 18:39.

Details

Reviewers

emack
Fabien

Group Reviewers

Restricted Project

Commits

rABC1608b5fbd301: [Cashtab] Toggle "buy nfts" and "manage nfts" for better user presentation

Summary

Load the NFT screen showing NFTs that are available to buy by default, taking up all available screen area.

Include a toggle switch to NFTs listed by the active wallet.

This corrects annoying "double scroll" behavior from trying to fit too much information on a single screen by the use of panels.

It is still useful to load all the information in the same screen, since we need all of this agora information to separate the data.

Test Plan

npm test

check out this diff on test site at https://cashtab-local-dev.netlify.app/#/nfts

Diff Detail

Repository

rABC Bitcoin ABC

Branch

nft-height-bump

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 30300
Build 60127: Build Diff	ecash-lib-tests · cashtab-tests
Build 60126: arc lint + arc unit

Event Timeline

bytesofman created this revision.Sep 13 2024, 18:39

Herald added a reviewer: Restricted Project. · View Herald TranscriptSep 13 2024, 18:39

bytesofman edited the summary of this revision. (Show Details)Sep 13 2024, 18:40

bytesofman published this revision for review.Sep 13 2024, 18:42

bytesofman added inline comments.

cashtab/src/components/Nfts/index.js
367 ↗	(On Diff #49625)	make sure we show the spinner while NFT API calls are loading so it does not look like page is down
cashtab/src/components/Nfts/styled.js
37 ↗	(On Diff #49625)	panels can be the full screen height.
76 ↗	(On Diff #49625)	force wrap e.g. if the NFT has the max allowable supply, do not force the panel to be wider than the screen

Harbormaster completed remote builds in B30282: Diff 49625.Sep 13 2024, 18:43

This has a weird double-scroll behavior. Isn't just simpler to just put all the stuff in cashtab and let the browser handle the scrolling?

Bildschirmfoto 2024-09-14 um 11.19.54 AM.png (1×1 px, 972 KB)

Bildschirmfoto 2024-09-14 um 11.20.15 AM.png (1×1 px, 1 MB)

When loading the NFT component it is complaining of a type error. Only appears on this diff and not on master.

The double scrolling effect is an issue though, especially with mobile users. Unless you know to scroll up using the thin vertical UI space to the right of the Collections panel then you can't go back up to view your own listings.

This revision now requires changes to proceed.Sep 14 2024, 13:41

will split out the "quick fix" stuff. the other issues here need refactors.

Improve display of NFTs by showing only available-to-buy or available-to-manage, with no separate scrollable panel

remove rebase-related double change

Harbormaster completed remote builds in B30300: Diff 49651.Sep 16 2024, 17:35

bytesofman edited the summary of this revision. (Show Details)Sep 16 2024, 17:36

bytesofman edited the test plan for this revision. (Show Details)

bytesofman retitled this revision from [Cashtab] NFT screen easy improvements to [Cashtab] Toggle "buy nfts" and "manage nfts" for better user presentation.

Harbormaster completed remote builds in B30301: Diff 49652.Sep 16 2024, 17:38

Fabien accepted this revision.Sep 17 2024, 13:40

emack accepted this revision.Sep 17 2024, 14:46

This revision is now accepted and ready to land.Sep 17 2024, 14:46

Closed by commit rABC1608b5fbd301: [Cashtab] Toggle "buy nfts" and "manage nfts" for better user presentation (authored by bytesofman). · Explain WhySep 17 2024, 15:14

This revision was automatically updated to reflect the committed changes.

bytesofman added a commit: rABC1608b5fbd301: [Cashtab] Toggle "buy nfts" and "manage nfts" for better user presentation.