[accelerator] add acceleration paid screen, fix end state

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

@@ -240,6 +240,7 @@
     </ng-template>
   }
   @else if (step === 'summary') {
+    <ng-container *ngIf="estimate && (etaInfo$ | async) as etaInfo; else loadingSummary">
       <!-- Show A/B CTAs -->
       <div class="row mb-1">
         <div class="col-sm">
@@ -265,11 +266,11 @@
             </div>
           </div>
           <div class="col-md">
-          <div class="form-group form-check mb-2" *ngIf="estimate">
+            <div class="form-group form-check mb-2">
               <input type="radio" [checked]="choosenOption === 'accel'" class="form-check-input" id="accel" name="accel" (change)="selectedOptionChanged($event)">
               <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 <button *ngIf="advancedEnabled && isLoggedIn()" class="btn btn-sm btn-accelerate btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></span>
-              <span class="checkout-text" *ngIf="(etaInfo$ | async) as etaInfo">Confirmation expected <app-time kind="within" [time]="etaInfo.acceleratedETA" [fastRender]="false" [fixedRender]="true"></app-time><br>
+                <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>)
                   } @else {
@@ -279,8 +280,8 @@
               </label>
             </div>
           </div>
-        <div class="col-md pie d-none d-lg-flex" *ngIf="estimate && !forceMobile">
+          <div class="col-md pie d-none d-lg-flex" *ngIf="!forceMobile">
-          <small class="form-text text-muted mb-2" i18n="accelerator.hashrate-percentage-description" *ngIf="(etaInfo$ | async) as etaInfo">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small>
+            <small class="form-text text-muted mb-2" i18n="accelerator.hashrate-percentage-description">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small>
             <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
           </div>
         </div>
@@ -293,10 +294,21 @@
           </div>
         </div>
       </form>
-  } @else if (step === 'checkout') {
+    </ng-container>
+    <ng-template #loadingSummary>
       <div class="row">
         <div class="col-md">
-        <div class="d-flex flex-column" *ngIf="estimate">
+          <div class="d-flex flex-row justify-content-center align-items-center">
+            <div class="m-4 spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  } @else if (step === 'checkout') {
+    <ng-container *ngIf="estimate && (etaInfo$ | async) as etaInfo; else loadingCheckout">
+      <div class="row">
+        <div class="col-md">
+          <div class="d-flex flex-column">
             <span><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <button *ngIf="advancedEnabled && isLoggedIn()" class="btn btn-sm btn-accelerate btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></span>
             <span class="checkout-text">
               @if (!calculating) {
@@ -310,7 +322,7 @@
             </span>
           </div>
         </div>
-      <div class="col-md pie d-none d-md-flex" *ngIf="estimate && !forceMobile">
+        <div class="col-md pie d-none d-md-flex" *ngIf="!forceMobile">
           <small class="form-text text-muted mb-2" i18n="accelerator.hashrate-percentage-description" *ngIf="(etaInfo$ | async) as etaInfo">Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</small>
           <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
         </div>
@@ -332,7 +344,7 @@
               <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
                 @if (invoice) {
                   <p>Pay <span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
-                <app-bitcoin-invoice style="width: 100%;" [invoiceId]="invoice.btcpayInvoiceId" [minimal]="true" (completed)="closeModal(2000)"></app-bitcoin-invoice>
+                  <app-bitcoin-invoice style="width: 100%;" [invoiceId]="invoice.btcpayInvoiceId" [minimal]="true" (completed)="moveToStep('paid')"></app-bitcoin-invoice>
                 } @else {
                   <span>Loading invoice...</span>
                   <div class="m-4 spinner-border text-light" style="width: 25px; height: 25px"></div>
@@ -353,6 +365,16 @@
           </div>
         </div>
       }
+    </ng-container>
+    <ng-template #loadingCheckout>
+      <div class="row">
+        <div class="col-md">
+          <div class="d-flex flex-row justify-content-center align-items-center">
+            <div class="m-4 spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
     @if (showSummary) {
       <div class="row mt-2 mb-2 text-center">
         <div class="col-sm d-flex flex-column">
@@ -413,7 +435,6 @@
       </div>
     </div>
   }
-
   @else if (step === 'processing') {
     <div class="row mb-1 text-center">
       <div class="col-sm">
@@ -434,4 +455,20 @@
       </div>
     </div>
   }
+  @else if (step === 'paid') {
+    <div class="row mb-1 text-center">
+      <div class="col-sm">
+        <h1 style="font-size: larger;"><ng-content select="[slot='accelerating-title']"></ng-content><span class="default-slot">Accelerating your transaction</span></h1>
+      </div>
+    </div>
+
+    <div class="row text-center mt-1">
+      <div class="col-sm">
+        <div class="d-flex flex-row justify-content-center align-items-center">
+          <p>Confirming your acceleration with our mining pool partners...</p>
+          <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+        </div>
+      </div>
+    </div>
+  }
 </div>

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

@@ -41,7 +41,7 @@ export const MIN_BID_RATIO = 1;
 export const DEFAULT_BID_RATIO = 2;
 export const MAX_BID_RATIO = 4;
 
-type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'processing';
+type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'processing' | 'paid';
 
 @Component({
   selector: 'app-accelerate-checkout',
@@ -58,7 +58,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() forceSummary: boolean = false;
   @Input() forceMobile: boolean = false;
   @Output() changeMode = new EventEmitter<boolean>();
-  @Output() close = new EventEmitter<null>();
 
   calculating = true;
   choosenOption: 'wait' | 'accel';
@@ -294,7 +293,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.audioService.playSound('ascend-chime-cartoon');
         this.showSuccess = true;
         this.estimateSubscription.unsubscribe();
-        this.closeModal(2000);
+        this.moveToStep('paid')
       },
       error: (response) => {
         if (response.status === 403 && response.error === 'not_available') {
@@ -409,7 +408,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                   that.cashAppPay.destroy();
                 }
                 setTimeout(() => {
-                  that.closeModal();
+                  this.moveToStep('paid');
                   if (window.history.replaceState) {
                     const urlParams = new URLSearchParams(window.location.search);
                     window.history.replaceState(null, null, window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ''));
@@ -457,13 +456,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   selectedOptionChanged(event) {
     this.choosenOption = event.target.id;
   }
-  closeModal(timeout: number = 0): void {
-    setTimeout(() => {
-      this._step = 'processing';
-      this.cd.markForCheck();
-      this.close.emit();
-    }, timeout);
-  }
 
   isLoggedIn(): boolean {
     const auth = this.storageService.getAuth();

frontend/src/app/components/tracker/tracker.component.html

@@ -122,7 +122,7 @@
         <span class="explainer">&nbsp;</span>
       } @else if (showAccelerationSummary && !accelerationFlowCompleted) {
         <ng-container *ngIf="(ETA$ | async) as eta;">
-          <app-accelerate-checkout *ngIf="(da$ | async) as da;" [forceSummary]="true" [cashappEnabled]="accelerationEligible" [advancedEnabled]="false" [forceMobile]="true" [tx]="tx" [miningStats]="miningStats" [eta]="eta" (close)="accelerationFlowCompleted = true" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
+          <app-accelerate-checkout *ngIf="(da$ | async) as da;" [forceSummary]="true" [cashappEnabled]="accelerationEligible" [advancedEnabled]="false" [forceMobile]="true" [tx]="tx" [miningStats]="miningStats" [eta]="eta" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
         </ng-container>
       } @else {
         @if (tx?.acceleration && !tx.status?.confirmed) {

frontend/src/app/components/tracker/tracker.component.ts

@@ -386,6 +386,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
             if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
               this.accelerationEligible = true;
             }
+          } else if (this.showAccelerationSummary) {
+            setTimeout(() => {
+              this.accelerationFlowCompleted = true;
+            }, 2000);
           }
         }
       } else {

frontend/src/app/components/transaction/transaction.component.html

@@ -84,7 +84,7 @@
       <div class="clearfix"></div>
 
       <ng-container *ngIf="(ETA$ | async) as eta;">
-        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [cashappEnabled]="accelerationEligible" [advancedEnabled]="true" [tx]="tx" [eta]="eta" [miningStats]="miningStats" (close)="showAccelerationSummary = false" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100">
+        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [cashappEnabled]="accelerationEligible" [advancedEnabled]="true" [tx]="tx" [eta]="eta" [miningStats]="miningStats" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100">
           <span slot="cta-title">Urgent transaction? Get it confirmed faster.</span>
         </app-accelerate-checkout>
       </ng-container>

frontend/src/app/components/transaction/transaction.component.ts

@@ -767,8 +767,14 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   setIsAccelerated(initialState: boolean = false) {
     this.isAcceleration = (this.tx.acceleration || (this.accelerationInfo && this.pool && this.accelerationInfo.pools.some(pool => (pool === this.pool.id))));
-    if (this.isAcceleration && initialState) {
+    if (this.isAcceleration) {
+      if (initialState) {
         this.showAccelerationSummary = false;
+      } else if (this.showAccelerationSummary) {
+        setTimeout(() => {
+          this.showAccelerationSummary = false;
+        }, 2000);
+      }
     }
     if (this.isAcceleration) {
       // this immediately returns cached stats if we fetched them recently