Improved websocket tx/address tracking handling when disconnecting .

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

@@ -132,7 +132,11 @@ class ElectrsApi {
         } else if (res.statusCode !== 200) {
           reject(response);
         } else {
+          if (response.constructor === Object) {
             resolve(response);
+          } else {
+            reject('getBlock returned invalid data');
+          }
         }
       });
     });

frontend/src/app/components/address/address.component.ts

@@ -7,7 +7,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
-import { of, merge } from 'rxjs';
+import { of, merge, Subscription } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 import { environment } from 'src/environments/environment';
 
@@ -25,6 +25,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
+  mainSubscription: Subscription;
 
   totalConfirmedTxCount = 0;
   loadedConfirmedTxCount = 0;
@@ -49,7 +50,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
-    this.route.paramMap
+    this.mainSubscription = this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
           this.error = undefined;
@@ -192,6 +193,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.websocketService.startTrackAddress('stop');
+    this.mainSubscription.unsubscribe();
+    this.websocketService.stopTrackingAddress();
   }
 }

frontend/src/app/components/transaction/transaction.component.ts

@@ -3,7 +3,7 @@ import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, filter, take } from 'rxjs/operators';
 import { Transaction, Block } from '../../interfaces/electrs.interface';
-import { of, merge } from 'rxjs';
+import { of, merge, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
@@ -28,6 +28,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   error: any = undefined;
   latestBlock: Block;
   transactionTime = -1;
+  subscription: Subscription;
 
   rightPosition = 0;
 
@@ -42,7 +43,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.route.paramMap.pipe(
+    this.subscription = this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.txId = params.get('id') || '';
         this.seoService.setTitle('Transaction: ' + this.txId, true);
@@ -51,6 +52,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
         this.isLoadingTx = true;
         this.transactionTime = -1;
         document.body.scrollTo(0, 0);
+        this.leaveTransaction();
         return merge(
           of(true),
           this.stateService.connectionState$
@@ -160,7 +162,12 @@ export class TransactionComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.websocketService.startTrackTransaction('stop');
+    this.subscription.unsubscribe();
+    this.leaveTransaction();
+  }
+
+  leaveTransaction() {
+    this.websocketService.stopTrackingTransaction();
     this.stateService.markBlock$.next({});
   }
 }

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

@@ -15,8 +15,7 @@ export class WebsocketService {
   private websocketSubject: WebSocketSubject<WebsocketResponse> = webSocket<WebsocketResponse | any>(WEB_SOCKET_URL);
   private goneOffline = false;
   private lastWant: string[] | null = null;
-  private trackingTxId: string | null = null;
-  private trackingAddress: string | null = null;
+  private isTrackingTx = false;
   private latestGitCommit = '';
   private onlineCheckTimeout: number;
   private onlineCheckTimeoutTwo: number;
@@ -52,7 +51,7 @@ export class WebsocketService {
           }
 
           if (response.txConfirmed) {
-            this.trackingTxId = null;
+            this.isTrackingTx = false;
             this.stateService.txConfirmed$.next(response.block);
           }
         }
@@ -105,12 +104,6 @@ export class WebsocketService {
           if (this.lastWant) {
             this.want(this.lastWant);
           }
-          if (this.trackingTxId) {
-            this.startTrackTransaction(this.trackingTxId);
-          }
-          if (this.trackingAddress) {
-            this.startTrackTransaction(this.trackingAddress);
-          }
           this.stateService.connectionState$.next(2);
         }
 
@@ -129,12 +122,23 @@ export class WebsocketService {
 
   startTrackTransaction(txId: string) {
     this.websocketSubject.next({ 'track-tx': txId });
-    this.trackingTxId = txId;
+    this.isTrackingTx = true;
+  }
+
+  stopTrackingTransaction() {
+    if (this.isTrackingTx === false) {
+      return;
+    }
+    this.websocketSubject.next({ 'track-tx': 'stop' });
+    this.isTrackingTx = false;
   }
 
   startTrackAddress(address: string) {
     this.websocketSubject.next({ 'track-address': address });
-    this.trackingAddress = address;
+  }
+
+  stopTrackingAddress() {
+    this.websocketSubject.next({ 'track-address': 'stop' });
   }
 
   fetchStatistics(historicalDate: string) {
@@ -168,6 +172,6 @@ export class WebsocketService {
           this.goOffline();
         }
       }, 1000);
-    }, 10000);
+    }, 30000);
   }
 }