From fb2c0345a7c3ad0339e9c175b11334de718cdf06 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 17 Feb 2022 22:57:10 +0900
Subject: [PATCH 1/2] Show miner tag under blocks in the mining dashboard

---
 .../blockchain-blocks.component.html          |  2 +-
 .../blockchain-blocks.component.scss          | 13 ++++++++++-
 .../blockchain-blocks.component.ts            | 23 +++++++++++++++----
 .../blockchain/blockchain.component.html      |  4 ++--
 .../blockchain/blockchain.component.scss      | 12 +---------
 .../blockchain/blockchain.component.ts        |  1 -
 6 files changed, 34 insertions(+), 21 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 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 @@
         </div>
         <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
       </div>
-    <div class="" *ngIf="showMiningInfo === true">
+    <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
       <a class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
         {{ block.extras.pool.name}}</a>
     </div>
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 @@
-<div class="text-center" class="blockchain-wrapper animate" #container>
+<div class="text-center" class="blockchain-wrapper" #container>
   <div class="position-container {{ network }}">
     <span>
       <app-mempool-blocks></app-mempool-blocks>
-      <app-blockchain-blocks [showMiningInfo]="showMiningInfo"></app-blockchain-blocks>
+      <app-blockchain-blocks></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>
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(

From 008a4b51cc137c15322a66cc92756bcd63cc0339 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 18 Feb 2022 22:25:31 +0900
Subject: [PATCH 2/2] Remove duplicated ChangeDetectorRef in blockchains blocks
 component

---
 .../blockchain-blocks/blockchain-blocks.component.html    | 8 ++++----
 .../blockchain-blocks/blockchain-blocks.component.ts      | 3 +--
 2 files changed, 5 insertions(+), 6 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 3c85787e7..516ad5ba6 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -21,10 +21,10 @@
         </div>
         <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
       </div>
-    <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
-      <a class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
-        {{ block.extras.pool.name}}</a>
-    </div>
+      <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
+        <a class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
+          {{ block.extras.pool.name}}</a>
+      </div>
     </div>
   </div>
 <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
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 42d045201..7a0123a78 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -47,13 +47,12 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     public stateService: StateService,
     private cd: ChangeDetectorRef,
     private location: Location,
-    private cdr: ChangeDetectorRef
   ) {
   }
 
   enabledMiningInfoIfNeeded(url) {
     this.showMiningInfo = url === '/mining';
-    this.cdr.detectChanges(); // Need to update the view asap
+    this.cd.markForCheck(); // Need to update the view asap
   }
 
   ngOnInit() {