mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

Skeleton audit dashboard

Browse source
This commit is contained in:
natsee 2024-01-22 16:03:55 +01:00
parent 8f7cd70882
commit 392ea35d51
No known key found for this signature in database
GPG key ID: 233CF3150A89BED8
4 changed files with 85 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
View file

@ -79,7 +79,7 @@
<a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active" id="btn-audit">
<a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="BTC Reserves Audit"></fa-icon></a>
<a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
</li>
<li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
<a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>

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

@ -1,4 +1,4 @@
<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
<h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-utxos">Liquid Federation UTXOs</h1>
<div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
@ -10,8 +10,8 @@
<th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
<th class="address text-left" *ngIf="!widget">Address</th>
<th class="amount text-right" [ngClass]="{'widget': widget}">Amount</th>
<th class="pegin text-right" *ngIf="!widget">Liquid Peg-in</th>
<th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
<th class="pegin text-left" *ngIf="!widget">Liquid Peg-in</th>
<th class="timestamp text-left" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
</thead>
<tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngIf="widget; else regularRows">
@ -24,7 +24,7 @@
<td class="amount text-right widget">
<app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
</td>
<td class="timestamp text-right widget" [ngClass]="{'widget': widget}">
<td class="timestamp text-left widget">
<app-time kind="since" [time]="utxo.blocktime"></app-time>
</td>
</tr>
@ -49,7 +49,7 @@
<app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
</a>
</td>
<td class="timestamp text-right">
<td class="timestamp text-left">
&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>
@ -57,22 +57,38 @@
</ng-template>
</tbody>
<ng-template #skeleton>
<tbody>
<tbody *ngIf="widget; else regularRowsSkeleton">
<tr *ngFor="let item of skeletonLines">
<td class="txid text-left" [ngClass]="{'widget': widget}">
<span class="skeleton-loader" style="max-width: 75px"></span>
<td class="txid text-left widget">
<span class="skeleton-loader" style="max-width: 190px"></span>
</td>
<td class="address text-left" [ngClass]="{'widget': widget}">
<span class="skeleton-loader" style="max-width: 125px"></span>
<td class="amount text-right widget">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
<td class="amount" *ngIf="!widget">
<span class="skeleton-loader" style="max-width: 150px"></span>
</td>
<td class="timestamp" *ngIf="!widget">
<span class="skeleton-loader" style="max-width: 125px"></span>
<td class="timestamp text-left widget">
<span class="skeleton-loader" style="max-width: 200px"></span>
</td>
</tr>
</tbody>
<ng-template #regularRowsSkeleton>
<tr *ngFor="let item of skeletonLines">
<td class="txid text-left">
<span class="skeleton-loader" style="max-width: 300px"></span>
</td>
<td class="address text-left">
<span class="skeleton-loader" style="max-width: 300px"></span>
</td>
<td class="amount text-right">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
<td class="pegin text-left">
<span class="skeleton-loader" style="max-width: 300px"></span>
</td>
<td class="timestamp text-left">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
</tr>
</ng-template>
</ng-template>
</table>

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

@ -9,6 +9,7 @@
}
.container-xl.widget {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
@ -43,7 +44,7 @@ tr, td, th {
max-width: 160px;
}
.txid.widget {
width: 50%;
width: 40%;
}
@ -61,7 +62,7 @@ tr, td, th {
width: 12%;
}
.amount.widget {
width: 25%;
width: 30%;
}
.pegin {
@ -84,7 +85,8 @@ tr, td, th {
}
}
.timestamp.widget {
width: 25%;
width: 30%;
padding-right: 0px !important;
@media (min-width: 768px) AND (max-width: 1050px) {
display: none;
}

52
frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
View file

@ -45,13 +45,57 @@
</div>
<ng-template #loadingTransactions>
<div class="skeleton-loader skeleton-loader-transactions"></div>
<ng-template #loadingSkeleton>
<div class="container-xl dashboard-container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<div class="main-title">
<span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
</div>
<div class="card">
<div class="card-body">
<app-reserves-supply-stats></app-reserves-supply-stats>
<app-reserves-ratio></app-reserves-ratio>
</div>
</div>
</div>
<div class="col">
<div class="main-title">
<span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
</div>
<div class="card">
<div class="card-body">
<app-federation-utxos-stats></app-federation-utxos-stats>
<app-federation-utxos-list [widget]="true"></app-federation-utxos-list>
</div>
</div>
</div>
<div class="col" style="margin-bottom: 1.47rem">
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<!-- The historical ratio chart -->
</div>
</div>
</div>
<div class="col" style="margin-bottom: 1.47rem">
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<!-- The addresses table -->
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #auditInProgress>
<ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingTransactions">
<div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingTransactions">
<ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingSkeleton">
<div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingSkeleton">
<span i18n="liquid.audit-in-progress">Audit in progress: block {{ auditStatus.lastBlockAudit }} / {{ auditStatus.bitcoinHeaders }}</span>
</div>
</ng-container>