Page MenuHomePhabricator

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

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

Details

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

image.png (626×497 px, 196 KB)

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

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

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)

emack requested changes to this revision.Sep 14 2024, 13:41
emack added a subscriber: emack.

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

image.png (122×477 px, 15 KB)

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

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.
This revision is now accepted and ready to land.Sep 17 2024, 14:46