machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show fees rates on acceleration timeline

Browse Source
This commit is contained in:
natsoni 2024-07-11 20:39:52 +09:00
parent 17720b98c1
commit 06b696f0bb
No known key found for this signature in database
GPG Key ID: C65917583181743B
5 changed files with 116 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,68 +1,6 @@
@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">
<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]="tx.status.block_time - acceleratedAt"></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" [id]="'accelerated'">
<div class="seen-to-acc left"></div>
<div class="acc-to-confirmed right"></div>
<div class="shape-border">
<div class="shape"></div>
</div>
<div class="status"><span class="badge badge-accelerated" 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"></div>
</div>
<div class="node selected" [id]="'confirmed'">
<div class="acc-to-confirmed left" ></div>
<div class="shape-border">
<div class="shape"></div>
</div>
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
<div class="time">
<app-time kind="since" [time]="tx.status.block_time"></app-time>
</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-wrapper">
@if (!tx.status.confirmed) {
<div class="timeline"> <div class="timeline">
<div class="intervals"> <div class="intervals">
<div class="node-spacer"></div> <div class="node-spacer"></div>
@ -90,10 +28,14 @@
<div class="shape-border waiting"> <div class="shape-border waiting">
<div class="shape animate"></div> <div class="shape animate"></div>
</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 class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
</div> </div>
</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>
@ -105,8 +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">
@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> --> <!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
- }
</div> </div>
</div> </div>
<div class="node-spacer"></div> <div class="node-spacer"></div>
@ -118,35 +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 accelerated" [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>
@if (tx.status.confirmed) {
<div class="acc-to-confirmed right"></div>
} @else {
<div class="seen-to-acc right"></div> <div class="seen-to-acc right"></div>
}
<div class="shape-border"> <div class="shape-border">
<div class="shape"></div> <div class="shape"></div>
@if (!tx.status.confirmed) {
<div class="connector down loading"></div> <div class="connector down loading"></div>
}
</div> </div>
<div class="time" style="margin-top: 3px;"> @if (tx.status.confirmed) {
<span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time> <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
}
@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>
} @else {
<div class="seen-to-acc"></div> <div class="seen-to-acc"></div>
}
</div> </div>
<div class="node" [id]="'confirmed'"> <div class="node" [class.selected]="tx.status.confirmed" [id]="'confirmed'">
@if (tx.status.confirmed) {
<div class="acc-to-confirmed left"></div>
} @else {
<div class="seen-to-acc left"></div> <div class="seen-to-acc left"></div>
<div class="shape-border waiting"> }
<div class="shape-border" [class.waiting]="!tx.status.confirmed">
<div class="shape"></div> <div class="shape"></div>
</div> </div>
@if (tx.status.confirmed) {
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
}
@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>
}

2
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
View File

@ -209,7 +209,7 @@
} }
.status { .status {
margin-top: -64px; margin-top: -66px;
.badge.badge-waiting { .badge.badge-waiting {
opacity: 0.5; opacity: 0.5;

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

@ -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)

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

@ -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>

1
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -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;
} }