diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 7175f767a..a9f6e3994 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -73,7 +73,7 @@
-
+ + +
+
+ +
Latest blocks
+   + +
+ + + + + + + + + + + + + + + + + +
HeightMinedPoolTXsSize
{{ block.height }} + + + {{ block.extras.pool.name }} + + {{ block.tx_count | number }} +
+
 
+
+
+
+
+
+
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index f1e835d9c..884ba1027 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/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; diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index bf9816a69..aca3593d7 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/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; vBytesPerSecondLimit = 1667; transactions$: Observable; + blocks$: Observable; replacements$: Observable; 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$