add paginated virtual scrolling to blockchain blocks bar

frontend/src/app/services/state.service.ts

@@ -1,6 +1,6 @@
 import { Inject, Injectable, PLATFORM_ID, LOCALE_ID } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
-import { Transaction } from '../interfaces/electrs.interface';
+import { Block, Transaction } from '../interfaces/electrs.interface';
 import { IBackendInfo, MempoolBlock, MempoolBlockWithTransactions, MempoolBlockDelta, MempoolInfo, Recommendedfees, ReplacedTransaction, TransactionStripped } from '../interfaces/websocket.interface';
 import { BlockExtended, DifficultyAdjustment, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
@@ -104,6 +104,7 @@ export class StateService {
   backendInfo$ = new ReplaySubject<IBackendInfo>(1);
   loadingIndicators$ = new ReplaySubject<ILoadingIndicators>(1);
   recommendedFees$ = new ReplaySubject<Recommendedfees>(1);
+  chainTip$ = new ReplaySubject<number>(-1);
 
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 
@@ -111,7 +112,7 @@ export class StateService {
   connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
   isTabHidden$: Observable<boolean>;
 
-  markBlock$ = new ReplaySubject<MarkBlockState>();
+  markBlock$ = new BehaviorSubject<MarkBlockState>({});
   keyNavigation$ = new Subject<KeyboardEvent>();
 
   blockScrolling$: Subject<boolean> = new Subject<boolean>();
@@ -280,12 +281,25 @@ export class StateService {
       this.txCache[tx.txid] = tx;
     });
   }
- 
+
   getTxFromCache(txid) {
     if (this.txCache && this.txCache[txid]) {
       return this.txCache[txid];
     } else {
-      return null;
+    return null;
+    }
+  }
+
+  resetChainTip() {
+    this.latestBlockHeight = -1;
+    this.chainTip$.next(-1);
+  }
+
+  updateChainTip(height) {
+    console.log('updating chain tip to ', height);
+    if (height > this.latestBlockHeight) {
+      this.latestBlockHeight = height;
+      this.chainTip$.next(height);
     }
   }
 }

frontend/src/app/services/websocket.service.ts

@@ -70,7 +70,7 @@ export class WebsocketService {
         clearTimeout(this.onlineCheckTimeout);
         clearTimeout(this.onlineCheckTimeoutTwo);
 
-        this.stateService.latestBlockHeight = -1;
+        this.stateService.resetChainTip();
 
         this.websocketSubject.complete();
         this.subscription.unsubscribe();
@@ -226,7 +226,7 @@ export class WebsocketService {
       const blocks = response.blocks;
       blocks.forEach((block: BlockExtended) => {
         if (block.height > this.stateService.latestBlockHeight) {
-          this.stateService.latestBlockHeight = block.height;
+          this.stateService.updateChainTip(block.height);
           this.stateService.blocks$.next([block, false]);
         }
       });
@@ -238,7 +238,7 @@ export class WebsocketService {
 
     if (response.block) {
       if (response.block.height > this.stateService.latestBlockHeight) {
-        this.stateService.latestBlockHeight = response.block.height;
+        this.stateService.updateChainTip(response.block.height);
         this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
       }