mirror of
https://github.com/mempool/mempool.git
synced 2024-11-20 02:11:49 +01:00
Show fees rates on acceleration timeline
This commit is contained in:
natsoni
parent
17720b98c1
commit
06b696f0bb
@ -1,6 +1,41 @@
|
|||||||
@if (tx.status.confirmed) {
|
<div class="acceleration-timeline box" [class.lower-padding]="!tx.status.confirmed">
|
||||||
<div class="acceleration-timeline box">
|
|
||||||
<div class="timeline-wrapper">
|
<div class="timeline-wrapper">
|
||||||
|
@if (!tx.status.confirmed) {
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="intervals">
|
||||||
|
<div class="node-spacer"></div>
|
||||||
|
<div class="interval-spacer"></div>
|
||||||
|
<div class="node-spacer"></div>
|
||||||
|
<div class="interval">
|
||||||
|
<div class="interval-time">
|
||||||
|
@if (eta) {
|
||||||
|
~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="node-spacer"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nodes">
|
||||||
|
<div class="node-spacer"></div>
|
||||||
|
<div class="interval-spacer"></div>
|
||||||
|
<div class="node">
|
||||||
|
<div class="acc-to-confirmed right go-faster"></div>
|
||||||
|
</div>
|
||||||
|
<div class="interval-spacer">
|
||||||
|
</div>
|
||||||
|
<div class="node" [id]="'confirmed'">
|
||||||
|
<div class="acc-to-confirmed left go-faster"></div>
|
||||||
|
<div class="shape-border waiting">
|
||||||
|
<div class="shape animate"></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<span class="symbol">< </span><app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
|
</div> -->
|
||||||
|
<div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="intervals">
|
<div class="intervals">
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
@ -12,7 +47,13 @@
|
|||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
<div class="interval">
|
<div class="interval">
|
||||||
<div class="interval-time">
|
<div class="interval-time">
|
||||||
<app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
|
@if (tx.status.confirmed) {
|
||||||
|
<div class="interval-time">
|
||||||
|
<app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
|
||||||
|
</div>
|
||||||
|
} @else if (standardETA && !tx.status.confirmed) {
|
||||||
|
<!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
@ -24,129 +65,90 @@
|
|||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
||||||
<div class="time">
|
<div style="margin-top: 33px;">
|
||||||
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
<app-fee-rate [fee]="tx.feePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="interval-spacer">
|
<div class="interval-spacer">
|
||||||
<div class="seen-to-acc"></div>
|
<div class="seen-to-acc"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="node" [id]="'accelerated'">
|
<div class="node" [class.accelerated]="!tx.status.confirmed" [id]="'accelerated'">
|
||||||
<div class="seen-to-acc left"></div>
|
<div class="seen-to-acc left"></div>
|
||||||
<div class="acc-to-confirmed right"></div>
|
@if (tx.status.confirmed) {
|
||||||
<div class="shape-border">
|
<div class="acc-to-confirmed right"></div>
|
||||||
|
} @else {
|
||||||
|
<div class="seen-to-acc right"></div>
|
||||||
|
}
|
||||||
|
<div class="shape-border">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
|
@if (!tx.status.confirmed) {
|
||||||
|
<div class="connector down loading"></div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
@if (tx.status.confirmed) {
|
||||||
<div class="time">
|
<div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
||||||
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
}
|
||||||
|
@if (tx.status.confirmed && accelerationInfo) {
|
||||||
|
<div style="margin-top: 33px;">
|
||||||
|
<app-fee-rate [fee]="accelerationInfo.effectiveFee + accelerationInfo.feeDelta" [weight]="accelerationInfo.effectiveVsize * 4" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
</div>
|
</div>
|
||||||
|
} @else if (!tx.status.confirmed) {
|
||||||
|
<div>
|
||||||
|
<app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
|
</div>
|
||||||
|
@if (now - acceleratedAt > 60) {
|
||||||
|
<div class="time" style="margin-top: -164px; font-style: italic;">
|
||||||
|
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
<div style="margin-top: 36px;">
|
||||||
|
<span class="skeleton-loader" style="max-width: 50px"></span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="interval-spacer">
|
<div class="interval-spacer">
|
||||||
|
@if (tx.status.confirmed) {
|
||||||
<div class="acc-to-confirmed"></div>
|
<div class="acc-to-confirmed"></div>
|
||||||
|
} @else {
|
||||||
|
<div class="seen-to-acc"></div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="node selected" [id]="'confirmed'">
|
<div class="node" [class.selected]="tx.status.confirmed" [id]="'confirmed'">
|
||||||
<div class="acc-to-confirmed left" ></div>
|
@if (tx.status.confirmed) {
|
||||||
<div class="shape-border">
|
<div class="acc-to-confirmed left"></div>
|
||||||
|
} @else {
|
||||||
|
<div class="seen-to-acc left"></div>
|
||||||
|
}
|
||||||
|
<div class="shape-border" [class.waiting]="!tx.status.confirmed">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
|
@if (tx.status.confirmed) {
|
||||||
<div class="time">
|
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
|
||||||
<app-time kind="since" [time]="tx.status.block_time"></app-time>
|
}
|
||||||
|
@if (tx.status.confirmed && accelerationInfo) {
|
||||||
|
<div style="margin-top: 33px;">
|
||||||
|
@if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize || tx.acceleration)) {
|
||||||
|
@if (!tx.effectiveFeePerVsize) { <!-- Avoid briefly displaying a wrong accelerated fee rate while loading -->
|
||||||
|
<span class="skeleton-loader" style="max-width: 50px;"></span>
|
||||||
|
} @else {
|
||||||
|
<app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
<app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
} @else if (!tx.status.confirmed) {
|
||||||
|
<!-- <div>
|
||||||
|
<app-fee-rate [fee]="tx.feePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
|
||||||
|
</div> -->
|
||||||
|
} @else {
|
||||||
|
<div style="margin-top: 36px;">
|
||||||
|
<span class="skeleton-loader" style="max-width: 50px"></span>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
|
|
||||||
} @else if (standardETA) { <!-- Accelerated -->
|
|
||||||
<div class="acceleration-timeline box lower-padding">
|
|
||||||
<div class="timeline-wrapper">
|
|
||||||
<div class="timeline">
|
|
||||||
<div class="intervals">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval">
|
|
||||||
<div class="interval-time">
|
|
||||||
@if (eta) {
|
|
||||||
~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
</div>
|
|
||||||
<div class="nodes">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node">
|
|
||||||
<div class="acc-to-confirmed right go-faster"></div>
|
|
||||||
</div>
|
|
||||||
<div class="interval-spacer">
|
|
||||||
</div>
|
|
||||||
<div class="node" [id]="'confirmed'">
|
|
||||||
<div class="acc-to-confirmed left go-faster"></div>
|
|
||||||
<div class="shape-border waiting">
|
|
||||||
<div class="shape animate"></div>
|
|
||||||
</div>
|
|
||||||
<div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
|
|
||||||
-
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
</div>
|
|
||||||
<div class="nodes">
|
|
||||||
<div class="node" [id]="'first-seen'">
|
|
||||||
<div class="seen-to-acc right"></div>
|
|
||||||
<div class="shape-border">
|
|
||||||
<div class="shape"></div>
|
|
||||||
</div>
|
|
||||||
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</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"></div>
|
|
||||||
</div>
|
|
||||||
<div class="node accelerated" [id]="'accelerated'">
|
|
||||||
<div class="seen-to-acc left"></div>
|
|
||||||
<div class="seen-to-acc right"></div>
|
|
||||||
<div class="shape-border">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="connector down loading"></div>
|
|
||||||
</div>
|
|
||||||
<div class="time" style="margin-top: 3px;">
|
|
||||||
<span i18n="transaction.audit.accelerated">Accelerated</span> <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="interval-spacer">
|
|
||||||
<div class="seen-to-acc"></div>
|
|
||||||
</div>
|
|
||||||
<div class="node" [id]="'confirmed'">
|
|
||||||
<div class="seen-to-acc left"></div>
|
|
||||||
<div class="shape-border waiting">
|
|
||||||
<div class="shape"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@ -209,7 +209,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
margin-top: -64px;
|
margin-top: -66px;
|
||||||
|
|
||||||
.badge.badge-waiting {
|
.badge.badge-waiting {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { Component, Input, OnInit, OnChanges } from '@angular/core';
|
import { Component, Input, OnInit, OnChanges } from '@angular/core';
|
||||||
import { ETA } from '../../services/eta.service';
|
import { ETA } from '../../services/eta.service';
|
||||||
import { Transaction } from '../../interfaces/electrs.interface';
|
import { Transaction } from '../../interfaces/electrs.interface';
|
||||||
|
import { Acceleration } from '../../interfaces/node-api.interface';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-acceleration-timeline',
|
selector: 'app-acceleration-timeline',
|
||||||
@ -10,6 +11,7 @@ import { Transaction } from '../../interfaces/electrs.interface';
|
|||||||
export class AccelerationTimelineComponent implements OnInit, OnChanges {
|
export class AccelerationTimelineComponent implements OnInit, OnChanges {
|
||||||
@Input() transactionTime: number;
|
@Input() transactionTime: number;
|
||||||
@Input() tx: Transaction;
|
@Input() tx: Transaction;
|
||||||
|
@Input() accelerationInfo: Acceleration;
|
||||||
@Input() eta: ETA;
|
@Input() eta: ETA;
|
||||||
// A mined transaction has standard ETA and accelerated ETA undefined
|
// A mined transaction has standard ETA and accelerated ETA undefined
|
||||||
// A transaction in mempool has either standardETA defined (if accelerated) or acceleratedETA defined (if not accelerated yet)
|
// A transaction in mempool has either standardETA defined (if accelerated) or acceleratedETA defined (if not accelerated yet)
|
||||||
|
|||||||
@ -167,7 +167,7 @@
|
|||||||
<h2 id="acceleration-timeline" i18n="transaction.acceleration-timeline|Acceleration Timeline">Acceleration Timeline</h2>
|
<h2 id="acceleration-timeline" i18n="transaction.acceleration-timeline|Acceleration Timeline">Acceleration Timeline</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)" [standardETA]="(standardETA$ | async)?.time"></app-acceleration-timeline>
|
<app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [accelerationInfo]="accelerationInfo" [eta]="(ETA$ | async)" [standardETA]="(standardETA$ | async)?.time"></app-acceleration-timeline>
|
||||||
<br>
|
<br>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|||||||
@ -158,6 +158,7 @@
|
|||||||
|
|
||||||
.effective-fee-container {
|
.effective-fee-container {
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
@media (min-width: 768px){
|
@media (min-width: 768px){
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user