From 4be8016eb1b1590b6f6b161271267c8c2e86f5b2 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 12 Mar 2023 16:42:58 +0900
Subject: [PATCH 1/2] Fix repeated new block animation on page navigation

---
 .../blockchain-blocks/blockchain-blocks.component.ts        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index e3547a569..5ece6c6ca 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -31,6 +31,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   dynamicBlocksAmount: number = 8;
   emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
   markHeight: number;
+  chainTip: number;
   blocksSubscription: Subscription;
   blockPageSubscription: Subscription;
   networkSubscription: Subscription;
@@ -73,6 +74,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    this.chainTip = this.stateService.latestBlockHeight;
     this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
@@ -115,7 +117,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           }
 
           this.blockStyles = [];
-          if (this.blocksFilled) {
+          if (this.blocksFilled && block.height > this.chainTip) {
             this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
             setTimeout(() => {
               this.blockStyles = [];
@@ -129,6 +131,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           if (this.blocks.length === this.dynamicBlocksAmount) {
             this.blocksFilled = true;
           }
+
+          this.chainTip = Math.max(this.chainTip, block.height);
           this.cd.markForCheck();
         });
     } else {

From b675bd8d55a7eacf5fb2df2ac140d75da595441e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 12 Mar 2023 17:00:36 +0900
Subject: [PATCH 2/2] Fix transaction confirmed arrow animation

---
 .../blockchain-blocks/blockchain-blocks.component.ts        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 5ece6c6ca..30b98813a 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -20,8 +20,8 @@ interface BlockchainBlock extends BlockExtended {
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() static: boolean = false;
   @Input() offset: number = 0;
-  @Input() height: number = 0;
-  @Input() count: number = 8;
+  @Input() height: number = 0; // max height of blocks in chunk (dynamic blocks only)
+  @Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
   @Input() loadingTip: boolean = false;
   @Input() connected: boolean = true;
   
@@ -109,7 +109,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           this.blocks.unshift(block);
           this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
 
-          if (txConfirmed && this.height === block.height) {
+          if (txConfirmed && block.height > this.chainTip) {
             this.markHeight = block.height;
             this.moveArrowToPosition(true, true);
           } else {