Added first seen on mempool transactions.

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

@@ -53,6 +53,18 @@
 
         <table class="table table-borderless table-striped">
           <tbody>
+            <ng-template [ngIf]="transactionTime !== 0">
+              <tr *ngIf="transactionTime === -1; else firstSeenTmpl">
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <ng-template #firstSeenTmpl>
+                <tr>
+                  <td>First seen</td>
+                  <td><app-time-since [time]="transactionTime"></app-time-since> ago</td>
+                </tr>
+              </ng-template>
+            </ng-template>
             <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>

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

@@ -7,6 +7,7 @@ import { of } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
+import { ApiService } from 'src/app/services/api.service';
 
 @Component({
   selector: 'app-transaction',
@@ -20,6 +21,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   conversions: any;
   error: any = undefined;
   latestBlock: Block;
+  transactionTime = -1;
 
   rightPosition = 0;
   blockDepth = 0;
@@ -30,6 +32,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
     private stateService: StateService,
     private websocketService: WebsocketService,
     private audioService: AudioService,
+    private apiService: ApiService,
   ) { }
 
   ngOnInit() {
@@ -55,6 +58,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
       if (!tx.status.confirmed) {
         this.websocketService.startTrackTransaction(tx.txid);
       }
+
+      this.getTransactionTime();
     },
     (error) => {
       this.error = error;
@@ -79,6 +84,13 @@ export class TransactionComponent implements OnInit, OnDestroy {
       });
   }
 
+  getTransactionTime() {
+    this.apiService.getTransactionTimes$([this.tx.txid])
+      .subscribe((transactionTimes) => {
+        this.transactionTime = transactionTimes[0];
+      });
+  }
+
   ngOnDestroy() {
     this.websocketService.startTrackTransaction('stop');
   }