Transaction tracking revamped.

Blockchain block arrow.

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

@@ -1,10 +1,14 @@
 <div class="container">
 
-  <app-blockchain position="top"></app-blockchain>
+  <app-blockchain position="top" [markHeight]="tx?.status?.block_height"></app-blockchain>
 
-  <div class="clearfix"></div>
+  <div class="title-block">
+    <h1 style="float: left;">Transaction</h1>
+    <a [routerLink]="['/tx/', txId]" style="line-height: 55px; margin-left: 10px;">{{ txId }}</a>
+    <app-clipboard [text]="txId"></app-clipboard>
+  </div>
 
-  <h1>Transaction</h1>
+  <br>
 
   <ng-template [ngIf]="!isLoadingTx && !error">
 
@@ -51,19 +55,14 @@
         <table class="table table-borderless table-striped">
           <tbody>
             <tr>
-              <td>Transaction</td>
-              <td>
-                <a [routerLink]="['/tx/', txId]">{{ txId | shortenString }}</a>
-                <app-clipboard [text]="txId"></app-clipboard>
-              </td>
+              <td>Status</td>
               <td class="adjust-btn-padding">
                 <button type="button" class="btn btn-sm btn-danger">Unconfirmed</button>
               </td>
             </tr>
             <tr>
               <td>Fees</td>
-              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
-              <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
+              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span> {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
             </tr>
           </tbody>
         </table>

frontend/src/app/components/transaction/transaction.component.scss

@@ -10,3 +10,15 @@
 
   width: 40px;
 }
+
+.title-block {
+  color: #FFF;
+  padding-left: 10px;
+  padding-top: 13px;
+  padding-bottom: 3px;
+  border-top: 5px solid #FFF;
+}
+
+.title-block > h1 {
+  margin: 0;
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { WebsocketService } from '../../services/websocket.service';
   templateUrl: './transaction.component.html',
   styleUrls: ['./transaction.component.scss']
 })
-export class TransactionComponent implements OnInit {
+export class TransactionComponent implements OnInit, OnDestroy {
   tx: Transaction;
   txId: string;
   isLoadingTx = true;
@@ -51,7 +51,7 @@ export class TransactionComponent implements OnInit {
       window.scrollTo(0, 0);
 
       if (!tx.status.confirmed) {
-        this.websocketService.startTrackTx(tx.txid);
+        this.websocketService.startTrackTransaction(tx.txid);
       }
     },
     (error) => {
@@ -75,4 +75,8 @@ export class TransactionComponent implements OnInit {
         };
       });
   }
+
+  ngOnDestroy() {
+    this.websocketService.startTrackTransaction('stop');
+  }
 }