New base code for mempool blockchain explorerer

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

@@ -0,0 +1,20 @@
+<div *ngIf="isLoading" class="text-center">
+  <h3>Loading blocks...</h3>
+  <br>
+  <div class="spinner-border text-light"></div>
+</div>
+<div *ngIf="!isLoading && txTrackingLoading" class="text-center black-background">
+  <h3>Locating transaction...</h3>
+</div>
+<div *ngIf="txShowTxNotFound" class="text-center black-background">
+  <h3>Transaction not found!</h3>
+</div>
+<div class="text-center" class="blockchain-wrapper">
+  <div class="position-container">
+    <app-mempool-blocks></app-mempool-blocks>
+    <app-blockchain-blocks></app-blockchain-blocks>
+
+    <div id="divider" *ngIf="!isLoading"></div>
+  </div>
+
+</div>

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -0,0 +1,50 @@
+#divider {
+  width: 3px;
+  height: 200px;
+  left: 0;
+  top: -50px;
+  background-image: url('/assets/divider-new.png');
+  background-repeat: repeat-y;
+  position: absolute;
+  margin-bottom: 120px;
+}
+
+#divider > img {
+  position: absolute;
+  left: -100px;
+  top: -28px;
+}
+
+.blockchain-wrapper {
+  overflow: hidden;
+  height: 250px;
+}
+
+.position-container {
+  position: absolute;
+  left: 50%;
+  /* top: calc(50% - 60px); */
+  top: 180px;
+}
+
+@media (max-width: 767.98px) {
+  #divider {
+    top: -50px;
+    height: 1300px;
+  }
+  .position-container {
+    top: 100px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .position-container {
+    transform: scale(1.3);
+  }
+}
+
+.black-background {
+  background-color: #11131f;
+  z-index: 100;
+  position: relative;
+}

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

@@ -0,0 +1,86 @@
+import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
+
+@Component({
+  selector: 'app-blockchain',
+  templateUrl: './blockchain.component.html',
+  styleUrls: ['./blockchain.component.scss']
+})
+export class BlockchainComponent implements OnInit, OnDestroy {
+  txTrackingSubscription: Subscription;
+  blocksSubscription: Subscription;
+
+  txTrackingLoading = false;
+  txShowTxNotFound = false;
+  isLoading = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private websocketService: WebsocketService,
+    private stateService: StateService,
+  ) {}
+
+  ngOnInit() {
+    /*
+    this.apiService.webSocketWant(['stats', 'blocks', 'mempool-blocks']);
+
+    this.txTrackingSubscription = this.memPoolService.txTracking$
+      .subscribe((response: ITxTracking) => {
+        this.txTrackingLoading = false;
+        this.txShowTxNotFound = response.notFound;
+        if (this.txShowTxNotFound) {
+          setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
+        }
+      });
+    */
+
+    /*
+    this.route.paramMap
+      .subscribe((params: ParamMap) => {
+        if (this.memPoolService.txTracking$.value.enabled) {
+          return;
+        }
+
+        const txId: string | null = params.get('id');
+        if (!txId) {
+          return;
+        }
+        this.txTrackingLoading = true;
+        this.apiService.webSocketStartTrackTx(txId);
+      });
+
+      */
+
+    /*
+    this.memPoolService.txIdSearch$
+      .subscribe((txId) => {
+        if (txId) {
+
+          if (this.memPoolService.txTracking$.value.enabled
+            && this.memPoolService.txTracking$.value.tx
+            && this.memPoolService.txTracking$.value.tx.txid === txId) {
+            return;
+          }
+          console.log('enabling tracking loading from idSearch!');
+          this.txTrackingLoading = true;
+          this.websocketService.startTrackTx(txId);
+        }
+      });
+      */
+
+    this.blocksSubscription = this.stateService.blocks$
+      .pipe(
+        take(1)
+      )
+      .subscribe((block) => this.isLoading = false);
+  }
+
+  ngOnDestroy() {
+    this.blocksSubscription.unsubscribe();
+    // this.txTrackingSubscription.unsubscribe();
+  }
+}