mirror of
https://github.com/mempool/mempool.git
synced 2025-02-25 07:07:36 +01:00
[accelerator] restore "wait" radio on pizza tracker
This commit is contained in:
Mononaut
parent
da4c2f5307
commit
a624e82630
2 changed files with 63 additions and 18 deletions
|
|
@ -280,29 +280,55 @@
|
|||
<div class="alert alert-mempool mr-6">You are currently on the waitlist for Mempool Accelerator™</div>
|
||||
</div>
|
||||
|
||||
<form [class.disabled]="error || showSuccess">
|
||||
<div class="row summary-row">
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
<div class="d-flex flex-column" for="accel">
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <ng-container *ngTemplateOutlet="customizeButton"></ng-container></span>
|
||||
<span class="checkout-text">Confirmation expected <app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time><br>
|
||||
@if (!calculating) {
|
||||
<app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small> <span class="symbol" i18n="shared.sats">sats</span></span>)
|
||||
@if (!advancedEnabled) {
|
||||
<form [class.disabled]="error || showSuccess">
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="form-group form-check mb-2">
|
||||
<input type="radio" [checked]="selectedOption === 'wait'" class="form-check-input" id="wait" name="accel" (change)="selectedOptionChanged($event)">
|
||||
<label class="form-check-label d-flex flex-column" for="wait">
|
||||
<span class="font-weight-bold">Wait</span>
|
||||
@if (eta.blocks < 7) {
|
||||
<span class="checkout-text">Confirmation expected <app-time kind="within" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time></span>
|
||||
} @else {
|
||||
<span class="estimating">Calculating cost...</span>
|
||||
<span class="checkout-text">
|
||||
<span>Confirmation expected within several hours</span>
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group form-check mb-2">
|
||||
<input type="radio" [checked]="selectedOption === 'accel'" class="form-check-input" id="accel" name="accel" (change)="selectedOptionChanged($event)">
|
||||
<label class="form-check-label d-flex flex-column" for="accel">
|
||||
<ng-container *ngTemplateOutlet="accelerateOption; context: {etaInfo}"></ng-container>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pie d-none d-lg-flex" *ngIf="!forceMobile">
|
||||
<small class="form-text checkout-text mb-2" i18n="accelerator.hashrate-percentage-description">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small>
|
||||
<app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
|
||||
<div class="row mt-2 mb-2">
|
||||
<div class="col-sm d-flex flex-row justify-content-center">
|
||||
<ng-container *ngTemplateOutlet="accelerateButton"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
} @else {
|
||||
<div [class.disabled]="error || showSuccess">
|
||||
<div class="row summary-row">
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
<div class="d-flex flex-column" for="accel">
|
||||
<ng-container *ngTemplateOutlet="accelerateOption; context: {etaInfo}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pie d-none d-lg-flex">
|
||||
<small class="form-text checkout-text mb-2" i18n="accelerator.hashrate-percentage-description">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small>
|
||||
<app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="accelerateButton"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="accelerateButton"></ng-container>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</ng-container>
|
||||
<ng-template #loadingSummary>
|
||||
<div class="row">
|
||||
|
|
@ -486,13 +512,24 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
<ng-template #accelerateOption let-etaInfo="etaInfo">
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <ng-container *ngTemplateOutlet="customizeButton"></ng-container></span>
|
||||
<span class="checkout-text">Confirmation expected <app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time><br>
|
||||
@if (!calculating) {
|
||||
<app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small> <span class="symbol" i18n="shared.sats">sats</span></span>)
|
||||
} @else {
|
||||
<span class="estimating">Calculating cost...</span>
|
||||
}
|
||||
</span>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #customizeButton>
|
||||
<button type="button" *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-2" (click)="moveToStep('quote')" i18n="accelerator.customize">customize</button>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #accelerateButton>
|
||||
@if (isLoggedIn() || canPayWithBitcoin || canPayWithCashapp) {
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" [class.grayOut]="!canPay || calculating" style="width: 200px" (click)="moveToStep('checkout')">
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" [class.disabled]="!canPay || calculating || (!advancedEnabled && selectedOption !== 'accel')" style="width: 200px" (click)="moveToStep('checkout')">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Accelerate</span>
|
||||
</button>
|
||||
|
|
@ -506,7 +543,7 @@
|
|||
|
||||
<ng-template #accountPayButton>
|
||||
@if (isLoggedIn()) {
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" [class.grayOut]="!canPay || calculating" style="width: 200px" (click)="accelerateWithMempoolAccount()">
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" [class.disabled]="!canPay || calculating" style="width: 200px" (click)="accelerateWithMempoolAccount()">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Pay</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||
@Output() changeMode = new EventEmitter<boolean>();
|
||||
|
||||
calculating = true;
|
||||
selectedOption: 'wait' | 'accel';
|
||||
error = '';
|
||||
math = Math;
|
||||
isMobile: boolean = window.innerWidth <= 767.98;
|
||||
|
|
@ -451,6 +452,13 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||
return auth !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* UI events
|
||||
*/
|
||||
selectedOptionChanged(event) {
|
||||
this.selectedOption = event.target.id;
|
||||
}
|
||||
|
||||
get step() {
|
||||
return this._step;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue