Adding latest blocks and transactions to dashboard.
This commit is contained in:
softsimon
parent
2ffa279cfc
commit
68b0b238fa
@ -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),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -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!');
|
||||
|
||||
@ -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']) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<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 »</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"> </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>
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.progress {
|
||||
display: inline-flex;
|
||||
width: 250px;
|
||||
width: 100%;
|
||||
background-color: #2d3348;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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']);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user