Adding "mempool block" details. Work in progress!

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

@@ -0,0 +1,54 @@
+<div class="container-xl" *ngIf="mempoolBlock">
+
+  <div style="position: relative;">
+    <app-blockchain position="top" [markMempoolBlockIndex]="mempoolBlockIndex"></app-blockchain>
+  </div>
+
+  <div class="title-block">
+    <h1>Mempool block</h1>
+  </div>
+
+  <br>
+
+  <div class="box">
+    <div class="row">
+      <div class="col-sm">
+        <table class="table table-borderless table-striped">
+          <tbody>
+            <tr>
+              <td>Median fee</td>
+              <td>~{{ mempoolBlock.medianFee | ceil }} sats/vB (<app-fiat [value]="mempoolBlock.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
+            </tr>
+            <tr>
+              <td>Fee span</td>
+              <td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | ceil }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | ceil }} sat/vB</span></td>
+            </tr>
+            <tr>
+              <td>Total fees</td>
+              <td>{{ mempoolBlock.totalFees / 100000000 | number : '1.2-2' }} BTC (<app-fiat [value]="mempoolBlock.totalFees" digitsInfo="1.0-0"></app-fiat>)</td>
+            </tr>
+            <tr>
+              <td>Transactions</td>
+              <td>{{ mempoolBlock.nTx }}</td>
+            </tr>
+            <tr>
+              <td>Filled</td>
+              <td>
+                <div class="progress position-relative">
+                  <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
+                  <div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="col-sm">
+        <app-fee-distribution-graph [feeRange]="mempoolBlock.feeRange"></app-fee-distribution-graph>
+      </div>
+    </div>
+  </div>
+
+  <br>
+
+</div>

frontend/src/app/components/mempool-block/mempool-block.component.scss

@@ -0,0 +1,25 @@
+.progress-mempool {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.progress-text {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.title-block {
+  color: #FFF;
+  padding-left: 10px;
+  padding-top: 20px;
+  padding-bottom: 3px;
+  border-top: 5px solid #FFF;
+}
+
+.title-block > h1 {
+  margin: 0;
+}

frontend/src/app/components/mempool-block/mempool-block.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MempoolBlockComponent } from './mempool-block.component';
+
+describe('MempoolBlockComponent', () => {
+  let component: MempoolBlockComponent;
+  let fixture: ComponentFixture<MempoolBlockComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MempoolBlockComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MempoolBlockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { switchMap, map } from 'rxjs/operators';
+import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
+import { WebsocketService } from 'src/app/services/websocket.service';
+
+@Component({
+  selector: 'app-mempool-block',
+  templateUrl: './mempool-block.component.html',
+  styleUrls: ['./mempool-block.component.scss']
+})
+export class MempoolBlockComponent implements OnInit {
+  mempoolBlockIndex: number;
+  mempoolBlock: MempoolBlock;
+
+  constructor(
+    private route: ActivatedRoute,
+    private stateService: StateService,
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+
+    this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
+        return this.stateService.mempoolBlocks$
+          .pipe(
+            map((mempoolBlocks) => mempoolBlocks[this.mempoolBlockIndex])
+          );
+      })
+    )
+    .subscribe((mempoolBlock) => {
+      this.mempoolBlock = mempoolBlock;
+    });
+  }
+
+}