Showing our account balance

At this point, you have a few accounts in the local Ethereum node. We have also managed to render a tree of account names so that our users can see all of them in the user interface.

Given that each account may contain various amounts of money, it is very important to allow users to see the balance of each account from the application.

Using the following steps, we are going to wire the account tree component to the main content area and display the balance of the selected account:

1. Introduce a pair of hooks for the current account balance:

function App() {
  const [node, setNode] = useState('Unknown Node');
  const [accounts, setAccounts] = useState([]);
  const [balance, setBalance] = useState(0);

  // ....
}

To get the balance of a particular account, you need to use the web3.eth.getBalance API from the Web3 library. This means we need a selection...