From 2b6426a126dc44aced0c2f46d42be2f43837648c Mon Sep 17 00:00:00 2001
From: Simon Lindh <simonlindh.se@gmail.com>
Date: Thu, 25 Jul 2019 14:20:02 +0300
Subject: [PATCH] Fixing tx tracking issues.

---
 backend/src/index.ts                                | 3 +++
 frontend/src/app/services/api.service.ts            | 5 +++--
 frontend/src/app/tx-bubble/tx-bubble.component.html | 2 +-
 frontend/src/app/tx-bubble/tx-bubble.component.ts   | 7 +++----
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/backend/src/index.ts b/backend/src/index.ts
index d92559762..96feac704 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -127,6 +127,9 @@ class MempoolSpace {
               }));
             } else {
               console.log('TX NOT FOUND, NOT TRACKING');
+              client['trackingTx'] = false;
+              client['blockHeight'] = 0;
+              client['tx'] = null;
               client.send(JSON.stringify({
                 'track-tx': {
                   tracking: false,
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index dcac10385..9fe77284f 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -4,7 +4,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { IMempoolDefaultResponse, IMempoolStats, IBlockTransaction, IBlock } from '../blockchain/interfaces';
 import { Observable } from 'rxjs';
 import { MemPoolService } from './mem-pool.service';
-import { tap, retryWhen } from 'rxjs/operators';
+import { tap, retryWhen, delay } from 'rxjs/operators';
 
 const WEB_SOCKET_URL = 'ws://' + document.location.hostname + ':8999';
 const API_BASE_URL = '/api/v1';
@@ -27,7 +27,8 @@ export class ApiService {
       .pipe(
         retryWhen((errors: any) => errors
           .pipe(
-            tap(() => this.memPoolService.isOffline$.next(true))
+            tap(() => this.memPoolService.isOffline$.next(true)),
+            delay(5000),
           )
         ),
       )
diff --git a/frontend/src/app/tx-bubble/tx-bubble.component.html b/frontend/src/app/tx-bubble/tx-bubble.component.html
index b20dd728f..64913baef 100644
--- a/frontend/src/app/tx-bubble/tx-bubble.component.html
+++ b/frontend/src/app/tx-bubble/tx-bubble.component.html
@@ -1,5 +1,5 @@
 <div class="txBubble" [ngStyle]="txBubbleStyle" *ngIf="txTrackingEnabled && tx">
-  <span class="txBubbleText" ngClass="arrow-{{ arrowPosition }}">
+  <span class="txBubbleText" ngClass="arrow-{{ txBubbleArrowPosition }}">
       <table style="width: 100%;">
         <tr>
             <td class="text-left"><b>Transaction hash</b></td>
diff --git a/frontend/src/app/tx-bubble/tx-bubble.component.ts b/frontend/src/app/tx-bubble/tx-bubble.component.ts
index 92cf2f0a9..048bc44b8 100644
--- a/frontend/src/app/tx-bubble/tx-bubble.component.ts
+++ b/frontend/src/app/tx-bubble/tx-bubble.component.ts
@@ -12,7 +12,7 @@ export class TxBubbleComponent implements OnInit, OnDestroy {
   tx: ITransaction | null = null;
   txTrackingBlockHeight = 0;
   latestBlockHeight = 0;
-  arrowPosition: 'top' | 'right' | 'bottom' | 'top-right' | 'top-left' = 'top';
+  txBubbleArrowPosition: 'top' | 'right' | 'bottom' | 'top-right' | 'top-left' = 'top';
 
   txTrackingSubscription: Subscription;
   projectedBlocksSubscription: Subscription;
@@ -35,8 +35,6 @@ export class TxBubbleComponent implements OnInit, OnDestroy {
   txTrackingTx: ITransaction | null = null;
   txShowTxNotFound = false;
 
-  txBubbleArrowPosition = 'top';
-
   @HostListener('window:resize', ['$event'])
   onResize(event: Event) {
     this.moveTxBubbleToPosition();
@@ -77,6 +75,7 @@ export class TxBubbleComponent implements OnInit, OnDestroy {
         if (this.txTrackingBlockHeight) {
           this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1;
         }
+        setTimeout(() => this.moveTxBubbleToPosition(), 1000);
       });
 
     this.memPoolService.conversions$
@@ -117,7 +116,7 @@ export class TxBubbleComponent implements OnInit, OnDestroy {
       } else {
         this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
         this.txBubbleArrowPosition = 'right';
-        this.txBubbleStyle['top'] = '425px';
+        this.txBubbleStyle['top'] = '460px';
       }
     } else {
       this.txBubbleArrowPosition = 'top';