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

[accelerator] checkbox error hint

Browse Source
This commit is contained in:
Mononaut 2024-06-30 06:51:01 +00:00
parent 7caad9fca9
commit caf7011df5
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
</ng-container>
<ng-container *ngIf="estimate else loadingEstimate">
<div [class]="{estimateDisabled: error || showSuccess }">
<div [class.disabled]="error || showSuccess">
<div *ngIf="isLoggedIn() && !estimate.hasAccess" style="margin-right: 5em;">
<div class="alert alert-mempool mr-6">You are currently on the waitlist</div>
</div>
@ -280,12 +280,12 @@
<div class="alert alert-mempool mr-6">You are currently on the waitlist for Mempool Accelerator&trade;</div>
</div>
<form [class]="{estimateDisabled: error || showSuccess }">
<form [class.disabled]="error || showSuccess">
<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">
<input type="checkbox" [checked]="armed" class="form-check-input" [class.error-shake]="misfire" id="accel" name="accel" (change)="armed = !armed; misfire = false">
<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</span>
<span class="checkout-text">Confirmation expected <app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time><br>
@ -339,14 +339,14 @@
</div>
</div>
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
<div class="d-flex justify-content-center" [class]="{estimateDisabled: !canPayWithBalance || error || showSuccess }">
<div class="d-flex justify-content-center" [class.grayOut]="!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"[class]="{estimateDisabled: error || showSuccess }">
<div class="payment-area mt-2 p-2" [class.disabled]="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>
@ -490,12 +490,12 @@
<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()">
<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 || (!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">
<button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center disabled" 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>

25
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
View File

@ -59,7 +59,11 @@
box-shadow: none !important;
}
.estimateDisabled {
.grayOut {
opacity: 0.5;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
@ -184,4 +188,23 @@
@media (max-width: 640px) {
flex-direction: column;
}
}
@keyframes box-shake {
0% { transform: rotate(0deg); }
10% { transform: rotate(-8deg); }
20% { transform: rotate(8deg); }
30% { transform: rotate(-8deg); }
40% { transform: rotate(8deg); }
50% { transform: rotate(-8deg); }
60% { transform: rotate(8deg); }
70% { transform: rotate(-8deg); }
80% { transform: rotate(8deg); }
90% { transform: rotate(-8deg); }
100% { transform: rotate(0deg); }
}
.error-shake {
box-shadow: 0 0 10px 2px var(--danger);
animation: box-shake 1.5s ease-in-out;
}

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

@ -63,6 +63,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
calculating = true;
armed = false;
misfire = false;
error = '';
math = Math;
isMobile: boolean = window.innerWidth <= 767.98;
@ -149,6 +150,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
moveToStep(step: CheckoutStep) {
this._step = step;
this.misfire = false;
if (!this.estimate && ['quote', 'summary', 'checkout'].includes(this.step)) {
this.fetchEstimate();
}
@ -266,11 +268,16 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
* Advanced mode acceleration button clicked
*/
accelerate(): void {
if (this.canPay) {
if (this.isLoggedIn()) {
this.accelerateWithMempoolAccount();
if (this.canPay && !this.calculating) {
if ((!this.armed && this.step === 'summary')) {
this.misfire = true;
} else {
this.moveToStep('checkout');
if (this.isLoggedIn()) {
this.accelerateWithMempoolAccount();
} else {
this.armed = true;
this.moveToStep('checkout');
}
}
}
}