* Update dependencies * Update examples with simplified storage * Update dependencies * Revert tsc location override (check) * Update dependencies
1.6 KiB
adding validators
Previously, the list of accounts wishing to paritipate in staking has been shown. The next step would be to merge this with the list of validators (as selected from the intentions) and show these slightly differently.
component
Building on the component created previously, we can expand the selection (and rendering) to query the active validators.
class Comp extends React.PureComponent<ApiProps, State> {
...
subscribeValidators () {
const { api } = this.props;
return api.state
.getStorage(storage.session.public.validators)
.subscribe((validators: StorageValidators) => {
this.setState({
validators: validators.map(encodeAddress)
});
});
}
...
renderAccount = (address: string, proposals: number[] = [], isValidator: boolean = false) => {
return (
<tr className={isValidator ? 'validator' : ''} key={address}>
...
);
}
}
walk through
Building on what we have done previously, we now also subscribe to the list of validators (storage.session.public.validators) and uses this to highlight the actual active validators that we have found. It is important to note that the validator list is a subset of intentions, i.e. validators will continue to be shows as active intentions while they are part of the network.
actual output
next steps
For the next round, we will cleanup the display somewhat, allowing us to make sense of the actual unordered information displayed.
