Adding latest blocks and transactions to dashboard.

backend/src/api/common.ts

@@ -1,4 +1,4 @@
-import { TransactionExtended } from '../interfaces';
+import { Transaction, TransactionExtended, TransactionStripped } from '../interfaces';
 
 export class Common {
   static median(numbers: number[]) {
@@ -47,4 +47,13 @@ export class Common {
       });
     return matches;
   }
+
+  static stripTransaction(tx: TransactionExtended): TransactionStripped {
+    return {
+      txid: tx.txid,
+      fee: tx.fee,
+      weight: tx.weight,
+      value: tx.vin.reduce((acc, vin) => acc + (vin.prevout ? vin.prevout.value : 0), 0),
+    };
+  }
 }

backend/src/api/mempool.ts

@@ -1,6 +1,7 @@
 const config = require('../../mempool-config.json');
 import bitcoinApi from './bitcoin/electrs-api';
 import { MempoolInfo, TransactionExtended, Transaction, VbytesPerSecond } from '../interfaces';
+import { Common } from './common';
 
 class Mempool {
   private inSync: boolean = false;
@@ -15,6 +16,7 @@ class Mempool {
   private vBytesPerSecondArray: VbytesPerSecond[] = [];
   private vBytesPerSecond: number = 0;
   private mempoolProtection = 0;
+  private latestTransactions: any[] = [];
 
   constructor() {
     setInterval(this.updateTxPerSecond.bind(this), 1000);
@@ -24,6 +26,10 @@ class Mempool {
     return this.inSync;
   }
 
+  public getLatestTransactions() {
+    return this.latestTransactions;
+  }
+
   public setMempoolChangedCallback(fn: (newMempool: { [txId: string]: TransactionExtended; },
     newTransactions: TransactionExtended[], deletedTransactions: TransactionExtended[]) => void) {
     this.mempoolChangedCallback = fn;
@@ -159,6 +165,9 @@ class Mempool {
         newMempool = this.mempoolCache;
       }
 
+      const newTransactionsStripped = newTransactions.map((tx) => Common.stripTransaction(tx));
+      this.latestTransactions = newTransactionsStripped.concat(this.latestTransactions).slice(0, 6);
+
       if (!this.inSync && transactions.length === Object.keys(newMempool).length) {
         this.inSync = true;
         console.log('The mempool is now in sync!');

backend/src/api/websocket-handler.ts

@@ -88,6 +88,7 @@ class WebsocketHandler {
               'blocks': _blocks.slice(Math.max(_blocks.length - config.INITIAL_BLOCK_AMOUNT, 0)),
               'conversions': fiatConversion.getTickers()['BTCUSD'],
               'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
+              'transactions': memPool.getLatestTransactions(),
               'git-commit': backendInfo.gitCommitHash,
               'hostname': backendInfo.hostname,
               ...this.extraInitProperties
@@ -150,6 +151,7 @@ class WebsocketHandler {
       if (client['want-stats']) {
         response['mempoolInfo'] = mempoolInfo;
         response['vBytesPerSecond'] = vBytesPerSecond;
+        response['transactions'] = newTransactions.splice(0, 6).map((tx) => Common.stripTransaction(tx));
       }
 
       if (client['want-mempool-blocks']) {

backend/src/interfaces.ts

@@ -52,6 +52,13 @@ export interface TransactionExtended extends Transaction {
   firstSeen: number;
 }
 
+export interface TransactionStripped {
+  txid: string;
+  fee: number;
+  weight: number;
+  value: number;
+}
+
 export interface Vin {
   txid: string;
   vout: number;

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

@@ -28,7 +28,7 @@
                 &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
               </span>
               <ng-template #inSync>
-                <div class="progress sub-text">
+                <div class="progress sub-text" style="width: 250px;">
                   <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
                 </div>
               </ng-template>
@@ -36,11 +36,11 @@
         </div>
       </div>
     </div>
-    <div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'">
+    <div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title txPerSecond">Difficulty adjustment</h5>
-          <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
+          <div class="progress" style="width: 250px;" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
             <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
             <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
             <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
@@ -48,10 +48,67 @@
         </div>
       </div>
     </div>
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title txWeightPerSecond">Latest blocks</h5>
+          <table class="table table-borderless text-left">
+            <thead>
+              <th style="width: 15%;">Height</th>
+              <th style="width: 30%;">Mined</th>
+              <th style="width: 25%;">Txs</th>
+              <th style="width: 30%;">Filled</th>
+            </thead>
+            <tbody>
+              <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
+                <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+                <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td>
+                <td>{{ block.tx_count | number }}</td>
+                <td>
+                  <div class="progress position-relative">
+                    <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+                    <div class="progress-text">{{ block.size | bytes: 2 }}</div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="text-center"><a href="" [routerLink]="['/blocks' | relativeUrl]">View all &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title txWeightPerSecond">Latest transactions</h5>
+          <table class="table table-borderless text-left">
+            <thead>
+              <th style="width: 25%;">TXID</th>
+              <th style="width: 50%;" class="text-right">Amount (BTC)</th>
+              <th style="width: 25%;" class="text-right">Fee</th>
+            </thead>
+            <tbody>
+              <tr *ngFor="let transaction of transactions$ | async; let i = index;">
+                <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 12 }}</a></td>
+                <td class="text-right"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat>)</td>
+                <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="text-center">&nbsp;</div>
+        </div>
+      </div>
+    </div>
   </div>
 
 </div>
 
 <ng-template #loading>
   <div class="skeleton-loader"></div>
+</ng-template>
+
+<ng-template #emptyBlock>
+  <div class="col mb-4">
+
+  </div>
 </ng-template>

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

@@ -26,7 +26,7 @@
 
 .progress {
   display: inline-flex;
-  width: 250px;
+  width: 100%;
   background-color: #2d3348;
   height: 1.1rem;
 }

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

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { MempoolInfo } from '../interfaces/websocket.interface';
+import { map, reduce, scan, tap } from 'rxjs/operators';
+import { Block } from '../interfaces/electrs.interface';
+import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { StateService } from '../services/state.service';
 
 interface MempoolBlocksData {
@@ -32,10 +33,12 @@ interface MempoolInfoData {
 export class DashboardComponent implements OnInit {
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
-  latestBlockHeight$: Observable<number>;
   mempoolInfoData$: Observable<MempoolInfoData>;
   difficultyEpoch$: Observable<EpochProgress>;
   vBytesPerSecondLimit = 1667;
+  blocks$: Observable<Block[]>;
+  transactions$: Observable<TransactionStripped[]>;
+  latestBlockHeight: number;
 
   constructor(
     private stateService: StateService,
@@ -113,5 +116,30 @@ export class DashboardComponent implements OnInit {
           };
         })
       );
+
+    this.blocks$ = this.stateService.blocks$
+      .pipe(
+        tap(([block]) => {
+          this.latestBlockHeight = block.height;
+        }),
+        scan((acc, [block]) => {
+          acc.unshift(block);
+          return acc;
+        }, []),
+        map((blocks) => blocks.slice(0, 6)),
+      );
+
+    this.transactions$ = this.stateService.transactions$
+      .pipe(
+        scan((acc, tx) => {
+          acc.unshift(tx);
+          return acc;
+        }, []),
+        map((txs) => txs.slice(0, 6)),
+      );
+  }
+
+  trackByBlock(index: number, block: Block) {
+    return block.height;
   }
 }

frontend/src/app/interfaces/websocket.interface.ts

@@ -13,6 +13,7 @@ export interface WebsocketResponse {
   data?: string[];
   tx?: Transaction;
   rbfTransaction?: Transaction;
+  transactions?: TransactionStripped[];
   'track-tx'?: string;
   'track-address'?: string;
   'track-asset'?: string;
@@ -33,3 +34,11 @@ export interface MempoolInfo {
   size: number;
   bytes: number;
 }
+
+export interface TransactionStripped {
+  txid: string;
+  fee: number;
+  weight: number;
+  value: number;
+}
+

frontend/src/app/services/state.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent } from 'rxjs';
 import { Block, Transaction } from '../interfaces/electrs.interface';
-import { MempoolBlock, MempoolInfo } from '../interfaces/websocket.interface';
+import { MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { env } from '../app.constants';
@@ -22,6 +22,7 @@ export class StateService {
 
   networkChanged$ = new ReplaySubject<string>(1);
   blocks$ = new ReplaySubject<[Block, boolean]>(env.KEEP_BLOCKS_AMOUNT);
+  transactions$ = new ReplaySubject<TransactionStripped>(6);
   conversions$ = new ReplaySubject<any>(1);
   bsqPrice$ = new ReplaySubject<number>(1);
   mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);

frontend/src/app/services/websocket.service.ts

@@ -101,6 +101,10 @@ export class WebsocketService {
           this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
         }
 
+        if (response.transactions) {
+          response.transactions.forEach((tx) => this.stateService.transactions$.next(tx));
+        }
+
         if (response['bsq-price']) {
           this.stateService.bsqPrice$.next(response['bsq-price']);
         }