From 6cd8cf660bf483582758dc977a45e95547bfc9bb Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@users.noreply.github.com>
Date: Fri, 12 Jul 2024 19:10:06 +0900
Subject: [PATCH] Revert "Show accelerated fee rates on timeline"

---
 .../acceleration-timeline.component.html      | 220 +++++++++---------
 .../acceleration-timeline.component.scss      |   2 +-
 .../acceleration-timeline.component.ts        |   2 -
 .../transaction/transaction.component.html    |   6 +-
 4 files changed, 112 insertions(+), 118 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 3e687a547..1cf14a54d 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -1,41 +1,6 @@
-<div class="acceleration-timeline box" [class.lower-padding]="!tx.status.confirmed">
+@if (tx.status.confirmed) {
+<div class="acceleration-timeline box">
   <div class="timeline-wrapper">
-    @if (!tx.status.confirmed) {
-    <div class="timeline">
-      <div class="intervals">
-        <div class="node-spacer"></div>
-        <div class="interval-spacer"></div>
-        <div class="node-spacer"></div>
-        <div class="interval">
-          <div class="interval-time">
-            @if (eta) {
-              ~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
-              }
-          </div>
-        </div>
-        <div class="node-spacer"></div>
-      </div>
-      <div class="nodes">
-        <div class="node-spacer"></div>
-        <div class="interval-spacer"></div>
-        <div class="node">
-          <div class="acc-to-confirmed right go-faster"></div>
-        </div>
-        <div class="interval-spacer">
-        </div>
-        <div class="node" [id]="'confirmed'">
-          <div class="acc-to-confirmed left go-faster"></div>
-          <div class="shape-border waiting">
-            <div class="shape animate"></div>
-          </div>
-          <!-- <div>
-            <span class="symbol">< </span><app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
-          </div> -->
-          <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
-        </div>
-      </div>
-    </div>
-    }
     <div class="timeline">
       <div class="intervals">
         <div class="node-spacer"></div>
@@ -47,13 +12,7 @@
         <div class="node-spacer"></div>
         <div class="interval">
           <div class="interval-time">
-            @if (tx.status.confirmed) {
-              <div class="interval-time">
-                <app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
-              </div>
-            } @else if (standardETA && !tx.status.confirmed) {
-              <!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
-            }
+            <app-time [time]="tx.status.block_time - acceleratedAt"></app-time>
           </div>
         </div>
         <div class="node-spacer"></div>
@@ -65,90 +24,129 @@
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
-          <div style="margin-top: 33px;">
-            <app-fee-rate [fee]="tx.feePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
+          <div class="time">
+            <app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
           </div>
         </div>
         <div class="interval-spacer">
           <div class="seen-to-acc"></div>
         </div>
-        <div class="node" [class.accelerated]="!tx.status.confirmed" [id]="'accelerated'">
+        <div class="node" [id]="'accelerated'">
           <div class="seen-to-acc left"></div>
-          @if (tx.status.confirmed) {
-            <div class="acc-to-confirmed right"></div>
-          } @else {
-          <div class="seen-to-acc right"></div>
-          }
-          <div  class="shape-border">
+          <div class="acc-to-confirmed right"></div>
+          <div class="shape-border">
             <div class="shape"></div>
-            @if (!tx.status.confirmed) {
-            <div class="connector down loading"></div>
-            }
           </div>
-          @if (tx.status.confirmed) {
-            <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
-          }
-          @if (tx.status.confirmed && accelerationInfo) {
-          <div style="margin-top: 33px;">
-            <app-fee-rate [fee]="accelerationInfo.effectiveFee + accelerationInfo.feeDelta" [weight]="accelerationInfo.effectiveVsize * 4" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
+          <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
+          <div class="time">
+            <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
           </div>
-          } @else if (!tx.status.confirmed) {
-          <div>
-            <app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
-          </div>
-            @if (now - acceleratedAt > 60) {
-            <div class="time" style="margin-top: -164px; font-style: italic;">
-              <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
-            </div>
-            }
-          } @else {
-          <div style="margin-top: 36px;">
-            <span class="skeleton-loader" style="max-width: 50px"></span>
-          </div>
-          }
         </div>
         <div class="interval-spacer">
-          @if (tx.status.confirmed) {
           <div class="acc-to-confirmed"></div>
-          } @else {
-          <div class="seen-to-acc"></div>
-          }
         </div>
-        <div class="node" [class.selected]="tx.status.confirmed" [id]="'confirmed'">
-          @if (tx.status.confirmed) {
-          <div class="acc-to-confirmed left"></div>
-          } @else {
-          <div class="seen-to-acc left"></div>
-          }
-          <div class="shape-border" [class.waiting]="!tx.status.confirmed">
+        <div class="node selected" [id]="'confirmed'">
+          <div class="acc-to-confirmed left" ></div>
+          <div class="shape-border">
             <div class="shape"></div>
           </div>
-          @if (tx.status.confirmed) {
-            <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
-          }
-          @if (tx.status.confirmed && accelerationInfo) {
-            <div style="margin-top: 33px;">
-            @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize || tx.acceleration)) {
-              @if (!tx.effectiveFeePerVsize) { <!-- Avoid briefly displaying a wrong accelerated fee rate while loading -->
-                <span class="skeleton-loader" style="max-width: 50px;"></span>
-              } @else {
-                <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
-              }
-            } @else {
-              <app-fee-rate [fee]="tx.effectiveFeePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
-            }
-            </div>
-          } @else if (!tx.status.confirmed) {
-          <!-- <div>
-            <app-fee-rate [fee]="tx.feePerVsize" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate>
-          </div> -->
-          } @else {
-          <div style="margin-top: 36px;">
-            <span class="skeleton-loader" style="max-width: 50px"></span>
+          <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
+          <div class="time">
+            <app-time kind="since" [time]="tx.status.block_time"></app-time>
+          </div>
+        </div>
+      </div>  
+    </div>
+  </div>
+</div>
+} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
+} @else if (standardETA) { <!-- Accelerated -->
+  <div class="acceleration-timeline box lower-padding">
+    <div class="timeline-wrapper">
+      <div class="timeline">
+        <div class="intervals">
+          <div class="node-spacer"></div>
+          <div class="interval-spacer"></div>
+          <div class="node-spacer"></div>
+          <div class="interval">
+            <div class="interval-time">
+              @if (eta) {
+                ~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
+                }
+            </div>
+          </div>
+          <div class="node-spacer"></div>
+        </div>
+        <div class="nodes">
+          <div class="node-spacer"></div>
+          <div class="interval-spacer"></div>
+          <div class="node">
+            <div class="acc-to-confirmed right go-faster"></div>
+          </div>
+          <div class="interval-spacer">
+          </div>
+          <div class="node" [id]="'confirmed'">
+            <div class="acc-to-confirmed left go-faster"></div>
+            <div class="shape-border waiting">
+              <div class="shape animate"></div>
+            </div>
+            <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="timeline">
+        <div class="intervals">
+          <div class="node-spacer"></div>
+          <div class="interval">
+            <div class="interval-time">
+              <app-time [time]="acceleratedAt - transactionTime"></app-time>
+            </div>
+          </div>
+          <div class="node-spacer"></div>
+          <div class="interval">
+            <div class="interval-time">
+                <!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
+                -
+            </div>
+          </div>
+          <div class="node-spacer"></div>
+        </div>
+        <div class="nodes">
+          <div class="node" [id]="'first-seen'">
+            <div class="seen-to-acc right"></div>
+            <div class="shape-border">
+              <div class="shape"></div>
+            </div>
+            <div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
+            <div class="time">
+              <app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
+            </div>
+          </div>
+          <div class="interval-spacer">
+            <div class="seen-to-acc"></div>
+          </div>
+          <div class="node accelerated" [id]="'accelerated'">
+            <div class="seen-to-acc left"></div>
+            <div class="seen-to-acc right"></div>
+            <div  class="shape-border">
+              <div class="shape"></div>
+              <div class="connector down loading"></div>
+            </div>
+            <div class="time" style="margin-top: 3px;">
+              <span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
+            </div>
+          </div>
+          <div class="interval-spacer">
+            <div class="seen-to-acc"></div>
+          </div>
+          <div class="node" [id]="'confirmed'">
+            <div class="seen-to-acc left"></div>
+            <div class="shape-border waiting">
+              <div class="shape"></div>
+            </div>
           </div>
-          }
         </div>
       </div>
     </div>
   </div>
