Refactored the "blockchain" into separate sub components.

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html

@@ -0,0 +1,45 @@
+<div class="modal-header">
+  <h4 class="modal-title">Fee distribution for block <a href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a></h4>
+  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <div>
+    <table class="table table-borderless table-sm">
+      <tr>
+        <th>Median fee:</th>
+        <td>~{{ block.medianFee | ceil }} sat/vB <span *ngIf="conversions">(~<span class="green-color">{{ conversions.USD * (block.medianFee/100000000)*250 | currency:'USD':'symbol':'1.2-2' }}</span>/tx)</span></td>
+        <th>Block size:</th>
+        <td>{{ block.size | bytes: 2 }}</td>
+      </tr>
+      <tr>
+        <th>Fee span:</th>
+        <td class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</td>
+        <th>Tx count:</th>
+        <td>{{ block.nTx }} transactions</td>
+      </tr>
+      <tr>
+        <th>Total fees:</th>
+        <td>{{ (block.fees - 12.5) | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * (block.fees - 12.5) | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+        <th>Block reward + fees:</th>
+        <td>{{ block.fees | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * block.fees | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+      </tr>
+    </table>
+  </div>
+
+  <hr>
+
+  <div style="height: 400px;" *ngIf="mempoolVsizeFeesData; else loadingFees">
+    <app-chartist 
+      [data]="mempoolVsizeFeesData"
+      [type]="'Bar'"
+      [options]="mempoolVsizeFeesOptions">
+    </app-chartist>
+  </div>
+  <ng-template #loadingFees>
+    <div class="text-center">
+      <div class="spinner-border text-light"></div>
+    </div>
+  </ng-template>
+</div>

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.scss

@@ -0,0 +1,7 @@
+.yellow-color { 
+  color: #ffd800;
+}
+
+.green-color {
+  color: #3bcc49;
+}

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ApiService } from '../../services/api.service';
+import { IBlock } from '../../blockchain/interfaces';
+import { MemPoolService } from '../../services/mem-pool.service';
+import * as Chartist from 'chartist';
+
+@Component({
+  selector: 'app-block-modal',
+  templateUrl: './block-modal.component.html',
+  styleUrls: ['./block-modal.component.scss']
+})
+export class BlockModalComponent implements OnInit {
+  @Input() block: IBlock;
+
+  mempoolVsizeFeesData: any;
+  mempoolVsizeFeesOptions: any;
+  conversions: any;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private apiService: ApiService,
+    private memPoolService: MemPoolService,
+  ) { }
+
+  ngOnInit() {
+
+    this.mempoolVsizeFeesOptions = {
+      showArea: false,
+      showLine: false,
+      fullWidth: false,
+      showPoint: false,
+      low: 0,
+      axisX: {
+        position: 'start',
+        showLabel: false,
+        offset: 0,
+        showGrid: false,
+      },
+      axisY: {
+        position: 'end',
+        scaleMinSpace: 40,
+        showGrid: false,
+      },
+      plugins: [
+        Chartist.plugins.tooltip({
+          tooltipOffset: {
+            x: 15,
+            y: 250
+          },
+          transformTooltipTextFnc: (value: number): any => {
+            return Math.ceil(value) + ' sat/vB';
+          },
+          anchorToPoint: false,
+        })
+      ]
+    };
+
+    this.memPoolService.conversions
+      .subscribe((conversions) => {
+        this.conversions = conversions;
+      });
+
+    this.apiService.listTransactionsForBlock$(this.block.height)
+      .subscribe((data) => {
+        this.mempoolVsizeFeesData = {
+          labels: data.map((x, i) => i),
+          series: [data.map((tx) => tx.fpv)]
+        };
+      });
+  }
+
+}