My Stakes - DIVA Governance Dashbaord

[Ayaz1997]

Context

This issue focuses on the My Stakes page for the DIVA Governance dashboard and its features.
The Overview and My Stakes tab can be switched and when a wallet is connected user can see
details of their staking towards a candidate. They can also add more tokens for stake on an existing candidate or unstake their tokens after a certain period of time.

Following is the list of features:

• Default profile image of candidate's wallet

• Staked to - candidate's wallet address/ENS

• Staked - the amount of $DIVA tokens staked towards the candidate's address

• Staked since - total duration since the token was staked

• Min unstake duration - minimum time period before which the tokens cannot be unstaked

  • if Staked since < Min stake duration -> disable unstake
  • if Staked since >= Min stake duration -> enable unstake

• More info - click to view the candidate's profile details

• Stake -> click to open pop-up -> enter amount of tokens to stake -> confirm stake -> complete transaction on wallet

• Unstake -> click to open pop-up -> enter amount of tokens to unstake -> view current stake balance with max click button -> confirm Unstake -> complete transaction on wallet

Design Mockup

Design - https://www.figma.com/file/CqOXnCH2EMUKRfVxfnUccz/DIVA-Governance-Dashboard?node-id=86%3A739&t=fudsuPmBYLQ1xGec-4

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

Wallet not connected

Wallet connected

Stake $DIVA

Unstake $DIVA

More info (view candidate's profile)

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