Booster page: Design assets & handover

[diterra-code]

The designs of the booster page (prev. multiplier page) are now ready for development.

TLDR:
The booster page is a governance sub-page dedicated to providing Breadchain app users a way to get rewarded with voting power boosters. This page displays the following:

• A short description
• A My voting power card
• A collection of all available boosters
• The state of the booster: verified or unverified
• A footer with helpful links
• Dark and Light mode

See example here:

Main figma link:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-145070&t=E8JYQmTzFcAHs58k-1

In the following sections of this page's design will be explained and provided with the Figma link where the design assets are.

Description

Screenshot:

It consists of a tile and a short description. This description might change after review however for now the copy writing text can be used.

Figma link:
https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-204198&t=E8JYQmTzFcAHs58k-1

My voting power card

Screenshot:

This consists out of;

• Title
• Overall amount of voting power the user has
• The total current booster applied
• Followed by a voting power breakdown:
  • Total voting power derived from baking BREAD
  • Total voting power derived from locked LP tokens
• A "how does this work?" link that leads to the voting power/ booster page notion docs
  Figma Link:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6847-214923&t=E8JYQmTzFcAHs58k-1

Booster cards

Screenshot:

They consist of;

• Image
• Title
• status
• booster amount
• short description
• 'view' button
• Boost duration period.

Note: The view button opens up a pop up overlay where the details are provided to the user on how to get or verify to receive a booster.

Figma link:
https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6587-36423&t=E8JYQmTzFcAHs58k-1

Booster pop up cards

There are two types of boosters a user can get. Dynamic and non-dynamic.

Non-dynamic:

This is a booster where a user has to verify their activity either on-chain or off-chain to receive it.

The 'Get' button: directs the user to the place where they can get the requirements of the booster e.g. Github repo, Raidguild NFT minting page.
The 'verify' button: Makes the user verify if they have reached the requirements. e.g. through an onchain signature or connecting an external account (github, X, etc).

Note: Expiration dates of boosters still have to be discussed and decided on.

Screenshot:

Dynamic:

This is a booster where the user can increase their boost progressively if certain requirements are met. e.g a voting streak where a user has to vote 2 times in a row or 4 times to receive their voting power boost. The main difference is the booster progress bar:

Screenshot booster overlay card:

This card consists of;

• Image
• title
• status
• Current boosters amount applied
• Progress bar
• Description
• 'Get' button
• ' Verify' button
• expiration date
• close overlay/pop up button (on the top right)

Screenshot booster progress bar:

The progress bar is designed for a max 4 progress steps. e.g. x1.1, x1.2, x1.3, x1.4

It starts empty and once the first streak is achieved it gains 25% and so forth until it reaches its max 100%

Feel free to ask any additional questions, design assets or states.

[secbajor]

The core team has been in discussion about the voting boost feature set and have decided to pause on it for now, pending a more detailed discussion with tbsoc to align on strategy and which voting boosts should be implemented. Note from the back end team is that the one voting boost that is closest to being deployable is the voting streak boost. We should consider rescoping the project to focus on launching that one voting boost, if we can agree on moving forward generally with voting boosts.