From 61a308cbc6aaf9a480efc16059ef93c525be77d0 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 13 Apr 2024 08:04:58 +0000
Subject: [PATCH] Add simplified tracker blockchain component

---
 .../blockchain-blocks/blockchain-blocks.component.scss | 10 +++++-----
 .../app/components/clockchain/clockchain.component.ts  |  2 +-
 .../mempool-blocks/mempool-blocks.component.html       |  2 +-
 .../mempool-blocks/mempool-blocks.component.scss       | 10 +++++-----
 .../mempool-blocks/mempool-blocks.component.ts         |  9 ++++++++-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index 59082d5c5..269fdab42 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -124,13 +124,13 @@
 
 #arrow-up {
   position: relative;
-  left: 30px;
-  top: 140px;
+  left: calc(var(--block-size) * 0.6);
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .flashing {
diff --git a/frontend/src/app/components/clockchain/clockchain.component.ts b/frontend/src/app/components/clockchain/clockchain.component.ts
index 6cb29bcd9..c17b1e0ae 100644
--- a/frontend/src/app/components/clockchain/clockchain.component.ts
+++ b/frontend/src/app/components/clockchain/clockchain.component.ts
@@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
 export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width: number = 300;
   @Input() height: number = 60;
-  @Input() mode: 'mempool' | 'mined';
+  @Input() mode: 'mempool' | 'mined' | 'none';
   @Input() index: number = 0;
 
   mempoolBlocks: number = 3;
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 98b148f26..aa2043af2 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -51,7 +51,7 @@
         </div>
       </ng-template>
     </div>
-    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
   </div>
 </ng-container>
 
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index dada75603..140d83908 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -113,13 +113,13 @@
 
 #arrow-up {
   position: relative;
-  right: 75px;
-  top: 140px;
+  right: calc(var(--block-size) * 0.6);
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .blockLink {
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 80d77427b..f403eac71 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   tabHidden = false;
   feeRounding = '1.0-0';
 
+  maxArrowPosition = 0;
   rightPosition = 0;
   transition = 'background 2s, right 2s, transform 1s';
 
@@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (blocks.length) {
       blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
     }
+    if (this.count) {
+      this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    } else {
+      this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    }
     return blocks;
   }
 
@@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     } else if (this.markIndex > -1) {
       clearTimeout(this.resetTransitionTimeout);
       this.transition = 'inherit';
-      this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
+      this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
       this.arrowVisible = true;
 
       this.resetTransitionTimeout = window.setTimeout(() => {
@@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
         }
       }
     }
+    this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
   }
 
   mountEmptyBlocks() {