From 110b7a934cfe07db89edc677b4ac79417698edaf Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 30 Jun 2024 04:57:00 +0000
Subject: [PATCH] [accelerator] buttons

---
 .../accelerate-checkout.component.html             |  6 +++---
 .../app/components/tracker/tracker.component.ts    |  1 -
 .../transaction/transaction.component.html         | 11 +++++++++--
 .../transaction/transaction.component.ts           | 14 ++++++++------
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
index 73b209593..d96c8af36 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -269,7 +269,7 @@
       @if (!noCTA) {
         <div class="row mb-1">
           <div class="col-sm">
-            <h1 style="font-size: larger;"><ng-content select="[slot='cta-title']"></ng-content><span class="default-slot">Accelerate your Bitcoin transaction?</span></h1>
+            <h1 style="font-size: larger;"><ng-content select="[slot='cta-title']"></ng-content><span class="default-slot">Transaction stuck?</span></h1>
           </div>
         </div>
       }
@@ -284,7 +284,7 @@
             <div class="form-group form-check mb-2">
               <input type="checkbox" [checked]="armed" class="form-check-input" id="accel" name="accel" (change)="armed = !armed">
               <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 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 *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info 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>)
@@ -327,7 +327,7 @@
       <div class="row">
         <div class="col-md">
           <div class="d-flex flex-column">
-            <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 *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-3" i18n="accelerator.customize" (click)="moveToStep('quote')">customize</button></span>
             <span class="checkout-text">
               @if (!calculating) {
                 For an additional <app-fiat [value]="cost"></app-fiat> (<span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span>)
diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts
index 57eecee16..349e8d43b 100644
--- a/frontend/src/app/components/tracker/tracker.component.ts
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -779,7 +779,6 @@ export class TrackerComponent implements OnInit, OnDestroy {
     this.auditStatus = null;
     this.accelerationPositions = null;
     this.accelerationEligible = false;
-    this.accelerationFlowCompleted = false;
     this.trackerStage = 'waiting';
     document.body.scrollTo(0, 0);
     this.leaveTransaction();
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 29ef8bfba..7876f4f4c 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -81,6 +81,8 @@
         <h2 i18n="transaction.accelerate|Accelerate button label">Transaction stuck?</h2>
       </div>
 
+      <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="closeAccelerator()" i18n="hide-diagram">Hide accelerator</button>
+
       <div class="clearfix"></div>
 
       <ng-container *ngIf="(ETA$ | async) as eta;">
@@ -546,7 +548,7 @@
         <td>
           <ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
             @if (eta.blocks >= 7) {
-              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
+              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary) ? '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' && !showAccelerationSummary) {
                   <a class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
@@ -555,8 +557,13 @@
             } @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">
+              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary) ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
                 <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
+                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary) {
+                  <a class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                }
+              </span>
+              <span class="eta justify-content-end">
               </span>
             }
           </ng-container>
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 0f86701ff..fb3f8cb1a 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -421,8 +421,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
             }
           } else if (this.showAccelerationSummary) {
             setTimeout(() => {
-              this.accelerationFlowCompleted = true;
-              this.showAccelerationSummary = false;
+              this.closeAccelerator();
             }, 2000);
           }
         }
@@ -712,7 +711,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     document.location.hash = '#accelerate';
     this.enterpriseService.goal(8);
     this.accelerationFlowCompleted = false;
-    this.showAccelerationSummary = true && this.acceleratorAvailable;
+    this.showAccelerationSummary = this.acceleratorAvailable;
     this.scrollIntoAccelPreview = true;
     return false;
   }
@@ -796,8 +795,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.showAccelerationSummary = false;
       } else if (this.showAccelerationSummary) {
         setTimeout(() => {
-          this.accelerationFlowCompleted = true;
-          this.showAccelerationSummary = false;
+          this.closeAccelerator();
         }, 2000);
       }
     }
@@ -870,7 +868,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.showCpfpDetails = false;
     this.accelerationInfo = null;
     this.accelerationEligible = false;
-    this.accelerationFlowCompleted = false;
     this.txInBlockIndex = null;
     this.mempoolPosition = null;
     this.pool = null;
@@ -887,6 +884,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
+  closeAccelerator(): void {
+    this.accelerationFlowCompleted = true;
+    this.showAccelerationSummary = false;
+  }
+
   roundToOneDecimal(cpfpTx: any): number {
     return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
   }