mirror of
https://github.com/mempool/mempool.git
synced 2024-11-20 10:21:52 +01:00
Merge pull request #4585 from mempool/mononaut/accelerator-dashboard-polish
Accelerator dashboard tweaks
This commit is contained in:
commit
a45e4a6ec5
@ -29,7 +29,7 @@
|
||||
|
||||
<div *ngIf="widget">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="acceleration.block-fees">Out-of-band Fees Per Block</h5>
|
||||
<h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -81,7 +81,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
|
||||
}),
|
||||
map(([accelerations, blockFeesResponse]) => {
|
||||
return {
|
||||
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
|
||||
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + (acc.feePaid - acc.baseFee - acc.vsizeFee), 0) / accelerations.length
|
||||
};
|
||||
}),
|
||||
);
|
||||
@ -151,7 +151,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
|
||||
while (last <= val.avgHeight) {
|
||||
blockCount++;
|
||||
totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0);
|
||||
totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0);
|
||||
totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + (acc.feePaid - acc.baseFee - acc.vsizeFee), 0);
|
||||
totalCount += (blockAccelerations[last] || []).length;
|
||||
last++;
|
||||
}
|
||||
@ -246,7 +246,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
|
||||
icon: 'roundRect',
|
||||
},
|
||||
{
|
||||
name: 'Out-of-band fees per block',
|
||||
name: 'Total bid boost per block',
|
||||
inactiveColor: 'rgb(110, 112, 121)',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
@ -256,7 +256,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
|
||||
],
|
||||
selected: {
|
||||
'In-band fees per block': false,
|
||||
'Out-of-band fees per block': true,
|
||||
'Total bid boost per block': true,
|
||||
},
|
||||
show: !this.widget,
|
||||
},
|
||||
@ -299,7 +299,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
|
||||
{
|
||||
legendHoverLink: false,
|
||||
zlevel: 1,
|
||||
name: 'Out-of-band fees per block',
|
||||
name: 'Total bid boost per block',
|
||||
data: data.map(block => [block.timestamp * 1000, block.avgFeePaid, block.avgHeight]),
|
||||
stack: 'Total',
|
||||
type: 'bar',
|
||||
|
@ -1,14 +1,14 @@
|
||||
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
|
||||
<div class="stats-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<h5 class="card-title" i18n="accelerator.requests">Requests</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.count }}</div>
|
||||
<div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
|
||||
<h5 class="card-title" i18n="accelerator.total-boost">Total Bid Boost</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
|
||||
<span class="fiat">
|
||||
@ -29,14 +29,14 @@
|
||||
<ng-template #loading>
|
||||
<div class="stats-container loading-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<h5 class="card-title" i18n="accelerator.requests">Requests</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
|
||||
<h5 class="card-title" i18n="accelerator.total-boost">Total Bid Boost</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
|
@ -27,11 +27,11 @@ export class AccelerationStatsComponent implements OnInit {
|
||||
let totalFeesPaid = 0;
|
||||
let totalSucceeded = 0;
|
||||
let totalCanceled = 0;
|
||||
for (const acceleration of accelerations) {
|
||||
if (acceleration.status === 'completed') {
|
||||
for (const acc of accelerations) {
|
||||
if (acc.status === 'completed') {
|
||||
totalSucceeded++;
|
||||
totalFeesPaid += acceleration.feePaid || 0;
|
||||
} else if (acceleration.status === 'failed') {
|
||||
totalFeesPaid += (acc.feePaid - acc.baseFee - acc.vsizeFee) || 0;
|
||||
} else if (acc.status === 'failed') {
|
||||
totalCanceled++;
|
||||
}
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
||||
<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="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</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>
|
||||
@ -39,7 +39,7 @@
|
||||
</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>
|
||||
{{ (acceleration.boost) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
</td>
|
||||
<td *ngIf="!acceleration.feePaid" class="fee text-right">
|
||||
~
|
||||
@ -48,7 +48,7 @@
|
||||
<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 === 'accelerating'" class="badge badge-warning" i18n="accelerator.pending">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>
|
||||
|
@ -49,6 +49,9 @@ export class AccelerationsListComponent implements OnInit {
|
||||
acceleration.status = acceleration.status || 'accelerating';
|
||||
}
|
||||
}
|
||||
for (const acc of accelerations) {
|
||||
acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee;
|
||||
}
|
||||
if (this.widget) {
|
||||
return of(accelerations.slice(-6).reverse());
|
||||
} else {
|
||||
|
@ -1,10 +1,10 @@
|
||||
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
|
||||
<div class="stats-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<h5 class="card-title" i18n="accelerator.requests">Requests</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.count }}</div>
|
||||
<div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
|
||||
<div class="symbol" i18n="accelerator.total-pending">pending</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
@ -29,7 +29,7 @@
|
||||
<ng-template #loading>
|
||||
<div class="stats-container loading-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<h5 class="card-title" i18n="accelerator.requests">Requests</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
|
@ -529,7 +529,7 @@
|
||||
<td *ngIf="!(tx.acceleration || accelerationInfo)" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
|
||||
<td>
|
||||
<div class="effective-fee-container">
|
||||
<app-fee-rate *ngIf="accelerationInfo" [fee]="accelerationInfo.actualFeeDelta" [weight]="accelerationInfo.effectiveVsize * 4"></app-fee-rate>
|
||||
<app-fee-rate *ngIf="accelerationInfo" [fee]="accelerationInfo.acceleratedFee" [weight]="accelerationInfo.effectiveVsize * 4"></app-fee-rate>
|
||||
<app-fee-rate *ngIf="!accelerationInfo" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
|
||||
|
||||
<ng-template [ngIf]="tx?.status?.confirmed || tx.acceleration || accelerationInfo">
|
||||
|
@ -255,7 +255,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
).subscribe((accelerationHistory) => {
|
||||
for (const acceleration of accelerationHistory) {
|
||||
if (acceleration.txid === this.txId && (acceleration.status === 'completed' || acceleration.status === 'mined') && acceleration.feePaid > 0) {
|
||||
acceleration.actualFeeDelta = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
|
||||
acceleration.acceleratedFee = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
|
||||
this.accelerationInfo = acceleration;
|
||||
}
|
||||
}
|
||||
|
@ -342,7 +342,8 @@ export interface Acceleration {
|
||||
blockHash: string;
|
||||
blockHeight: number;
|
||||
|
||||
actualFeeDelta?: number;
|
||||
acceleratedFee?: number;
|
||||
boost?: number;
|
||||
}
|
||||
|
||||
export interface AccelerationHistoryParams {
|
||||
|
Loading…
Reference in New Issue
Block a user