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

65
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
View File

@@ -1,42 +1,43 @@
<div *ngIf="(unbackedMonths$ | async) as unbackedMonths; else loadingData">
<ng-container *ngIf="unbackedMonths.historyComplete; else loadingData">
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="liquid.unpeg">Unpeg</h5>
<div class="card-text">
<div class="fee-text" [ngClass]="{'danger' : unbackedMonths.total > 0, 'correct': unbackedMonths.total === 0}">
{{ unbackedMonths.total }} <span i18n="liquid.unpeg-event">Unpeg Event</span>
</div>
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="liquid.unpeg">Unpeg</h5>
<div *ngIf="(unbackedMonths$ | async) as unbackedMonths; else loadingData" class="card-text">
<ng-container *ngIf="unbackedMonths.historyComplete; else loadingData">
<div class="fee-text" [ngClass]="{'danger' : unbackedMonths.total > 0, 'correct': unbackedMonths.total === 0}">
{{ unbackedMonths.total }} <span i18n="liquid.unpeg-event">Unpeg Event</span>
</div>
</div>
</ng-container>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5>
<div class="card-text">
<div class="fee-text" [ngClass]="{'danger' : unbackedMonths.avg < 1, 'correct': unbackedMonths.avg >= 1}">
{{ (unbackedMonths.avg * 100).toFixed(3) }} %
</div>
<div class="item avg-ratio">
<h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5>
<div *ngIf="(unbackedMonths$ | async) as unbackedMonths; else loadingData" class="card-text">
<ng-container *ngIf="unbackedMonths.historyComplete; else loadingData">
<div class="fee-text" [ngClass]="{'danger' : unbackedMonths.avg < 1, 'correct': unbackedMonths.avg >= 1}">
{{ (unbackedMonths.avg * 100).toFixed(3) }} %
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</div>
<ng-template #loadingData>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="liquid.unpeg">Unpeg</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="item">
<!-- <a class="title-link" [routerLink]="['/audit/emergency-spends' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
</a> -->
<h5 class="card-title" i18n="liquid.emergency-keys">Emergency Keys</h5>
<div *ngIf="(emergencyUtxosStats$ | async) as emergencyUtxosStats; else loadingData" class="card-text">
<div class="fee-text" [ngClass]="{'danger' : emergencyUtxosStats.utxo_count > 0, 'correct': emergencyUtxosStats.utxo_count === 0}">
{{ emergencyUtxosStats.utxo_count }} <span i18n="shared.usage">usage</span>
</div>
</div>
</div>
</div>
<ng-template #loadingData>
<div class="card-text">
<div class="skeleton-loader"></div>
</div>
</ng-template>

10
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
View File

@@ -3,7 +3,15 @@
justify-content: space-between;
@media (min-width: 376px) {
flex-direction: row;
}
}
.avg-ratio {
display: none;
@media (min-width: 480px) and (max-width: 767px), (min-width: 915px) {
display: block;
}
}
.item {
max-width: 300px;
margin: 0;

1
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.ts
View File

@@ -9,6 +9,7 @@ import { Observable, map } from 'rxjs';
})
export class ReservesRatioStatsComponent implements OnInit {
@Input() fullHistory$: Observable<any>;
@Input() emergencyUtxosStats$: Observable<any>;
unbackedMonths$: Observable<any>
constructor() { }