highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-01 00:18:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

More accel timeline polish

Browse Source
This commit is contained in:
natsoni 2024-07-05 18:12:28 +09:00
parent 7c08a104ce
commit a0992f6091
No known key found for this signature in database
GPG Key ID: C65917583181743B
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
View File

@ -12,9 +12,9 @@
<div class="interval">
<div class="interval-time">
@if (eta) {
~<app-time kind="plain" [time]="eta?.wait / 1000"></app-time>
~<app-time [time]="eta?.wait / 1000"></app-time>
} @else if (tx.status.block_time) {
<app-time kind="plain" [time]="tx.status.block_time - acceleratedAt"></app-time>
<app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
}
</div>
</div>
@ -24,8 +24,8 @@
</div>
<div class="nodes">
<div class="node" [id]="'first-seen'">
<div class="seen-to-acc right" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.sent-selected]="!tx.status.confirmed && !tx.acceleration">
<div class="seen-to-acc right" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.sent-selected]="!tx.status.confirmed && !isAcceleration">
<div class="shape"></div>
</a>
<div class="status"><span class="badge badge-primary" i18n="accelerator.sent-state">Sent</span></div>
@ -34,25 +34,25 @@
</div>
</div>
<div class="interval-spacer">
<div class="seen-to-acc" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
<div class="seen-to-acc" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
</div>
<div class="node" [id]="'accelerated'">
<div class="seen-to-acc left" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
<div class="acc-to-confirmed right" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed" [class.waiting]="!tx.acceleration && !tx.status.confirmed ? 'waiting' : ''">
<div class="seen-to-acc left" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
<div class="acc-to-confirmed right" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.accelerated-selected]="isAcceleration && !tx.status.confirmed" [class.waiting]="!isAcceleration && !tx.status.confirmed">
<div class="shape"></div>
</a>
<div class="status"><span class="badge" [class]="tx.status.confirmed || tx.acceleration ? 'badge-accelerated' : 'badge-waiting'" i18n="transaction.audit.accelerated">Accelerated</span></div>
<div class="status"><span class="badge" [class]="tx.status.confirmed || isAcceleration ? 'badge-accelerated' : 'badge-waiting'" i18n="transaction.audit.accelerated">Accelerated</span></div>
<div class="time">
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
</div>
</div>
<div class="interval-spacer">
<div class="acc-to-confirmed" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
<div class="acc-to-confirmed" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
</div>
<div class="node" [id]="'confirmed'" [class.mined]="tx.status.confirmed">
<div class="acc-to-confirmed left" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed ? 'waiting' : ''">
<div class="acc-to-confirmed left" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed">
<div class="shape"></div>
</a>
<div class="status"><span class="badge" [class]="tx.status.confirmed ? 'badge-success' : 'badge-waiting'" i18n="transaction.rbf.mined">Mined</span></div>

1
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
View File

@ -11,6 +11,7 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
@Input() transactionTime: number;
@Input() tx: Transaction;
@Input() eta: ETA;
@Input() isAcceleration: boolean;
acceleratedAt: number;

4
frontend/src/app/components/transaction/transaction.component.html
View File

@ -152,12 +152,12 @@
<br>
<ng-container *ngIf="transactionTime && (tx.acceleration || isAcceleration)">
<ng-container *ngIf="transactionTime && isAcceleration">
<div class="title float-left">
<h2 id="acceleration-timeline" i18n="transaction.acceleration-timeline|Acceleration Timeline">Acceleration Timeline</h2>
</div>
<div class="clearfix"></div>
<app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)"></app-acceleration-timeline>
<app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)" [isAcceleration]="isAcceleration"></app-acceleration-timeline>
<br>
</ng-container>