Added mempool inSync property to backend. Display on frontend when not in sync and on't create statistics when not in sync.

fixes #29

backend/src/api/mempool.ts

@@ -3,6 +3,7 @@ import bitcoinApi from './bitcoin/electrs-api';
 import { MempoolInfo, TransactionExtended, Transaction } from '../interfaces';
 
 class Mempool {
+  private inSync: boolean = false;
   private mempoolCache: any = {};
   private mempoolInfo: MempoolInfo | undefined;
   private mempoolChangedCallback: Function | undefined;
@@ -17,6 +18,10 @@ class Mempool {
     setInterval(this.updateTxPerSecond.bind(this), 1000);
   }
 
+  public isInSync() {
+    return this.inSync;
+  }
+
   public setMempoolChangedCallback(fn: Function) {
     this.mempoolChangedCallback = fn;
   }
@@ -94,11 +99,13 @@ class Mempool {
           if (transaction) {
             this.mempoolCache[txid] = transaction;
             txCount++;
-            this.txPerSecondArray.push(new Date().getTime());
-            this.vBytesPerSecondArray.push({
-              unixTime: new Date().getTime(),
-              vSize: transaction.vsize,
-            });
+            if (this.inSync) {
+              this.txPerSecondArray.push(new Date().getTime());
+              this.vBytesPerSecondArray.push({
+                unixTime: new Date().getTime(),
+                vSize: transaction.vsize,
+              });
+            }
             hasChange = true;
             if (diff > 0) {
               console.log('Fetched transaction ' + txCount + ' / ' + diff);
@@ -126,6 +133,11 @@ class Mempool {
         }
       });
 
+      if (!this.inSync && transactions.length === Object.keys(newMempool).length) {
+        this.inSync = true;
+        console.log('The mempool is now in sync!');
+      }
+
       console.log(`New mempool size: ${Object.keys(newMempool).length} Change: ${diff}`);
 
       this.mempoolCache = newMempool;

backend/src/api/statistics.ts

@@ -23,7 +23,12 @@ class Statistics {
 
     setTimeout(() => {
       this.runStatistics();
-      this.intervalTimer = setInterval(() => { this.runStatistics(); }, 1 * 60 * 1000);
+      this.intervalTimer = setInterval(() => {
+        if (!memPool.isInSync()) {
+          return;
+        }
+        this.runStatistics();
+      }, 1 * 60 * 1000);
     }, difference);
   }
 

frontend/src/app/components/footer/footer.component.html

@@ -3,9 +3,14 @@
     <div class="row text-center" *ngIf="memPoolInfo">
       <div class="col d-none d-sm-block">
         <span class="txPerSecond">Tx weight per second:</span>
-        <div class="progress sub-text">
-          <div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
-        </div>      
+        <span class="" *ngIf="memPoolInfo?.vBytesPerSecond === 0; else inSync">
+          &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
+        </span>
+        <ng-template #inSync>
+          <div class="progress sub-text">
+            <div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
+          </div>
+        </ng-template>    
       </div>
       <div class="col">
         <span class="unconfirmedTx">Unconfirmed<span class="extra-text"> transactions</span>:</span>