[accelerator] proper error handling

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

@@ -1,12 +1,24 @@
 <div class="box card w-100" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
-  @if (error) {
+  @if (accelerateError) {
-    <div class="row mt-2">
+    <div class="row mb-1 text-center">
-      <div class="col">
+      <div class="col-sm">
-        <app-mempool-error [error]="error" [alertClass]="error === 'waitlisted' ? 'alert-mempool' : 'alert-danger'"></app-mempool-error>
+        <h1 style="font-size: larger;">Sorry, something went wrong!</h1>
       </div>
     </div>
-  }
+    <div class="row text-center mt-1">
-  @else if (step === 'quote') {
+      <div class="col-sm">
+        <div class="d-flex flex-row justify-content-center align-items-center">
+          <span i18n="accelerator.error-failed-to-accelerate">We were not able to accelerate this transaction. Please try again later.</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>
+  } @else if (step === 'quote') {
     <div class="accelerate-cols">
       <ng-container *ngIf="!isMobile">
         <app-accelerate-fee-graph
@@ -20,7 +32,7 @@
       </ng-container>
 
       <ng-container *ngIf="estimate else loadingEstimate">
-        <div [class.disabled]="error || showSuccess">
+        <div>
           @if (showDetails) {
             <h5 i18n="accelerator.your-transaction">Your transaction</h5>
             <div class="row">
@@ -264,7 +276,7 @@
       }
 
       @if (!advancedEnabled) {
-        <form [class.disabled]="error || showSuccess">
+        <form>
           <div class="row">
             <div class="col-md">
               <div class="form-group form-check mb-2">
@@ -295,7 +307,7 @@
           </div>
         </form>
       } @else {
-        <div [class.disabled]="error || showSuccess">
+        <div>
           <div class="row summary-row">
             <div>
               <div class="mb-2">
@@ -345,7 +357,7 @@
           <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
         </div>
       </div>
-      <div class="payment-area mt-2 p-2" [class.disabled]="error || showSuccess" style="font-size: 14px;">
+      <div class="payment-area mt-2 p-2" style="font-size: 14px;">
         <div class="row text-center justify-content-center mx-2">
           <p i18n="accelerator.payment-to-mempool-space">Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank">{{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></p>
         </div>
@@ -353,7 +365,7 @@
           <div class="row">
             <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
               <p>Your account will be debited no more than <span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
-              <div class="d-flex justify-content-center" [class.grayOut]="!canPayWithBalance || error || showSuccess">
+              <div class="d-flex justify-content-center" [class.grayOut]="!canPayWithBalance || quoteError || accelerateError || showSuccess">
                 <ng-container *ngTemplateOutlet="accountPayButton"></ng-container>
               </div>
             </div>
@@ -365,6 +377,11 @@
                 @if (invoice) {
                   <p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<span><small style="font-family: monospace;">{{ ((invoice.btcDue * 100_000_000) || cost) | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
                   <app-bitcoin-invoice style="width: 100%;" [invoice]="invoice" [minimal]="true" (completed)="bitcoinPaymentCompleted()"></app-bitcoin-invoice>
+                } @else if (btcpayInvoiceFailed) {
+                  <p i18n="accelerator.failed-to-load-invoice">Failed to load invoice</p>
+                  <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100%; height: 292px;">
+                    <fa-icon style="font-size: 24px; color: var(--red)" [icon]="['fas', 'circle-xmark']"></fa-icon>
+                  </div>
                 } @else {
                   <p i18n="accelerator.loading-invoice">Loading invoice...</p>
                   <div class="d-flex align-items-center justify-content-center" style="width: 100%; height: 292px;">
@@ -532,16 +549,21 @@
 <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 (canPayWithBalance || canPayWithBitcoin || canPayWithCashapp) {
+  @if (!couldPay && !quoteError && !(estimate?.availablePaymentMethods.bitcoin || estimate?.availablePaymentMethods.balance)) {
-    <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>
-    </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 disabled" 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>
+  } @else {
+    <div class="position-relative">
+      <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 || quoteError || cantPayReason || 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>
+      </button>
+      @if (quoteError || cantPayReason) {
+        <span class="btn-error"><app-mempool-error [error]="quoteError || cantPayReason" [textOnly]="true" alertClass=""></app-mempool-error></span>
+      }
+    </div>
   }
 </ng-template>
 

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

@@ -189,3 +189,10 @@
     flex-direction: column;
   }
 }
+
+.btn-error {
+  position: absolute;
+  right: 0;
+  font-size: 12px;
+  color: var(--red);
+}

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

@@ -59,13 +59,18 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() forceMobile: boolean = false;
   @Input() showDetails: boolean = false;
   @Input() noCTA: boolean = false;
+  @Output() unavailable = new EventEmitter<boolean>();
   @Output() completed = new EventEmitter<boolean>();
   @Output() hasDetails = new EventEmitter<boolean>();
   @Output() changeMode = new EventEmitter<boolean>();
 
   calculating = true;
   selectedOption: 'wait' | 'accel';
-  error = '';
+  cantPayReason = '';
+  quoteError = ''; // error fetching estimate or initial data
+  accelerateError = ''; // error executing acceleration
+  btcpayInvoiceFailed = false;
+  timePaid: number = 0; // time acceleration requested
   math = Math;
   isMobile: boolean = window.innerWidth <= 767.98;
 
@@ -98,6 +103,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
   // square
   loadingCashapp = false;
+  cashappError = false;
   cashappSubmit: any;
   payments: any;
   cashAppPay: any;
@@ -125,7 +131,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       if (this.auth?.user?.userId !== auth?.user?.userId) {
         this.auth = auth;
         this.estimate = null;
-        this.error = null;
+        this.quoteError = null;
+        this.accelerateError = null;
+        this.timePaid = 0;
+        this.btcpayInvoiceFailed = false;
         this.moveToStep('summary');
       } else {
         this.auth = auth;
@@ -182,6 +191,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.fetchEstimate();
     }
     if (this._step === 'checkout' && this.canPayWithBitcoin) {
+      this.btcpayInvoiceFailed = false;
       this.loadingBtcpayInvoice = true;
       this.invoice = null;
       this.requestBTCPayInvoice();
@@ -226,19 +236,27 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.estimateSubscription.unsubscribe();
     }
     this.calculating = true;
+    this.quoteError = null;
+    this.accelerateError = null;
     this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
       tap((response) => {
         if (response.status === 204) {
-          this.error = `cannot_accelerate_tx`;
+          this.quoteError = `cannot_accelerate_tx`;
+          if (this.step === 'summary') {
+            this.unavailable.emit(true);
+          }
         } else {
           this.estimate = response.body;
           if (!this.estimate) {
-            this.error = `cannot_accelerate_tx`;
+            this.quoteError = `cannot_accelerate_tx`;
+            if (this.step === 'summary') {
+              this.unavailable.emit(true);
+            }
             return;
           }
           if (this.estimate.hasAccess === true && this.estimate.userBalance <= 0) {
             if (this.isLoggedIn()) {
-              this.error = `not_enough_balance`;
+              this.quoteError = `not_enough_balance`;
             }
           }
           this.hasAncestors = this.estimate.txSummary.ancestorCount > 1;
@@ -267,6 +285,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           }
           this.cost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
 
+          this.validateChoice();
+
           if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
             this.loadingBtcpayInvoice = true;
             this.requestBTCPayInvoice();
@@ -279,13 +299,27 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
       catchError((response) => {
         this.estimate = undefined;
-        this.error = `cannot_accelerate_tx`;
+        this.quoteError = `cannot_accelerate_tx`;
         this.estimateSubscription.unsubscribe();
         return of(null);
       })
     ).subscribe();
   }
 
+  validateChoice(): void {
+    if (!this.canPay) {
+      if (this.estimate?.availablePaymentMethods?.balance) {
+        if (this.cost >= this.estimate?.userBalance) {
+          this.cantPayReason = 'not_enough_balance';
+        }
+      } else {
+        this.cantPayReason = 'cannot_accelerate_tx';
+      }
+    } else {
+      this.cantPayReason = '';
+    }
+  }
+
   /**
    * User changed his bid
    */
@@ -319,11 +353,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.moveToStep('paid')
       },
       error: (response) => {
-        if (response.status === 403 && response.error === 'not_available') {
+        this.accelerateError = response.error;
-          this.error = 'waitlisted';
-        } else {
-          this.error = response.error;
-        }
       }
     });
   }
@@ -371,6 +401,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       await this.requestCashAppPayment();
     } catch (e) {
       console.debug('Error loading Square Payments', e);
+      this.cashappError = true;
       return;
     }
   }
@@ -417,7 +448,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.cashAppPay.addEventListener('ontokenization', function (event) {
           const { tokenResult, error } = event.detail;
           if (error) {
-            this.error = error;
+            this.accelerateError = error;
           } else if (tokenResult.status === 'OK') {
             that.servicesApiService.accelerateWithCashApp$(
               that.tx.txid,
@@ -440,10 +471,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                 }, 1000);
               },
               error: (response) => {
-                if (response.status === 403 && response.error === 'not_available') {
+                that.accelerateError = response.error;
-                  that.error = 'waitlisted';
+                if (!(response.status === 403 && response.error === 'not_available')) {
-                } else {
-                  that.error = response.error;
                   setTimeout(() => {
                     // Reset everything by reloading the page :D, can be improved
                     const urlParams = new URLSearchParams(window.location.search);
@@ -468,6 +497,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       }),
       catchError(error => {
         console.log(error);
+        this.btcpayInvoiceFailed = true;
         return of(null);
       })
     ).subscribe((invoice) => {
@@ -497,6 +527,32 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     return this._step;
   }
 
+  get paymentMethods() {
+    return Object.keys(this.estimate?.availablePaymentMethods || {});
+  }
+
+  get couldPayWithBitcoin() {
+    return !!this.estimate?.availablePaymentMethods?.bitcoin;
+  }
+
+  get couldPayWithCashapp() {
+    if (!this.cashappEnabled || this.stateService.referrer !== 'https://cash.app/') {
+      return false;
+    }
+    return !!this.estimate?.availablePaymentMethods?.cashapp;
+  }
+
+  get couldPayWithBalance() {
+    if (!this.hasAccessToBalanceMode) {
+      return false;
+    }
+    return !!this.estimate?.availablePaymentMethods?.balance;
+  }
+
+  get couldPay() {
+    return this.couldPayWithBalance || this.couldPayWithBitcoin || this.couldPayWithCashapp;
+  }
+
   get canPayWithBitcoin() {
     const paymentMethod = this.estimate?.availablePaymentMethods?.bitcoin;
     return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max;
@@ -523,7 +579,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       return false;
     }
     const paymentMethod = this.estimate?.availablePaymentMethods?.balance;
-    return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max;
+    return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max && this.cost <= this.estimate?.userBalance;
   }
 
   get canPay() {

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

@@ -132,6 +132,7 @@
             [miningStats]="miningStats"
             [eta]="eta"
             [scrollEvent]="scrollIntoAccelPreview"
+            (unavailable)="eligibleForAcceleration = false"
             class="h-100 w-100"
           ></app-accelerate-checkout>
         </ng-container>

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

@@ -146,6 +146,7 @@
         [noCTA]="true"
         (hasDetails)="setHasAccelerationDetails($event)"
         (completed)="onAccelerationCompleted()"
+        (unavailable)="eligibleForAcceleration = false"
         class="h-100 w-100"
       ></app-accelerate-checkout>
     </ng-container>

frontend/src/app/shared/components/mempool-error/mempool-error.component.html

@@ -1,2 +1,7 @@
-<div class="alert" [class]="alertClass" [innerHTML]="errorContent">
+@if (!textOnly) {
-</div>
+  <div class="alert" [class]="alertClass" [innerHTML]="errorContent">
+  </div>
+} @else {
+  <span [class]="alertClass" [innerHTML]="errorContent">
+  </span>
+}

frontend/src/app/shared/components/mempool-error/mempool-error.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
-const MempoolErrors = {
+export const MempoolErrors = {
   'bad_request': `Your request was not valid. Please try again.`,
   'internal_server_error': `Something went wrong, please try again later`,
   'acceleration_duplicated': `This transaction has already been accelerated.`,
@@ -44,6 +44,7 @@ export function isMempoolError(error: string) {
 export class MempoolErrorComponent implements OnInit {
   @Input() error: string;
   @Input() alertClass = 'alert-danger';
+  @Input() textOnly = false;
   errorContent: SafeHtml;
 
   constructor(private sanitizer: DomSanitizer) { }

frontend/src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline, faCircleXmark} from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -433,5 +433,6 @@ export class SharedModule {
     library.addIcons(faWandMagicSparkles);
     library.addIcons(faFaucetDrip);
     library.addIcons(faTimeline);
+    library.addIcons(faCircleXmark);
   }
 }