polkadot-cloud / polkadot-staking-dashboard

Fully featured dashboard for staking and nomination pools on Polkadot.

📢 17/06/2024: Repository Migration

This repository was previously at paritytech/polkadot-staking-dashboard. As of 17/06/2024, Polkadot Staking Dashboard lives at polkadot-cloud/polkadot-staking-dashboard.

Polkadot Staking Dashboard

Contributing Community Assets

Validator Operators

To showcase a validator operator on staking dashboard, submit a PR to @w3ux/w3ux-library. The operator will then be available in the @w3ux/validator-assets NPM package. Full instructions.

URL Variable Support

Polkadot Staking Dashboard supports URL variables that can be used to direct users to specific configurations of the app, such as landing on a specific language or on a specific network. Variables are added at the end of the hash portion of URL.

The currently supported URL variables are as follows:

• n: Controls the default network to connect to upon visiting the dashboard. Supported values are polkadot, kusama and westend.
• l: Controls the default to use upon visiting the dashboard. Supported values are en and cn.
• a: Controls the account to connect to upon visiting the dashboard. Ignored if the account is not present in the initial imported accounts.

URL variables take precedence over saved values in local storage, and will overwrite current configurations. URL variables will update (if present) as a user switches configurations in-app, such as changing the network or language.

Example URL:

The following URL will load Kusama and use the Chinese localisation resource:

staking.polkadot.cloud/#/overview?n=kusama&l=cn

Using Containers

You may build a container using:

./shell/build-container.sh

Then run your container with:

podman run --d -p 8080:80 localhost/polkadot-staking-dashboard

And access the Staking Dashboard at http://localhost:8080/.

Presentations

• 29/06/2023: [Video] Polkadot Decoded 2023: The Next Step of the Polkadot UX Journey
• 30/06/2022: [Video] Polkadot Decoded 2022: Polkadot Staking Dashboard Demo

polkadot-staking-dashboard's Issues

Add Validator Selection Algorithm Support

We want to get the Validator Selection algorithm integrated asap to provide more validator discovery functionality and to differentiate the dashboard from other offerings.

If @hamidra is happy with advancing nomination pool support, I can jump onto this one.

These goals may change, but initially I aim to:

• #581
• Have the algorithm workflow in the assistant that can be summoned from GenerateNominations, and have the resulting validators injected into the user's chosen validators.
• Be able to order validators (on the main validators page) by algorithm ranking - this can only be done after the user's initial usage with the algorithm.

Bug: The pool state does not reset when the stash account is switched

When the stash account is switched from an account that is a member of a pool to an account that is not participating in any nomination pools, the active nomination pool is not reset and still contains the previous pool.

Validator Selection Algorithm Template

Pool Header Button Modal

Include a modal summoned by the pool header button that shows the pool stash and reward accounts, total members, current points of the pool, and nomination status of the pool.

Amend misleading locked balances graph

The Overview balance graph needs to be amended to take into consideration locked / vested funds that can be staked.

Right now we have 2 issues:

• it looks like the greyed-out locked funds are inactive.
• The locked funds take into consideration staked funds and other vested funds that are locked (non-transferrable). These non-staked locked funds could be staked, and need to be communicated in the graph as a separate label to the locked staked funds.

This will be useful for the user to know - if their funds are locked for whatever reason, they might as well utilise them and stake them.

Additional API calls need to be made to determine these numbers, and need to be plugged into the donut chart with additional labels.

API calls of interest:

• vesting.locks to get amount locked and block duration
• balances.locks to get locked array, id and reasoning

Introduce Assistant Items Template

Introduce a flexbox based template for listing assistant items.

Items should be expandable to engulf the entire assistant box. Refer to this sandbox:
https://codesandbox.io/s/app-store-ui-using-react-and-framer-motion-ecgc2

Add pooling functionality

Add functionality to the Pools page to let the user:

• create a pool
• join a pool
• unbond from pool or destroy its pools

Nominate Functionality

Nominate feature, experiment with combining the following RPC calls:

• set_controller
• bond
• nominate

componentShouldUpdate > Page hierarchy

StatBoxList mobile support

More comprehensive account switching

