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 @@ -
-
+
+
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..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; + showMiningInfo$: BehaviorSubject = new BehaviorSubject(false); blockStyles = []; emptyBlockStyles = []; interval: any; @@ -54,7 +55,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { arrowLeftPx = 30; blocksFilled = false; arrowTransition = '1s'; - showMiningInfo = false; timeLtrSubscription: Subscription; timeLtr: boolean; @@ -80,8 +80,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 +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.showMiningInfo$ = this.stateService.showMiningInfo$; } this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { 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; fiatCurrency$: BehaviorSubject; rateUnits$: BehaviorSubject; + showMiningInfo$: BehaviorSubject = new BehaviorSubject(false); searchFocus$: Subject = new Subject(); menuOpen$: BehaviorSubject = new BehaviorSubject(false);