Basic address tracking.

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

@@ -40,7 +40,7 @@
 
     <br>
 
-    <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }} transactions</h2>
+    <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count + addedTransactions }} transactions</h2>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
 

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

@@ -1,28 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap } from 'rxjs/operators';
 import { Address, Transaction } from '../../interfaces/electrs.interface';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-address',
   templateUrl: './address.component.html',
   styleUrls: ['./address.component.scss']
 })
-export class AddressComponent implements OnInit {
+export class AddressComponent implements OnInit, OnDestroy {
   address: Address;
   addressString: string;
   isLoadingAddress = true;
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
+  addedTransactions = 0;
 
   constructor(
     private route: ActivatedRoute,
     private electrsApiService: ElectrsApiService,
+    private websocketService: WebsocketService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.error = undefined;
@@ -35,6 +42,7 @@ export class AddressComponent implements OnInit {
     )
     .subscribe((address) => {
       this.address = address;
+      this.websocketService.startTrackAddress(address.address);
       this.isLoadingAddress = false;
       document.body.scrollTo({ top: 0, behavior: 'smooth' });
       this.getAddressTransactions(address.address);
@@ -44,6 +52,28 @@ export class AddressComponent implements OnInit {
       this.error = error;
       this.isLoadingAddress = false;
     });
+
+    this.stateService.mempoolTransactions$
+      .subscribe((transaction) => {
+        this.transactions.unshift(transaction);
+        this.addedTransactions++;
+      });
+
+    this.stateService.blockTransactions$
+      .subscribe((transaction) => {
+        const tx = this.transactions.find((t) => t.txid === transaction.txid);
+        if (tx) {
+          tx.status = transaction.status;
+        }
+      });
+
+    this.stateService.isOffline$
+      .subscribe((state) => {
+        if (!state && this.transactions && this.transactions.length) {
+          this.isLoadingTransactions = true;
+          this.getAddressTransactions(this.address.address);
+        }
+      });
   }
 
   getAddressTransactions(address: string) {
@@ -62,4 +92,8 @@ export class AddressComponent implements OnInit {
         this.isLoadingTransactions = false;
       });
   }
+
+  ngOnDestroy() {
+    this.websocketService.startTrackAddress('stop');
+  }
 }