The getAccountTransactions() method shown here accepts a derived address as an argument and fetches all transactions to that account, from the genesis block to the current block. Hence, it fetches all payment transactions by customers to an address in the wallet. It then updates this transaction data to the state.

This array is then mapped by the WalletTrans component, which displays all of the transactions for a selected wallet address:

1. Let's look at this method:

getAccountTransactions = (accAddress) => {
 const startBlockNumber = 0; 
 let app = this;
 let transactions = this.state.transactions;

The code block can be understood as follows:

• • getAccountTransactions accepts the accAddress argument, which is the merchant wallet address for which it needs to fetch transactions from the blockchain.
  • We also define the constants and local variables and capture the current app state.
  • The startBlockNumber constant is set to 0 to indicate that we'll be searching from the initial block in the blockchain, otherwise known as the genesis block.

2. With an asynchronous call, we fetch the latest block using the web3 method, getBlockNumber, as shown here. This will be our endBlockNumber, that is, the last block we search up to for transaction data:

(async function main () {
 const endBlockNumber = await app.web3.eth.getBlockNumber()

console.log("Searching for transactions to/from account "" + accAddress + "" within blocks "  + startBlockNumber + " and " + endBlockNumber);

3. Now, we write a loop as shown here. Our counter loops from the startBlockNumber (0) to endBlockNumber (the current block):

for (var i = endBlockNumber; i > 0 ; i--) {
var block = await app.web3.eth.getBlock(i, true);

For each loop, we fetch the block with block number equal to our current counter value. To do so, we use the web3 method, eth.getBlock.

4. For each non-null block (blocks with transactions), we will check whether any of the transactions are to the merchant's address (the accAddress argument parameter), as shown here:

if (block != null && block.transactions != null) {
 block.transactions.forEach( function(e) {
 if (accAddress == "*" || accAddress == e.to) {
 

5. If a transaction is to the merchant's account, we fetch the details and update the current state. To do so, we will first capture the transaction properties in our local variables. The value of the transaction is divided by 1,000,000,000,000,000,000 to convert it from gwei into ether:

 let hash = e.hash;
 let blockNumber = e.blockNumber;
 let transactionIndex = e.transactionIndex;
 let from = e.from;
 let value = e.value/1000000000000000000;

6. We also check how many blocks have been added to the blockchain after our transaction, as shown in the following. The confirmation parameter captures the difference between the latest block and the block number of the transaction. cflag captures whether this difference is greater than or less than 40. If the difference is greater than 40, the block is confirmed and the value of cflag is set to true; otherwise, cflag is set to false to indicate that the transaction is still awaiting 40 block confirmations:

var confirmations;
 var cflag;
if( i >= e.blockNumber)
 {
 confirmations = endBlockNumber - e.blockNumber
 }
 
 if(confirmations > 40)
 {
 cflag= "Confirmed"; 
 }
 else
 {
 cflag = "Unconfirmed";
 }

7. After setting our local parameters, we push a new element to the transactions array, as shown here:

transactions.push({
 transactionIndex,
 hash,
 blockNumber,
 from,
 value,
 confirmations,
 cflag
});

8. After each one, we use setState to set the new transactions state, as shown here:

app.setState({ 
 transactions
 })

With that, we come to an end for our App.js file and all of the related components. Let's now put all of the components together and see how the entire payment ecosystem operates.

You can find the source code of this chapter on the GitHub repository of this book.