Added first seen on mempool transactions.

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

@@ -79,12 +79,6 @@
       </div>
     </div>
 
-    <br>
-
-    <div class="text-center">
-      <div class="spinner-border"></div>
-      <br><br>
-    </div>
   </ng-template>
 
   <ng-template [ngIf]="error">

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

@@ -6,6 +6,7 @@ import { Address, Transaction } from '../../interfaces/electrs.interface';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { AudioService } from 'src/app/services/audio.service';
+import { ApiService } from 'src/app/services/api.service';
 
 @Component({
   selector: 'app-address',
@@ -17,9 +18,11 @@ export class AddressComponent implements OnInit, OnDestroy {
   addressString: string;
   isLoadingAddress = true;
   transactions: Transaction[];
+  tempTransactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
 
+
   txCount = 0;
   receieved = 0;
   sent = 0;
@@ -30,6 +33,7 @@ export class AddressComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private stateService: StateService,
     private audioService: AudioService,
+    private apiService: ApiService,
   ) { }
 
   ngOnInit() {
@@ -94,12 +98,31 @@ export class AddressComponent implements OnInit, OnDestroy {
 
   loadAddress(addressStr?: string) {
     this.electrsApiService.getAddress$(addressStr)
-      .subscribe((address) => {
-        this.address = address;
-        this.updateChainStats();
-        this.websocketService.startTrackAddress(address.address);
-        this.isLoadingAddress = false;
-        this.reloadAddressTransactions(address.address);
+      .pipe(
+        switchMap((address) => {
+          this.address = address;
+          this.updateChainStats();
+          this.websocketService.startTrackAddress(address.address);
+          this.isLoadingAddress = false;
+          this.isLoadingTransactions = true;
+          return this.electrsApiService.getAddressTransactions$(address.address);
+        }),
+        switchMap((transactions) => {
+          this.tempTransactions = transactions;
+          const fetchTxs = transactions.map((t) => t.txid);
+          return this.apiService.getTransactionTimes$(fetchTxs);
+        })
+      )
+      .subscribe((times) => {
+        times.forEach((time, index) => {
+          this.tempTransactions[index].firstSeen = time;
+        });
+        this.tempTransactions.sort((a, b) => {
+          return b.status.block_time - a.status.block_time || b.firstSeen - a.firstSeen;
+        });
+
+        this.transactions = this.tempTransactions;
+        this.isLoadingTransactions = false;
       },
       (error) => {
         console.log(error);
@@ -114,16 +137,6 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
   }
 
-
-  reloadAddressTransactions(address: string) {
-    this.isLoadingTransactions = true;
-    this.electrsApiService.getAddressTransactions$(address)
-      .subscribe((transactions: any) => {
-        this.transactions = transactions;
-        this.isLoadingTransactions = false;
-      });
-  }
-
   loadMore() {
     this.isLoadingTransactions = true;
     this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.transactions[this.transactions.length - 1].txid)