Website - WALLET page

[babalicious-io]

WALLET page

dev site

---

Desktop - 1440px

Connect

• When user is connected the button goes outline and displays abbreviated addy
• Dropdown menus, dashboard (wallet page)/sign out (disconnect)

Top section
1st row

• Wallet balance with icon button for hiding/viewing the amounts - numbers should blur out on hide
• Wallet address and buttons to copy addy, send, receive and view history
  History button opens mempool.space in a new tab, the other three open popup modals

2nd row

• 3 selectable modules with the selected/active module highlighted with a semitransparent border
• Stamps, Dispensers and Tokens
• The modules can easily be upgraded to include glyphs/bitnames/collections/vaults/... in future updates

Content section

The content section (marked yellow) displays different content depending on user selection in the modules

• Stamps - simple stampscards with image, on click opens Stamp Details page
• Dispensers - shows open and closed dispensers, no user interaction, for now
• Tokens - tokencards that link to Src-20 Details page
• The subheading title changes with the content displayed
• Sort/search buttons

Dispenser section

Tokens section

Mobile - 768px

Mobile - 360px

---

What should the sort button sort asc/desc ?
Filter button to be added in v2
Search handles stamps and token search differently, so should have different default text in the searchbar when clicked open

---

The figma mockup is marked for dev.

The version layers are marked 🟢

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=3094-20145&m=dev&t=36XTddt0NPyDLql7-1

[babalicious-io]

I have forgotten a tokencard for minting tokens and will include that when ready

[babalicious-io]

The page and different screen size versions have been updated with tokencards for minting tokens

The Mint button on small devices portrait mode (360px) does not display, but the user can rotate and view/access it in landscape mode
There will have to be some code to remove the Mint button (display:none) at breakpoint 420px

Changed a couple of minor layout details on the tokencards for already minted tokens

---

Good to Go

[reinamora137]

to note, as discussed the 'social media' icons should only populate on these cards if they exist in the database - most will not until likely v2 where users can update them in the db directly

[babalicious-io]

Updated and restructured the components

• most changes have been to the structuring/organisation of the components
• Wallet Balance/Tools modules - text/bgCard sizes
• Overview modules - text/bgCard sizes

[babalicious-io]

New update to the Wallet page

• changed Dispensers to Listings across the whole page - all screen size versions
• added PSBT data to the Listings selectable module - except on Desktop and MobileSmall
  There needs to be a breakpoint at 420px that removes that data section (display:none)
  When we have more modules the Desktop design will change and there will be space for 3 sections of data
• Filters button has been added to the Listings section
  User select between displaying All/PSBT/Dispensers
• Tools button added to the Stamps section
  User select Transfer (List and more coming in future upgrades)

Transfer modal popup

• Dropdown menu with list of stamps in user wallet
  If more than 6 stamps in wallet then the dropdown menu displays scrollbar
  On user click of arrow or outside the dropdown menu then close the menu
• Placeholder image gets updated when user selects stamp # from dropdown list
• max Edition updates pr. stamp selected
• Editions Input Field is 1 pr. default

[babalicious-io]

Changed PSBT to ATOMIC on the page versions and ATOMIC SWAPS in the Listings section dropdown menu

[ARNLTony]

What about some actions around the wallet such as Trx accelerator