Refactor. API explanations. UX revamp.

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
 import { Block } from '../interfaces/electrs.interface';
-import { MempoolBlock } from '../interfaces/websocket.interface';
+import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 
 @Injectable({
@@ -11,6 +11,7 @@ export class StateService {
   latestBlockHeight = 0;
   blocks$ = new ReplaySubject<Block>(8);
   conversions$ = new ReplaySubject<any>(1);
+  mempoolStats$ = new ReplaySubject<MemPoolState>();
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
   txConfirmed = new Subject<Block>();
   live2Chart$ = new Subject<OptimizedMempoolStats>();

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

@@ -24,12 +24,14 @@ export class WebsocketService {
   }
 
   startSubscription() {
+    this.websocketSubject.next({'action': 'init'});
     this.websocketSubject
       .pipe(
         retryWhen((errors: any) => errors
           .pipe(
             tap(() => {
               this.goneOffline = true;
+              this.websocketSubject.next({'action': 'init'});
               this.stateService.isOffline$.next(true);
             }),
             delay(5000),
@@ -39,11 +41,17 @@ export class WebsocketService {
       .subscribe((response: WebsocketResponse) => {
         if (response.blocks && response.blocks.length) {
           const blocks = response.blocks;
-          blocks.forEach((block: Block) => this.stateService.blocks$.next(block));
+          blocks.forEach((block: Block) => {
+            if (block.height > this.stateService.latestBlockHeight) {
+              this.stateService.latestBlockHeight = block.height;
+              this.stateService.blocks$.next(block);
+            }
+          });
         }
 
         if (response.block) {
-          if (this.stateService.latestBlockHeight < response.block.height) {
+          if (response.block.height > this.stateService.latestBlockHeight) {
+            this.stateService.latestBlockHeight = response.block.height;
             this.stateService.blocks$.next(response.block);
           }
 
@@ -61,6 +69,17 @@ export class WebsocketService {
           this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
         }
 
+        if (response['live-2h-chart']) {
+          this.stateService.live2Chart$.next(response['live-2h-chart']);
+        }
+
+        if (response.mempoolInfo) {
+          this.stateService.mempoolStats$.next({
+            memPoolInfo: response.mempoolInfo,
+            vBytesPerSecond: response.vBytesPerSecond,
+          });
+        }
+
         if (this.goneOffline === true) {
           this.goneOffline = false;
           if (this.lastWant) {
@@ -90,8 +109,7 @@ export class WebsocketService {
   }
 
   want(data: string[]) {
-    // @ts-ignore
-    this.websocketSubject.next({action: 'want', data});
+    this.websocketSubject.next({action: 'want', data: data});
     this.lastWant = data;
   }
 }