mirror of
https://github.com/mempool/mempool.git
synced 2025-02-25 07:07:36 +01:00
[accelerator] streamline flow
This commit is contained in:
Mononaut
parent
110b7a934c
commit
cfe5da2276
4 changed files with 45 additions and 21 deletions
|
|
@ -30,8 +30,6 @@
|
|||
|
||||
<ng-container *ngIf="estimate else loadingEstimate">
|
||||
<div [class]="{estimateDisabled: error || showSuccess }">
|
||||
<button class="btn btn-sm btn-outline-info float-right" (click)="showDetails = !showDetails">Details</button>
|
||||
|
||||
<div *ngIf="isLoggedIn() && !estimate.hasAccess" style="margin-right: 5em;">
|
||||
<div class="alert alert-mempool mr-6">You are currently on the waitlist</div>
|
||||
</div>
|
||||
|
|
@ -243,10 +241,7 @@
|
|||
<td class="item"></td>
|
||||
<td colspan="2">
|
||||
<div class="d-flex">
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style="width: 200px" (click)="moveToStep('summary')">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Continue</span>
|
||||
</button>
|
||||
<ng-container *ngTemplateOutlet="accelerateButton"></ng-container>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -258,6 +253,13 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="row mt-2 mb-2 text-center">
|
||||
<div class="col-sm d-flex flex-column">
|
||||
<button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="moveToStep('summary')">Go Back</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #loadingEstimate>
|
||||
<div class="skeleton-loader"></div>
|
||||
<br>
|
||||
|
|
@ -282,9 +284,10 @@
|
|||
<div class="row summary-row">
|
||||
<div>
|
||||
<div class="form-group form-check mb-2">
|
||||
<div class="float-right"><ng-container *ngTemplateOutlet="customizeButton"></ng-container></div>
|
||||
<input type="checkbox" [checked]="armed" class="form-check-input" id="accel" name="accel" (change)="armed = !armed">
|
||||
<label class="form-check-label d-flex flex-column" for="accel">
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <button *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></span>
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB</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>)
|
||||
|
|
@ -299,17 +302,7 @@
|
|||
<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>
|
||||
<app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
|
||||
</div>
|
||||
@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.estimateDisabled]="!canPay || !armed || calculating" style="width: 200px" (click)="accelerate()">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Accelerate</span>
|
||||
</button>
|
||||
} @else {
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center estimateDisabled" style="width: 200px">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Coming soon</span>
|
||||
</button>
|
||||
}
|
||||
<ng-container *ngTemplateOutlet="accelerateButton"></ng-container>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
|
|
@ -327,7 +320,7 @@
|
|||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="d-flex flex-column">
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <button *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></span>
|
||||
<span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB</span>
|
||||
<span class="checkout-text">
|
||||
@if (!calculating) {
|
||||
For an additional <app-fiat [value]="cost"></app-fiat> (<span><small style="font-family: monospace;">{{ cost | number }}</small> <span class="symbol" i18n="shared.sats">sats</span></span>)
|
||||
|
|
@ -393,6 +386,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<hr>
|
||||
<div class="row mt-2 mb-2 text-center">
|
||||
<div class="col-sm d-flex flex-column">
|
||||
<button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="moveToStep('summary')">Go Back</button>
|
||||
|
|
@ -487,4 +482,22 @@
|
|||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #customizeButton>
|
||||
<button type="button" *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-3" (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.estimateDisabled]="!canPay || (!armed && step === 'summary') || calculating" style="width: 200px" (click)="accelerate()">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Accelerate</span>
|
||||
</button>
|
||||
} @else {
|
||||
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center estimateDisabled" style="width: 200px">
|
||||
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||
<span>Coming soon</span>
|
||||
</button>
|
||||
}
|
||||
</ng-template>
|
||||
|
|
@ -56,7 +56,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||
@Input() cashappEnabled: boolean = true;
|
||||
@Input() advancedEnabled: boolean = false;
|
||||
@Input() forceMobile: boolean = false;
|
||||
@Input() showDetails: boolean = false;
|
||||
@Input() noCTA: boolean = false;
|
||||
@Output() hasDetails = new EventEmitter<boolean>();
|
||||
@Output() changeMode = new EventEmitter<boolean>();
|
||||
|
||||
calculating = true;
|
||||
|
|
@ -67,7 +69,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||
|
||||
private _step: CheckoutStep = 'summary';
|
||||
simpleMode: boolean = true;
|
||||
showDetails: boolean = false;
|
||||
paymentMethod: 'cashapp' | 'btcpay';
|
||||
|
||||
user: any = undefined;
|
||||
|
|
@ -159,6 +160,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||
this.insertSquare();
|
||||
this.setupSquare();
|
||||
}
|
||||
this.hasDetails.emit(this._step === 'quote');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@
|
|||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="closeAccelerator()" i18n="hide-diagram">Hide accelerator</button>
|
||||
<button *ngIf="hasAccelerationDetails" class="btn btn-sm btn-outline-info float-right ml-2" (click)="showAccelerationDetails = !showAccelerationDetails">Details</button>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
|
@ -94,7 +95,9 @@
|
|||
[eta]="eta"
|
||||
[miningStats]="miningStats"
|
||||
[scrollEvent]="scrollIntoAccelPreview"
|
||||
[showDetails]="showAccelerationDetails"
|
||||
[noCTA]="true"
|
||||
(hasDetails)="setHasAccelerationDetails($event)"
|
||||
class="h-100 w-100"
|
||||
></app-accelerate-checkout>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -139,6 +139,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
acceleratorAvailable: boolean = this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||
showAccelerationSummary = false;
|
||||
showAccelerationDetails = false;
|
||||
hasAccelerationDetails = false;
|
||||
accelerationFlowCompleted = false;
|
||||
scrollIntoAccelPreview = false;
|
||||
accelerationEligible = false;
|
||||
|
|
@ -866,6 +867,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
this.rbfReplaces = [];
|
||||
this.filters = [];
|
||||
this.showCpfpDetails = false;
|
||||
this.showAccelerationDetails = false;
|
||||
this.accelerationInfo = null;
|
||||
this.accelerationEligible = false;
|
||||
this.txInBlockIndex = null;
|
||||
|
|
@ -934,6 +936,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
setHasAccelerationDetails(hasDetails: boolean): void {
|
||||
this.hasAccelerationDetails = hasDetails;
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
setGraphSize(): void {
|
||||
this.isMobile = window.innerWidth < 850;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue