Simplified acceleration mode for mobile

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

@@ -65,6 +65,7 @@
         </div>
       </div>
       <br>
+      @if (paymentType !== 'cashapp') {
         <h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
         <div class="row">
           <div class="col">
@@ -83,6 +84,7 @@
             </div>
           </div>
         </div>
+      }
   
       <h5>Acceleration summary</h5>
       <div class="row mb-3">
@@ -90,6 +92,29 @@
           <table class="table table-borderless table-border table-dark table-accelerator">
             <tbody>
               <!-- ESTIMATED FEE -->
+              @if (paymentType === 'cashapp') {
+                <ng-container>
+                  <tr class="group-first">
+                    <td class="item" i18n="accelerator.boost-rate">Boost 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.estimated-extra-fee-required">Boost fee</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>
+                </ng-container>
+              } @else {
                 <ng-container>
                   <tr class="group-first">
                     <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
@@ -111,6 +136,7 @@
                     </td>
                   </tr>
                 </ng-container>
+              }
   
               <!-- MEMPOOL BASE FEE -->
               <tr>
@@ -141,6 +167,28 @@
                 </td>
               </tr>
 
+              
+              @if (paymentType === 'cashapp') {
+                <!-- FIXED COST -->
+                <ng-container>
+                  <tr class="group-first group-last" style="border-top: 1px solid lightgrey; border-collapse: collapse;">
+                    <td class="item">
+                      <b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.total-cost">Total cost</b>
+                    </td>
+                    <td class="amt">
+                      <span style="background-color: #105fb0" class="p-1 pl-0">
+                        {{ maxCost | number }}
+                      </span>
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1">
+                        <app-fiat [value]="maxCost" [colorClass]="'green-color'"></app-fiat>
+                      </span>
+                    </td>
+                  </tr>
+                </ng-container>
+              } @else {
                 <!-- NEXT BLOCK ESTIMATE -->
                 <ng-container>
                   <tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
@@ -188,6 +236,7 @@
                     </td>
                   </tr>
                 </ng-container>
+              }
   
               <!-- USER BALANCE -->
               <ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">

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

@@ -409,6 +409,9 @@
   } @else {
     <ng-container *ngTemplateOutlet="firstSeenRow"></ng-container>
     <ng-container *ngTemplateOutlet="etaRow"></ng-container>
+    @if (isMobile) {
+      <ng-container *ngTemplateOutlet="accelerateRow"></ng-container>
+    }
   }
   <ng-container *ngTemplateOutlet="featuresRow"></ng-container>
   @if (tx?.status?.confirmed) {
@@ -530,7 +533,7 @@
           } @else if (this.mempoolPosition.block >= 7) {
             <span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
               <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
-              @if (!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+              @if (!isMobile && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
                 <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
               }
             </span>
@@ -539,7 +542,7 @@
           } @else {
             <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
               <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
-              @if (!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+              @if (!isMobile && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
                 <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
               }
             </span>
@@ -552,6 +555,18 @@
   }
 </ng-template>
 
+<ng-template #accelerateRow>
+  @if (!isLoadingTx) {
+    <tr>
+      <td class="td-width align-items-center align-middle p-0" colspan="2">
+        <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn accelerateFullSize" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+      </td>
+    </tr>
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
 <ng-template #gogglesRow>
   @if (!isLoadingTx) {
     @if (((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) || filters.length) {

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

@@ -311,6 +311,13 @@
   }
 }
 
+.accelerateFullSize {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem 0.25rem;
+  background-color: #653b9c;
+}
+
 .goggles-icon {
   display: block;
   width: 2.2em;