[accelerator] Pro for everyone

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

@@ -107,25 +107,49 @@
                 <tbody>
                   <!-- ESTIMATED FEE -->
                   <ng-container *ngIf="showDetails">
-                    <tr class="group-first">
-                      <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
-                      <td class="amt" style="font-size: 16px">
-                        {{ estimate.targetFeeRate | number : '1.0-0' }}
-                      </td>
-                      <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
-                    </tr>
-                    <tr class="info">
-                      <td class="info">
-                        <i><small i18n="accelerator.estimated-extra-fee-required">Estimated extra fee required</small></i>
-                      </td>
-                      <td class="amt">
-                        {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
-                      </td>
-                      <td class="units">
-                        <span class="symbol" i18n="shared.sats">sats</span>
-                        <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
-                      </td>
-                    </tr>
+                    @if (isLoggedIn()) {
+                      <tr class="group-first">
+                        <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
+                        <td class="amt" style="font-size: 16px">
+                          {{ estimate.targetFeeRate | number : '1.0-0' }}
+                        </td>
+                        <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+                      </tr>
+                      <tr class="info">
+                        <td class="info">
+                          <i><small i18n="accelerator.estimated-extra-fee-required">Estimated extra fee required</small></i>
+                        </td>
+                        <td class="amt">
+                          {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
+                        </td>
+                        <td class="units">
+                          <span class="symbol" i18n="shared.sats">sats</span>
+                          <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
+                        </td>
+                      </tr>
+                    }
+                    @else {
+                      <!-- TARGET FEE -->
+                      <tr class="group-first">
+                        <td class="item" i18n="accelerator.target-rate">Target rate</td>
+                        <td class="amt" style="font-size: 16px">
+                          {{ maxRateOptions[selectFeeRateIndex].rate | number : '1.0-0' }}
+                        </td>
+                        <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+                      </tr>
+                      <tr class="info">
+                        <td class="info">
+                          <i><small i18n="accelerator.extra-fee-required">Extra fee required</small></i>
+                        </td>
+                        <td class="amt">
+                          {{ maxRateOptions[selectFeeRateIndex].fee | number }}
+                        </td>
+                        <td class="units">
+                          <span class="symbol" i18n="shared.sats">sats</span>
+                          <span class="fiat ml-1"><app-fiat [value]="maxRateOptions[selectFeeRateIndex].fee"></app-fiat></span>
+                        </td>
+                      </tr>
+                    }
 
                     <!-- MEMPOOL BASE FEE -->
                     <tr>
@@ -219,17 +243,10 @@
                     <td class="item"></td>
                     <td colspan="2">
                       <div class="d-flex">
-                        @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" 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">
-                            <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
-                            <span>Coming soon</span>
-                          </button>
-                        }
+                        <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)="moveToStep('summary')">
+                          <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
+                          <span>Continue</span>
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -280,7 +297,7 @@
             <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><b>Accelerate</b> to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB <button class="btn btn-sm btn-accelerate btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></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>)
@@ -393,13 +410,11 @@
         </div>
       </div>
     </ng-template>
-    @if (showSummary) {
-      <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)="moveToStep('summary')">Go Back</button>
-        </div>
+    <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)="moveToStep('summary')">Go Back</button>
       </div>
-    }
+    </div>
   } @else if (step === 'cashapp') {
     <!-- Show checkout page -->
     <div class="row mb-md-1 text-center">

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

@@ -55,7 +55,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() scrollEvent: boolean;
   @Input() cashappEnabled: boolean = true;
   @Input() advancedEnabled: boolean = false;
-  @Input() forceSummary: boolean = false;
   @Input() forceMobile: boolean = false;
   @Output() changeMode = new EventEmitter<boolean>();
 
@@ -122,10 +121,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.moveToStep('processing');
       this.insertSquare();
       this.setupSquare();
-    } else if (this.isLoggedIn() || this.forceSummary) {
-      this.moveToStep('summary');
     } else {
-      this.moveToStep('checkout');
+      this.moveToStep('summary');
     }
 
     this.servicesApiService.setupSquare$().subscribe(ids => {
@@ -232,10 +229,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           }
           this.cost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
 
-          if (!this.canPay && this.advancedEnabled && this.step !== 'quote') {
-            this.moveToStep('quote');
-          }
-
           if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
             this.loadingBtcpayInvoice = true;
             this.requestBTCPayInvoice();
@@ -272,11 +265,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   accelerate(): void {
     if (this.canPay) {
       if (this.isLoggedIn()) {
-        if (this.step !== 'summary') {
-          this.moveToStep('summary');
-        } else {
-          this.accelerateWithMempoolAccount();
-        }
+        this.accelerateWithMempoolAccount();
       } else {
         this.moveToStep('checkout');
       }
@@ -488,10 +477,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp;
   }
 
-  get showSummary() {
-    return this.canPayWithBalance || this.forceSummary;
-  }
-
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;

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" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
+          <app-accelerate-checkout *ngIf="(da$ | async) as da;" [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

@@ -151,6 +151,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
 
     this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
 
+    this.miningService.getMiningStats('1w').subscribe(stats => {
+      this.miningStats = stats;
+    });
+
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('cash_request_id')) {
       this.showAccelerationSummary = true;
@@ -382,7 +386,12 @@ export class TrackerComponent implements OnInit, OnDestroy {
           }
 
           if (!this.mempoolPosition.accelerated) {
-            this.showAccelerationSummary = true;
+            if (!this.showAccelerationSummary) {
+              this.showAccelerationSummary = true;
+              this.miningService.getMiningStats('1w').subscribe(stats => {
+                this.miningStats = stats;
+              });
+            }
             if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
               this.accelerationEligible = true;
             }

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

@@ -547,11 +547,8 @@
             } @else if (network === 'liquid' || network === 'liquidtestnet') {
               <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
             } @else {
-              <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
+              <span class="eta justify-content-end">
                 <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
-                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button') {
-                  <a class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
-                }
               </span>
             }
           </ng-container>

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

@@ -170,6 +170,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit() {
     this.enterpriseService.page();
 
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('cash_request_id')) {
+      this.showAccelerationSummary = true;
+    }
+
+    this.miningService.getMiningStats('1w').subscribe(stats => {
+      this.miningStats = stats;
+    });
+
     this.websocketService.want(['blocks', 'mempool-blocks']);
     this.stateService.networkChanged$.subscribe(
       (network) => {
@@ -398,7 +407,22 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           } else if ((this.tx?.acceleration && txPosition.position.acceleratedBy)) {
             this.tx.acceleratedBy = txPosition.position.acceleratedBy;
           }
-          this.accelerationEligible = txPosition?.position?.block > 0 && this.tx?.weight < 4000;
+
+          if (!this.mempoolPosition.accelerated) {
+            if (!this.showAccelerationSummary) {
+              this.showAccelerationSummary = true;
+              this.miningService.getMiningStats('1w').subscribe(stats => {
+                this.miningStats = stats;
+              });
+            }
+            if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
+              this.accelerationEligible = true;
+            }
+          } else if (this.showAccelerationSummary) {
+            setTimeout(() => {
+              this.showAccelerationSummary = false;
+            }, 2000);
+          }
         }
       } else {
         this.mempoolPosition = null;
@@ -683,10 +707,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
 
-    this.miningService.getMiningStats('1w').subscribe(stats => {
-      this.miningStats = stats;
-    });
-
     document.location.hash = '#accelerate';
     this.enterpriseService.goal(8);
     this.showAccelerationSummary = true && this.acceleratorAvailable;