From eab008c7075f4a806505c4dd0c0a8038cf58bfc0 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 26 Aug 2024 17:47:56 +0200
Subject: [PATCH] Ineligible transaction link to accelerator FAQ

---
 .../transaction/transaction.component.html    | 28 +++++++++---------
 .../transaction/transaction.component.scss    | 29 ++++++-------------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 715fca4c8..31fa9a6ac 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -551,23 +551,23 @@
         <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
         <td>
           <ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
-            @if (eta.blocks >= 7) {
-              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool justify-content-end align-items-center' : ''">
-                <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
-                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) {
-                  <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
-                }
-              </span>
-            } @else if (network === 'liquid' || network === 'liquidtestnet') {
+            @if (network === 'liquid' || network === 'liquidtestnet') {
               <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
             } @else {
-              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool 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 && eligibleForAcceleration) {
-                  <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary) ? 'etaDeepMempool d-flex justify-content-between' : ''">
+                @if (eta.blocks >= 7) {
+                  <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
+                } @else {
+                  <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
+                }
+                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary) {
+                  <div class="d-flex accelerate">
+                    <a class="btn btn-sm accelerateDeepMempool btn-small-height" [class.disabled]="!eligibleForAcceleration" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                    <a *ngIf="!eligibleForAcceleration" href="https://mempool.space/accelerator#why-cant-accelerate" target="_blank" class="info-badges ml-1" i18n-ngbTooltip="Mempool Accelerator&trade; tooltip" ngbTooltip="This transaction cannot be accelerated">
+                        <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                    </a>
+                  </div>
                 }
-              </span>
-              <span class="eta justify-content-end">
               </span>
             }
           </ng-container>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 232a2cacb..1706dfcab 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -287,37 +287,21 @@
 }
 
 .accelerate {
-  display: flex !important;
-  align-self: auto;
-  margin-left: auto;
-  background-color: var(--tertiary);
-  @media (max-width: 849px) {
-    margin-left: 5px;
-  }
+  @media (min-width: 850px) {
+    margin-left: auto;
+  }  
 }
 
 .etaDeepMempool {
-  justify-content: flex-end;
   flex-wrap: wrap;
-  align-content: center;
-  @media (max-width: 995px) {
-    justify-content: left !important;
-  }
   @media (max-width: 849px) {
     justify-content: right !important;
   }
 }
 
 .accelerateDeepMempool {
-  align-self: auto;
-  margin-left: auto;
   background-color: var(--tertiary);
-  @media (max-width: 995px) {
-    margin-left: 0px;
-  }
-  @media (max-width: 849px) {
-    margin-left: 5px;
-  }
+  margin-left: 5px;
 }
 
 .goggles-icon {
@@ -335,4 +319,9 @@
 
 .oobFees {
   color: #905cf4;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
\ No newline at end of file