ghost-portal/examples/tut-005.md

pulling it together

Previously we have used the API to query the actual storage, here we will build on that base to show something usable on-screen.

component

This component will focus mostly on the render() method and display on-screen. As with other examples, we first show the actual code and then provide a short walk-through of the relevant parts -

class Comp extends React.PureComponent<ApiProps, State> {
  ...
  render () {
    const { intentions, proposals } = this.state;

    return (
      <table>
        <thead>
          <tr>
            <th />
            <th>Address</th>
            <th>Balance</th>
            <th>Proposals</th>
          </tr>
        </thead>
        <tbody>
          {intentions.map((address) => (
            this.renderAccount(address, proposals[address])
          ))}
        </tbody>
      </table>
    );
  }

  renderAccount = (address: string, proposals: number[] = []) => {
    return (
      <tr key={address}>
        <td><IdentityIcon size={24} value={address} /></td>
        <td>{address}</td>
        <td><Balance params={address} /></td>
        <td>{proposals.length}</td>
      </tr>
    );
  }
}

walk-through

The render is straight-forward. For each of our intentions, render a row in a table showing the icon & address, the balance of the account and the number of proposals.

actual output

next steps

Next up we will expand our list, showing the actual activive validators.