Transaction view.

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.scss

@@ -1,7 +1 @@
-.yellow-color { 
-  color: #ffd800;
-}
 
-.green-color {
-  color: #3bcc49;
-}

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

@@ -2,7 +2,8 @@
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div (click)="openBlockModal(block);" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
       <div class="block-height">
-        <a href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
+        <a *ngIf="!isEsploraEnabled" href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
+        <a *ngIf="isEsploraEnabled" [routerLink]="['/explorer/block/', block.hash]">#{{ block.height }}</a>
       </div>
       <div class="block-body">
         <div class="fees">
@@ -13,7 +14,7 @@
         <div class="block-size">{{ block.size | bytes: 2 }}</div>
         <div class="transaction-count">{{ block.nTx }} transactions</div>
         <br /><br />
-        <div class="time-difference">{{ block.time | timeSince }} ago</div>
+        <div class="time-difference">{{ block.time | timeSince : trigger }} ago</div>
       </div>
     </div>
   </div>

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

@@ -39,10 +39,6 @@
   margin-bottom: 2px;
 }
 
-.yellow-color { 
-  color: #ffd800;
-}
-
 .transaction-count {
   font-size: 12px;
 }

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

@@ -4,6 +4,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BlockModalComponent } from './block-modal/block-modal.component';
 import { MemPoolService } from '../services/mem-pool.service';
 import { Subscription } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-blockchain-blocks',
@@ -13,6 +14,9 @@ import { Subscription } from 'rxjs';
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   blocks: IBlock[] = [];
   blocksSubscription: Subscription;
+  interval: any;
+  trigger = 0;
+  isEsploraEnabled = !!environment.esplora;
 
   constructor(
     private modalService: NgbModal,
@@ -28,10 +32,13 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         this.blocks.unshift(block);
         this.blocks = this.blocks.slice(0, 8);
       });
+
+    this.interval = setInterval(() => this.trigger++, 10 * 1000);
   }
 
   ngOnDestroy() {
     this.blocksSubscription.unsubscribe();
+    clearInterval(this.interval);
   }
 
   trackByBlocksFn(index: number, item: IBlock) {