Merge pull request #5257 from mempool/mononaut/more-accelerator-polish

more accelerator polish

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

@@ -21,7 +21,7 @@
         <app-accelerate-fee-graph
           [tx]="tx"
           [estimate]="estimate"
-          [showEstimate]="isLoggedIn()"
+          [showEstimate]="hasAccessToBalanceMode"
           [maxRateOptions]="maxRateOptions"
           [maxRateIndex]="selectFeeRateIndex"
           (setUserBid)="setUserBid($event)"
@@ -30,10 +30,6 @@
 
       <ng-container *ngIf="estimate else loadingEstimate">
         <div [class.disabled]="error || showSuccess">
-          <div *ngIf="isLoggedIn() && !estimate.hasAccess" style="margin-right: 5em;">
-            <div class="alert alert-mempool mr-6">You are currently on the waitlist for Mempool Accelerator&trade;</div>
-          </div>
-
           @if (showDetails) {
             <h5 i18n="accelerator.your-transaction">Your transaction</h5>
             <div class="row">
@@ -105,7 +101,7 @@
                 <tbody>
                   <!-- ESTIMATED FEE -->
                   <ng-container *ngIf="showDetails">
-                    @if (isLoggedIn()) {
+                    @if (hasAccessToBalanceMode) {
                       <tr class="group-first">
                         <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
                         <td class="amt" style="font-size: 16px">
@@ -180,7 +176,7 @@
                   </ng-container>
 
                   <!-- NEXT BLOCK ESTIMATE -->
-                  <ng-container *ngIf="isLoggedIn()">
+                  <ng-container *ngIf="hasAccessToBalanceMode">
                     <tr class="group-first">
                       <td class="item">
                         <b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b> ~{{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB
@@ -201,7 +197,7 @@
                   <ng-container>
                     <tr class="group-first group-last">
                       <td class="item">
-                        @if (isLoggedIn()) {
+                        @if (hasAccessToBalanceMode) {
                           <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
                         } @else {
                           <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.cost">Acceleration cost</b>
@@ -215,14 +211,14 @@
                       <td class="units">
                         <span class="symbol" i18n="shared.sats">sats</span>
                         <span class="fiat ml-1">
-                          <app-fiat [value]="cost" [colorClass]="isLoggedIn() && estimate.userBalance < cost ? 'red-color' : 'green-color'"></app-fiat>
+                          <app-fiat [value]="cost" [colorClass]="hasAccessToBalanceMode && estimate.userBalance < cost ? 'red-color' : 'green-color'"></app-fiat>
                         </span>
                       </td>
                     </tr>
                   </ng-container>
 
                   <!-- USER BALANCE -->
-                  <ng-container *ngIf="isLoggedIn() && estimate.userBalance < cost">
+                  <ng-container *ngIf="hasAccessToBalanceMode && estimate.userBalance < cost">
                     <tr class="group-first group-last dashed-top">
                       <td class="item" i18n="accelerator.available-balance">Available balance</td>
                       <td class="amt">
@@ -276,10 +272,6 @@
         </div>
       }
 
-      <div *ngIf="isLoggedIn() && !estimate.hasAccess">
-        <div class="alert alert-mempool mr-6">You are currently on the waitlist for Mempool Accelerator&trade;</div>
-      </div>
-
       @if (!advancedEnabled) {
         <form [class.disabled]="error || showSuccess">
           <div class="row">
@@ -530,7 +522,7 @@
 <ng-template #accelerateTo let-x i18n="accelerator.accelerate-to-x">Accelerate to ~{{ x | number : '1.0-0' }} sat/vB</ng-template>
 
 <ng-template #accelerateButton>
-  @if (isLoggedIn() || canPayWithBitcoin || canPayWithCashapp) {
+  @if (canPayWithBalance || 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.disabled]="!canPay || calculating || (!advancedEnabled && selectedOption !== 'accel')" style="width: 200px" (click)="moveToStep('checkout')">
       <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
       <span i18n="transaction.accelerate|Accelerate button label">Accelerate</span>
@@ -544,7 +536,7 @@
 </ng-template>
 
 <ng-template #accountPayButton>
-  @if (isLoggedIn()) {
+  @if (hasAccessToBalanceMode) {
     <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.disabled]="!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 i18n="transaction.pay|Pay button label">Pay</span>

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

@@ -503,10 +503,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   get canPayWithBalance() {
-    if (!this.isLoggedIn() || !this.estimate?.hasAccess) {
+    if (!this.hasAccessToBalanceMode) {
       return false;
     }
-    
     const paymentMethod = this.estimate?.availablePaymentMethods?.balance;
     return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max;
   }
@@ -515,6 +514,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp;
   }
 
+  get hasAccessToBalanceMode() {
+    return this.isLoggedIn() && this.estimate?.hasAccess;
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;

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

@@ -751,12 +751,14 @@ export class TrackerComponent implements OnInit, OnDestroy {
   }
 
   get cashappEligible(): boolean {
-    return this.mempoolPosition?.block > 0;
+    return this.mempoolPosition?.block > 0 && this.tx.weight < 4000;
   }
 
   get showAccelerationSummary(): boolean {
     return (
       this.tx
+      && !this.replaced
+      && !this.isCached
       && !this.tx.acceleration
       && this.acceleratorAvailable
       && this.eligibleForAcceleration

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

@@ -985,6 +985,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   get showAccelerationSummary(): boolean {
     return (
       this.tx
+      && !this.replaced
+      && !this.isCached
       && !this.tx.acceleration
       && this.acceleratorAvailable
       && this.eligibleForAcceleration