From a0992f6091db6deb0817bee3d3a794848d418f42 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 5 Jul 2024 18:12:28 +0900
Subject: [PATCH] More accel timeline polish

---
 .../acceleration-timeline.component.html      | 24 +++++++++----------
 .../acceleration-timeline.component.ts        |  1 +
 .../transaction/transaction.component.html    |  4 ++--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
index c7efc9b93..cd9d1f2e2 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -12,9 +12,9 @@
         <div class="interval">
           <div class="interval-time">
             @if (eta) {
-            ~<app-time kind="plain" [time]="eta?.wait / 1000"></app-time>
+            ~<app-time [time]="eta?.wait / 1000"></app-time>
             } @else if (tx.status.block_time) {
-            <app-time kind="plain" [time]="tx.status.block_time - acceleratedAt"></app-time>
+            <app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
             }
           </div>
         </div>
@@ -24,8 +24,8 @@
     </div>
     <div class="nodes">
       <div class="node" [id]="'first-seen'">
-        <div class="seen-to-acc right" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
-        <a class="shape-border" [class.sent-selected]="!tx.status.confirmed && !tx.acceleration">
+        <div class="seen-to-acc right" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
+        <a class="shape-border" [class.sent-selected]="!tx.status.confirmed && !isAcceleration">
           <div class="shape"></div>
         </a>
         <div class="status"><span class="badge badge-primary" i18n="accelerator.sent-state">Sent</span></div>
@@ -34,25 +34,25 @@
         </div>
       </div>
       <div class="interval-spacer">
-        <div class="seen-to-acc" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
+        <div class="seen-to-acc" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
       </div>
       <div class="node" [id]="'accelerated'">
-        <div class="seen-to-acc left" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
-        <div class="acc-to-confirmed right" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
-        <a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed" [class.waiting]="!tx.acceleration && !tx.status.confirmed ? 'waiting' : ''">
+        <div class="seen-to-acc left" [class.loading]="!isAcceleration && !tx.status.confirmed"></div>
+        <div class="acc-to-confirmed right" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
+        <a class="shape-border" [class.accelerated-selected]="isAcceleration && !tx.status.confirmed" [class.waiting]="!isAcceleration && !tx.status.confirmed">
           <div class="shape"></div>
         </a>
-        <div class="status"><span class="badge" [class]="tx.status.confirmed || tx.acceleration ? 'badge-accelerated' : 'badge-waiting'" i18n="transaction.audit.accelerated">Accelerated</span></div>
+        <div class="status"><span class="badge" [class]="tx.status.confirmed || isAcceleration ? 'badge-accelerated' : 'badge-waiting'" i18n="transaction.audit.accelerated">Accelerated</span></div>
         <div class="time">
           <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
         </div>
       </div>
       <div class="interval-spacer">
-        <div class="acc-to-confirmed" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
+        <div class="acc-to-confirmed" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
       </div>
       <div class="node" [id]="'confirmed'" [class.mined]="tx.status.confirmed">
-        <div class="acc-to-confirmed left" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
-        <a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed ? 'waiting' : ''">
+        <div class="acc-to-confirmed left" [class.loading]="isAcceleration && !tx.status.confirmed"></div>
+        <a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed">
           <div class="shape"></div>
         </a>
         <div class="status"><span class="badge" [class]="tx.status.confirmed ? 'badge-success' : 'badge-waiting'" i18n="transaction.rbf.mined">Mined</span></div>
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
index 0bafdbfa7..6f775e7a8 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
@@ -11,6 +11,7 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
   @Input() transactionTime: number;
   @Input() tx: Transaction;
   @Input() eta: ETA;
+  @Input() isAcceleration: boolean;
 
   acceleratedAt: number;
 
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 0f9a4d9c4..a0e841303 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -152,12 +152,12 @@
 
     <br>
 
-    <ng-container *ngIf="transactionTime && (tx.acceleration || isAcceleration)">
+    <ng-container *ngIf="transactionTime && isAcceleration">
       <div class="title float-left">
         <h2 id="acceleration-timeline" i18n="transaction.acceleration-timeline|Acceleration Timeline">Acceleration Timeline</h2>
       </div>
       <div class="clearfix"></div>
-      <app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)"></app-acceleration-timeline>
+      <app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)" [isAcceleration]="isAcceleration"></app-acceleration-timeline>
       <br>
     </ng-container>