Merge pull request #3997 from mempool/mononaut/liquid-latest-blocks

restore latest blocks on liquid

frontend/src/app/dashboard/dashboard.component.html

@@ -73,7 +73,7 @@
       </div>
     </div>
     <div class="col" style="max-height: 410px">
-      <div class="card">
+      <div class="card" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else latestBlocks">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.latest-rbf-replacements">Latest replacements</h5>
@@ -106,6 +106,46 @@
           </table>
         </div>
       </div>
+      <ng-template #latestBlocks>
+        <div class="card">
+          <div class="card-body">
+            <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
+              <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest blocks</h5>
+              <span>&nbsp;</span>
+              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
+            </a>
+            <table class="table lastest-blocks-table">
+              <thead>
+                <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
+                <th *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
+                <th *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4" i18n="mining.pool-name">Pool</th>
+                <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
+                <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
+              </thead>
+              <tbody>
+                <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
+                  <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+                  <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
+                  <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
+                    <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+                      <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
+                        onError="this.src = '/resources/mining-pools/default.svg'">
+                      <span class="pool-name">{{ block.extras.pool.name }}</span>
+                    </a>
+                  </td>
+                  <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
+                  <td class="table-cell-size">
+                    <div class="progress">
+                      <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }">&nbsp;</div>
+                      <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </ng-template>
     </div>
     <div class="col" style="max-height: 410px">
       <div class="card">

frontend/src/app/dashboard/dashboard.component.scss

@@ -175,6 +175,43 @@
   height: 18px;
 }
 
+.lastest-blocks-table {
+  width: 100%;
+  text-align: left;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.65rem !important;
+    padding-bottom: 0.7rem !important;
+  }
+  .table-cell-height {
+    width: 15%;
+  }
+  .table-cell-mined {
+    width: 35%;
+    text-align: left;
+  }
+  .table-cell-transaction-count {
+    display: none;
+    text-align: right;
+    width: 20%;
+    display: table-cell;
+  }
+  .table-cell-size {
+    display: none;
+    text-align: center;
+    width: 30%;
+    @media (min-width: 485px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+}
+
 .lastest-replacements-table {
   width: 100%;
   text-align: left;

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of, Subscription } from 'rxjs';
-import { filter, map, scan, share, switchMap } from 'rxjs/operators';
+import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats, RbfTree } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -39,6 +39,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   mempoolLoadingStatus$: Observable<number>;
   vBytesPerSecondLimit = 1667;
   transactions$: Observable<TransactionStripped[]>;
+  blocks$: Observable<BlockExtended[]>;
   replacements$: Observable<ReplacementInfo[]>;
   latestBlockHeight: number;
   mempoolTransactionsWeightPerSecondData: any;
@@ -144,6 +145,23 @@ export class DashboardComponent implements OnInit, OnDestroy {
         }, []),
       );
 
+    this.blocks$ = this.stateService.blocks$
+      .pipe(
+        tap((blocks) => {
+          this.latestBlockHeight = blocks[0].height;
+        }),
+        switchMap((blocks) => {
+          if (this.stateService.env.MINING_DASHBOARD === true) {
+            for (const block of blocks) {
+              // @ts-ignore: Need to add an extra field for the template
+              block.extras.pool.logo = `/resources/mining-pools/` +
+                block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+            }
+          }
+          return of(blocks.slice(0, 6));
+        })
+      );
+
     this.replacements$ = this.stateService.rbfLatestSummary$;
 
     this.mempoolStats$ = this.stateService.connectionState$