-</div>
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index 69f7580af..dd815ba45 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -209,7 +209,7 @@
       }
 
       .status {
-        margin-top: -66px;
+        margin-top: -64px;
 
         .badge.badge-waiting {
           opacity: 0.5;
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 ff6411dc4..38d48dd05 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { ETA } from '../../services/eta.service';
 import { Transaction } from '../../interfaces/electrs.interface';
-import { Acceleration } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-acceleration-timeline',
@@ -11,7 +10,6 @@ import { Acceleration } from '../../interfaces/node-api.interface';
 export class AccelerationTimelineComponent implements OnInit, OnChanges {
   @Input() transactionTime: number;
   @Input() tx: Transaction;
-  @Input() accelerationInfo: Acceleration;
   @Input() eta: ETA;
   // A mined transaction has standard ETA and accelerated ETA undefined
   // A transaction in mempool has either standardETA defined (if accelerated) or acceleratedETA defined (if not accelerated yet)
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 86c8dc780..22916b242 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -167,7 +167,7 @@
         <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" [accelerationInfo]="accelerationInfo" [eta]="(ETA$ | async)" [standardETA]="(standardETA$ | async)?.time"></app-acceleration-timeline>
+      <app-acceleration-timeline [transactionTime]="transactionTime" [tx]="tx" [eta]="(ETA$ | async)" [standardETA]="(standardETA$ | async)?.time"></app-acceleration-timeline>
       <br>
     </ng-container>
 
@@ -640,9 +640,7 @@
         <td>
           <div class="effective-fee-container">
             @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize || tx.acceleration)) {
-              @if (tx.effectiveFeePerVsize) { <!-- Avoid briefly displaying a wrong accelerated fee rate while loading -->
-                <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
-              }
+              <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
             } @else {
               <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
             }