Data pipeline for projected mempool block overview

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

@@ -0,0 +1,3 @@
+<div class="mempool-block-overview">
+  <p *ngIf="mempoolBlock$ | async as mempoolBlock">{{ mempoolBlock.transactions.length }}</p>
+</div>

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

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit, OnDestroy,  OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { MempoolBlockWithTransactions } from 'src/app/interfaces/websocket.interface';
+import { Observable, Subscription } from 'rxjs';
+import { WebsocketService } from 'src/app/services/websocket.service';
+
+@Component({
+  selector: 'app-mempool-block-overview',
+  templateUrl: './mempool-block-overview.component.html',
+  styleUrls: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() index: number;
+
+  sub: Subscription;
+  mempoolBlock$: Observable<MempoolBlockWithTransactions>;
+
+  constructor(
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit(): void {
+    this.websocketService.startTrackMempoolBlock(this.index);
+    this.mempoolBlock$ = this.stateService.mempoolBlock$
+    this.sub = this.mempoolBlock$.subscribe((block) => {
+      this.updateBlock(block)
+    })
+  }
+
+  ngOnChanges(changes): void {
+    if (changes.index) {
+      this.websocketService.startTrackMempoolBlock(changes.index.currentValue);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+    this.websocketService.stopTrackMempoolBlock();
+  }
+
+  updateBlock(block: MempoolBlockWithTransactions): void {
+    
+  }
+}