Redesign Explorer v0.9

[yangwao]

Tasks

In particular order

• Collection card  #4497
• New NFT card  #4496
• Explorer Tabs bar #4555
• explore sort options near tabs #4825
• Explorer Network switch  #4886
• Skeleton Items on infinity scroll  #4882
• Redesign Explorer Menubar #4532
• Redesign Explorer Filter Breadcumbs #4533
• redesign: dynamic change grid card size #4444
• Explorer: Mobile post-fix  #4893
• Infinity scroll bit broken? #4982
• Explore v0.9 feedback #4906
• Explore feedback leftovers #5143
• Explore sidebar full width borders #5078

The cat is out of the bag.

Backlog for Explorer v2

• KodaDot Explorer Upgrade #2650

---

We've been quickly making the redesign explorer to bit speed run upcoming collection reading and try to recycle as much possible logic so we can deliver the finest user experience, in short time.

Most of the logic should be already there, so I bet this should not be delayed as a gallery item.

What you can see down is the basic view when the user first time opens https://kodadot.xyz/explorer. By default showing collections, aggregating collections from all networks we are indexing.

Each headline could be separate task I guess.

Default collections view

- there is no button for changing the grid and the number of cards. - network change

Explorer Tabs

Switching between Collections and Items. Here we would like to rethink URL path

Currently, we have on Collections /bsx/explore?tab=COLLECTION and we would like to have /explore/collectibles its more human friendly URL. Hopefully Nuxt Router won't be wonky here

For Items I would propose change from /bsx/explore?tab=GALLERY&page=1 -> /explore/items

All Networks switch

Currently, we are waiting for

• Enable Multi-chain capabilities in KodaDot #4257
  so till then, we can opt to show NFTs pre-selected by networks like RMRK, Basilisk, MoonRiver, MoonBeam

Collection card

• Collection card  #4497
• For banner background we probably use banners, but as functionality is not there, we will use the last NFT from collection or avatar picture of collection.
  Then we are showing avatar, collection name which we probably be wrapping after some length (@exezbcz can hint length as we probably want to introduce dynamic grid?)
  Than numbers we already have are volume, highest sale and items in collections.

Explorer Items

Here you can see it added sort filter and grid settings

Sort By

We right now support two options to sort by. Why? Because sometime we want to see low to high from recently listed and not all low priced since first indexed data.

• ✨ NeoDropdown & NeoSelect #4430 could be used here?

Explore Menubar

The default state we are thinking of would be the open section Status with a checked "Buy Now" option

Sections will be

• Properties
• Price
• Status

Price

Our current price filter, I guess there are none changes.
Extra add is that when after applying price range you will change one of inputs, color of Apply button will change

Status

• Buy Now -- Listed NFTs available to buy
• Own -- NFTs your logged in address own

Properties

I guess we don't have screenshot here?

Filter Breadcumbs

If user clicks in Menubar, there will be adding filters as tags, with option to cancel those filters
By default there will be Buy Now, it's test and incentivize artist to always have something on sale
On the very end, we will show number of result item user has ability to see after filtered
filter tag behavior here:

Card Item

Classic.

• Item name - here on hover we will be showing NFT hover card
  • hover card NFT view #4340
• collection name
• price plus token
• network in corner

Mobile ui

• explore items
  • menu is 100% vh and vw, bottom part is fixed, i will update this so there is also clear all button.
  • sort by changed to an icon. When clicking, there will be dropdown
  • same with network switch
• explore collection
  • only network switch

Figma

https://www.figma.com/file/OwAEyE0QDPn3tHXZbyot1o/Explore-v0.9?node-id=0%3A1&t=lu1bdZZIvVezlcsc-3

• if you want edit rights, lmk

I'll go with @exezbcz and fill gaps in description

Ref

• Explorer tweak before new design v0.9 #4378
• Enable Multi-chain capabilities in KodaDot #4257

[exezbcz]

issue updated ✅

[yangwao]

okay we've figured out the missing Figma link mystery

[preschian]

just want to make sure, is the next/prev/random page removed in the new design?

[exezbcz]

just want to make sure, is the next/prev/random page removed in the new design?

yes

[preschian]

the collection page doesn't have a grid size button, is that expected?

[preschian]

oh nvm, I missed this - there is no button for changing the grid and the number of cards. - network change

[exezbcz]

oh nvm, I missed this - there is no button for changing the grid and the number of cards. - network change

no problem, you dont need that on explore, there is not something like minimalized collection cards yet

[preschian]

no sort options on collectibles/collections?

[exezbcz]

no sort options on collectibles/collections?

based on what data you would like to sort it? I think its not that important, there are only few use cases. I would personally skip this.

[preschian]

no sort options on collectibles/collections?

based on what data you would like to sort it? I think its not that important, there are only few use cases. I would personally skip this.

oh nothing, I just compared with current state. just want to make sure

[exezbcz]

no sort options on collectibles/collections?

based on what data you would like to sort it? I think its not that important, there are only few use cases. I would personally skip this.

oh nothing, I just compared with current state. just want to make sure

I didn't mean to be offensive :D but I could have missed something actually good. Nope we dont have any sorting on top of collection explore

[yangwao]

no sort options on collectibles/collections?

we can think of adding something to v1 explorer, found something from our backlog.
right now we can probably keep new/old

• Collections Sort Features #3601
• Sorting in Gallery/Collections - revisited #3523
• Collections Sort by #2845
• Add to collections sort by  #1778

[preschian]

👋 I will continue to "All Networks switch" section

[yangwao]

I guess most of stuff for explorer is done @exezbcz ?
I don't see any p2 with explorer label https://github.com/kodadot/nft-gallery/issues?q=is%3Aissue+is%3Aopen+label%3Aexplorer+label%3Ap2

If so, we can close this one

[exezbcz]

yup, only the price in breadcrumbs is left - but that applies to the collection too so it could be made there

• Price in breadcrumbs and sidebar #5167