262 lines
11 KiB
HTML
262 lines
11 KiB
HTML
<div class="row" *ngIf="showSuccess">
|
|
<div class="col" id="successAlert">
|
|
<div class="alert alert-success">
|
|
Transaction has now been submitted to mining pools for acceleration. You can track the progress <a class="alert-link" routerLink="/services/accelerator/history">here</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" *ngIf="error">
|
|
<div class="col" id="mempoolError">
|
|
<app-mempool-error [error]="error"></app-mempool-error>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accelerate-cols">
|
|
<ng-container *ngIf="!isMobile">
|
|
<app-accelerate-fee-graph
|
|
[tx]="tx"
|
|
[estimate]="estimate"
|
|
[maxRateOptions]="maxRateOptions"
|
|
[maxRateIndex]="selectFeeRateIndex"
|
|
(setUserBid)="setUserBid($event)"
|
|
></app-accelerate-fee-graph>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="estimate">
|
|
<div [class]="{estimateDisabled: error}">
|
|
<h5>Your transaction</h5>
|
|
<div class="row">
|
|
<div class="col">
|
|
<small *ngIf="hasAncestors" class="form-text text-muted mb-2">
|
|
Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor{{ estimate.txSummary.ancestorCount > 2 ? 's' : ''}}.
|
|
</small>
|
|
<table class="table table-borderless table-border table-dark table-accelerator">
|
|
<tbody>
|
|
<tr class="group-first">
|
|
<td class="item">
|
|
Virtual size
|
|
</td>
|
|
<td class="units" [innerHTML]="'‎' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
|
|
</tr>
|
|
<tr class="info">
|
|
<td class="info">
|
|
<i><small>Size in vbytes of this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="item">
|
|
In-band fees
|
|
</td>
|
|
<td class="units">
|
|
{{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="info group-last">
|
|
<td class="info">
|
|
<i><small>Fees already paid by this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h5>How much more are you willing to pay?</h5>
|
|
<div class="row">
|
|
<div class="col">
|
|
<small class="form-text text-muted mb-2">
|
|
Choose the maximum extra transaction fee you're willing to pay to get into the next block.<br>
|
|
If the estimated next block rate rises beyond this limit, we will automatically cancel your acceleration request.
|
|
</small>
|
|
<div class="form-group">
|
|
<div class="fee-card">
|
|
<div class="d-flex mb-0">
|
|
<ng-container *ngFor="let option of maxRateOptions">
|
|
<button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
|
|
<span class="fee">{{ option.fee | number }} <span class="symbol" i18n="shared.sats|sats">sats</span></span>
|
|
<span class="rate">~ <app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
|
|
</button>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Acceleration summary</h5>
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<div class="table-toggle btn-group btn-group-toggle">
|
|
<div class="btn btn-primary btn-sm" [class.active]="showTable === 'estimated'" (click)="showTable = 'estimated'">
|
|
<span>Estimated cost</span>
|
|
</div>
|
|
<div class="btn btn-primary btn-sm" [class.active]="showTable === 'maximum'" (click)="showTable = 'maximum'">
|
|
<span>Maximum cost</span>
|
|
</div>
|
|
</div>
|
|
<table class="table table-borderless table-border table-dark table-accelerator">
|
|
<tbody>
|
|
<!-- ESTIMATED FEE -->
|
|
<ng-container *ngIf="showTable === 'estimated'">
|
|
<tr class="group-first">
|
|
<td class="item">
|
|
Next block market rate
|
|
</td>
|
|
<td class="amt" style="font-size: 20px">
|
|
{{ estimate.targetFeeRate | number : '1.0-0' }}
|
|
</td>
|
|
<td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
|
|
</tr>
|
|
<tr class="info">
|
|
<td class="info">
|
|
<i><small>Estimated extra fee required</small></i>
|
|
</td>
|
|
<td class="amt">
|
|
{{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
<!-- USER MAX BID -->
|
|
<ng-container *ngIf="showTable === 'maximum'">
|
|
<tr class="group-first">
|
|
<td class="item">
|
|
Your maximum
|
|
</td>
|
|
<td class="amt" style="width: 45%; font-size: 20px">
|
|
~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }}
|
|
</td>
|
|
<td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
|
|
</tr>
|
|
<tr class="info">
|
|
<td class="info">
|
|
<i><small>The maximum extra transaction fee you could pay</small></i>
|
|
</td>
|
|
<td class="amt">
|
|
<span>
|
|
{{ userBid | number }}
|
|
</span>
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat"><app-fiat [value]="userBid"></app-fiat></span>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
|
|
<!-- MEMPOOL BASE FEE -->
|
|
<tr>
|
|
<td class="item">
|
|
Mempool Accelerator™ fees
|
|
</td>
|
|
</tr>
|
|
<tr class="info">
|
|
<td class="info">
|
|
<i><small>mempool.space fee</small></i>
|
|
</td>
|
|
<td class="amt">
|
|
+{{ estimate.mempoolBaseFee | number }}
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="info group-last" style="border-bottom: 1px solid lightgrey">
|
|
<td class="info">
|
|
<i><small>Transaction vsize fee</small></i>
|
|
</td>
|
|
<td class="amt">
|
|
+{{ estimate.vsizeFee | number }}
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- NEXT BLOCK ESTIMATE -->
|
|
<ng-container *ngIf="showTable === 'estimated'">
|
|
<tr class="group-first">
|
|
<td class="item">
|
|
<b style="background-color: #5E35B1" class="p-1 pl-0">Estimated acceleration cost</b>
|
|
</td>
|
|
<td class="amt">
|
|
<span style="background-color: #5E35B1" class="p-1 pl-0">
|
|
{{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }}
|
|
</span>
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="info group-last">
|
|
<td class="info">
|
|
<i><small>If your tx is accelerated to </small><small>{{ estimate.targetFeeRate | number : '1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
|
|
<!-- MAX COST -->
|
|
<ng-container *ngIf="showTable === 'maximum'">
|
|
<tr class="group-first">
|
|
<td class="item">
|
|
<b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
|
|
</td>
|
|
<td class="amt">
|
|
<span style="background-color: #105fb0" class="p-1 pl-0">
|
|
{{ maxCost | number }}
|
|
</span>
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat">
|
|
<app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="info group-last">
|
|
<td class="info">
|
|
<i><small>If your tx is accelerated to </small><small>~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
|
|
<!-- USER BALANCE -->
|
|
<ng-container *ngIf="estimate.userBalance < maxCost">
|
|
<tr class="group-first group-last" style="border-top: 1px dashed grey">
|
|
<td class="item">
|
|
Available balance
|
|
</td>
|
|
<td class="amt">
|
|
{{ estimate.userBalance | number }}
|
|
</td>
|
|
<td class="units">
|
|
<span class="symbol" i18n="shared.sats|sats">sats</span>
|
|
<span class="fiat">
|
|
<app-fiat [value]="estimate.userBalance" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3" *ngIf="isLoggedIn()">
|
|
<div class="col">
|
|
<div class="d-flex justify-content-end">
|
|
<button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()">Accelerate</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ng-container>
|
|
</div> |