Various fixes and design updates.

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

@@ -33,7 +33,7 @@
               </tr>
               <tr>
                 <td>Status</td>
-                <td><button *ngIf="latestBlock" class="btn btn-sm btn-success">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</button></td>
+                <td><ng-template [ngIf]="latestBlock">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</ng-template></td>
               </tr>
             </tbody>
           </table>
@@ -49,6 +49,10 @@
                 <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 <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+              </tr>
             </tbody>
           </table>
         </div>

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

@@ -21,6 +21,8 @@ export class BlockComponent implements OnInit {
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
+  blockSubsidy = 50;
+  conversions: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -30,7 +32,7 @@ export class BlockComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
@@ -66,6 +68,17 @@ export class BlockComponent implements OnInit {
 
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
+
+    this.stateService.conversions$
+      .subscribe((conversions) => {
+        this.conversions = conversions;
+      });
+
+    let halvenings = Math.floor(this.block.height / 210000);
+    while (halvenings > 0) {
+      this.blockSubsidy = this.blockSubsidy / 2;
+      halvenings--;
+    }
   }
 
   getBlockTransactions(hash: string) {