Stage 4: Load Available On-chain Accounts

Video Tutorial

  1. Get the available accounts from the web3 connection, this is to go beneath the getNetwork block where the token reference was created, line 35 & 37
this.web3.eth.getAccounts((err, accounts) => {

});
  1. Load the available accounts into the user interface
  • Import the Material UI MenuItem, line 12
import MenuItem from 'material-ui/MenuItem';
  • Add an availableAccounts arrary into the app’s state, line 21
availableAccounts: [],

  • Append all accounts into the UI dropdown menu, line 38-45

    Important

    The code block below is to go within the callback of the getAccounts call above.

    i.e.

    this.web3.eth.getAccounts((err, accounts) => {
  // Append all available accounts
  for (let i = 0; i < accounts.length; i++) {
    this.setState({
      availableAccounts: this.state.availableAccounts.concat(
        <MenuItem value={i} key={accounts[i]} primaryText={accounts[i]} />
      )
    });
  }
});

    // Append all available accounts
for (let i = 0; i < accounts.length; i++) {
  this.setState({
    availableAccounts: this.state.availableAccounts.concat(
      <MenuItem value={i} key={accounts[i]} primaryText={accounts[i]} />
    )
  });
}
  1. Set the default account

  • Add a defaultAccount variable to the state, line 22

    defaultAccount: 0,

    Note

    The constructor and state should now look like this:

    constructor(props) {
  super(props)
  this.state = {
    availableAccounts: [],
    defaultAccount: 0,
    token: null, // token contract
  };
}

  • Set the defaultAccount in the state when the drowdown value changes, this is to be placed within the handleDropDownChange function, line 76

this.setState({ defaultAccount });