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

Add expiry filter to Federation UTXOs table

Browse Source 
Unify Liquid dashboard with mempool dashboard
This commit is contained in:
natsoni
2024-02-27 16:39:28 +01:00
parent 43fde86e9d
commit ef209da774
21 changed files with 496 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -159,12 +159,28 @@
<div class="container-xl dashboard-container" *ngIf="(auditStatus$ | async)?.isAuditSynced; else auditInProgress">
<div class="row row-cols-1 row-cols-md-2">
<div class="col card-wrapper liquid">
<div class="main-title" i18n="liquid.federation-holdings">Liquid Federation Holdings</div>
<div class="card">
<div class="card-body liquid">
<app-reserves-supply-stats [currentPeg$]="currentPeg$" [currentReserves$]="currentReserves$"></app-reserves-supply-stats>
</div>
</div>
</div>
<div class="col card-wrapper liquid">
<div class="main-title" i18n="liquid.federation-expired-utxos">Federation Expired UTXOs</div>
<div class="card">
<div class="card-body liquid">
<app-expired-utxos-stats [expiredUtxos$]="expiredUtxos$"></app-expired-utxos-stats>
</div>
</div>
</div>
<div class="col">
<div class="card-liquid card">
<div class="card-title card-title-liquid">
<app-reserves-supply-stats [currentPeg$]="currentPeg$" [currentReserves$]="currentReserves$"></app-reserves-supply-stats>
</div>
<h5 class="card-title" style="padding-top: 20px;" i18n="dashboard.lbtc-supply-against-btc-holdings">L-BTC Supply Against BTC Holdings</h5>
<div class="card-body pl-0" style="padding-top: 10px;">
<app-lbtc-pegs-graph [data]="fullHistory$ | async" [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
</div>
@@ -174,7 +190,7 @@
<div class="col" style="margin-bottom: 1.47rem">
<div class="card-liquid card">
<div class="card-body">
<app-reserves-ratio-stats [fullHistory$]="fullHistory$"></app-reserves-ratio-stats>
<app-reserves-ratio-stats [fullHistory$]="fullHistory$" [emergencyUtxosStats$]="emergencySpentUtxosStats$"></app-reserves-ratio-stats>
<app-reserves-ratio [currentPeg]="currentPeg$ | async" [currentReserves]="currentReserves$ | async"></app-reserves-ratio>
</div>
</div>
@@ -283,13 +299,29 @@
<div class="container-xl dashboard-container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col card-wrapper liquid">
<div class="main-title" i18n="liquid.federation-holdings">Liquid Federation Holdings</div>
<div class="card">
<div class="card-body liquid">
<app-reserves-supply-stats></app-reserves-supply-stats>
</div>
</div>
</div>
<div class="col card-wrapper liquid">
<div class="main-title" i18n="liquid.federation-expired-utxos">Federation Expired UTXOs</div>
<div class="card">
<div class="card-body liquid">
<app-expired-utxos-stats></app-expired-utxos-stats>
</div>
</div>
</div>
<div class="col">
<div class="card-liquid card">
<div class="card-title card-title-liquid">
<app-reserves-supply-stats></app-reserves-supply-stats>
</div>
<div class="card-body pl-0" style="padding-top: 10px;">
<h5 class="card-title" style="padding-top: 20px;" i18n="dashboard.lbtc-supply-against-btc-holdings">L-BTC Supply Against BTC Holdings</h5>
<div class="card-body pl-0" style="padding-top: 25px;">
<app-lbtc-pegs-graph [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
</div>
</div>

3
frontend/src/app/dashboard/dashboard.component.scss
View File

@@ -321,6 +321,9 @@
flex-direction: column;
justify-content: space-around;
padding: 22px 20px;
&.liquid {
height: 124.5px;
}
}
.less-padding {
padding: 20px 20px;

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

@@ -1,7 +1,7 @@
import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { combineLatest, EMPTY, fromEvent, interval, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
import { catchError, delayWhen, distinctUntilChanged, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
import { AuditStatus, BlockExtended, CurrentPegs, FederationAddress, OptimizedMempoolStats, PegsVolume, RecentPeg } from '../interfaces/node-api.interface';
import { AuditStatus, BlockExtended, CurrentPegs, FederationAddress, FederationUtxo, OptimizedMempoolStats, PegsVolume, RecentPeg } from '../interfaces/node-api.interface';
import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
import { ApiService } from '../services/api.service';
import { StateService } from '../services/state.service';
@@ -57,6 +57,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
federationAddresses$: Observable<FederationAddress[]>;
federationAddressesNumber$: Observable<number>;
federationUtxosNumber$: Observable<number>;
expiredUtxos$: Observable<FederationUtxo[]>;
emergencySpentUtxosStats$: Observable<any>;
fullHistory$: Observable<any>;
isLoad: boolean = true;
filterSubscription: Subscription;
@@ -64,7 +66,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
currencySubscription: Subscription;
currency: string;
incomingGraphHeight: number = 300;
lbtcPegGraphHeight: number = 320;
lbtcPegGraphHeight: number = 360;
private lastPegBlockUpdate: number = 0;
private lastPegAmount: string = '';
private lastReservesBlockUpdate: number = 0;
@@ -342,6 +344,20 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
map(count => count.utxo_count),
share()
);
this.expiredUtxos$ = this.auditUpdated$.pipe(
filter(auditUpdated => auditUpdated === true),
throttleTime(40000),
switchMap(_ => this.apiService.expiredUtxos$()),
share()
);
this.emergencySpentUtxosStats$ = this.auditUpdated$.pipe(
filter(auditUpdated => auditUpdated === true),
throttleTime(40000),
switchMap(_ => this.apiService.emergencySpentUtxosStats$()),
share()
);
this.liquidPegsMonth$ = interval(60 * 60 * 1000)
.pipe(
@@ -432,15 +448,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
if (window.innerWidth >= 992) {
this.incomingGraphHeight = 300;
this.goggleResolution = 82;
this.lbtcPegGraphHeight = 320;
this.lbtcPegGraphHeight = 360;
} else if (window.innerWidth >= 768) {
this.incomingGraphHeight = 215;
this.goggleResolution = 80;
this.lbtcPegGraphHeight = 230;
this.lbtcPegGraphHeight = 270;
} else {
this.incomingGraphHeight = 180;
this.goggleResolution = 86;
this.lbtcPegGraphHeight = 220;
this.lbtcPegGraphHeight = 270;
}
}
}