Navigate between blocks using keyboard arrows.

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

@@ -46,7 +46,7 @@
             <tbody>
               <tr>
                 <td class="mobile-width">Hash</td>
-                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 16 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
+                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
               </tr>
               <tr *ngIf="block.medianFee !== undefined">
                 <td>Median fee</td>

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

@@ -16,5 +16,5 @@
       </div>
     </div>
   </div>
-  <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
+  <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>

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

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

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

@@ -1,7 +1,8 @@
-import { Component, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, OnChanges, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-blockchain-blocks',
@@ -18,8 +19,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   arrowVisible = false;
   arrowLeftPx = 30;
 
+  transition = '1s';
+
   constructor(
     private stateService: StateService,
+    private router: Router,
   ) { }
 
   ngOnInit() {
@@ -31,12 +35,12 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
         this.blocks.unshift(block);
         this.blocks = this.blocks.slice(0, 8);
 
-        this.moveArrowToPosition();
+        this.moveArrowToPosition(true);
       });
   }
 
   ngOnChanges() {
-    this.moveArrowToPosition();
+    this.moveArrowToPosition(false);
   }
 
   ngOnDestroy() {
@@ -44,15 +48,41 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     clearInterval(this.interval);
   }
 
-  moveArrowToPosition() {
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvents(event: KeyboardEvent) {
+    if (!this.markHeight) {
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+      if (this.blocks[blockindex + 1]) {
+        this.router.navigate(['/block/', this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
+      }
+    } else if (event.key === 'ArrowLeft') {
+      const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+      if (blockindex === 0) {
+        this.router.navigate(['/mempool-block/', '0']);
+      } else {
+        this.router.navigate(['/block/', this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
+      }
+    }
+  }
+
+  moveArrowToPosition(animate: boolean) {
     if (!this.markHeight) {
       this.arrowVisible = false;
       return;
     }
     const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
     if (blockindex !== -1) {
+      if (!animate) {
+        this.transition = 'inherit';
+      }
       this.arrowVisible = true;
       this.arrowLeftPx = blockindex * 155 + 30;
+      if (!animate) {
+        setTimeout(() => this.transition = '1s');
+      }
     }
   }
 

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

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { StateService } from 'src/app/services/state.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-blockchain',
@@ -23,6 +24,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
 
   constructor(
     private stateService: StateService,
+    private router: Router,
   ) {}
 
   ngOnInit() {
@@ -30,7 +32,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
       .pipe(
         take(1)
       )
-      .subscribe((block) => this.isLoading = false);
+      .subscribe(() => this.isLoading = false);
   }
 
   ngOnDestroy() {

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-top: 12px;
-  margin-bottom: 8px;
+  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;
     }