[accelerator] streamline flow

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

@@ -82,6 +82,7 @@
       </div>
 
       <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="closeAccelerator()" i18n="hide-diagram">Hide accelerator</button>
+      <button *ngIf="hasAccelerationDetails" class="btn btn-sm btn-outline-info float-right ml-2" (click)="showAccelerationDetails = !showAccelerationDetails">Details</button>
 
       <div class="clearfix"></div>
 
@@ -94,7 +95,9 @@
           [eta]="eta"
           [miningStats]="miningStats"
           [scrollEvent]="scrollIntoAccelPreview"
+          [showDetails]="showAccelerationDetails"
           [noCTA]="true"
+          (hasDetails)="setHasAccelerationDetails($event)"
           class="h-100 w-100"
         ></app-accelerate-checkout>
       </ng-container>

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

@@ -139,6 +139,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   acceleratorAvailable: boolean = this.stateService.env.ACCELERATOR && this.stateService.network === '';
   showAccelerationSummary = false;
   showAccelerationDetails = false;
+  hasAccelerationDetails = false;
   accelerationFlowCompleted = false;
   scrollIntoAccelPreview = false;
   accelerationEligible = false;
@@ -866,6 +867,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.rbfReplaces = [];
     this.filters = [];
     this.showCpfpDetails = false;
+    this.showAccelerationDetails = false;
     this.accelerationInfo = null;
     this.accelerationEligible = false;
     this.txInBlockIndex = null;
@@ -934,6 +936,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  setHasAccelerationDetails(hasDetails: boolean): void {
+    this.hasAccelerationDetails = hasDetails;
+  }
+
   @HostListener('window:resize', ['$event'])
   setGraphSize(): void {
     this.isMobile = window.innerWidth < 850;