In this section, we are going to perform a basic integration with the application menu. You are going to create a Help/About Node menu that sends the show-node-info command to the renderer process. Our React application is going to handle the command and display a simple alert box with the Ethereum node information. Later on, you can provide a more sophisticated dialog with detailed information.

Let's start with the main process and the Menu template:

1. Switch to the public/electron.js file and import the Menu object from the Electron framework:

const { app, BrowserWindow, Menu } = require('electron');

2. Append the Menu code from the following listing to the bottom of file:

Menu.setApplicationMenu(
  Menu.buildFromTemplate([
    {
      label: 'Help',
      submenu: [
        {
          label: 'About Node',
          click() {
            const window = BrowserWindow.getFocusedWindow();
            window.webContents.send('commands', 'show-node-info');
          }
        }
      ]
    }
  ])
);

As you can see, we find the browser window and send the show-node-info payload via the commands channel. Now, it's time to update the renderer process and the src/App.js file.

3. Update the useEffect block in the App.js file according to the following code:

useEffect(() => {
    // ...
    if (window.require) {
      const electron = window.require('electron');
      const ipcRenderer = electron.ipcRenderer;
      const showNodeInfo = (_, command) => {
        if (command === 'show-node-info') {
          window.alert(`Node: ${node}`);
        }
      }
  
      ipcRenderer.on('commands', showNodeInfo);
      return () => {
        ipcRenderer.off('commands', showNodeInfo);
      }
    }
  }, [node]);

The preceding code is pretty straightforward. We gain access to ipcRenderer and start listening to the commands channel. In the show-node-info payload, we show the alert, along with the node information.

4. Start the web server and then the Electron application. Now, we can check out the Help/About Node menu.

You should be able to see the same node information that the application displays in the header. The next thing we need to do is render the list of the accounts we have inside our node.