Adding a third connection state and preventing offline indicator from pushing the menu.

backend/src/api/websocket-handler.ts

@@ -136,7 +136,7 @@ class WebsocketHandler {
         const foundTransactions: TransactionExtended[] = [];
 
         newTransactions.forEach((tx) => {
-          const someVin = tx.vin.some((vin) => vin.prevout && vin.prevout.scriptpubkey_address === client['track-address']);
+          const someVin = tx.vin.some((vin) => !!vin.prevout && vin.prevout.scriptpubkey_address === client['track-address']);
           if (someVin) {
             foundTransactions.push(tx);
             return;
@@ -185,7 +185,7 @@ class WebsocketHandler {
         const foundTransactions: TransactionExtended[] = [];
 
         transactions.forEach((tx) => {
-          if (tx.vin && tx.vin.some((vin) => vin.prevout && vin.prevout.scriptpubkey_address === client['track-address'])) {
+          if (tx.vin && tx.vin.some((vin) => !!vin.prevout && vin.prevout.scriptpubkey_address === client['track-address'])) {
             foundTransactions.push(tx);
             return;
           }

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

@@ -97,9 +97,9 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.loadedConfirmedTxCount++;
       });
 
-    this.stateService.isOffline$
+    this.stateService.connectionState$
       .subscribe((state) => {
-        if (!state && this.transactions && this.transactions.length) {
+        if (state === 2 && this.transactions && this.transactions.length) {
           this.loadAddress(this.addressString);
         }
       });

frontend/src/app/components/master-page/master-page.component.html

@@ -1,6 +1,10 @@
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <a class="navbar-brand" routerLink="/"><img src="./assets/mempool-space-logo.png" width="180" class="logo"> <span class="badge badge-warning" style="margin-left: 10px;" *ngIf="isOffline">Offline</span></a>
+  <a class="navbar-brand" routerLink="/" style="position: relative;">
+    <img src="./assets/mempool-space-logo.png" width="180" class="logo" [ngStyle]="{'opacity': connectionState === 2 ? 1 : 0.5 }">
+    <div class="badge badge-warning connection-badge" *ngIf="connectionState === 0">Offline</div>
+    <div class="badge badge-warning connection-badge" style="left: 60px;" *ngIf="connectionState === 1">Reconnecting...</div>
+  </a>
   
   <button class="navbar-toggler" type="button" (click)="collapse()" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

frontend/src/app/components/master-page/master-page.component.scss

@@ -28,3 +28,10 @@ li.nav-item a {
 nav {
   box-shadow: 0px 0px 15px 0px #000;
 }
+
+.connection-badge {
+  margin-left: 10px;
+  position: absolute;
+  top: 10px;
+  left: 100px;
+}

frontend/src/app/components/master-page/master-page.component.ts

@@ -8,16 +8,16 @@ import { StateService } from '../../services/state.service';
 })
 export class MasterPageComponent implements OnInit {
   navCollapsed = false;
-  isOffline = false;
+  connectionState = 2;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
-    this.stateService.isOffline$
+    this.stateService.connectionState$
       .subscribe((state) => {
-        this.isOffline = state;
+        this.connectionState = state;
       });
   }
 

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

@@ -20,5 +20,5 @@ export class StateService {
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 
   viewFiat$ = new BehaviorSubject<boolean>(false);
-  isOffline$ = new BehaviorSubject<boolean>(false);
+  connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
 }

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

@@ -29,13 +29,19 @@ export class WebsocketService {
     this.startSubscription();
   }
 
-  startSubscription() {
+  startSubscription(retrying = false) {
     this.connectionCheckTimeout = window.setTimeout(() => {
-      console.log('WebSocket failed to connect, force closing, trying to reconnect in 10 seconds');
+      console.log('WebSocket failed to connect, force closing, trying to reconnect');
       this.websocketSubject.complete();
       this.subscription.unsubscribe();
-      this.goOffline();
+      this.goOffline(true);
-    }, 5000);
+    }, 10000);
+    if (retrying) {
+      if (this.stateService.connectionState$.value === 2) {
+        return;
+      }
+      this.stateService.connectionState$.next(1);
+    }
     this.websocketSubject.next({'action': 'init'});
     this.subscription = this.websocketSubject
       .subscribe((response: WebsocketResponse) => {
@@ -115,7 +121,11 @@ export class WebsocketService {
           if (this.trackingAddress) {
             this.startTrackTransaction(this.trackingAddress);
           }
-          this.stateService.isOffline$.next(false);
+          this.stateService.connectionState$.next(2);
+        }
+
+        if (this.stateService.connectionState$.value === 1) {
+          this.stateService.connectionState$.next(2);
         }
 
         clearTimeout(this.connectionCheckTimeout);
@@ -147,10 +157,12 @@ export class WebsocketService {
     this.lastWant = data;
   }
 
-  goOffline() {
+  goOffline(instant = false) {
     this.goneOffline = true;
-    this.stateService.isOffline$.next(true);
+    this.stateService.connectionState$.next(0);
-    window.setTimeout(() => this.startSubscription(), 10000);
+    window.setTimeout(() => {
+      this.startSubscription(true);
+    }, instant ? 10 : 10000);
   }
 
   startOnlineCheck() {