From 967a2a446165e028aa3af84f6705dc954bad2ba2 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 5 Jun 2022 23:40:36 +0400
Subject: [PATCH 1/2] Reload mempool visualization on reconnect

fixes #1799
---
 .../mempool-block-overview.component.ts          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
index d017f92a9..cf8ccb987 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -1,8 +1,9 @@
 import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, OnInit,
   OnDestroy, OnChanges, ChangeDetectionStrategy, NgZone, AfterViewInit } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
-import { MempoolBlockWithTransactions, MempoolBlockDelta, TransactionStripped } from 'src/app/interfaces/websocket.interface';
-import { Subscription, BehaviorSubject } from 'rxjs';
+import { MempoolBlockDelta, TransactionStripped } from 'src/app/interfaces/websocket.interface';
+import { Subscription, BehaviorSubject, merge, of } from 'rxjs';
+import { switchMap, filter } from 'rxjs/operators';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { FastVertexArray } from './fast-vertex-array';
 import BlockScene from './block-scene';
@@ -48,9 +49,14 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   }
 
   ngOnInit(): void {
-    this.blockSub = this.stateService.mempoolBlockTransactions$.subscribe((transactionsStripped) => {
-      this.replaceBlock(transactionsStripped);
-    });
+    this.blockSub = merge(
+        of(true),
+        this.stateService.connectionState$.pipe(filter((state) => state === 2))
+      )
+      .pipe(switchMap(() => this.stateService.mempoolBlockTransactions$))
+      .subscribe((transactionsStripped) => {
+        this.replaceBlock(transactionsStripped);
+      });
     this.deltaSub = this.stateService.mempoolBlockDelta$.subscribe((delta) => {
       this.updateBlock(delta);
     });

From ebda00dc74a4b1a74e8458a9e810f351c88987ce Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 6 Jun 2022 14:31:17 +0400
Subject: [PATCH 2/2] Send empty list of transactions if data isn't available
 yet

---
 backend/src/api/websocket-handler.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/backend/src/api/websocket-handler.ts b/backend/src/api/websocket-handler.ts
index c5c2999b2..9632b03e3 100644
--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@@ -116,12 +116,10 @@ class WebsocketHandler {
               const index = parsedMessage['track-mempool-block'];
               client['track-mempool-block'] = index;
               const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
-              if (mBlocksWithTransactions[index]) {
-                response['projected-block-transactions'] = {
-                  index: index,
-                  blockTransactions: mBlocksWithTransactions[index].transactions
-                };
-              }
+              response['projected-block-transactions'] = {
+                index: index,
+                blockTransactions: mBlocksWithTransactions[index]?.transactions || [],
+              };
             } else {
               client['track-mempool-block'] = null;
             }