From e986cfd30be1673cfbec8df081eda136dfa2c627 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 25 Nov 2023 11:48:29 +0000
Subject: [PATCH 1/2] Make the acceleration preview dismissable

---
 .../accelerate-preview.component.html                  |  6 +++++-
 .../accelerate-preview.component.scss                  | 10 ++++++++++
 .../accelerate-preview/accelerate-preview.component.ts |  7 ++++++-
 .../components/transaction/transaction.component.html  |  2 +-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
index e40d6b5c9..eb92114b2 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@@ -238,4 +238,8 @@
   
     </div>
   </ng-container>
-</div>
\ No newline at end of file
+</div>
+
+<button type="button" class="close dismiss-preview" (click)="onDismiss()">
+  <span aria-hidden="true">&times;</span>
+</button>
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
index 2e2b19ee8..8a5baa52a 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
@@ -109,4 +109,14 @@
 
 .item {
   white-space: initial;
+}
+
+.dismiss-preview {
+  position: absolute;
+  top: 0.4em;
+  right: 0.6em;
+}
+
+:host ::ng-deep .alert {
+  margin-right: 1.6em;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
index 530977c71..882dbe73f 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
@@ -40,6 +40,7 @@ export const MAX_BID_RATIO = 4;
 export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges {
   @Input() tx: Transaction | undefined;
   @Input() scrollEvent: boolean;
+  @Output() dismiss = new EventEmitter();
 
   math = Math;
   error = '';
@@ -207,4 +208,8 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;
   }
+
+  onDismiss(): void {
+    this.dismiss.emit();
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 61f9e7f86..25af4194f 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -87,7 +87,7 @@
         <h2>Accelerate</h2>
       </div>
       <div class="box">
-        <app-accelerate-preview [tx]="tx" [scrollEvent]="scrollIntoAccelPreview"></app-accelerate-preview>
+        <app-accelerate-preview [tx]="tx" [scrollEvent]="scrollIntoAccelPreview" (dismiss)="showAccelerationSummary = false;"></app-accelerate-preview>
       </div>
     </ng-container>
 

From 9fcafeeeb0347f48e1dfdd6f6a314430a4f1b2d8 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 1 Dec 2023 14:32:05 +0900
Subject: [PATCH 2/2] Switch to toggle-style acceleration dismiss button

---
 .../accelerate-preview.component.html                  |  6 +-----
 .../accelerate-preview.component.scss                  | 10 ----------
 .../accelerate-preview/accelerate-preview.component.ts |  7 +------
 .../components/transaction/transaction.component.html  |  8 ++++++--
 .../components/transaction/transaction.component.scss  |  2 +-
 5 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
index eb92114b2..e40d6b5c9 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@@ -238,8 +238,4 @@
   
     </div>
   </ng-container>
-</div>
-
-<button type="button" class="close dismiss-preview" (click)="onDismiss()">
-  <span aria-hidden="true">&times;</span>
-</button>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
index 8a5baa52a..2e2b19ee8 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
@@ -109,14 +109,4 @@
 
 .item {
   white-space: initial;
-}
-
-.dismiss-preview {
-  position: absolute;
-  top: 0.4em;
-  right: 0.6em;
-}
-
-:host ::ng-deep .alert {
-  margin-right: 1.6em;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
index 882dbe73f..530977c71 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
@@ -40,7 +40,6 @@ export const MAX_BID_RATIO = 4;
 export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges {
   @Input() tx: Transaction | undefined;
   @Input() scrollEvent: boolean;
-  @Output() dismiss = new EventEmitter();
 
   math = Math;
   error = '';
@@ -208,8 +207,4 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;
   }
-
-  onDismiss(): void {
-    this.dismiss.emit();
-  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 25af4194f..2d1b31a5a 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -83,11 +83,15 @@
 
     <!-- Accelerator -->
     <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary">
-      <div class="title mt-3">
+      <br>
+      <div class="title float-left">
         <h2>Accelerate</h2>
       </div>
+      <button type="button" class="btn btn-outline-info accelerator-toggle btn-sm float-right" (click)="showAccelerationSummary = false" i18n="hide-accelerator">Hide accelerator</button>
+      <div class="clearfix"></div>
+
       <div class="box">
-        <app-accelerate-preview [tx]="tx" [scrollEvent]="scrollIntoAccelPreview" (dismiss)="showAccelerationSummary = false;"></app-accelerate-preview>
+        <app-accelerate-preview [tx]="tx" [scrollEvent]="scrollIntoAccelPreview"></app-accelerate-preview>
       </div>
     </ng-container>
 
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 8f6c5111b..542c2601d 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -179,7 +179,7 @@
 	}
 }
 
-.details-button, .flow-toggle {
+.details-button, .flow-toggle, .accelerator-toggle {
   margin-top: -5px;
   margin-left: 10px;
 	@media (min-width: 768px){