Navigate between blocks using keyboard arrows.

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

@@ -18,5 +18,5 @@
       </div>
     </div>
   </div>
-  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px' }"></div>
+  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
 </div>

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

@@ -46,8 +46,8 @@
 
 .fees {
   font-size: 14px;
-  margin-top: 10px;
-  margin-bottom: 8px;
+  margin-top: 12px;
+  margin-bottom: 6px;
 }
 
 .transaction-count {
@@ -97,7 +97,6 @@
   position: relative;
   right: 75px;
   top: 140px;
-  transition: 1s;
   width: 0; 
   height: 0; 
   border-left: 35px solid transparent;

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

@@ -1,7 +1,8 @@
-import { Component, OnInit, OnDestroy, Input, EventEmitter, Output, OnChanges, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, OnChanges, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -18,11 +19,13 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   arrowVisible = false;
 
   rightPosition = 0;
+  transition = '1s';
 
   @Input() txFeePerVSize: number;
   @Input() markIndex: number;
 
   constructor(
+    private router: Router,
     private stateService: StateService,
   ) { }
 
@@ -43,6 +46,29 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvents(event: KeyboardEvent) {
+    if (this.markIndex === -1) {
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      if (this.mempoolBlocks[this.markIndex - 1]) {
+        this.router.navigate(['/mempool-block/', this.markIndex - 1]);
+      } else {
+        this.stateService.blocks$
+          .subscribe((block) => {
+            if (this.stateService.latestBlockHeight === block.height) {
+              this.router.navigate(['/block/', block.id], { state: { data: { block } }});
+            }
+          });
+      }
+    } else if (event.key === 'ArrowLeft') {
+      if (this.mempoolBlocks[this.markIndex + 1]) {
+        this.router.navigate(['/mempool-block/', this.markIndex + 1]);
+      }
+    }
+  }
+
   ngOnChanges() {
     this.calculateTransactionPosition();
   }
@@ -95,8 +121,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
       this.arrowVisible = false;
       return;
     } else if (this.markIndex > -1) {
+      this.transition = 'inherit';
       this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
       this.arrowVisible = true;
+      setTimeout(() => this.transition = '1s');
       return;
     }