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

Merge pull request #4585 from mempool/mononaut/accelerator-dashboard-polish

Browse Source 
Accelerator dashboard tweaks
This commit is contained in:
softsimon 2024-01-19 23:27:33 +07:00 committed by GitHub
commit a45e4a6ec5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
View File

@ -29,7 +29,7 @@
<div *ngIf="widget"> <div *ngIf="widget">
<div class="item"> <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>
</div> </div>

10
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
View File

@ -81,7 +81,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
}), }),
map(([accelerations, blockFeesResponse]) => { map(([accelerations, blockFeesResponse]) => {
return { 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) { while (last <= val.avgHeight) {
blockCount++; blockCount++;
totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0); 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; totalCount += (blockAccelerations[last] || []).length;
last++; last++;
} }
@ -246,7 +246,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
icon: 'roundRect', icon: 'roundRect',
}, },
{ {
name: 'Out-of-band fees per block', name: 'Total bid boost per block',
inactiveColor: 'rgb(110, 112, 121)', inactiveColor: 'rgb(110, 112, 121)',
textStyle: { textStyle: {
color: 'white', color: 'white',
@ -256,7 +256,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
], ],
selected: { selected: {
'In-band fees per block': false, 'In-band fees per block': false,
'Out-of-band fees per block': true, 'Total bid boost per block': true,
}, },
show: !this.widget, show: !this.widget,
}, },
@ -299,7 +299,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
{ {
legendHoverLink: false, legendHoverLink: false,
zlevel: 1, 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]), data: data.map(block => [block.timestamp * 1000, block.avgFeePaid, block.avgHeight]),
stack: 'Total', stack: 'Total',
type: 'bar', type: 'bar',

8
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html
View File

@ -1,14 +1,14 @@
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading"> <div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
<div class="stats-container"> <div class="stats-container">
<div class="item"> <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="card-text">
<div>{{ stats.count }}</div> <div>{{ stats.count }}</div>
<div class="symbol" i18n="accelerator.total-accelerated">accelerated</div> <div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
</div> </div>
</div> </div>
<div class="item"> <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="card-text">
<div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div> <div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
<span class="fiat"> <span class="fiat">
@ -29,14 +29,14 @@
<ng-template #loading> <ng-template #loading>
<div class="stats-container loading-container"> <div class="stats-container loading-container">
<div class="item"> <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="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <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="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>

8
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts
View File

@ -27,11 +27,11 @@ export class AccelerationStatsComponent implements OnInit {
let totalFeesPaid = 0; let totalFeesPaid = 0;
let totalSucceeded = 0; let totalSucceeded = 0;
let totalCanceled = 0; let totalCanceled = 0;
for (const acceleration of accelerations) { for (const acc of accelerations) {
if (acceleration.status === 'completed') { if (acc.status === 'completed') {
totalSucceeded++; totalSucceeded++;
totalFeesPaid += acceleration.feePaid || 0; totalFeesPaid += (acc.feePaid - acc.baseFee - acc.vsizeFee) || 0;
} else if (acceleration.status === 'failed') { } else if (acc.status === 'failed') {
totalCanceled++; totalCanceled++;
} }
} }

6
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View File

@ -14,7 +14,7 @@
<th class="time text-right" i18n="accelerator.block">Requested</th> <th class="time text-right" i18n="accelerator.block">Requested</th>
</ng-container> </ng-container>
<ng-container *ngIf="!pending"> <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="block text-right" i18n="accelerator.block">Block</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th> <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
</ng-container> </ng-container>
@ -39,7 +39,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="!pending"> <ng-container *ngIf="!pending">
<td *ngIf="acceleration.feePaid" class="fee text-right"> <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>
<td *ngIf="!acceleration.feePaid" class="fee text-right"> <td *ngIf="!acceleration.feePaid" class="fee text-right">
~ ~
@ -48,7 +48,7 @@
<a [routerLink]="['/block' | relativeUrl, acceleration.blockHeight]">{{ acceleration.blockHeight }}</a> <a [routerLink]="['/block' | relativeUrl, acceleration.blockHeight]">{{ acceleration.blockHeight }}</a>
</td> </td>
<td class="status text-right"> <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 === '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> <span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td> </td>

3
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -49,6 +49,9 @@ export class AccelerationsListComponent implements OnInit {
acceleration.status = acceleration.status || 'accelerating'; acceleration.status = acceleration.status || 'accelerating';
} }
} }
for (const acc of accelerations) {
acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee;
}
if (this.widget) { if (this.widget) {
return of(accelerations.slice(-6).reverse()); return of(accelerations.slice(-6).reverse());
} else { } else {

6
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html
View File

@ -1,10 +1,10 @@
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading"> <div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
<div class="stats-container"> <div class="stats-container">
<div class="item"> <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="card-text">
<div>{{ stats.count }}</div> <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> </div>
<div class="item"> <div class="item">
@ -29,7 +29,7 @@
<ng-template #loading> <ng-template #loading>
<div class="stats-container loading-container"> <div class="stats-container loading-container">
<div class="item"> <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="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>

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

@ -529,7 +529,7 @@
<td *ngIf="!(tx.acceleration || accelerationInfo)" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td> <td *ngIf="!(tx.acceleration || accelerationInfo)" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td> <td>
<div class="effective-fee-container"> <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> <app-fee-rate *ngIf="!accelerationInfo" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
<ng-template [ngIf]="tx?.status?.confirmed || tx.acceleration || accelerationInfo"> <ng-template [ngIf]="tx?.status?.confirmed || tx.acceleration || accelerationInfo">

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

@ -255,7 +255,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
).subscribe((accelerationHistory) => { ).subscribe((accelerationHistory) => {
for (const acceleration of accelerationHistory) { for (const acceleration of accelerationHistory) {
if (acceleration.txid === this.txId && (acceleration.status === 'completed' || acceleration.status === 'mined') && acceleration.feePaid > 0) { 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; this.accelerationInfo = acceleration;
} }
} }

3
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -342,7 +342,8 @@ export interface Acceleration {
blockHash: string; blockHash: string;
blockHeight: number; blockHeight: number;
actualFeeDelta?: number; acceleratedFee?: number;
boost?: number;
} }
export interface AccelerationHistoryParams { export interface AccelerationHistoryParams {