Overview - DIVA Governance Dashbaord

[Ayaz1997]

Context

DIVA Governance Dashboard is an application that will help DIVA Token holders to stake and participate in governance activities, choose which candidate to support by staking DIVA Tokens towards them, and choose a protocol owner to manage overall protocol development.

This issue focuses on the DIVA Governance Overview page and the features that are needed be implemented.

• View Current protocol Owner and Other Supported Candidates
• Connect wallet to view $DIVA token balance and Total staked amount
• Search by wallet address to view the candidate

Current protocol owner: is the wallet which has maximum of $DIVA Tokens staked towards it

• View the default image for each wallet address or show the image from the end address

• View the candidate's wallet address or ENS address

• Staked: view the total number of $DIVA tokens staked for that wallet

• View Backers: click to expand the table view

  - View default profile image for staker
  - View staker's wallet address
  - View the number of $DIVA tokens staked by the staker
  - Staked since: time from which the user has staked token towards that address
  - Open in new tab icon: click to view the transaction on Etherscan
  

More info: click to view the pop-up where we can see the user/wallet's profile details

  - Profile image
  - Wallet address
  - Candidate details
  - Website/blog link
  - Twitter handle
  - LinkedIn profile

• Stake: click on the stake button and add your $DIVA tokens to stake towards the selected wallet address

• Register New Candidate

  - Only show when a wallet is connected
  - Click to register a connected wallet as a candidate to become a future protocol owner
  

• Trigger election

  - The trigger election option appears if any wallet address has more $DIVA tokens staked than the current protocol owner. In this case, an option to trigger election will appear which will last for a period of time until the highest staked wallet address can claim the new protocol ownership
  - This option will not show if a wallet is not connected to the app
  - If this option is present in any of the rows then all the rows will expand in size to maintain design consistency
  

• Connect wallet

  - View a default profile image for the connected wallet
  - View wallet address/ENS name
  - Click on the button to view the drop-down menu for **My Account** and **Disconnect wallet**
  

Design mockup

Design - https://www.figma.com/file/CqOXnCH2EMUKRfVxfnUccz/DIVA-Governance-Dashboard?node-id=128%3A419&t=PzzZ7tzY47TuYqt5-4

Prototype - https://www.figma.com/proto/CqOXnCH2EMUKRfVxfnUccz/DIVA-Governance-Dashboard?node-id=128%3A419&scaling=scale-down-width&page-id=0%3A1&starting-point-node-id=128%3A419

Wallet not connected

Wallet Connected

Table (view backers expanded) without a Trigger election

Table with a Trigger election option

Acceptance Criteria

• The design matches with mockup provided
• The app functionality is according to the specs provided
• Has been tested and reviewed based on the specs