highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-26 17:51:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Reformat UTXOs widget to Peg Ins widget

Browse Source
This commit is contained in:
natsee 2024-01-29 12:22:47 +01:00
parent c39ca0270e
commit 451a61e5fc
No known key found for this signature in database
GPG Key ID: 233CF3150A89BED8
7 changed files with 14 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
</thead>
<tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngIf="widget; else regularRows">
<tr *ngFor="let utxo of utxos | slice:0:5">
<tr *ngFor="let utxo of utxos | slice:0:6">
<td class="txid text-left widget">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
<app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>

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

@ -22,6 +22,7 @@ export class FederationUtxosListComponent implements OnInit {
pageSize = 15;
maxSize = window.innerWidth <= 767.98 ? 3 : 5;
skeletonLines: number[] = [];
changeAddress: string = "bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4";
auditStatus$: Observable<AuditStatus>;
auditUpdated$: Observable<boolean>;
showChangeUtxosToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@ -45,7 +46,7 @@ export class FederationUtxosListComponent implements OnInit {
ngOnInit(): void {
this.isLoading = !this.widget;
this.env = this.stateService.env;
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
if (!this.widget) {
this.websocketService.want(['blocks']);
@ -104,7 +105,7 @@ export class FederationUtxosListComponent implements OnInit {
this.federationUtxos$,
this.showChangeUtxosToggle$
]).pipe(
switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.pegtxid))),
switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.bitcoinaddress !== this.changeAddress))),
share()
);
}

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

@ -1,34 +1,7 @@
<div *ngIf="(federationUtxos$ | async) as federationUtxos; else loadingData">
<div class="fee-estimation-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
<h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
</a>
<div class="card-text">
<div class="fee-text">{{ federationUtxos.length }} <span>UTXOs</span></div>
<span class="fiat" *ngIf="(federationUtxosOneMonthAgo$ | async) as federationUtxosOneMonthAgo; else loadingSkeleton" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
<app-change [current]="federationUtxos.length" [previous]="federationUtxosOneMonthAgo.utxos_count_one_month"></app-change>
</span>
</div>
</div>
</div>
</div>
<ng-template #loadingData>
<div class="fee-estimation-container loading-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
<h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
</a>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="fee-estimation-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
<h5 class="card-title" i18n="liquid.recent-peg-ins">Recent Peg-Ins <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
</a>
</div>
</ng-template>
<ng-template #loadingSkeleton>
<div class="skeleton-loader skeleton-loader-transactions" style="margin-top: 2px; margin-bottom: 5px;"></div>
</ng-template>
</div>

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

@ -1,6 +1,7 @@
.fee-estimation-container {
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
@media (min-width: 376px) {
flex-direction: row;
}
@ -35,7 +36,6 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
width: fit-content;
margin: auto;
line-height: 1.45;
@ -48,10 +48,6 @@
}
}
.loading-container{
min-height: 76px;
}
.card-text {
.skeleton-loader {
width: 100%;

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

@ -1,7 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { FederationUtxo } from '../../../interfaces/node-api.interface';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
@Component({
selector: 'app-federation-utxos-stats',
templateUrl: './federation-utxos-stats.component.html',
@ -9,12 +6,10 @@ import { FederationUtxo } from '../../../interfaces/node-api.interface';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FederationUtxosStatsComponent implements OnInit {
@Input() federationUtxos$: Observable<FederationUtxo[]>;
@Input() federationUtxosOneMonthAgo$: Observable<any>;
constructor() { }
ngOnInit(): void {
}
}

2
frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
View File

@ -25,7 +25,7 @@
<div class="col">
<div class="card">
<div class="card-body">
<app-federation-utxos-stats [federationUtxos$]="federationUtxos$" [federationUtxosOneMonthAgo$]="federationUtxosOneMonthAgo$"></app-federation-utxos-stats>
<app-federation-utxos-stats></app-federation-utxos-stats>
<app-federation-utxos-list [federationUtxos$]="federationUtxos$" [widget]="true"></app-federation-utxos-list>
</div>
</div>

7
frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
View File

@ -18,7 +18,6 @@ export class ReservesAuditDashboardComponent implements OnInit {
currentPeg$: Observable<CurrentPegs>;
currentReserves$: Observable<CurrentPegs>;
federationUtxos$: Observable<FederationUtxo[]>;
federationUtxosOneMonthAgo$: Observable<any>;
federationAddresses$: Observable<FederationAddress[]>;
federationAddressesOneMonthAgo$: Observable<any>;
liquidPegsMonth$: Observable<any>;
@ -111,12 +110,6 @@ export class ReservesAuditDashboardComponent implements OnInit {
share()
);
this.federationUtxosOneMonthAgo$ = interval(60 * 60 * 1000)
.pipe(
startWith(0),
switchMap(() => this.apiService.federationUtxosOneMonthAgo$())
);
this.federationAddressesOneMonthAgo$ = interval(60 * 60 * 1000)
.pipe(
startWith(0),