Replace block size => block reward in the mining dashboard

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.reward" digitsInfo="1.2-2" [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>

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

@@ -12,7 +12,10 @@
             <div class="fee-span">
               {{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
             </div>
-            <div class="block-size" [innerHTML]="'&lrm;' + (projectedBlock.blockSize | bytes: 2)"></div>
+            <div *ngIf="showMiningInfo" class="block-size">
+              <app-amount [satoshis]="projectedBlock.totalFees + blockSubsidy * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+            </div>
+            <div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (projectedBlock.blockSize | bytes: 2)"></div>
             <div class="transaction-count">
               <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
               <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -7,6 +7,7 @@ import { take, map, switchMap } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 import { specialBlocks } from 'src/app/app.constants';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -32,6 +33,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   networkSubscription: Subscription;
   network = '';
   now = new Date().getTime();
+  showMiningInfo = false;
+  blockSubsidy = 50;
 
   blockWidth = 125;
   blockPadding = 30;
@@ -54,9 +57,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     public stateService: StateService,
     private cd: ChangeDetectorRef,
     private relativeUrlPipe: RelativeUrlPipe,
+    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';
     }
@@ -97,6 +111,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
             if (this.stateService.network === '') {
               block.blink = specialBlocks[block.height] ? true : false;
             }
+            this.setBlockSubsidy(block.height);
           });
 
           const stringifiedBlocks = JSON.stringify(mempoolBlocks);
@@ -197,6 +212,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     return block.index;
   }
 
+  setBlockSubsidy(blockHeight) {
+    if (!['', 'testnet', 'signet'].includes(this.stateService.network)) {
+      return;
+    }
+    this.blockSubsidy = 50;
+    let halvenings = Math.floor(blockHeight / 210000);
+    while (halvenings > 0) {
+      this.blockSubsidy = this.blockSubsidy / 2;
+      halvenings--;
+    }
+  }
+
   reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
     const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
     const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));