[accelerator] checkbox error hint

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -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>

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss

@@ -59,7 +59,11 @@
   box-shadow: none !important;
 }
 
-.estimateDisabled {
+.grayOut {
+  opacity: 0.5;
+}
+
+.disabled {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -185,3 +189,22 @@
     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;
+}

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts

@@ -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.canPay && !this.calculating) {
-      if (this.isLoggedIn()) {
+      if ((!this.armed && this.step === 'summary')) {
-        this.accelerateWithMempoolAccount();
+        this.misfire = true;
       } else {
-        this.moveToStep('checkout');
+        if (this.isLoggedIn()) {
+          this.accelerateWithMempoolAccount();
+        } else {
+          this.armed = true;
+          this.moveToStep('checkout');
+        }
       }
     }
   }