The current account list is a basic of accounts:

What would be nice is a more detailed list that takes into consideration:

• whether an account is a stash or controller
• whether they are actively staking

My initial thoughts are to split this into two lists side by side in a wider modal, staking and non-staking accounts, in addition to

• Put controller accounts below active stash accounts
• Non-active accounts in separate list
• Make the list searchable if possible.

The app already has the context necessary to provide the account data needed. If this is picked up we can go through them in more detail.

Steps Component (multi-stage input process)

Component to manage a multi-stage input process.

Functions needed:

• next step
• previous step
• reset

Lowest commission toggle not refreshing list

Possible fix: additional local state for list ordering to trigger re-render when changed.

(i) should act as toggle

Really small/nit like feature request. When you press the ℹ️ button a tooltip with helpful information pops up.

When I finish reading the tooltip and don't need it I expect that it would be possible to close the tooltip with another click on the ℹ️ button. In other words, I expect the button to act as a toggle.

It would really good if the ℹ️ button acted as a toggle. If that was the case, I would not have to move my cursor to close the tooltip.

Introduce footer buttons in <SideMenu />

• Share icon
• GitHub icon
• Theme toggle

Template only at this stage.

Collapsable SideMenu

Rename SectionWrapper to CardWrapper

We want to normalise naming conventions, and one of those strange names that have maintained is "SectionWrapper". A section is clearly just a card, so we want to move away from "Section" and just have "Card".

This mainly effects the SectionWrapper component, but there are some other wrappers that adopt the same name that can be changed.

Move activeEra from Network to SessionEra

It is all in the title. In addition to this, total_issuance could be moved to API, and the Network context could be scrapped altogether.

⏳ Container Query Styled Components Support Tracking Issue

Current browser support: https://caniuse.com/css-container-queries.

Blocker: Styled Components VS Code Support:

The vscode-styled-components plugin is yet to have container query support, and is flagging container usage as unknown properties. The custom css workaround does not apply to styled components.

• styled-components/typescript-styled-plugin#14

About CSS Container Queries

example using a container query:

