From 22d9a1cb8b6ea78cf7e439746ebde380ff1b888e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 27 Mar 2024 19:52:57 +0900
Subject: [PATCH 1/2] Keep block fees on infinite blockchain when leaving
 mining dashboard

---
 .../blockchain-blocks.component.ts                  | 13 +++++++++++--
 .../mempool-blocks/mempool-blocks.component.ts      | 13 ++++++-------
 frontend/src/app/services/state.service.ts          |  1 +
 3 files changed, 18 insertions(+), 9 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 760e9261d..e81e97acc 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -55,6 +55,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   blocksFilled = false;
   arrowTransition = '1s';
   showMiningInfo = false;
+  showMiningInfoSubscription: Subscription;
   timeLtrSubscription: Subscription;
   timeLtr: boolean;
 
@@ -80,8 +81,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   enabledMiningInfoIfNeeded(url) {
-    this.showMiningInfo = url.includes('/mining') || url.includes('/acceleration');
-    this.cd.markForCheck(); // Need to update the view asap
+    const urlParts = url.split('/');
+    const onDashboard = ['','testnet','signet','mining','acceleration'].includes(urlParts[urlParts.length - 1]);
+    if (onDashboard) { // Only update showMiningInfo if we are on the main, mining or acceleration dashboards
+      this.stateService.showMiningInfo$.next(url.includes('/mining') || url.includes('/acceleration'));
+    }
   }
 
   ngOnInit() {
@@ -90,6 +94,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
       this.enabledMiningInfoIfNeeded(this.location.path());
       this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
+      this.showMiningInfoSubscription = this.stateService.showMiningInfo$.subscribe((showMiningInfo) => {
+        this.showMiningInfo = showMiningInfo;
+        this.cd.markForCheck();
+      });
     }
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -202,6 +210,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
+    this.showMiningInfoSubscription.unsubscribe();
     clearInterval(this.interval);
   }
 
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 111491f94..016798777 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -60,6 +60,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   showMiningInfo = false;
   timeLtrSubscription: Subscription;
   timeLtr: boolean;
+  showMiningInfoSubscription: Subscription;
   animateEntry: boolean = false;
 
   blockOffset: number = 155;
@@ -89,11 +90,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     private location: Location,
   ) { }
 
-  enabledMiningInfoIfNeeded(url) {
-    this.showMiningInfo = url.includes('/mining') || url.includes('/acceleration');
-    this.cd.markForCheck(); // Need to update the view asap
-  }
-
   ngOnInit() {
     this.chainTip = this.stateService.latestBlockHeight;
 
@@ -102,8 +98,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.widthChange.emit(this.mempoolWidth);
 
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
-      this.enabledMiningInfoIfNeeded(this.location.path());
-      this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
+      this.showMiningInfoSubscription = this.stateService.showMiningInfo$.subscribe((showMiningInfo) => {
+        this.showMiningInfo = showMiningInfo;
+        this.cd.markForCheck();
+      });
     }
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -269,6 +267,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.chainTipSubscription.unsubscribe();
     this.keySubscription.unsubscribe();
     this.isTabHiddenSubscription.unsubscribe();
+    this.showMiningInfoSubscription.unsubscribe();
     clearTimeout(this.resetTransitionTimeout);
   }
 
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 9a591452e..f9de61b69 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -151,6 +151,7 @@ export class StateService {
   hideAudit: BehaviorSubject<boolean>;
   fiatCurrency$: BehaviorSubject<string>;
   rateUnits$: BehaviorSubject<string>;
+  showMiningInfo$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   searchFocus$: Subject<boolean> = new Subject<boolean>();
   menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);

From 66309813d5aef7a413dbcb8fda4d2b4f18c0ed1c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 29 Mar 2024 16:30:55 +0900
Subject: [PATCH 2/2] Changing to async pipe

---
 .../blockchain-blocks.component.html                  |  6 ++++--
 .../blockchain-blocks/blockchain-blocks.component.ts  | 11 +++--------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 2224ec0bf..ac29524bb 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -40,12 +40,14 @@
                 <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
-            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo$ | async; else noMiningInfo"
               class="block-size">
               <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
             </div>
-            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
+            <ng-template #noMiningInfo>
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'"
               class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
+            </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
               <ng-container
                 *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
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 e81e97acc..02591f657 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 import { BlockExtended } from '../../interfaces/node-api.interface';
@@ -45,6 +45,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   markBlockSubscription: Subscription;
   txConfirmedSubscription: Subscription;
   loadingBlocks$: Observable<boolean>;
+  showMiningInfo$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   blockStyles = [];
   emptyBlockStyles = [];
   interval: any;
@@ -54,8 +55,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   arrowLeftPx = 30;
   blocksFilled = false;
   arrowTransition = '1s';
-  showMiningInfo = false;
-  showMiningInfoSubscription: Subscription;
   timeLtrSubscription: Subscription;
   timeLtr: boolean;
 
@@ -94,10 +93,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
       this.enabledMiningInfoIfNeeded(this.location.path());
       this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
-      this.showMiningInfoSubscription = this.stateService.showMiningInfo$.subscribe((showMiningInfo) => {
-        this.showMiningInfo = showMiningInfo;
-        this.cd.markForCheck();
-      });
+      this.showMiningInfo$ = this.stateService.showMiningInfo$;
     }
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -210,7 +206,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
-    this.showMiningInfoSubscription.unsubscribe();
     clearInterval(this.interval);
   }