Show prettier empty mempool blocks.

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>

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;
-}

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>();