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

[accelerator] waitlisted & preview-only screens

Browse Source
This commit is contained in:
Mononaut 2024-06-29 07:04:08 +00:00
parent 84d4eaa932
commit 3720d67666
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
View File

@ -32,8 +32,8 @@
<div [class]="{estimateDisabled: error || showSuccess }">
<button class="btn btn-sm btn-outline-info float-right" (click)="showDetails = !showDetails">Details</button>
<div *ngIf="user && !estimate.hasAccess">
<div class="alert alert-mempool">You are currently on the waitlist</div>
<div *ngIf="user && !estimate.hasAccess" style="margin-right: 5em;">
<div class="alert alert-mempool mr-6">You are currently on the waitlist</div>
</div>
@if (showDetails) {
@ -177,7 +177,7 @@
<!-- MAX COST -->
<ng-container>
<tr class="group-first" [class.group-last]="!isLoggedIn() || estimate.userBalance >= cost">
<tr class="group-first group-last">
<td class="item">
@if (isLoggedIn()) {
<b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
@ -219,10 +219,17 @@
<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)="accelerate()">
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
<span>Accelerate</span>
</button>
@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.estimateDisabled]="!canPay" 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>
}
</div>
</td>
</tr>
@ -248,7 +255,7 @@
</div>
</div>
<form>
<form [class]="{estimateDisabled: error || showSuccess }">
<div class="row">
<div class="col-md">
<div class="form-group form-check mb-2">
@ -328,14 +335,14 @@
</div>
</div>
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
<div class="d-flex justify-content-center">
<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]="!canPayWithBalance" style="width: 200px" (click)="accelerate()">
<div class="d-flex justify-content-center" [class]="{estimateDisabled: !canPayWithBalance || error || showSuccess }">
<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)="accelerate()">
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
<span>Accelerate</span>
</button>
</div>
} @else {
<div class="payment-area mt-2 p-2">
<div class="payment-area mt-2 p-2"[class]="{estimateDisabled: error || showSuccess }">
<div class="row text-center justify-content-center mx-2" style="font-size: 14px;">
<p>Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank"> {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></p>
</div>

26
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
View File

@ -232,6 +232,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
}
this.cost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
if (!this.canPay && this.advancedEnabled && this.step !== 'quote') {
this.moveToStep('quote');
}
if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
this.loadingBtcpayInvoice = true;
this.requestBTCPayInvoice();
@ -266,14 +270,16 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
* Advanced mode acceleration button clicked
*/
accelerate(): void {
if (this.isLoggedIn()) {
if (this.step !== 'summary') {
this.moveToStep('summary');
if (this.canPay) {
if (this.isLoggedIn()) {
if (this.step !== 'summary') {
this.moveToStep('summary');
} else {
this.accelerateWithMempoolAccount();
}
} else {
this.accelerateWithMempoolAccount();
this.moveToStep('checkout');
}
} else {
this.moveToStep('checkout');
}
}
@ -471,11 +477,15 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
}
get canPayWithCashapp() {
return this.cashappEnabled && this.estimate?.availablePaymentMethods?.includes('bitcoin');
return this.cashappEnabled && this.estimate?.availablePaymentMethods?.includes('cashapp');
}
get canPayWithBalance() {
return this.isLoggedIn() && this.estimate?.availablePaymentMethods?.includes('balance');
return this.isLoggedIn() && this.estimate?.availablePaymentMethods?.includes('balance') && this.estimate?.hasAccess;
}
get canPay() {
return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp;
}
get showSummary() {