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 1914b5d08..3c85787e7 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -21,7 +21,7 @@
-
+
{{ block.extras.pool.name}}
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 a20b1cb35..5a9a7ea18 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -129,4 +129,15 @@ position: relative; top: 15px; z-index: 101; -} \ No newline at end of file +} + +.animated { + transition: all 0.15s ease-in-out; +} +.show { + opacity: 1; +} +.hide { + opacity: 0; + pointer-events : none; +} 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 a8d055602..42d045201 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core'; +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; import { StateService } from 'src/app/services/state.service'; -import { Router } from '@angular/router'; import { specialBlocks } from 'src/app/app.constants'; import { BlockExtended } from 'src/app/interfaces/node-api.interface'; +import { Location } from '@angular/common'; +import { config } from 'process'; @Component({ selector: 'app-blockchain-blocks', @@ -12,7 +13,6 @@ import { BlockExtended } from 'src/app/interfaces/node-api.interface'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockchainBlocksComponent implements OnInit, OnDestroy { - @Input() showMiningInfo: boolean = false; specialBlocks = specialBlocks; network = ''; blocks: BlockExtended[] = []; @@ -32,6 +32,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy { arrowLeftPx = 30; blocksFilled = false; transition = '1s'; + showMiningInfo = false; gradientColors = { '': ['#9339f4', '#105fb0'], @@ -44,11 +45,23 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy { constructor( public stateService: StateService, - private router: Router, private cd: ChangeDetectorRef, - ) { } + private location: Location, + private cdr: ChangeDetectorRef + ) { + } + + enabledMiningInfoIfNeeded(url) { + this.showMiningInfo = url === '/mining'; + this.cdr.detectChanges(); // Need to update the view asap + } ngOnInit() { + if (['', 'testnet', 'signet'].includes(this.stateService.network)) { + this.enabledMiningInfoIfNeeded(this.location.path()); + this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url)); + } + if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { this.feeRounding = '1.0-1'; } diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index 19ee5676d..c49d08c5a 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -1,8 +1,8 @@ -
+
- +
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index a33fc58d2..6d415cd2a 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -59,14 +59,4 @@ width: 300px; left: -150px; top: 0px; -} - -.animate { - transition: all 1s ease-in-out; -} -.move-left { - transform: translate(-40%, 0); - @media (max-width: 767.98px) { - transform: translate(-85%, 0); - } -} +} \ No newline at end of file diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index b47eee833..5c00c5ef7 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -8,7 +8,6 @@ import { StateService } from 'src/app/services/state.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockchainComponent implements OnInit { - showMiningInfo: boolean = false; network: string; constructor(