Adding miner block reward and fee to block info.

backend/src/api/blocks.ts

@@ -55,7 +55,7 @@ class Blocks {
 
         const transactions: TransactionExtended[] = [];
 
-        for (let i = 1; i < txIds.length; i++) {
+        for (let i = 0; i < txIds.length; i++) {
           if (mempool[txIds[i]]) {
             transactions.push(mempool[txIds[i]]);
             found++;
@@ -71,6 +71,7 @@ class Blocks {
 
         console.log(`${found} of ${txIds.length} found in mempool. ${notFound} not found.`);
 
+        block.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
         transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
         block.medianFee = transactions.length ? this.median(transactions.map((tx) => tx.feePerVsize)) : 0;
         block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [0, 0];

backend/src/interfaces.ts

@@ -87,6 +87,7 @@ export interface Block {
 
   medianFee?: number;
   feeRange?: number[];
+  reward?: number;
 }
 
 export interface Address {

frontend/src/app/components/block/block.component.html

@@ -47,14 +47,28 @@
                 <td>Previous Block</td>
                 <td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td>
               </tr>
-              <tr>
-                <td>Block subsidy</td>
-                <td>{{ blockSubsidy | number: '1.2-2' }} BTC (<app-fiat [value]="blockSubsidy"></app-fiat>)</td>
-              </tr>
-              <tr>
-                <td>Status</td>
-                <td><ng-template [ngIf]="latestBlock">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</ng-template></td>
-              </tr>
+              <ng-template [ngIf]="fees" [ngIfElse]="loadingFees">
+                <tr>
+                  <td>Total fees</td>
+                  <td>{{ fees | number: '1.2-8' }} BTC (<app-fiat [value]="fees * 100000000"></app-fiat>)</td>
+                </tr>
+                <tr>
+                  <td>Reward + fees:</td>
+                  <td>
+                    {{ blockSubsidy + fees | number: '1.2-8' }} BTC (<app-fiat [value]="(blockSubsidy + fees) * 100000000"></app-fiat>)
+                  </td>
+                </tr>
+              </ng-template>
+              <ng-template #loadingFees>
+                <tr>
+                  <td>Total fees</td>
+                  <td><span class="skeleton-loader"></span></td>
+                </tr>
+                <tr>
+                  <td>Reward + fees:</td>
+                  <td><span class="skeleton-loader"></span></td>
+                </tr>
+              </ng-template>
             </tbody>
           </table>
         </div>

frontend/src/app/components/block/block.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap } from 'rxjs/operators';
-import { Block, Transaction } from '../../interfaces/electrs.interface';
+import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
 import { of } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from 'src/app/services/websocket.service';
@@ -21,7 +21,8 @@ export class BlockComponent implements OnInit {
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
-  blockSubsidy = 50;
+  blockSubsidy: number;
+  fees: number;
 
   constructor(
     private route: ActivatedRoute,
@@ -37,6 +38,7 @@ export class BlockComponent implements OnInit {
       switchMap((params: ParamMap) => {
         const blockHash: string = params.get('id') || '';
         this.error = undefined;
+        this.fees = undefined;
 
         if (history.state.data && history.state.data.blockHeight) {
           this.blockHeight = history.state.data.blockHeight;
@@ -59,6 +61,9 @@ export class BlockComponent implements OnInit {
       this.blockHeight = block.height;
       this.isLoadingBlock = false;
       this.setBlockSubsidy();
+      if (block.reward) {
+        this.fees = block.reward / 100000000;
+      }
       this.getBlockTransactions(block.id);
     },
     (error) => {
@@ -71,6 +76,7 @@ export class BlockComponent implements OnInit {
   }
 
   setBlockSubsidy() {
+    this.blockSubsidy = 50;
     let halvenings = Math.floor(this.block.height / 210000);
     while (halvenings > 0) {
       this.blockSubsidy = this.blockSubsidy / 2;
@@ -83,6 +89,9 @@ export class BlockComponent implements OnInit {
     this.transactions = null;
     this.electrsApiService.getBlockTransactions$(hash)
       .subscribe((transactions: any) => {
+        if (!this.fees) {
+          this.fees = transactions[0].vout.reduce((acc: number, curr: Vout) => acc + curr.value, 0) / 100000000 - this.blockSubsidy;
+        }
         this.transactions = transactions;
         this.isLoadingTransactions = false;
       });

frontend/src/app/interfaces/electrs.interface.ts

@@ -67,6 +67,7 @@ export interface Block {
 
   medianFee?: number;
   feeRange?: number[];
+  reward?: number;
 }
 
 export interface Address {