Validator dashboard - Tab and Widgets

[dmtrjsg]

Context

• https://github.com/Joystream/pioneer/issues/4321

Design

Link to Figma>

Design Preview

Scope

• [ ] Add Validator Dashboard tab to validators page
• [ ] Add widgets -- Claimable rewards -- Stake -- Your rewards -- Annual Percentage Rate
• [ ] Tooltips @ninja-fire pls add tooltips

Out of scope :no:

• [ ] Claiming rewards

[bwhm]

Re: discord question:

where can I retrieve data for "claimable rewards", "stake", "your rewards", "APR" ?

These are all very much related, so we'll start quickly with what you need to fetch through the API, and why:

• staking.historyDepth -> how far back (in eras) you can get staking data, without having needing .at(blockHash)
• staking.currentEra -> the current era (without going in to why, activeEra will not always return the same number. use current) If the former returns 700 and the latter returns 120 (it "always" will), you can get data from era 580 to 700, although the last one will not be complete of course...

Now:

1. staking.erasStakers will get you all the validators in an era, with their total, own and others stake. Including the actively staked amount each nominator have put on each validator.
   • b) You can also staking.erasTotalStake if you don't want to add up the above, but obviously you may need to anyway depending on approach and need.
2. staking.erasValidatorReward returns the rewards shared by the validator set for each era
3. staking.erasRewardPoints allows you to calculate how much each validator earned, before "sharing" with nominators
4. staking.ledger allows you to see which eras a validator/nominator has claimed rewards for
5. staking.erasValidatorPrefs shows the validator preferences for an era, which allows you to calculate the reward distribution between validator and nominator
6. staking.validatorSlashInEra and staking.nominatorSlashInEra allows you to see how much was slashed.

I'm pretty sure this is all the data you need to calculate everything, although it doesn't help much on the "how" side.

You might be better off looking at the source code for polkadot-js/apps, as they both use some nice api.derive.staking.x queries to gather all the data you need in fewer queries, and calculates all of this anyway.

I do have an old script somewhere that I used to the validator rewards for the testnets, but the code is not exactly clean.

Stake Use 1. or 1b) above, depending on needs.

Claimable Rewards If you are getting the data for every validator/nominator AND every era in the history, this will be quite cumbersome (unless there is a suitable derive). I wrote how to calculate the rewards and distribution to @dmtrjsg, who shared it somewhere... Note that with 1. and 4. - If anyone claimed rewards for validator v1 in an era, the rewards for the nominators of that validator in that era was claimed as well (but if they nominated more than one validator, I don't think their other rewards was claimed as well)

Your rewards Probably same approach as above. Probably best to do first, and rather also add up which era, validator and amount have not been claimed.