Loading progressbar for loading address, block transactions and blocks

backend/src/api/bitcoin/electrum-api.ts

@@ -10,6 +10,7 @@ import logger from '../../logger';
 import * as ElectrumClient from '@mempool/electrum-client';
 import * as sha256 from 'crypto-js/sha256';
 import * as hexEnc from 'crypto-js/enc-hex';
+import loadingIndicators from '../loading-indicators';
 
 class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
   private electrumClient: any;
@@ -121,6 +122,8 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
     }
 
     try {
+      loadingIndicators.setProgress('address-' + address, 0);
+
       const transactions: IEsploraApi.Transaction[] = [];
       const history = await this.$getScriptHashHistory(addressInfo.scriptPubKey);
       history.reverse();
@@ -132,16 +135,17 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
           startingIndex = pos + 1;
         }
       }
+      const endIndex = Math.min(startingIndex + 10, history.length);
 
-      for (let i = startingIndex; i < Math.min(startingIndex + 10, history.length); i++) {
+      for (let i = startingIndex; i < endIndex; i++) {
         const tx = await this.$getRawTransaction(history[i].tx_hash, false, true);
-        if (tx) {
-          transactions.push(tx);
-        }
+        transactions.push(tx);
+        loadingIndicators.setProgress('address-' + address, (i + 1) / endIndex * 100);
       }
 
       return transactions;
     } catch (e) {
+      loadingIndicators.setProgress('address-' + address, 100);
       if (e === 'failed to get confirmed status') {
         e = 'The number of transactions on this address exceeds the Electrum server limit';
       }

backend/src/routes.ts

@@ -16,6 +16,7 @@ import logger from './logger';
 import bitcoinApi from './api/bitcoin/bitcoin-api-factory';
 import transactionUtils from './api/transaction-utils';
 import blocks from './api/blocks';
+import loadingIndicators from './api/loading-indicators';
 
 class Routes {
   private cache: { [date: string]: OptimizedStatistic[] } = {
@@ -553,6 +554,8 @@ class Routes {
 
   public async getBlocks(req: Request, res: Response) {
     try {
+      loadingIndicators.setProgress('blocks', 0);
+
       const returnBlocks: IEsploraApi.Block[] = [];
       const fromHeight = parseInt(req.params.height, 10) || blocks.getCurrentBlockHeight();
 
@@ -576,28 +579,35 @@ class Routes {
           returnBlocks.push(block);
           nextHash = block.previousblockhash;
         }
+        loadingIndicators.setProgress('blocks', i / 10 * 100);
       }
 
       res.json(returnBlocks);
     } catch (e) {
+      loadingIndicators.setProgress('blocks', 100);
       res.status(500).send(e.message || e);
     }
   }
 
   public async getBlockTransactions(req: Request, res: Response) {
     try {
+      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 0);
+
       const txIds = await bitcoinApi.$getTxIdsForBlock(req.params.hash);
       const transactions: TransactionExtended[] = [];
       const startingIndex = Math.max(0, parseInt(req.params.index, 10));
 
-      for (let i = startingIndex; i < Math.min(startingIndex + 10, txIds.length); i++) {
+      const endIndex = Math.min(startingIndex + 10, txIds.length);
+      for (let i = startingIndex; i < endIndex; i++) {
         const transaction = await transactionUtils.$getTransactionExtended(txIds[i], false, true);
         if (transaction) {
           transactions.push(transaction);
+          loadingIndicators.setProgress('blocktxs-' + req.params.hash, (i + 1) / endIndex * 100);
         }
       }
       res.json(transactions);
     } catch (e) {
+      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 100);
       res.status(500).send(e.message || e);
     }
   }