machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

L-BTC in circulation dashboard widget

Browse Source 
refs #718
This commit is contained in:
softsimon
2021-09-25 03:13:07 +04:00
parent 396092d836
commit c6ac962c9b
7 changed files with 192 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app/dashboard/dashboard.component.html
View File

@@ -16,7 +16,7 @@
<div class="col">
<div class="card">
<div class="card-body">
<ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
<ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
</div>
</div>
</div>
@@ -44,16 +44,21 @@
<div class="card graph-card">
<div class="card-body pl-0">
<div style="padding-left: 1.25rem;">
<ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
<ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
<hr>
</div>
<div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
<app-mempool-graph
[template]="'widget'"
[limitFee]="150"
[data]="mempoolStats.mempool"
></app-mempool-graph>
<div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
<app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
</div>
<ng-template #mempoolGraph>
<div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
<app-mempool-graph
[template]="'widget'"
[limitFee]="150"
[data]="mempoolStats.mempool"
></app-mempool-graph>
</div>
</ng-template>
</div>
</div>
</div>
@@ -192,6 +197,17 @@
</div>
</ng-template>
<ng-template #lbtcPegs let-mempoolInfoData>
<div class="mempool-info-data">
<div class="item">
<h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
<ng-container *ngIf="(liquidPegsMonth$ | async) as liquidPegsMonth; else loadingTransactions">
<p class="card-text">{{ liquidPegsMonth.series.slice(-1)[0] | number: '1.2-2' }} <span>L-BTC</span></p>
</ng-container>
</div>
</div>
</ng-template>
<ng-template #txPerSecond let-mempoolInfoData>
<h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
<ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
@@ -207,7 +223,6 @@
</ng-template>
</ng-template>
<ng-template #difficultyEpoch>
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card-wrapper">

19
frontend/src/app/dashboard/dashboard.component.ts
View File

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@
import { combineLatest, merge, Observable, of, timer } from 'rxjs';
import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
import { Block } from '../interfaces/electrs.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { LiquidPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
import { ApiService } from '../services/api.service';
import { StateService } from '../services/state.service';
@@ -63,6 +63,7 @@ export class DashboardComponent implements OnInit {
mempoolStats$: Observable<MempoolStatsData>;
transactionsWeightPerSecondOptions: any;
isLoadingWebSocket$: Observable<boolean>;
liquidPegsMonth$: Observable<any>;
constructor(
@Inject(LOCALE_ID) private locale: string,
@@ -261,6 +262,22 @@ export class DashboardComponent implements OnInit {
}),
share(),
);
if (this.stateService.network === 'liquid') {
this.liquidPegsMonth$ = this.apiService.listLiquidPegsMonth$()
.pipe(
map((pegs) => {
const labels = pegs.map(stats => stats.date);
const series = pegs.map(stats => parseFloat(stats.amount) / 100000000);
series.reduce((prev, curr, i) => series[i] = prev + curr, 0);
return {
series,
labels
};
}),
share(),
);
}
}
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {