Hide standard ETA data until proper ETA calculation gets implemented

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-border">
-              <div class="shape accelerating"></div>
+              <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,6 +123,40 @@
         left: 50%;
       }
     }
+  }
+
+  .nodes {
+    position: relative;
+    margin-top: 1em;
+    .node {
+      .shape-border {
+        display: block;
+        margin: auto;
+        height: calc(1em + 8px);
+        width: calc(1em + 8px);
+        margin-bottom: -8px;
+        transform: translateY(-50%);
+        border-radius: 50%;
+        cursor: pointer;
+        padding: 4px;
+        background: transparent;
+        transition: background-color 300ms, padding 300ms;
+    
+        .shape {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          background: white;
+          transition: background-color 300ms, border 300ms;
+          z-index: 1;
+        }
+    
+        &.waiting {
+          .shape {
+            background: var(--grey);
+          }
+        }
     
         .connector {
           position: absolute;
@@ -147,46 +181,15 @@
         }
       }
     
-  .nodes {
+      &.accelerated {
-    position: relative;
-    margin-top: 1em;
-    .node {
         .shape-border {
-        display: block;
-        margin: auto;
-        height: calc(1em + 8px);
-        width: calc(1em + 8px);
-        margin-bottom: -8px;
-        transform: translateY(-50%);
-        border-radius: 50%;
-        padding: 2px;
-
-        .shape {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
-          background: white;
-          &.accelerating {
           animation: acceleratePulse 1s infinite;
         }
       }
 
-        &.waiting {
+      &.selected {
-          .shape {
+        .shape-border {
-            background: var(--grey);
+          background: var(--mainnet-alt);
-          }
-        }
-
-        &.accelerated-selected {
-          .shape {
-            background: var(--tertiary);
-          }
-        }
-
-        &.mined-selected {
-          .shape {
-            background: var(--success);
-          }
         }
       }
 

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) {
+    // 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) {
+    
-        if (changes?.acceleratedETA?.currentValue) {
+    // if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
-          this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
+    //   if (changes?.eta?.currentValue) {
-        } else if (changes?.standardETA?.currentValue) {
+    //     if (changes?.acceleratedETA?.currentValue) {
-          this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
+    //       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));
-    }
+    //     }
+    //   }
+    // }
   }
 }