Rerefactor acceleration dashboard

This commit is contained in:
Mononaut
2023-12-08 13:03:08 +00:00
parent 42f6f0c122
commit aff44d90d5
8 changed files with 158 additions and 176 deletions

View File

@@ -8,9 +8,16 @@
<table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
<thead>
<th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
<ng-container *ngIf="pending">
<th class="fee-rate text-right" i18n="transaction.fee|Transaction fee">Fee Rate</th>
<th class="bid text-right" i18n="transaction.fee|Transaction fee">Acceleration Bid</th>
<th class="time text-right" i18n="accelerator.block">Requested</th>
</ng-container>
<ng-container *ngIf="!pending">
<th class="fee text-right" i18n="transaction.fee|Transaction fee">Out-of-band Fee</th>
<th class="block text-right" i18n="accelerator.block">Block</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
</ng-container>
</thead>
<tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let acceleration of accelerations; let i= index;">
@@ -19,20 +26,33 @@
<app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
</a>
</td>
<td *ngIf="acceleration.feePaid" class="fee text-right">
{{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td *ngIf="!acceleration.feePaid" class="fee text-right">
~
</td>
<td class="fee-delta text-right">
{{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td class="status text-right">
<span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="transaction.rbf.mined">Pending</span>
<span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
<span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td>
<ng-container *ngIf="pending">
<td class="fee-rate text-right">
<app-fee-rate [fee]="acceleration.effectiveFee" [weight]="acceleration.effectiveVsize * 4"></app-fee-rate>
</td>
<td class="bid text-right">
{{ (acceleration.feeDelta) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td class="time text-right">
<app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time>
</td>
</ng-container>
<ng-container *ngIf="!pending">
<td *ngIf="acceleration.feePaid" class="fee text-right">
{{ (acceleration.feePaid) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td *ngIf="!acceleration.feePaid" class="fee text-right">
~
</td>
<td class="block text-right">
<a [routerLink]="['/block' | relativeUrl, acceleration.blockHeight]">{{ acceleration.blockHeight }}</a>
</td>
<td class="status text-right">
<span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="transaction.rbf.mined">Pending</span>
<span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
<span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td>
</ng-container>
</tr>
</tbody>
<ng-template #skeleton>
@@ -63,7 +83,8 @@
<ng-template #noData>
<div class="no-data">
<span i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
<span *ngIf="pending" i18n="accelerations.no-accelerations-yet">There are no active accelerations yet!</span>
<span *ngIf="!pending" i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
</div>
</ng-template>