Website - SRC-20 OVERVIEW page

[babalicious-io]

SRC-20 TOKENS OVERVIEW page

dev site

---

ALL

• Displays the top 10 SRC20s - default filtered by deploy date (only 5 in the mockup)
• The data is sorted in column groups that (I find) are of similar relevance
  This gives more space and will help scaling down on smaller screens
• The data can be sorted using the filtering options
• LOAD MORE loads next 10 tokens
  Can also be lazy load, but then the CTA module won't be seen until much later
• Below all the token data there is a CTA DEPLOY module
  It's a rough idea and a placeholder for anything relevant to SRC20s (alternately art stamps, but I'm trying to keep the two somewhat separate - or glyphs in v2)

MINTING

• Displays minting tokens - default filtered by progress
• Data has been sorted in groups
• The data can be sorted using the filtering options
• MINT takes you to the mint page
  https://dev.bitcoinstamps.xyz/stamping/src20/mint
• LOAD MORE loads next 10 tokens
  Can also be lazy load, but then the CTA module won't be seen until much later
• Below all the token data there is a module showing the latest mints from the most recent block
• Could also be recent deploys or token transfers (since this is the data you are sorting)
  Again it's a placeholder for anything relevant to be displayed

---

Does this sorting make sense or do you prefer the classical one line table presentation ?
https://dev.bitcoinstamps.xyz/src20/?ident=all
Is there data missing that you want included ?
Does the body text need to be a tone whiter - for better readability ?

---

[babalicious-io]

A clarification on the categorisation of SRC20's

https://github.com/orgs/stampchain-io/discussions/12#discussioncomment-10624730

[babalicious-io]

Dev site opens image preview popup on click of image. Should link to Details page.

[reinamora137]

agreed :)

[reinamora137]

I dig this layout. I’d say it’s ready to go. Simple enough to do last block display and the minting page at this point

[babalicious-io]

Desktop - with filter button opened - ended up reverting to vertical dropdown menus with title - boomerang.
Price change and volume data (placeholders) are added to tokens already minted - the design is ready for buying/selling features and we can easily insert a TRADE button.
Added trending - aka Top Mints - to minting tokens.
Social icons for web/X/TG/mail.
Updated arrowNavs.

Desktop - full page overview.
You can add as many tokencards as you wish - 10/15/20.
Deploy body text needs updating - live BTC price and fee integration.

Mobile - 568px
Slightly smaller buttons/menu links.
Same on 360px mobile.
The data layout reshuffles - and some data is omitted - depending on the screensize.

---

The figma mockup is finalised and marked for dev.

The version layers are marked 🟢

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=2609-8440&m=dev&t=aco4aneCbwjH5F4P-1

[babalicious-io]

Need to create components and hover states

[babalicious-io]

The page is updated

• created components and hover states
• changed Trendy to Trending in the filter dropdown menu (changed this in the header NavBar as well)
• the tokencard text layout has been slightly altered to look more like the tokencards in the Wallet page
• social icons use conditional logic to determine when to display
• on Minting tokens the Mint button opens (when user onClick) the Mint page and populates the input fields
• up to you how many tokencards you display at a time
• Recent Mints module, if there are many mints in a block, maybe limit the amount displayed
• Deploy module, the Faq button has changed to How-To, the Btc logo swapped with text

---

The figma mockup is marked for dev.

The version layers are marked 🟢
https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=2609-8440&m=dev&t=36XTddt0NPyDLql7-1

Tokencard Components
https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=4645-3439&m=dev&t=36XTddt0NPyDLql7-1