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

Liquid Federation: filter out change UTXOs from table

Browse Source
This commit is contained in:
natsee 2024-01-28 21:46:31 +01:00
parent 59128c8ca0
commit 71f73835da
No known key found for this signature in database
GPG Key ID: 233CF3150A89BED8
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,14 @@
<div [ngClass]="{'widget': widget}"> <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]="showChangeUtxosToggle$ | async" id="show-change-utxos" (change)="onShowChangeUtxosToggleChange($event)">
<label class="form-check-label" for="show-change-utxos">
<small i18n="liquid.include-change-utxos">Include Change UTXOs</small>
</label>
</div>
</div>
<div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div> <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -12,7 +22,7 @@
<th class="pegin text-left" *ngIf="!widget" i18n="liquid.peg-in">Liquid Peg-in</th> <th class="pegin text-left" *ngIf="!widget" i18n="liquid.peg-in">Liquid Peg-in</th>
<th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th> <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
</thead> </thead>
<tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngIf="widget; else regularRows"> <ng-container *ngIf="widget; else regularRows">
<tr *ngFor="let utxo of utxos | slice:0:5"> <tr *ngFor="let utxo of utxos | slice:0:5">
<td class="txid text-left widget"> <td class="txid text-left widget">
@ -96,7 +106,7 @@
</ng-template> </ng-template>
</table> </table>
<ngb-pagination *ngIf="!widget && federationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''" <ngb-pagination *ngIf="!widget && filteredFederationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
[collectionSize]="utxos.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page" [collectionSize]="utxos.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false"> (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
</ngb-pagination> </ngb-pagination>

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

@ -1,5 +1,5 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Observable, Subject, combineLatest, of, timer } from 'rxjs'; import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators'; import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service'; import { ApiService } from '../../../services/api.service';
import { Env, StateService } from '../../../services/state.service'; import { Env, StateService } from '../../../services/state.service';
@ -22,8 +22,12 @@ export class FederationUtxosListComponent implements OnInit {
pageSize = 15; pageSize = 15;
maxSize = window.innerWidth <= 767.98 ? 3 : 5; maxSize = window.innerWidth <= 767.98 ? 3 : 5;
skeletonLines: number[] = []; skeletonLines: number[] = [];
changeAddress: string = "bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4";
auditStatus$: Observable<AuditStatus>; auditStatus$: Observable<AuditStatus>;
auditUpdated$: Observable<boolean>; auditUpdated$: Observable<boolean>;
showChangeUtxosToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
showChangeUtxosToggle$: Observable<boolean> = this.showChangeUtxosToggleSubject.asObservable();
filteredFederationUtxos$: Observable<FederationUtxo[]>;
lastReservesBlockUpdate: number = 0; lastReservesBlockUpdate: number = 0;
currentPeg$: Observable<CurrentPegs>; currentPeg$: Observable<CurrentPegs>;
lastPegBlockUpdate: number = 0; lastPegBlockUpdate: number = 0;
@ -43,6 +47,7 @@ export class FederationUtxosListComponent implements OnInit {
this.isLoading = !this.widget; this.isLoading = !this.widget;
this.env = this.stateService.env; this.env = this.stateService.env;
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
if (!this.widget) { if (!this.widget) {
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.auditStatus$ = this.stateService.blocks$.pipe( this.auditStatus$ = this.stateService.blocks$.pipe(
@ -95,6 +100,16 @@ export class FederationUtxosListComponent implements OnInit {
); );
} }
if (this.federationUtxos$) {
this.filteredFederationUtxos$ = combineLatest([
this.federationUtxos$,
this.showChangeUtxosToggle$
]).pipe(
switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.bitcoinaddress !== this.changeAddress))),
share()
);
}
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@ -106,4 +121,7 @@ export class FederationUtxosListComponent implements OnInit {
this.page = page; this.page = page;
} }
onShowChangeUtxosToggleChange(e): void {
this.showChangeUtxosToggleSubject.next(e.target.checked);
}
} }