Merge branch 'nymkappa/polish-accel' into nymkappa/mini-branch

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

@@ -1,18 +1,8 @@
-<div class="container card" style="padding: 20px; background: var(--bg)">
+<div class="container card h-100 w-100" style="padding: 20px; background: var(--box-bg)" id=acceleratePreviewAnchor>
 
   @if (error) {
+    <div class="mt-2">
       <app-mempool-error [error]="error"></app-mempool-error>
-  } @else {
-
-    @if (step === 'completed') {
-      <div class="row text-center mt-3">
-        <div class="col-sm">
-          <div class="form-group w-100">
-            <div display="d-flex flex-row justify-content-center">
-              <div class="alert alert-success">Transaction is now being accelerated!</div>
-            </div>
-          </div>
-        </div>
     </div>
   } 
 
@@ -53,7 +43,7 @@
           </div>
         </div>
       </div>
-        <div class="row mt-2" [style]="choosenOption === 'wait' ? 'opacity: 0.25; pointer-events: none' : ''">
+      <div class="row mt-2" [style]="(choosenOption === 'wait' || calculating) ? 'opacity: 0.25; pointer-events: none' : ''">
         <div class="col-sm d-flex flex-row justify-content-center">
           <button type="button" class="mt-1 btn btn-light rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style="width: 200px" (click)="enableCheckoutPage()">
             <img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="20" class="mr-2" style="margin-left: -10px">
@@ -111,7 +101,7 @@
     </div>
 
     <hr>
-      <div class="row mt-2 text-center">
+    <div class="row mt-2 mb-2 text-center">
       <div class="col-sm d-flex flex-column">
         <small>Changed your mind?</small>
         <button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="restart(); closeModal()">Close</button>
@@ -126,12 +116,11 @@
       </div>
     </div>
 
-      <!-- Processing payment -->
-      <div id="cash-app-pay" class="d-inline-block" [style]="'opacity: 0; width: 0px; height: 0px; pointer-events: none;'"></div>
-
     <div class="row text-center mt-1">
       <div class="col-sm">
         <div class="form-group w-100">
+          <!-- Processing payment -->
+          <div id="cash-app-pay" class="d-inline-block" [style]="'opacity: 0; width: 0px; height: 0px; pointer-events: none;'"></div>
           <div display="d-flex flex-row justify-content-center">
             <span>We are processing your payment...</span>
             <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
@@ -142,6 +131,5 @@
   }
 
   <span class="close-button" (click)="closeModal()">✖</span>
-  }
   
 </div>

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

@@ -1,6 +1,5 @@
-import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 import { Subscription, tap, of, catchError } from 'rxjs';
-import { WebsocketService } from '../../services/websocket.service';
 import { ServicesApiServices } from '../../services/services-api.service';
 import { nextRoundNumber } from '../../shared/common.utils';
 import { StateService } from '../../services/state.service';
@@ -14,6 +13,7 @@ import { AudioService } from '../../services/audio.service';
 export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() eta: number = Date.now() + 123456789;
   @Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
+  @Input() scrollEvent: boolean;
   @Output() close = new EventEmitter<null>();
 
   calculating = true;
@@ -34,10 +34,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   cashAppPay: any;
   cashAppSubscription: Subscription;
   conversionsSubscription: Subscription;
-  step: 'cta' | 'checkout' | 'processing' | 'completed' = 'cta';
+  step: 'cta' | 'checkout' | 'processing' = 'cta';
 
   constructor(
-    private websocketService: WebsocketService,
     private servicesApiService: ServicesApiServices,
     private stateService: StateService,
     private audioService: AudioService,
@@ -72,6 +71,32 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollEvent) {
+      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+    }
+  }
+
+  /**
+  * Scroll to element id with or without setTimeout
+  */
+  scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) {
+    setTimeout(() => {
+      this.scrollToPreview(id, position);
+    }, 1000);
+  }
+  scrollToPreview(id: string, position: ScrollLogicalPosition) {
+    const acceleratePreviewAnchor = document.getElementById(id);
+    if (acceleratePreviewAnchor) {
+      this.cd.markForCheck();
+      acceleratePreviewAnchor.scrollIntoView({
+        behavior: 'smooth',
+        inline: position,
+        block: position,
+      });
+    }
+  }
+
  /**
    * Accelerator
    */
@@ -206,10 +231,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
             ).subscribe({
               next: () => {
                 that.audioService.playSound('ascend-chime-cartoon');
-                that.step = 'completed';
-                setTimeout(() => {
                 that.closeModal();
-                }, 10000);
               },
               error: (response) => {
                 if (response.status === 403 && response.error === 'not_available') {
@@ -236,10 +258,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
   selectedOptionChanged(event) {
     this.choosenOption = event.target.id;
-    if (this.choosenOption === 'wait') {
-      this.restart();
-      this.closeModal();
-    }
   }
   restart() {
     this.step = 'cta';

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
 import { Transaction } from '../../interfaces/electrs.interface';

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

@@ -85,7 +85,7 @@
 
     <div class="bottom-panel">
       @if (showAccelerationSummary) {
-        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
+        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
       } @else {
         @if (tx?.acceleration && !tx.status?.confirmed) {
           <div class="progress-icon">