Transaction view.

frontend/src/app/tx-bubble/tx-bubble.component.html

@@ -3,7 +3,10 @@
       <table style="width: 100%;">
         <tr>
             <td class="text-left"><b>Transaction hash</b></td>
-            <td class="text-right"><a href="https://www.blockstream.info/tx/{{ tx?.txid }}" target="_blank">{{ txIdShort }}</a></td>
+            <td class="text-right">
+              <a *ngIf="!isEsploraEnabled" href="https://www.blockstream.info/tx/{{ tx?.txid }}" target="_blank">{{ txIdShort }}</a>
+              <a *ngIf="isEsploraEnabled" [routerLink]="['/explorer/tx/', tx?.txid]">{{ txIdShort }}</a>
+            </td>
         </tr>
         <tr>
             <td class="text-left"><b>Fee:</b></td>

frontend/src/app/tx-bubble/tx-bubble.component.scss

@@ -63,7 +63,3 @@
 .txBubble .arrow-top-left.txBubbleText::after {
   left: 20%;
 }
-
-.green-color {
-  color: #3bcc49;
-}

frontend/src/app/tx-bubble/tx-bubble.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ITransaction, IProjectedBlock } from '../blockchain/interfaces';
 import { Subscription } from 'rxjs';
 import { ITxTracking, MemPoolService } from '../services/mem-pool.service';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-tx-bubble',
@@ -35,6 +36,8 @@ export class TxBubbleComponent implements OnInit, OnDestroy {
   txTrackingTx: ITransaction | null = null;
   txShowTxNotFound = false;
 
+  isEsploraEnabled = !!environment.esplora;
+
   @HostListener('window:resize', ['$event'])
   onResize(event: Event) {
     this.moveTxBubbleToPosition();