Show miner tag under blocks in the mining dashboard

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>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -129,4 +129,15 @@
   position: relative;
   top: 15px;
   z-index: 101;
-}
+}
+
+.animated {
+  transition: all 0.15s ease-in-out;
+}
+.show {
+  opacity: 1;
+}
+.hide {
+  opacity: 0;
+  pointer-events : none;
+}

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';
     }

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>

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);
-	}
-}

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(