Within the componentDidMount() method shown here, we will create and populate our accounts array. This will be used further by the WalletMain component to display all of the derived address from the merchant's HD wallet:

1. We start by declaring the app variable to store the state of the app. We also store the accounts state array in the local account parameter. Lastly, we declare a variable called pathid:

componentDidMount(){ 
 let app = this;
 let accounts = this.state.accounts;
 let pathid = 100;

The pathid variable indicates the number of address indices we'll be deriving, essentially, the number of hierarchical addresses we'll be generating in the merchant's HD wallet. Hence, in the m/44'/60'/0'/0/<address index> expression, pathid indicates the range of values the address index can take starting from 0. For our case, we are assuming the merchant wallet only generates 100 addresses.

2. Next, we will set up a web3 provider, which our application will interact with to get transaction data, as shown here:

this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); 

In my case, I have a Ganache blockchain running at localhost:8545 and hence my provider is pointed to the same. You can configure the provider as per the location of your Ethereum blockchain.

3. Next, we will derive our list of hierarchical address from the mnemonic, as shown here:

(async function main() {
 
 const seed = await bip39.mnemonicToSeed(app.state.mnemonic) 
 const root = hdkey.fromMasterSeed(seed);

As per the preceding code, we will generate the wallet seed from the mnemonic using the mnemonicToSeed member of the bip39 module. We also derive the root node from the seed using hdkey.

4. Next, as shown here, we will introduce a loop to generate the addresses from the mnemonic and check the current balance of each address. We loop our counter until it is within our range (pathid):

var i = 0;
 for (i = 0 ; i <=pathid; i++)
 {

5. For each loop, we generate the hierarchical checksum address for each counter value, as shown here:

 var path = "m/44'/60'/0'/0/"+i;
 const addrNode = root.derive(path);
 
 const pubKey = ethUtil.privateToPublic(addrNode._privateKey)
 const addr = ethUtil.publicToAddress(pubKey).toString('hex');
 const address = ethUtil.toChecksumAddress(addr);

6. For each hierarchical address, we then check the current balance using the web3.getBalance() method, as shown here. After fetching the balance, we convert it from gwei into ether by dividing by 1,000,000,000,000,000,000:

app.web3.eth.getBalance(address,function (error, result){
 if(!error)
 {
 let balance = result / 1000000000000000000;

7. For each account address, we push the checksum address and the balance to the accounts array, as shown here:

 if (balance >0)
{
 accounts.push({
 address,
 balance,
 });
}

8. After each push, we set the app state, as shown here:

app.setState({
 accounts
 })

Hence, our state now has all of the derived addresses with their current balance. If any of these accounts received a payment from the customer, its balance will be populated and displayed in the WalletMain screen.