78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
|
<div class="acceleration-timeline box">
|
||
|
|
<div class="timeline-wrapper">
|
||
|
|
<div class="timeline">
|
||
|
|
<div class="intervals">
|
||
|
|
<div class="node-spacer"></div>
|
||
|
|
<div class="interval">
|
||
|
|
<div class="interval-time">
|
||
|
|
<app-time [time]="acceleratedAt - transactionTime"></app-time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="node-spacer"></div>
|
||
|
|
<div class="interval">
|
||
|
|
<div class="interval-time">
|
||
|
|
@if (eta) {
|
||
|
|
~<app-time kind="plain" [time]="eta?.wait / 1000"></app-time>
|
||
|
|
} @else if (tx.status.block_time) {
|
||
|
|
<app-time kind="plain" [time]="tx.status.block_time - acceleratedAt"></app-time>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="node-spacer"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</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="shape"></div>
|
||
|
|
</a>
|
||
|
|
<div class="status"><span class="badge badge-primary">Sent</span></div>
|
||
|
|
<div class="time">
|
||
|
|
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="interval-spacer">
|
||
|
|
<div class="seen-to-acc" [class.loading]="!tx.acceleration && !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">
|
||
|
|
<div class="shape"></div>
|
||
|
|
</a>
|
||
|
|
<div class="status" [style]="!tx.acceleration && !tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-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>
|
||
|
|
<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">
|
||
|
|
<div class="shape"></div>
|
||
|
|
</a>
|
||
|
|
<div class="status" [style]="!tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-success">Mined</span></div>
|
||
|
|
<div class="time">
|
||
|
|
@if (tx.status.block_time) {
|
||
|
|
<app-time kind="since" [time]="tx.status.block_time"></app-time>
|
||
|
|
} @else if (eta) {
|
||
|
|
<app-time kind="until" [time]="eta?.time"></app-time>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ng-template #nodeSpacer>
|
||
|
|
<div class="node-spacer"></div>
|
||
|
|
</ng-template>
|
||
|
|
|
||
|
|
<ng-template #intervalSpacer>
|
||
|
|
<div class="interval-spacer"></div>
|
||
|
|
</ng-template>
|
||
|
|
|
||
|
|
</div>
|