@container (min-width: 700px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Make StatBoxList to take Items as children instead of props

Re: #33
Currently, StatBoxList takes a list of item attributes as a items prop and renders them inside the component.
This makes it hard to customize the StatBoxes, e.g. for #33 which we want to render a more customized statBox.
We can make the StatBoxList accept the inner Items as children components so they can be customized for different types of stats.

Minimum Nominator Stake

I was playing around with the Demo, and saw that on the validators view it alerts nominators of the minimum contribution needed to nominate the validator besides the actual limit of 10 DOT imposed by the runtime; this is a very cool feature IMO.

However, when looking at the info that PolkadotJS also has, I noticed that this does not take into consideration the minimum stake needed by the nominator for the validator to be part of the the elected nominators when the validator is over-subscribed. I think that it would be good for any nominator to know what's the minimum stake required to be part of the nominating set for the validator, which would be the lowest nomination of the 256 nominators selected for the validator.

Screenshots

Maybe my explanation was not the best, so here are some screenshots.

From Validators Dashboard:

From Nominators list for Validator:

In this particular case, I would think it's best to tell the user 'you need more than 160 DOTs' to nominate this validator.

UX: Nominations Management

The dashboard is at a good stage to introduce tools to fine-tune / update your nominations. UX concepts and additional component proposals are welcome to aid in this goal.

We need additional UX to allow users to:

• Add one or more validators to their nominations
• Remove one or more validators from their nominations

We need this tooling to be centred around the user's nomination list:

For removing nominations, we could introduce action buttons (Remove button above the list) which would invoke checkboxes next to the nominations for the user to select and update.

For adding validators, we need UX for at least two use cases:

• Adding a validator by address
• Adding one or more validators from your favourites list.

Optional extra of categorising favourites list.

UX: Better Stake Preloading

The Stake page currently takes the longest time to display due to all the syncing that needs to take place. The current UI displays some shadow boxes until the correct staking page is displayed:

This is not too user friendly and goes against what the rest of the app does - provide placeholders and default values until syncing completes.

The challenge here is that the Stake page is fundamentally different depending on whether a user is staking, or is yet to stake. the <Setup /> and <Active /> components display completely different UX.

I'd like to use this issue to get a quick turn-around for a better loading experience.

Can we introduce more syncing states and gradually introduce UI?

We are currently relying on isSyncing() to determine whether the page is ready. This function waits for a bunch of data to be fetched from a node. Perhaps introducing more syncing checks can break up the load process by gradually introducing more UI.

Note: more info about syncing piepline

Can we create custom loaders to better keep the user informed?

Alternatively a custom preloader giving the user more information could be created.

Leverage localStorage for subsequent visits & instant loading

localStorage is used for things like active network, active account, etc. But we could take it one step further and store more staking data as to load the previous state as soon as the user re-visits the dashboard.

Transaction feedback in assistant

Support of nomination in the UI

In the account picker, I selected a nominator account. The UI shows the staking payouts but otherwise tries to convince me that I am not staking. For example, that's what I see on the "Recent Payouts" panel.

It seems to me that this should be supported since nominating is a very common use case (If not the most common) for staking in the polkadot ecosystem.

Back-fill graph data to normalise display

This issue is in regards to the bar and line chart combo present on Overview and Payouts.

We wish to back-fill graph data for new / early staking positions that do not entirely fill at least 10 items for the graph.

For some context, this is a graph with 10 items:

And this is a newly opened staking position with only 4 items:

What we need to do here is to back-fill remaining items on a 24 hour basis. While it is true that payouts are not strictly on a daily basis, users will feel comfortable with this interval, and will give the graphs more historical context, and normalise the display.

Note that there are 2 graphs that comprise this component, the bar chart and line chart.

Introduce <NetworkBar /> metadata

Subscribe to P.JS api to receive the latest block number. Hook into component alongside network name and icon.

Hide the inactive components in nomination pool page.

When an account is not participating in nomination pools, hide the components that are inactive for a user in that state.

Bond Extra and Unbond Functionality

[description pending]

UX: Enhanced Validator Metrics Card

This issue is intentionally vague as to explore various layouts and designs for an enhanced validator metrics card.

The current card simply displays the validator's era points history. This is mostly a means of bootstrapping the boilerplate for expansion in future iterations:

Here is a Zug Capital node as an example:

We see this modal being expanded with useful stats and metrics. Some of them we've identified are:

• additional graph to show when validator was active or inactive.
• when validator was active, how many era points on average were they making.
• percentage of active eras the validator was receiving points.
• average commission / network average commission.
• the self stake of the validator.
• whether the validator is validating parachains, era points from paras / relay?

UX proposals and concepts are very welcome.

List Component (validators)

Basic list component designed to support validator lists.

Needs to support:

• list view (rows) or items (multiple items per row)

Era Time-left pie-chart / timer

We would like to let the user know how much time is left in the current era.

What would be nice is if we had a circular countdown styled the same way as the pie charts for stat boxes:

And on hover, show the remaining time left of the era:

One possible solution is to use this same chart js pie chart, and wrap it in a useEffect / setInterval loop that updates time left based on blocks.

We would put this timer alongside the Active Era stat on the Stake and Validator pages. It currently has no accompanying chart:

Open assistant from app content / toggle help mode

Link to wallets / extensions if polkadot js not found

Initial theming support

Initial theming support:

• ability to toggle light and dark mode.
• ability to switch themes for different networks.

GraphWrapper mobile support

Overview: Bar chart

Experiment with combining a bar chart displaying daily payouts alongside line graph.

Introduce <MainInterface /> sections

These sections should be linked to items. Don't worry about abstracting this linkage now.

• Introduce the ability to switch between sections of the app.
• Sections should slide up and down depending on their index in the side menu
• Sections should be dynamically sized flex-boxes.

Use motion's AnimatePresence to elegantly unmount sections after transitioning:
https://www.framer.com/docs/animate-presence/

Treat sections like slide show objects:

export const Slideshow = ({ image }) => (
  <AnimatePresence>
    <motion.img
      key={image.src}
      src={image.src}
      initial={{ x: 300, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      exit={{ x: -300, opacity: 0 }}
    />
  </AnimatePresence>
)

Era Points graph

Create a graph to display era points for a validator.

Line graph will clearly demonstrate validator's performance over time.

Introduce counters alongside menu <Item />'s

Counters should animate in as to draw attention to the user.

Test on event.

Integrate staking.ledger into BondedGraph

Unlocking Chunks Modal with Rebond

The user currently knows how much bond is unlocking, but cannot access the individual chunks.

As a next step, we'd like to introduce a new modal that lists the unbond chunks, with:

• time left before unbond chunk can be withdrawn.
• a rebond button next each chunk to submit the corresponding extrinsic and make the bond chunk active again.

Once this issue is fulfilled we can then move to the final widthdraw extrinsic for this component.

Introduce collapsable <SideMenu /> categories

Ability to click a menu category to collapse the section.

• Animate via motion.
• Ensure parent flexboxes are flex: 1 for dynamic resizing.

Allow to specify accounts not only from the account picker

I don't have all my accounts registered in polkadot.js nor talisman.

I think it would be a good idea to support displaying information not only for the accounts from the connected wallet, but also given by the account address.

Add all Nomination Pool Extrinsics

Extrinsics to complete for nomination pools to feature completeness:

• Withdraw
• Leave pool

And for role specific:

• Destroying a pool (root - does the depositor have a play here?)
• Nominate (nominator)
• State toggling (state toggler)
• Stop nominating nominations
• Assigning accounts to roles (updating roles)

Ensure metadata batchKeys are unique

Every <ValidatorList />, and a couple of other components, reference their own "meta batch": a bunch of subscriptions that maintain data for that list or component in question. Each meta batch is isolated, and as such have unique keys to access them.

If you global search const batchKey you will find various strings defined (that should all be unique), for example:

const batchKey = 'favourite_validators';

The issue is we are not currently programatically ensuring these batch keys are unique.

Proposed solution:

• Have a global static class that keeps track of the keys in an array.
• Have a method that is called when creating a new batchKey, returning the string and using console.error if that key has already been defined.

Utilising this class, the new code will look something like this:

const batchKey = BatchKeys.new('favourite_validators');

As additional background, I recently added a webpack config via terser-webpack-plugin to remove console statements from the production build.

Subscan Era Points Integration

Hi Ross, I'm looking forward to your creation.

Here are few of my issues I've seen with Polkadot.js.org that your Dashboard could address.

Extremely slow
I don't know about anyone else but most of the time I don't need to see all the Validator nodes out there, I just don't care about 100 Zug or p2p nodes.
I look at performance of my Validators or the Validators I would Nominate and maybe like 40 or 50 other 1KV nodes.
So If there was a way we could Star or select nodes we want to pull information for to save some network resources?
We could have some special Tab where we can see the performance of all nodes but that

Validator Performance

• Validator node in active set rights now or not
• Validator node Para Validating or not during specific epoch/session
• Validator node in active set #of eras in the last 28/84 Eras
• Validator node AVG era point based on #of active set nodes
• Validator points (Current, Min, Max, AVG)

Commission Changes

• We have seen in the past people changing Commission to stay on top of the

Ranking Validators by Commission

• Looking at Polkadot.js.org you will see Validators sorted by ranking, smallest commission + lowest stake = highest ranking place
• This doesn't show actual rank of the validator in the system

Phisherman

• There was a concept of Phisherman which was deprecated in a way. Would it be possible to use that as a Validator performance tester. In ETH mining there is a way to figure out how much hashing power each miner has It would be nice to see if Validator nodes actual have enough resources or running it on a "potato"

You should create Google Form for RFI (request for information) to the community
Example of questions:

• Are you looking at this Dashboard as as Validator, Nominator or Both?
• What you do like about current Dashboard?
• What you do not like about current Dashboard?
• What would you like to see on the new Dashboard?
• Any other ecosystem Dashboards to look at for ideas?

Balance Input Component

Support:

• slider
• maximum
• optional fees deduction from max

Validator Stats to integrate

Stats to integrate quite prominently on validator list:

• The estimated staking rewards based on how much is staked.
• Commission range in real-time: lowest to highest, with average commission.

[incomplete list]