[TASK] Create stashes/nomination list in tangle-app staking page

[drewstone]

Overview

This should be done before #1679.

The page for listing your nomination should be separate from the validator list page. It is shown below. It can be titled "Accounts" as it is done in the Apps UI

Tasks

• Create the page as a separate item in the sidebar nav.

[monaiuu]

Handoff

Implement 'Delegation Table' to provide users with an overview of their staking activities and to manage their delegations. This table will display key information about the user's delegated funds, their rewards, and the validators they've chosen, with various action options that should be addressed in this issue.

Requirements

Empty States:

• Empty State: 'Wallet Not Connected': prompt user to connect wallet via CTA.
• Empty State: 'No delegation': when the user hasn't delegated any tokens; prompt user to start delegating via CTA.

Delegations Table

• Validator: Display the address or identity info of the validator the user has delegated to.
• Status: Show the current status of the delegation:
  • Active: The delegated amount is currently staked and potentially earning rewards.
  • Waiting: The delegated amount is in the waiting queue and is not yet staked.
• Amount Delegated/Staked: Display the exact amount of tokens the user has currently delegated to the validator.
• Pending Rewards: Indicate any unclaimed rewards that the user can claim from their staking. This should update in real-time.
• Auto-Compound Percentage: Show the percentage at which rewards are being automatically compounded. The user should be able to adjust this value if needed.
• Actions: (specific flows addressed here)
  • Add Stake: Allow users to add more tokens to their existing stake. This should open a modal where they specify the amount and confirm the action.
  • Unbond Funds: Provide an option for users to start the unbonding process for a portion or all of their staked tokens.; with waiting period associated.
  • Remove Stake: Allow users to remove their stake from a validator.
  • Change Reward Destination: Let users specify a different address where their staking rewards should be sent.
  • Update Validator: If users wish to change their validator preference, provide an option to do so. Involves choosing a new validator and moving their stake.

Figma Link

Screenshot

[github-actions]

This issue is stale because it has been open for 60 days with no activity.

[devpavan04]

Implemented nomination list table in #1863.