From 0639ce9b07a882753f2b79e765bdb55728b510ae Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Mon, 15 Nov 2021 14:16:27 -0300
Subject: [PATCH] fix: mempool empty block.

---
 frontend/cypress/integration/liquid/liquid.spec.ts  |  6 ++++++
 .../cypress/integration/mainnet/mainnet.spec.ts     |  6 ++++++
 frontend/cypress/integration/signet/signet.spec.ts  |  6 ++++++
 .../cypress/integration/testnet/testnet.spec.ts     |  6 ++++++
 .../mempool-blocks/mempool-blocks.component.ts      | 13 ++++++++-----
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/cypress/integration/liquid/liquid.spec.ts b/frontend/cypress/integration/liquid/liquid.spec.ts
index 44aca078e..bf5c733c1 100644
--- a/frontend/cypress/integration/liquid/liquid.spec.ts
+++ b/frontend/cypress/integration/liquid/liquid.spec.ts
@@ -18,6 +18,12 @@ describe('Liquid', () => {
 
     if (baseModule === 'mempool' || baseModule === 'liquid') {
 
+        it('check first mempool block after skeleton loads', () => {
+            cy.visit(`${basePath}`);
+            cy.waitForSkeletonGone();
+            cy.get('#mempool-block-0 > .blockLink').should('exist');
+        });
+
         it('loads the dashboard', () => {
             cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index d53c8bb6c..13c0e35b8 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -24,6 +24,12 @@ describe('Mainnet', () => {
 
     if (baseModule === 'mempool') {
 
+        it('check first mempool block after skeleton loads', () => {
+          cy.visit('/');
+          cy.waitForSkeletonGone();
+          cy.get('#mempool-block-0 > .blockLink').should('exist');
+        });
+
         it('loads the status screen', () => {
             cy.visit('/status');
             cy.get('#mempool-block-0').should('be.visible');
diff --git a/frontend/cypress/integration/signet/signet.spec.ts b/frontend/cypress/integration/signet/signet.spec.ts
index ec2a0a852..d0d8f67df 100644
--- a/frontend/cypress/integration/signet/signet.spec.ts
+++ b/frontend/cypress/integration/signet/signet.spec.ts
@@ -17,6 +17,12 @@ describe('Signet', () => {
         cy.waitForSkeletonGone();
     });
 
+    it('check first mempool block after skeleton loads', () => {
+      cy.visit('/');
+      cy.waitForSkeletonGone();
+      cy.get('#mempool-block-0 > .blockLink').should('exist');
+    });
+
     it('loads the dashboard with the skeleton blocks', () => {
         cy.mockMempoolSocket();
         cy.visit("/signet");
diff --git a/frontend/cypress/integration/testnet/testnet.spec.ts b/frontend/cypress/integration/testnet/testnet.spec.ts
index 6e406c087..861087e2c 100644
--- a/frontend/cypress/integration/testnet/testnet.spec.ts
+++ b/frontend/cypress/integration/testnet/testnet.spec.ts
@@ -17,6 +17,12 @@ describe('Testnet', () => {
         cy.waitForSkeletonGone();
     });
 
+    it('check first mempool block after skeleton loads', () => {
+      cy.visit('/');
+      cy.waitForSkeletonGone();
+      cy.get('#mempool-block-0 > .blockLink').should('exist');
+    });
+
     it('loads the dashboard with the skeleton blocks', () => {
         cy.mockMempoolSocket();
         cy.visit("/testnet");
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index fe10d56bb..47ab19329 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -88,13 +88,16 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
               block.blink = specialBlocks[block.height] ? true : false;
             }
           });
-          const stringifiedBlocks = JSON.stringify(mempoolBlocks);
-          this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
-          this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
+
+          let blocks = mempoolBlocks;
+          if (!mempoolBlocks.length) {
+            blocks = [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
+          }
+          this.mempoolBlocksFull = blocks;
+          this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(blocks);
           this.updateMempoolBlockStyles();
           this.calculateTransactionPosition();
-
-          return this.mempoolBlocks;
+          return blocks;
         })
       );