Hide standard ETA data until proper ETA calculation gets implemented

Acceleration timeline polishing

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html

@@ -45,9 +45,9 @@
         <div class="interval-spacer">
           <div class="acc-to-confirmed"></div>
         </div>
-        <div class="node mined" [id]="'confirmed'" >
+        <div class="node selected" [id]="'confirmed'">
           <div class="acc-to-confirmed left" ></div>
-          <div class="shape-border mined-selected">
+          <div class="shape-border">
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
@@ -71,7 +71,7 @@
           <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>
+                ~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
                 }
             </div>
           </div>
@@ -106,7 +106,8 @@
           <div class="node-spacer"></div>
           <div class="interval">
             <div class="interval-time">
-                ~<app-time [time]="standardETA / 1000 - now"></app-time>
+                <!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
+                -
             </div>
           </div>
           <div class="node-spacer"></div>
@@ -125,11 +126,11 @@
           <div class="interval-spacer">
             <div class="seen-to-acc"></div>
           </div>
-          <div class="node" [id]="'accelerated'">
+          <div class="node accelerated" [id]="'accelerated'">
             <div class="seen-to-acc left"></div>
             <div class="seen-to-acc right"></div>
-            <div  class="shape-border accelerated-selected">
-              <div class="shape accelerating"></div>
+            <div  class="shape-border">
+              <div class="shape"></div>
               <div class="connector down loading"></div>
             </div>
             <div class="time" style="margin-top: 3px;">

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss

@@ -123,28 +123,6 @@
         left: 50%;
       }
     }
-
-    .connector {
-      position: absolute;
-      height: 88px;
-      width: 10px;
-      left: -5px;
-      top: -73px;
-      transform: translateX(120%);
-      background: var(--tertiary);
-
-      &.down {
-        border-top-left-radius: 10px; 
-      }
-
-      &.up {
-        border-top-right-radius: 10px; 
-      }
-
-      &.loading {
-        animation: acceleratePulse 1s infinite;
-      }
-    }
   }
 
   .nodes {
@@ -159,34 +137,59 @@
         margin-bottom: -8px;
         transform: translateY(-50%);
         border-radius: 50%;
-        padding: 2px;
-
+        cursor: pointer;
+        padding: 4px;
+        background: transparent;
+        transition: background-color 300ms, padding 300ms;
+    
         .shape {
+          position: relative;
           width: 100%;
           height: 100%;
           border-radius: 50%;
           background: white;
-          &.accelerating {
-            animation: acceleratePulse 1s infinite;
-          }
+          transition: background-color 300ms, border 300ms;
+          z-index: 1;
         }
-
+    
         &.waiting {
           .shape {
             background: var(--grey);
           }
         }
-
-        &.accelerated-selected {
-          .shape {
-            background: var(--tertiary);
+    
+        .connector {
+          position: absolute;
+          height: 88px;
+          width: 10px;
+          left: -5px;
+          top: -73px;
+          transform: translateX(120%);
+          background: var(--tertiary);
+    
+          &.down {
+            border-top-left-radius: 10px;
+          }
+    
+          &.up {
+            border-top-right-radius: 10px;
+          }
+    
+          &.loading {
+            animation: acceleratePulse 1s infinite;
           }
         }
+      }
+    
+      &.accelerated {
+        .shape-border {
+          animation: acceleratePulse 1s infinite;
+        }
+      }
 
-        &.mined-selected {
-          .shape {
-            background: var(--success);
-          }
+      &.selected {
+        .shape-border {
+          background: var(--mainnet-alt);
         }
       }
 
@@ -198,7 +201,7 @@
           background-color: var(--grey);
           color: white;
         }
-        
+
         .badge.badge-accelerated {
           background-color: var(--tertiary);
           color: white;

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts

@@ -28,14 +28,16 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes): void {
     this.now = Math.floor(new Date().getTime() / 1000);
-    if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
-      if (changes?.eta?.currentValue) {
-        if (changes?.acceleratedETA?.currentValue) {
-          this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
-        } else if (changes?.standardETA?.currentValue) {
-          this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
-        }
-      }
-    }
+    // Hide standard ETA while we don't have a proper standard ETA calculation, see https://github.com/mempool/mempool/issues/65
+    
+    // if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
+    //   if (changes?.eta?.currentValue) {
+    //     if (changes?.acceleratedETA?.currentValue) {
+    //       this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
+    //     } else if (changes?.standardETA?.currentValue) {
+    //       this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
+    //     }
+    //   }
+    // }
   }
 }

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

@@ -65,6 +65,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   txId: string;
   txInBlockIndex: number;
   mempoolPosition: MempoolPosition;
+  gotInitialPosition = false;
   accelerationPositions: AccelerationPosition[];
   isLoadingTx = true;
   error: any = undefined;
@@ -432,9 +433,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
               if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
                 this.cashappEligible = true;
               }
+              if (!this.gotInitialPosition && txPosition.position?.block === 0 && txPosition.position?.vsize < 750_000) {
+                this.accelerationFlowCompleted = true;
+              }
             }
           }
         }
+        this.gotInitialPosition = true;
       } else {
         this.mempoolPosition = null;
         this.accelerationPositions = null;
@@ -880,6 +885,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   resetTransaction() {
     this.firstLoad = false;
+    this.gotInitialPosition = false;
     this.error = undefined;
     this.tx = null;
     this.txChanged$.next(true);