From 92352e145362a10aa030e1a5c033b0b58657eb06 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 27 Jan 2023 18:32:15 -0600
Subject: [PATCH] Fix blockchain gaps when KEEP_BLOCKS_AMOUNT >
 INITIAL_BLOCKS_AMOUNT

---
 .../blockchain-blocks.component.ts             |  9 ++++++---
 .../app/components/start/start.component.ts    | 18 +++++++++++++++---
 2 files changed, 21 insertions(+), 6 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 1ee0edb66..fb37cf72a 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -26,6 +26,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   specialBlocks = specialBlocks;
   network = '';
   blocks: BlockchainBlock[] = [];
+  dynamicBlocksAmount: number = 8;
   emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
   markHeight: number;
   blocksSubscription: Subscription;
@@ -70,6 +71,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
       this.enabledMiningInfoIfNeeded(this.location.path());
       this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@@ -100,7 +103,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           }
 
           this.blocks.unshift(block);
-          this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+          this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
 
           if (txConfirmed) {
             this.markHeight = block.height;
@@ -121,7 +124,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
             this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
           }
 
-          if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
+          if (this.blocks.length === this.dynamicBlocksAmount) {
             this.blocksFilled = true;
           }
           this.cd.markForCheck();
@@ -312,7 +315,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
   mountEmptyBlocks() {
     const emptyBlocks = [];
-    for (let i = 0; i < this.stateService.env.KEEP_BLOCKS_AMOUNT; i++) {
+    for (let i = 0; i < this.dynamicBlocksAmount; i++) {
       emptyBlocks.push({
         id: '',
         height: 0,
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index f61a780a5..d29372d97 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -22,10 +22,13 @@ export class StartComponent implements OnInit, OnDestroy {
   chainTipSubscription: Subscription;
   chainTip: number = -1;
   markBlockSubscription: Subscription;
+  blockCounterSubscription: Subscription;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
 
   isMobile: boolean = false;
   blockWidth = 155;
+  dynamicBlocksAmount: number = 8;
+  blockCount: number = 0;
   blocksPerPage: number = 1;
   pageWidth: number;
   firstPageWidth: number;
@@ -39,7 +42,15 @@ export class StartComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT);
+    this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
+    this.blockCounterSubscription = this.stateService.blocks$.subscribe(() => {
+      this.blockCount++;
+      this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
+      this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
+      if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
+        this.onResize();
+      }
+    });
     this.onResize();
     this.updatePages();
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -241,7 +252,7 @@ export class StartComponent implements OnInit, OnDestroy {
   }
 
   getPageAt(index: number) {
-    const height = this.chainTip - 8 - ((index - 1) * this.blocksPerPage)
+    const height = this.chainTip - this.dynamicBlocksAmount - ((index - 1) * this.blocksPerPage);
     return {
       offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
       height: height,
@@ -255,7 +266,7 @@ export class StartComponent implements OnInit, OnDestroy {
   }
 
   getPageIndexOf(height: number): number {
-    const delta = this.chainTip - 8 - height;
+    const delta = this.chainTip - this.dynamicBlocksAmount - height;
     return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
   }
 
@@ -290,5 +301,6 @@ export class StartComponent implements OnInit, OnDestroy {
     this.timeLtrSubscription.unsubscribe();
     this.chainTipSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
+    this.blockCounterSubscription.unsubscribe();
   }
 }