Refactord blockchain is rendering, block arrow location propagation and keynavigation.

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

@@ -1,9 +1,5 @@
 <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>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
   templateUrl: './mempool-block.component.html',
   styleUrls: ['./mempool-block.component.scss']
 })
-export class MempoolBlockComponent implements OnInit {
+export class MempoolBlockComponent implements OnInit, OnDestroy {
   mempoolBlockIndex: number;
   mempoolBlock: MempoolBlock;
 
@@ -26,6 +26,7 @@ export class MempoolBlockComponent implements OnInit {
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
+        this.stateService.markBlock$.next({ mempoolBlockIndex: this.mempoolBlockIndex });
         return this.stateService.mempoolBlocks$
           .pipe(
             map((mempoolBlocks) => mempoolBlocks[this.mempoolBlockIndex])
@@ -37,4 +38,8 @@ export class MempoolBlockComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.stateService.markBlock$.next({});
+  }
+
 }