From 959e2b55cb4d7e04bef5063b3e1db8320651185a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 24 Jul 2020 12:23:49 +0700
Subject: [PATCH] Show prettier empty mempool blocks.

---
 .../mempool-blocks/mempool-blocks.component.html       |  1 -
 .../mempool-blocks/mempool-blocks.component.scss       | 10 ----------
 frontend/src/app/services/state.service.ts             |  9 ++++++++-
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index c1ef935a6..513961775 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -27,7 +27,6 @@
         <span class="animated-border"></span>
       </div>
     </ng-template>
-    <div *ngIf="mempoolBlocks?.length === 0" class="bitcoin-block mempool-block empty-block">Mempool is empty</div>
   </div>
   <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
 </div>
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index b698df436..98675d7b7 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -116,13 +116,3 @@
   left: 0;
   z-index: 10;
 }
-
-.empty-block {
-  width: 125px;
-  height: 125px;
-  background-color: #554b45;
-  right: 40px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-}
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index c8836eaa2..360d17d4f 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -25,7 +25,14 @@ export class StateService {
   conversions$ = new ReplaySubject<any>(1);
   bsqPrice$ = new ReplaySubject<number>(1);
   mempoolStats$ = new ReplaySubject<MemPoolState>(1);
-  mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
+  mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1).pipe(
+    map((blocks) => {
+      if (!blocks.length) {
+        return [{ blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
+      }
+      return blocks;
+    })
+  );
   txReplaced$ = new Subject<Transaction>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();