[accelerator] remove safety catch, always show checkout

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

@@ -283,11 +283,9 @@
       <form [class.disabled]="error || showSuccess">
         <div class="row summary-row">
           <div>
-            <div class="form-group form-check mb-2">
+            <div class="mb-2">
-              <div class="float-right"><ng-container *ngTemplateOutlet="customizeButton"></ng-container></div>
+              <div class="d-flex flex-column" for="accel">
-              <input type="checkbox" [checked]="armed" class="form-check-input" [class.error-shake]="misfire" id="accel" name="accel" (change)="armed = !armed; misfire = false">
+                <span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <ng-container *ngTemplateOutlet="customizeButton"></ng-container></span>
-              <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>
                   @if (!calculating) {
                     <app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span>)
@@ -295,7 +293,7 @@
                     <span class="estimating">Calculating cost...</span>
                   }
                 </span>
-              </label>
+              </div>
             </div>
           </div>
           <div class="pie d-none d-lg-flex" *ngIf="!forceMobile">
@@ -338,18 +336,20 @@
           <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
         </div>
       </div>
-      @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
+      <div class="payment-area mt-2 p-2" [class.disabled]="error || showSuccess" style="font-size: 14px;">
-        <div class="d-flex justify-content-center" [class.grayOut]="!canPayWithBalance || error || showSuccess">
+        <div class="row text-center justify-content-center mx-2">
-          <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.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>
+        @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
+          <div class="row">
+            <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
+              <p>Your account will be debited no more than <span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
+              <div class="d-flex justify-content-center" [class.grayOut]="!canPayWithBalance || error || showSuccess">
+                <ng-container *ngTemplateOutlet="accountPayButton"></ng-container>
+              </div>
+            </div>
+          </div>
+        } @else {
           <div class="row">
             @if (canPayWithBitcoin) {
               <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
@@ -376,8 +376,8 @@
               </div>
             }
           </div>
-        </div>
         }
+      </div>
     </ng-container>
     <ng-template #loadingCheckout>
       <div class="row">
@@ -487,12 +487,12 @@
 </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>
+  <button type="button" *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-2" (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.grayOut]="!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 || calculating" style="width: 200px" (click)="moveToStep('checkout')">
       <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
       <span>Accelerate</span>
     </button>
@@ -503,3 +503,17 @@
     </button>
   }
 </ng-template>
+
+<ng-template #accountPayButton>
+  @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.grayOut]="!canPay || calculating" style="width: 200px" (click)="accelerateWithMempoolAccount()">
+      <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
+      <span>Pay</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 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>
+  }
+</ng-template>

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

@@ -189,22 +189,3 @@
     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

@@ -62,8 +62,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Output() changeMode = new EventEmitter<boolean>();
 
   calculating = true;
-  armed = false;
-  misfire = false;
   error = '';
   math = Math;
   isMobile: boolean = window.innerWidth <= 767.98;
@@ -150,7 +148,6 @@ 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();
     }
@@ -265,28 +262,13 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Advanced mode acceleration button clicked
-   */
-  accelerate(): void {
-    if (this.canPay && !this.calculating) {
-      if ((!this.armed && this.step === 'summary')) {
-        this.misfire = true;
-      } else {
-        if (this.isLoggedIn()) {
-          this.accelerateWithMempoolAccount();
-        } else {
-          this.armed = true;
-          this.moveToStep('checkout');
-        }
-      }
-    }
-  }
-
   /**
    * Account-based acceleration request
    */
   accelerateWithMempoolAccount(): void {
+    if (!this.canPay || this.calculating) {
+      return;
+    }
     if (this.accelerationSubscription) {
       this.accelerationSubscription.unsubscribe();
     }