From 2296ad69b9f96280b1585810e35cb58c53484d5c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 9 Mar 2020 17:53:54 +0700
Subject: [PATCH] Adding a third connection state and preventing offline
 indicator from pushing the menu.

---
 backend/src/api/websocket-handler.ts          |  4 +--
 .../components/address/address.component.ts   |  4 +--
 .../master-page/master-page.component.html    |  6 +++-
 .../master-page/master-page.component.scss    |  7 +++++
 .../master-page/master-page.component.ts      |  6 ++--
 frontend/src/app/services/state.service.ts    |  2 +-
 .../src/app/services/websocket.service.ts     | 28 +++++++++++++------
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/backend/src/api/websocket-handler.ts b/backend/src/api/websocket-handler.ts
index c9a7f1789..400649b26 100644
--- a/backend/src/api/websocket-handler.ts
+++ b/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;
           }
diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index bedbe08ce..d0fa8a670 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/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);
         }
       });
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 9fc75159f..8f9c1c132 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/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>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index e32dada0e..7536d3cc2 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -27,4 +27,11 @@ li.nav-item a {
 
 nav {
   box-shadow: 0px 0px 15px 0px #000;
+}
+
+.connection-badge {
+  margin-left: 10px;
+  position: absolute;
+  top: 10px;
+  left: 100px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index a98c51a59..a5ebf6027 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/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;
       });
   }
 
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index be00cf9cc..265434943 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/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);
 }
diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts
index c480ab682..daa654c16 100644
--- a/frontend/src/app/services/websocket.service.ts
+++ b/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();
-    }, 5000);
+      this.goOffline(true);
+    }, 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);
-    window.setTimeout(() => this.startSubscription(), 10000);
+    this.stateService.connectionState$.next(0);
+    window.setTimeout(() => {
+      this.startSubscription(true);
+    }, instant ? 10 : 10000);
   }
 
   startOnlineCheck() {