Rendering a list of accounts

You have already managed to configure the Ethereum JavaScript client with the Electron application and got the node information in the Header area. In this section, we are going to display a list of accounts in the tree component and place it into the sidebar area.

As you may have noticed, the account names are quite long and may not fit in their dedicated area. We are going to make the sidebar scrollable vertically and stop the content from overlapping so that it's hidden under the main content area.

Let's start by changing the main application stylesheet and disabling the layout overflow for our sider component:

1. Update the App.css file and extend the ant-layout-sider style:

.ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;

  overflow: hidden;
  overflow-y: scroll;
}

Now, we need to have a dedicated pair of hooks...