ghost-portal/examples/tut-006.md

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.