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 }"> <div [class]="{estimateDisabled: error || showSuccess }">
<button class="btn btn-sm btn-outline-info float-right" (click)="showDetails = !showDetails">Details</button> <button class="btn btn-sm btn-outline-info float-right" (click)="showDetails = !showDetails">Details</button>
<div *ngIf="user && !estimate.hasAccess"> <div *ngIf="user && !estimate.hasAccess" style="margin-right: 5em;">
<div class="alert alert-mempool">You are currently on the waitlist</div> <div class="alert alert-mempool mr-6">You are currently on the waitlist</div>
</div> </div>
@if (showDetails) { @if (showDetails) {
@ -177,7 +177,7 @@
<!-- MAX COST --> <!-- MAX COST -->
<ng-container> <ng-container>
<tr class="group-first" [class.group-last]="!isLoggedIn() || estimate.userBalance >= cost"> <tr class="group-first group-last">
<td class="item"> <td class="item">
@if (isLoggedIn()) { @if (isLoggedIn()) {
<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>
@ -219,10 +219,17 @@
<td class="item"></td> <td class="item"></td>
<td colspan="2"> <td colspan="2">
<div class="d-flex"> <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()"> @if (isLoggedIn()) {
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px"> <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()">
<span>Accelerate</span> <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
</button> <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> </div>
</td> </td>
</tr> </tr>
@ -248,7 +255,7 @@
</div> </div>
</div> </div>
<form> <form [class]="{estimateDisabled: error || showSuccess }">
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<div class="form-group form-check mb-2"> <div class="form-group form-check mb-2">
@ -328,14 +335,14 @@
</div> </div>
</div> </div>
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) { @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
<div class="d-flex justify-content-center"> <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" [class.estimateDisabled]="!canPayWithBalance" style="width: 200px" (click)="accelerate()"> <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"> <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
<span>Accelerate</span> <span>Accelerate</span>
</button> </button>
</div> </div>
} @else { } @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;"> <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> <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> </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; 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) { if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
this.loadingBtcpayInvoice = true; this.loadingBtcpayInvoice = true;
this.requestBTCPayInvoice(); this.requestBTCPayInvoice();
@ -266,14 +270,16 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
* Advanced mode acceleration button clicked * Advanced mode acceleration button clicked
*/ */
accelerate(): void { accelerate(): void {
if (this.isLoggedIn()) { if (this.canPay) {
if (this.step !== 'summary') { if (this.isLoggedIn()) {
this.moveToStep('summary'); if (this.step !== 'summary') {
this.moveToStep('summary');
} else {
this.accelerateWithMempoolAccount();
}
} else { } else {
this.accelerateWithMempoolAccount(); this.moveToStep('checkout');
} }
} else {
this.moveToStep('checkout');
} }
} }
@ -471,11 +477,15 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
} }
get canPayWithCashapp() { get canPayWithCashapp() {
return this.cashappEnabled && this.estimate?.availablePaymentMethods?.includes('bitcoin'); return this.cashappEnabled && this.estimate?.availablePaymentMethods?.includes('cashapp');
} }
get canPayWithBalance() { 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() { get showSummary() {