From cd56128bb6f0868a324969b2165686c4a2d5875c Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 8 Jul 2024 22:01:36 +0900
Subject: [PATCH] Implement feedbacks on acceleration timeline

---
 .../acceleration-timeline.component.html      | 189 +++++-------------
 .../acceleration-timeline.component.scss      |  73 +++----
 2 files changed, 77 insertions(+), 185 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 d5f1c0915..2b826f2a1 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -20,9 +20,9 @@
       <div class="nodes">
         <div class="node" [id]="'first-seen'">
           <div class="seen-to-acc right"></div>
-          <a class="shape-border">
+          <div class="shape-border">
             <div class="shape"></div>
-          </a>
+          </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>
@@ -34,9 +34,9 @@
         <div class="node" [id]="'accelerated'">
           <div class="seen-to-acc left"></div>
           <div class="acc-to-confirmed right"></div>
-          <a class="shape-border">
+          <div class="shape-border">
             <div class="shape"></div>
-          </a>
+          </div>
           <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>
@@ -47,10 +47,9 @@
         </div>
         <div class="node mined" [id]="'confirmed'" >
           <div class="acc-to-confirmed left" ></div>
-          <a class="shape-border mined-selected">
+          <div class="shape-border mined-selected">
             <div class="shape"></div>
-          </a>
-          <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
+          </div>
           <div class="time">
             <app-time kind="since" [time]="tx.status.block_time"></app-time>
           </div>
@@ -60,94 +59,41 @@
   </div>
 </div>
 } @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
-<div class="acceleration-timeline">
-  <div class="timeline-wrapper">
-    <div class="timeline">
-      <div class="intervals">
-        <div class="node-spacer"></div>
-        <div class="interval">
-          <div class="interval-time">
-            <app-time [time]="now - transactionTime"></app-time>
-          </div>
-        </div>
-        <div class="node-spacer"></div>
-        <div class="interval">
-          <div class="interval-time">
-            ~<app-time [time]="acceleratedETA / 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>
-          <a class="shape-border">
-            <div class="shape"></div>
-          </a>
-          <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" [id]="'accelerated'">
-          <div class="seen-to-acc left"></div>
-          <div class="acc-to-confirmed right"></div>
-          <a class="shape-border waiting">
-            <div class="shape accelerating"></div>
-          </a>
-          <div class="status"><span class="badge badge-waiting" i18n="transaction.audit.accelerated">Accelerated</span></div>
-          <div class="time">
-            <span i18n="date.now">Now</span>
-          </div>
-        </div>
-        <div class="interval-spacer">
-          <div class="acc-to-confirmed"></div>
-        </div>
-        <div class="node" [id]="'confirmed'">
-          <div class="acc-to-confirmed left"></div>
-          <div class="corner-up"></div>
-          <a class="shape-border waiting">
-            <div class="shape"></div>
-          </a>
-          <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-spacer"></div>
-        <div class="node-spacer"></div>
-        <div class="interval">
-          <div class="interval-time">
-            ~<app-time [time]="eta.time / 1000 - now"></app-time> <span *ngIf="accelerateRatio > 1" style="font-style: italic; color: var(--transparent-fg);"> ({{ accelerateRatio }}x slower)</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-spacer">
-          <div class="connector"><div class="corner-down"></div></div>
-          <div class="seen-to-acc right"></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>
-      </div>
-    </div>
-  </div>
-</div>
-} @else if (standardETA) { <!-- Accelerated, to be mined -->
+} @else if (standardETA) { <!-- Accelerated -->
   <div class="acceleration-timeline box">
     <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 loading right"></div>
+          </div>
+          <div class="interval-spacer">
+            <div class="acc-to-confirmed loading"></div>
+          </div>
+          <div class="node" [id]="'confirmed'">
+            <div class="acc-to-confirmed loading left"></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>
@@ -159,9 +105,7 @@
           <div class="node-spacer"></div>
           <div class="interval">
             <div class="interval-time">
-              @if (eta) {
-                ~<app-time [time]="eta?.wait / 1000"></app-time>
-                }
+                ~<app-time [time]="standardETA / 1000 - now"></app-time>
             </div>
           </div>
           <div class="node-spacer"></div>
@@ -169,9 +113,9 @@
         <div class="nodes">
           <div class="node" [id]="'first-seen'">
             <div class="seen-to-acc right"></div>
-            <a class="shape-border">
+            <div class="shape-border">
               <div class="shape"></div>
-            </a>
+            </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>
@@ -182,52 +126,23 @@
           </div>
           <div class="node" [id]="'accelerated'">
             <div class="seen-to-acc left"></div>
-            <div class="acc-to-confirmed right loading"></div>
-            <a class="shape-border accelerated-selected">
-              <div class="shape accelerating"></div>
-            </a>
-            <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
-            <div class="time sm-margin">
-              <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
-            </div>
-          </div>
-          <div class="interval-spacer">
-            <div class="acc-to-confirmed loading"></div>
-          </div>
-          <div class="node" [id]="'confirmed'">
-            <div class="acc-to-confirmed left loading"></div>
-            <div class="corner-up"></div>
-            <a class="shape-border waiting">
-              <div class="shape"></div>
-            </a>
-            <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-spacer"></div>
-          <div class="node-spacer"></div>
-          <div class="interval">
-            <div class="interval-time">
-              ~<app-time [time]="standardETA / 1000 - now"></app-time> <span *ngIf="accelerateRatio > 1" style="font-style: italic; color: var(--transparent-fg);"> ({{ accelerateRatio }}x slower)</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-spacer">
-            <div class="connector"><div class="corner-down"></div></div>
             <div class="seen-to-acc right"></div>
+            <div  class="shape-border accelerated-selected">
+              <div class="shape accelerating"></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>
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 54061f54e..8648052f4 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -1,7 +1,7 @@
 .acceleration-timeline {
   position: relative;
   width: 100%;
-  padding: 1em 0;
+  padding: 0.5em 0 1em;
 
   &::after, &::before {
     content: '';
@@ -69,6 +69,15 @@
       font-size: 12px;
       line-height: 16px;
       white-space: nowrap;
+
+      .compare {
+        font-style: italic;
+        color: var(--mainnet-alt);
+        font-weight: 600;
+        @media (max-width: 600px) {
+          display: none;
+        }
+      }
     }
   }
 
@@ -115,26 +124,27 @@
       }
     }
 
