Merge branch 'master' into regtest-1

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

@@ -13,7 +13,10 @@
         <div class="fee-span">
           {{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
+        <div *ngIf="showMiningInfo" class="block-size">
+          <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+        </div>
+        <div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
         <div class="transaction-count">
           <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
           <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
@@ -21,10 +24,10 @@
         </div>
         <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
       </div>
-    <div class="" *ngIf="showMiningInfo === true">
-      <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>

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'],
@@ -45,11 +46,22 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   constructor(
     public stateService: StateService,
-    private router: Router,
     private cd: ChangeDetectorRef,
-  ) { }
+    private location: Location,
+  ) {
+  }
+
+  enabledMiningInfoIfNeeded(url) {
+    this.showMiningInfo = url === '/mining';
+    this.cd.markForCheck(); // 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';
     }