Merge pull request #5268 from mempool/mononaut/paid-processing

accelerator success screen

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

@@ -1,13 +1,4 @@
 <div class="box card w-100" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
-
-  <div class="row mt-2" *ngIf="showSuccess">
-    <div class="col">
-      <div class="alert alert-success">
-        Transaction has now been <a class="alert-link" routerLink="/services/accelerator/history">submitted</a> to mining pools for acceleration.
-      </div>
-    </div>
-  </div>
-
   @if (error) {
     <div class="row mt-2">
       <div class="col">
@@ -501,6 +492,25 @@
         </div>
       </div>
     </div>
+  } @else if (step === 'success') {
+    <div class="row mb-1 text-center">
+      <div class="col-sm">
+        <h1 style="font-size: larger;"><ng-content select="[slot='accelerated-title']"></ng-content><span class="default-slot" i18n="accelerator.success-message">Your transaction is being accelerated!</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">
+          <span i18n="accelerator.confirmed-acceleration-with-miners">Your transaction has been accepted for acceleration by our mining pool partners.</span>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="row mt-2 mb-2 text-center">
+      <div class="col-sm d-flex flex-column">
+        <button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="closeModal()" i18n="close">Close</button>
+      </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' | 'paid';
+type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'processing' | 'paid' | 'success';
 
 @Component({
   selector: 'app-accelerate-checkout',
@@ -50,6 +50,7 @@ type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'processing'
 })
 export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() tx: Transaction;
+  @Input() accelerating: boolean = false;
   @Input() miningStats: MiningStats;
   @Input() eta: ETA;
   @Input() scrollEvent: boolean;
@@ -58,6 +59,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() forceMobile: boolean = false;
   @Input() showDetails: boolean = false;
   @Input() noCTA: boolean = false;
+  @Output() completed = new EventEmitter<boolean>();
   @Output() hasDetails = new EventEmitter<boolean>();
   @Output() changeMode = new EventEmitter<boolean>();
 
@@ -167,6 +169,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     if (changes.scrollEvent && this.scrollEvent) {
       this.scrollToElement('acceleratePreviewAnchor', 'start');
     }
+    if (changes.accelerating) {
+      if ((this.step === 'processing' || this.step === 'paid') && this.accelerating) {
+        this.moveToStep('success');
+      }
+    }
   }
 
   moveToStep(step: CheckoutStep) {
@@ -186,6 +193,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     this.hasDetails.emit(this._step === 'quote');
   }
 
+  closeModal(): void {
+    this.completed.emit(true);
+    this.moveToStep('summary');
+  }
+
   /**
   * Scroll to element id with or without setTimeout
   */

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

@@ -122,7 +122,18 @@
         <span class="explainer">&nbsp;</span>
       } @else if (showAccelerationSummary) {
         <ng-container *ngIf="(ETA$ | async) as eta;">
-          <app-accelerate-checkout *ngIf="(da$ | async) as da;" [cashappEnabled]="cashappEligible" [advancedEnabled]="false" [forceMobile]="true" [tx]="tx" [miningStats]="miningStats" [eta]="eta" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
+          <app-accelerate-checkout
+            *ngIf="(da$ | async) as da;"
+            [cashappEnabled]="cashappEligible"
+            [advancedEnabled]="false"
+            [forceMobile]="true"
+            [tx]="tx"
+            [accelerating]="isAcceleration"
+            [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

@@ -715,6 +715,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
         this.miningStats = stats;
         this.isAccelerated$.next(this.isAcceleration); // hack to trigger recalculation of ETA without adding another source observable
       });
+      this.accelerationFlowCompleted = true;
     }
     this.isAccelerated$.next(this.isAcceleration);
   }
@@ -759,7 +760,6 @@ export class TrackerComponent implements OnInit, OnDestroy {
       this.tx
       && !this.replaced
       && !this.isCached
-      && !this.tx.acceleration
       && this.acceleratorAvailable
       && this.eligibleForAcceleration
       && !this.accelerationFlowCompleted

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

@@ -139,12 +139,14 @@
         [cashappEnabled]="cashappEligible"
         [advancedEnabled]="true"
         [tx]="tx"
+        [accelerating]="isAcceleration"
         [eta]="eta"
         [miningStats]="miningStats"
         [scrollEvent]="scrollIntoAccelPreview"
         [showDetails]="showAccelerationDetails"
         [noCTA]="true"
         (hasDetails)="setHasAccelerationDetails($event)"
+        (completed)="onAccelerationCompleted()"
         class="h-100 w-100"
       ></app-accelerate-checkout>
     </ng-container>

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

@@ -424,10 +424,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
               if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
                 this.cashappEligible = true;
               }
-            } else if (this.showAccelerationSummary) {
-              setTimeout(() => {
-                this.accelerationFlowCompleted = true;
-              }, 2000);
             }
           }
         }
@@ -797,10 +793,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.isAcceleration) {
       if (initialState) {
         this.accelerationFlowCompleted = true;
-      } else if (this.showAccelerationSummary) {
-        setTimeout(() => {
-          this.accelerationFlowCompleted = true;
-        }, 2000);
       }
     }
     if (this.isAcceleration) {
@@ -969,6 +961,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     return auth !== null;
   }
 
+  onAccelerationCompleted(): void {
+    document.location.hash = '';
+    this.accelerationFlowCompleted = true;
+    this.forceAccelerationSummary = false;
+  }
+
   closeAccelerator(): void {
     document.location.hash = '';
     this.hideAccelerationSummary = true;
@@ -987,7 +985,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       this.tx
       && !this.replaced
       && !this.isCached
-      && !this.tx.acceleration
       && this.acceleratorAvailable
       && this.eligibleForAcceleration
       && (