Website - MINT page

[babalicious-io]

Mint page

dev site

---

Mint tool

• Token image preview and Input fields that turn lighter when active
• Progress bar for token mints- supply/limit/minters data
• BTC/USD toggle switch, fee selector, estimate, dropdown details, ToS and MINT button
• On click of MINT - should check all fields are filled out/checkbox is ticked

Input settings

• Token image - pull in SRC20 images in preview, when the user has input token ticker - even better live with autofill/suggest
• Token - case insensitive - limit to 5 characters - is autosuggest/fill possible ?
• Amount - limit to XX characters - good to somehow verify with limit amount

Additional modules

• Instructions on how to mint and info about the tool - with a section link to the FAQ page for additional reading
• Banner module with the top 3 mints

---

input:focus - background-color: #ccc;
btn.hover - MINT - color: aa00ff; // FAQ - color: #ccc;

Purple ToS - link to page

---

[reinamora137]

Currently we have MINT SRC-20 as the title maybe that is best to stick with to avoid confusion. The preview here is cool that we can pretty easily populate from the deploy image

[babalicious-io]

[babalicious-io]

Token image color is changed - since it's a placeholder and not an upload image button.

[babalicious-io]

Mobile view - 360px

Alternate version - with token data justified right

[babalicious-io]

The MINTING module has been updated for both desktop and mobile.

[babalicious-io]

I have to redo them to better scale on different screen sizes 🙃

[babalicious-io]

The figma mockup versions for desktop, tablet and mobile are ready.
Except for the module banner Minting - which is dimmed out on the mockups.

The version layers are marked 🟠

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=2578-3177&m=dev&t=bgN5CBywBwbrGlkz-1

[babalicious-io]

Mockup is finalised and marked for dev.

The version layers are marked 🟢

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

[ARNLTony]

Stamping, Deploy, Mint and Transfer seem to use the same FAQ component to visualize. I saw that there are 2 that could be customized by calling a different file located in islands/modules.
It will be nice if each page could have its dedicated FAQ file so the text is in context of with the displayed functionality.

[babalicious-io]

Sounds logical to me - @reinamora137 any objections

[reinamora137]

They could likely be consolidated into one file and each page import a separate text file with the content but creating a new ts file for each and changing the import is not a big deal if that’s easier