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

Merge pull request #5211 from mempool/simon/simpler-advanced-acceleration

Browse Source 
Simplify advanced acceleration
This commit is contained in:
softsimon 2024-06-26 17:42:11 +09:00 committed by GitHub
commit d175c34e5b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 96 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
View File

@ -4,7 +4,6 @@
width: 120px; width: 120px;
margin-left: 4em; margin-left: 4em;
margin-right: 1.5em; margin-right: 1.5em;
padding-bottom: 63px;
.column { .column {
width: 100%; width: 100%;

182
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View File

@ -32,56 +32,56 @@
<div class="alert alert-mempool">You are currently on the waitlist</div> <div class="alert alert-mempool">You are currently on the waitlist</div>
</div> </div>
<h5 i18n="accelerator.your-transaction">Your transaction</h5> <ng-template [ngIf]="showDetails">
<div class="row"> <h5 i18n="accelerator.your-transaction">Your transaction</h5>
<div class="col"> <div class="row">
<small *ngIf="hasAncestors" class="form-text text-muted mb-2"> <div class="col">
<ng-container i18n="accelerator.plus-unconfirmed-ancestors">Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ng-container> <small *ngIf="hasAncestors" class="form-text text-muted mb-2">
</small> <ng-container i18n="accelerator.plus-unconfirmed-ancestors">Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ng-container>
<table class="table table-borderless table-border table-dark table-background table-accelerator"> </small>
<tbody> <table class="table table-borderless table-border table-dark table-background table-accelerator">
<tr class="group-first"> <tbody>
<td class="item" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td> <tr class="group-first">
<td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td> <td class="item" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
</tr> <td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
<tr class="info"> </tr>
<td class="info" colspan=3> <tr class="info">
<i><small i18n="accelerator.transaction-vbytes-size-description">Size in vbytes of this transaction (including unconfirmed ancestors)</small></i> <td class="info" colspan=3>
</td> <i><small i18n="accelerator.transaction-vbytes-size-description">Size in vbytes of this transaction (including unconfirmed ancestors)</small></i>
</tr> </td>
<tr> </tr>
<td class="item" i18n="accelerator.in-band-fees">In-band fees</td> <tr>
<td style="text-align: end;"> <td class="item" i18n="accelerator.in-band-fees">In-band fees</td>
{{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span> <td style="text-align: end;">
</td> {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span>
</tr> </td>
<tr class="info group-last"> </tr>
<td class="info" colspan=3> <tr class="info group-last">
<i><small i18n="accelerator.fees-already-paid-description">Fees already paid by this transaction (including unconfirmed ancestors)</small></i> <td class="info" colspan=3>
</td> <i><small i18n="accelerator.fees-already-paid-description">Fees already paid by this transaction (including unconfirmed ancestors)</small></i>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> <br>
<br> </ng-template>
<h5 *ngIf="estimate?.pools?.length" i18n="accelerator.how-much-faster">How much faster?</h5> <h5 *ngIf="estimate?.pools?.length" i18n="accelerator.how-much-faster">How much faster?</h5>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<ng-container *ngIf="(etaInfo$ | async) as etaInfo; else loadingEstimate"> <ng-container *ngIf="(etaInfo$ | async) as etaInfo; else loadingEstimate">
<small class="form-text text-muted mb-2" i18n="accelerator.hashrate-percentage-description">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small> <small class="form-text text-muted mb-2" i18n="accelerator.hashrate-percentage-description">Your transaction will be prioritized by up to <strong>{{ etaInfo.hashratePercentage | number : '1.1-1' }}%</strong> of miners.</small>
<small class="form-text text-muted mb-2" i18n="accelerator.time-estimate-description">This will reduce your expected waiting time until the first confirmation to <app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time></small> <small class="form-text text-muted mb-2" i18n="accelerator.time-estimate-description">This will reduce your expected waiting time until the first confirmation to <strong><app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time></strong></small>
</ng-container> </ng-container>
</div> </div>
<div class="col pie"> <div class="col pie">
<app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box> <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
</div> </div>
</div> </div>
<br>
<h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<small class="form-text text-muted mb-2" i18n="accelerator.transaction-fee-description">Choose the maximum extra transaction fee you're willing to pay.</small>
<div class="form-group"> <div class="form-group">
<div class="fee-card"> <div class="fee-card">
<div class="d-flex mb-0"> <div class="d-flex mb-0">
@ -97,13 +97,13 @@
</div> </div>
</div> </div>
<h5>Acceleration summary</h5> <h5>Summary</h5>
<div class="row mb-3"> <div class="row">
<div class="col"> <div class="col">
<table class="table table-borderless table-border table-dark table-background table-accelerator"> <table class="table table-borderless table-border table-dark table-background table-accelerator">
<tbody> <tbody>
<!-- ESTIMATED FEE --> <!-- ESTIMATED FEE -->
<ng-container> <ng-template [ngIf]="showDetails">
<tr class="group-first"> <tr class="group-first">
<td class="item" i18n="accelerator.next-block-rate">Next block market rate</td> <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
<td class="amt" style="font-size: 16px"> <td class="amt" style="font-size: 16px">
@ -123,25 +123,24 @@
<span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span> <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
</td> </td>
</tr> </tr>
</ng-container>
<!-- MEMPOOL BASE FEE -->
<!-- MEMPOOL BASE FEE --> <tr>
<tr> <td class="item" i18n="accelerator.mempool-accelerator-fees">Mempool Accelerator™ fees</td>
<td class="item" i18n="accelerator.mempool-accelerator-fees">Mempool Accelerator™ fees</td> </tr>
</tr> <tr class="info" [class.group-last]="!estimate.vsizeFee" [class.dashed-bottom]="!estimate.vsizeFee">
<tr class="info"> <td class="info">
<td class="info"> <i><small i18n="accelerator.service-fee">Accelerator Service Fee</small></i>
<i><small i18n="accelerator.service-fee">Accelerator Service Fee</small></i> </td>
</td> <td class="amt">
<td class="amt"> +{{ estimate.mempoolBaseFee | number }}
+{{ estimate.mempoolBaseFee | number }} </td>
</td> <td class="units">
<td class="units"> <span class="symbol" i18n="shared.sats">sats</span>
<span class="symbol" i18n="shared.sats">sats</span> <span class="fiat ml-1"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span>
<span class="fiat ml-1"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span> </td>
</td> </tr>
</tr> <tr class="info group-last dashed-bottom" *ngIf="estimate.vsizeFee">
<tr class="info group-last">
<td class="info"> <td class="info">
<i><small i18n="accelerator.tx-size-surcharge">Transaction Size Surcharge</small></i> <i><small i18n="accelerator.tx-size-surcharge">Transaction Size Surcharge</small></i>
</td> </td>
@ -153,13 +152,13 @@
<span class="fiat ml-1"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span> <span class="fiat ml-1"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span>
</td> </td>
</tr> </tr>
</ng-template>
<!-- NEXT BLOCK ESTIMATE --> <!-- NEXT BLOCK ESTIMATE -->
<ng-container> <ng-container>
<tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;"> <tr class="group-first">
<td class="item"> <td class="item">
<b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b> <b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b> ~{{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB
</td> </td>
<td class="amt"> <td class="amt">
<span style="background-color: #5E35B1" class="p-1 pl-0"> <span style="background-color: #5E35B1" class="p-1 pl-0">
@ -171,18 +170,13 @@
<span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span> <span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
</td> </td>
</tr> </tr>
<tr class="info group-last" style="border-bottom: 1px solid lightgrey">
<td class="info" colspan=3>
<i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: estimate.targetFeeRate }"></ng-container></small></i>
</td>
</tr>
</ng-container> </ng-container>
<!-- MAX COST --> <!-- MAX COST -->
<ng-container> <ng-container>
<tr class="group-first"> <tr class="group-first" [class.group-last]="!isLoggedIn() || estimate.userBalance >= maxCost">
<td class="item"> <td class="item">
<b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b> <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
</td> </td>
<td class="amt"> <td class="amt">
<span style="background-color: var(--primary)" class="p-1 pl-0"> <span style="background-color: var(--primary)" class="p-1 pl-0">
@ -192,20 +186,15 @@
<td class="units"> <td class="units">
<span class="symbol" i18n="shared.sats">sats</span> <span class="symbol" i18n="shared.sats">sats</span>
<span class="fiat ml-1"> <span class="fiat ml-1">
<app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat> <app-fiat [value]="maxCost" [colorClass]="isLoggedIn() && estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
</span> </span>
</td> </td>
</tr> </tr>
<tr class="info group-last">
<td class="info" colspan=3>
<i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: (estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize }"></ng-container></small></i>
</td>
</tr>
</ng-container> </ng-container>
<!-- USER BALANCE --> <!-- USER BALANCE -->
<ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost"> <ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">
<tr class="group-first group-last" style="border-top: 1px dashed grey"> <tr class="group-first group-last dashed-top">
<td class="item" i18n="accelerator.available-balance">Available balance</td> <td class="item" i18n="accelerator.available-balance">Available balance</td>
<td class="amt"> <td class="amt">
{{ estimate.userBalance | number }} {{ estimate.userBalance | number }}
@ -218,23 +207,21 @@
</td> </td>
</tr> </tr>
</ng-container> </ng-container>
<ng-container *ngIf="user && estimate?.hasAccess || !isLoggedIn()">
<!-- LOGIN CTA -->
<ng-container *ngIf="stateService.isMempoolSpaceBuild && !isLoggedIn()">
<tr class="group-first group-last" style="border-top: 1px dashed grey"> <tr class="group-first group-last" style="border-top: 1px dashed grey">
<td class="item"></td> <td class="item"></td>
<td class="amt"></td> <td colspan="2">
<td class="units d-flex"> <div class="d-flex">
<a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1" i18n="shared.sign-in">Sign In</a> @if (isLoggedIn()) {
</td> @if (user && estimate.hasAccess) {
</tr> <button class="btn btn-sm btn-primary btn-success flex-grow-1" style="width: 150px" (click)="accelerate()" i18n="transaction.accelerate|Accelerate button label">Accelerate</button>
</ng-container> }
<ng-container *ngIf="!stateService.isMempoolSpaceBuild"> } @else if (stateService.isMempoolSpaceBuild) {
<tr class="group-first group-last" style="border-top: 1px dashed grey"> <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1" i18n="shared.sign-in">Sign In</a>
<td class="item"></td> } @else {
<td class="amt"></td> <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1" i18n="accelerator.accelerate-on-mempoolspace">Accelerate on mempool.space</a>
<td class="units d-flex"> }
<a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1" i18n="accelerator.accelerate-on-mempoolspace">Accelerate on mempool.space</a> </div>
</td> </td>
</tr> </tr>
</ng-container> </ng-container>
@ -242,15 +229,6 @@
</table> </table>
</div> </div>
</div> </div>
<div class="row mb-3" *ngIf="isLoggedIn()">
<div class="col">
<div class="d-flex justify-content-end" *ngIf="user && estimate.hasAccess">
<button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()" i18n="transaction.accelerate|Accelerate button label">Accelerate</button>
</div>
</div>
</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
@ -258,6 +236,4 @@
<ng-template #loadingEstimate> <ng-template #loadingEstimate>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<br> <br>
</ng-template> </ng-template>
<ng-template #acceleratedTo let-i i18n="accelerator.accelerated-to-description">If your tx is accelerated to ~{{ i | number : '1.0-0' }} sat/vB</ng-template>

13
frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
View File

@ -72,11 +72,17 @@
padding-top: 0.75rem; padding-top: 0.75rem;
} }
} }
&.group-last { &.group-last, &:last-child {
td { td {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }
} }
&.dashed-top {
border-top: 1px dashed grey;
}
&.dashed-bottom {
border-bottom: 1px dashed grey
}
} }
td { td {
&:first-child { &:first-child {
@ -118,4 +124,9 @@
.table-background { .table-background {
background-color: var(--bg); background-color: var(--bg);
}
.col.pie {
position: relative;
top: -15px;
} }

1
frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
View File

@ -46,6 +46,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
@Input() tx: Transaction; @Input() tx: Transaction;
@Input() miningStats: MiningStats; @Input() miningStats: MiningStats;
@Input() scrollEvent: boolean; @Input() scrollEvent: boolean;
@Input() showDetails: boolean;
math = Math; math = Math;
error = ''; error = '';

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

@ -80,10 +80,12 @@
<div class="title float-left"> <div class="title float-left">
<h2 i18n="transaction.accelerate|Accelerate button label">Accelerate</h2> <h2 i18n="transaction.accelerate|Accelerate button label">Accelerate</h2>
</div> </div>
<button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="showAccelerationDetails = !showAccelerationDetails" i18n="transaction.details|Transaction Details">Details</button>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="box"> <div class="box">
<app-accelerate-preview [tx]="tx" [miningStats]="miningStats" [scrollEvent]="scrollIntoAccelPreview"></app-accelerate-preview> <app-accelerate-preview [tx]="tx" [miningStats]="miningStats" [scrollEvent]="scrollIntoAccelPreview" [showDetails]="showAccelerationDetails"></app-accelerate-preview>
</div> </div>
</ng-container> </ng-container>

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

@ -138,6 +138,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
accelerateCtaType: 'alert' | 'button' = 'button'; accelerateCtaType: 'alert' | 'button' = 'button';
acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === ''; acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
showAccelerationSummary = false; showAccelerationSummary = false;
showAccelerationDetails = false;
scrollIntoAccelPreview = false; scrollIntoAccelPreview = false;
auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true; auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;