-    .corner-up {
+    .connector {
       position: absolute;
+      height: 88px;
+      width: 10px;
       left: -5px;
-      left: 48.5%;
-      height: 86px;
-      border-left: solid 10px var(--primary);
-      border-bottom: solid 10px var(--primary);
-      border-bottom-right-radius: 10px;
-      // horrible css:
-      @media (max-width: 1030px) {
-        left: 48%; 
+      top: -73px;
+      transform: translateX(120%);
+      background: var(--tertiary);
+
+      &.down {
+        border-top-left-radius: 10px; 
       }
-      @media (max-width: 850px) {
-        left: 47%;
+
+      &.up {
+        border-top-right-radius: 10px; 
       }
-      @media (max-width: 700px) {
-        left: 46%;
+
+      &.loading {
+        animation: acceleratePulse 1s infinite;
       }
     }
-    
   }
 
   .nodes {
@@ -150,8 +160,6 @@
         transform: translateY(-50%);
         border-radius: 50%;
         padding: 2px;
-        background: transparent;
-        transition: background-color 300ms, padding 300ms;
 
         .shape {
           width: 100%;
@@ -161,7 +169,6 @@
           &.accelerating {
             animation: acceleratePulse 1s infinite;
           }
-          transition: background-color 300ms, border 300ms;
         }
 
         &.waiting {
@@ -203,30 +210,6 @@
         font-size: 12px;
         line-height: 16px;
         white-space: nowrap;
-
-        &.sm-margin {
-          @media (max-width: 650px) {
-            margin-left: 20px;
-          }
-        }
-      }
-    }
-
-    .connector {
-      position: relative;
-      height: 10px;
-    
-      .corner-down {
-        position: absolute;
-        @media (max-width: 650px) {
-          width: 223px;
-        }
-        width: 290px;
-        height: 90px;
-        bottom: 50%;
-        border-left: solid 10px var(--primary);
-        border-bottom: solid 10px var(--primary);
-        border-bottom-left-radius: 10px;
       }
     }
   }
@@ -237,9 +220,3 @@
   50% { background-color: var(--mainnet-alt) }
   100% { background-color: var(--tertiary) }
 }
-
-@keyframes textPulse {
-  0% { color: var(--tertiary) }
-  50% { color: var(--mainnet-alt) }
-  100% { color: var(--tertiary) }
-}
\ No newline at end of file