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

22
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
View File

@@ -1,5 +1,14 @@
<div [ngClass]="{'widget': widget}">
<div *ngIf="!widget" class="form-check">
<div style="padding-left: 0.75rem;">
<input style="margin-top: 6px" class="form-check-input" type="checkbox" [checked]="showExpiredUtxosToggle$ | async" id="show-expired-utxos" (change)="onShowExpiredUtxosToggleChange($event)">
<label class="form-check-label" for="show-expired-utxos">
<small i18n="liquid.include-expired-utxos">Expired UTXOs</small>
</label>
</div>
</div>
<div class="clearfix"></div>
<div style="min-height: 295px">
@@ -10,6 +19,9 @@
<th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
<th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
<th class="timestamp text-left" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
<th class="expires-in text-left" *ngIf="!widget && showExpiredUtxos === false" i18n="liquid.expires-in">Expires in</th>
<th class="expires-in text-left" *ngIf="!widget && showExpiredUtxos === true" i18n="liquid.expired-since">Expired since</th>
<th class="is-dust text-right" *ngIf="!widget && showExpiredUtxos === true" i18n="liquid.is-dust">Is Dust</th>
</thead>
<tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngIf="widget; else regularRows">
@@ -56,6 +68,13 @@
&lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
</td>
<td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }">
{{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span>
</td>
<td *ngIf="!widget && showExpiredUtxos === true" class="is-dust text-right" [ngStyle]="{ 'color': !utxo.isDust ? '#D81B60' : '' }">
<div i18n="shared.yes" *ngIf="utxo.isDust">Yes</div>
<div i18n="shared.no" *ngIf="!utxo.isDust">No</div>
</td>
</tr>
</ng-template>
</tbody>
@@ -90,6 +109,9 @@
<td class="timestamp text-left">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
<td class="expires-in text-left">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
</tr>
</ng-template>
</ng-template>

14
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
View File

@@ -72,7 +72,7 @@ tr, td, th {
@media (max-width: 800px) {
display: none;
}
@media (max-width: 1000px) {
@media (max-width: 1190px) {
.relative-time {
display: none;
}
@@ -92,3 +92,15 @@ tr, td, th {
}
}
.expires-in {
@media (max-width: 987px) {
display: none;
}
}
.is-dust {
@media (max-width: 1090px) {
display: none;
}
}

66
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Observable, Subject, combineLatest, of, timer } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service';
import { Env, StateService } from '../../../services/state.service';
@@ -24,6 +25,9 @@ export class FederationUtxosListComponent implements OnInit {
skeletonLines: number[] = [];
auditStatus$: Observable<AuditStatus>;
auditUpdated$: Observable<boolean>;
showExpiredUtxos: boolean = false;
showExpiredUtxosToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(this.showExpiredUtxos);
showExpiredUtxosToggle$: Observable<boolean> = this.showExpiredUtxosToggleSubject.asObservable();
lastReservesBlockUpdate: number = 0;
currentPeg$: Observable<CurrentPegs>;
lastPegBlockUpdate: number = 0;
@@ -36,6 +40,8 @@ export class FederationUtxosListComponent implements OnInit {
private apiService: ApiService,
public stateService: StateService,
private websocketService: WebsocketService,
private route: ActivatedRoute,
private router: Router
) {
}
@@ -45,7 +51,12 @@ export class FederationUtxosListComponent implements OnInit {
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
if (!this.widget) {
this.route.fragment.subscribe((fragment) => {
this.showExpiredUtxosToggleSubject.next(['expired'].indexOf(fragment) > -1);
});
this.websocketService.want(['blocks']);
this.auditStatus$ = this.stateService.blocks$.pipe(
takeUntil(this.destroy$),
throttleTime(40000),
@@ -70,27 +81,30 @@ export class FederationUtxosListComponent implements OnInit {
this.auditUpdated$ = combineLatest([
this.auditStatus$,
this.currentPeg$
this.currentPeg$,
this.showExpiredUtxosToggle$
]).pipe(
filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
map(([auditStatus, currentPeg]) => ({
filter(([auditStatus, _, __]) => auditStatus.isAuditSynced === true),
map(([auditStatus, currentPeg, showExpiredUtxos]) => ({
lastBlockAudit: auditStatus.lastBlockAudit,
currentPegAmount: currentPeg.amount
currentPegAmount: currentPeg.amount,
showExpiredUtxos: showExpiredUtxos
})),
switchMap(({ lastBlockAudit, currentPegAmount }) => {
switchMap(({ lastBlockAudit, currentPegAmount, showExpiredUtxos }) => {
const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
const amountCheck = currentPegAmount !== this.lastPegAmount;
const expiredCheck = showExpiredUtxos !== this.showExpiredUtxos;
this.lastReservesBlockUpdate = lastBlockAudit;
this.lastPegAmount = currentPegAmount;
return of(blockAuditCheck || amountCheck);
this.showExpiredUtxos = showExpiredUtxos;
return of(blockAuditCheck || amountCheck || expiredCheck);
}),
share()
);
this.federationUtxos$ = this.auditUpdated$.pipe(
filter(auditUpdated => auditUpdated === true),
throttleTime(40000),
switchMap(_ => this.apiService.federationUtxos$()),
switchMap(_ => this.showExpiredUtxos ? this.apiService.expiredUtxos$() : this.apiService.federationUtxos$()),
tap(_ => this.isLoading = false),
share()
);
@@ -106,4 +120,38 @@ export class FederationUtxosListComponent implements OnInit {
this.page = page;
}
onShowExpiredUtxosToggleChange(e): void {
const fragment = e.target.checked ? 'expired' : null;
this.router.navigate([], { fragment });
this.isLoading = true;
}
getGradientColor(value: number): string {
const distanceToGreen = Math.abs(4032 - value);
const green = '#7CB342';
const red = '#D81B60';
if (value < 0) {
return red;
} else if (value >= 4032) {
return green;
} else {
const scaleFactor = 1 - distanceToGreen / 4032;
const r = parseInt(red.slice(1, 3), 16);
const g = parseInt(green.slice(1, 3), 16);
const b = parseInt(red.slice(5, 7), 16);
const newR = Math.floor(r + (g - r) * scaleFactor);
const newG = Math.floor(g - (g - r) * scaleFactor);
const newB = b;
return '#' + this.componentToHex(newR) + this.componentToHex(newG) + this.componentToHex(newB);
}
}
componentToHex(c: number): string {
const hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
}