Refactor. API explanations. UX revamp.

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

@@ -1,20 +1,14 @@
-<div *ngIf="isLoading" class="text-center">
-  <h3>Loading blocks...</h3>
+<div *ngIf="isLoading" class="loading-block">
+  <h3>Waiting for 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">
+  <div class="position-container" [ngStyle]="{'top': position === 'top' ? '100px' : 'calc(50% - 60px)'}">
     <app-mempool-blocks></app-mempool-blocks>
     <app-blockchain-blocks></app-blockchain-blocks>
 
     <div id="divider" *ngIf="!isLoading"></div>
   </div>
 
-</div>
+</div>

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

@@ -23,8 +23,6 @@
 .position-container {
   position: absolute;
   left: 50%;
-  /* top: calc(50% - 60px); */
-  top: 180px;
 }
 
 @media (max-width: 767.98px) {
@@ -48,3 +46,11 @@
   z-index: 100;
   position: relative;
 }
+
+.loading-block {
+  position: absolute;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+  top: 80px;
+}

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

@@ -1,8 +1,6 @@
-import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 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({
@@ -11,6 +9,8 @@ import { StateService } from 'src/app/services/state.service';
   styleUrls: ['./blockchain.component.scss']
 })
 export class BlockchainComponent implements OnInit, OnDestroy {
+  @Input() position: 'middle' | 'top' = 'middle';
+
   txTrackingSubscription: Subscription;
   blocksSubscription: Subscription;
 
@@ -19,59 +19,10 @@ export class BlockchainComponent implements OnInit, OnDestroy {
   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)
@@ -81,6 +32,5 @@ export class BlockchainComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.blocksSubscription.unsubscribe();
-    // this.txTrackingSubscription.unsubscribe();
   }
 }