Notify address page of removed transactions

backend/src/api/websocket-handler.ts

@@ -486,6 +486,7 @@ class WebsocketHandler {
 
     // pre-compute address transactions
     const addressCache = this.makeAddressCache(newTransactions);
+    const removedAddressCache = this.makeAddressCache(deletedTransactions);
 
     this.wss.clients.forEach(async (client) => {
       if (client.readyState !== WebSocket.OPEN) {
@@ -526,11 +527,15 @@ class WebsocketHandler {
       }
 
       if (client['track-address']) {
-        const foundTransactions = Array.from(addressCache[client['track-address']]?.values() || []);
+        const newTransactions = Array.from(addressCache[client['track-address']]?.values() || []);
+        const removedTransactions = Array.from(removedAddressCache[client['track-address']]?.values() || []);
         // txs may be missing prevouts in non-esplora backends
         // so fetch the full transactions now
-        const fullTransactions = (config.MEMPOOL.BACKEND !== 'esplora') ? await this.getFullTransactions(foundTransactions) : foundTransactions;
+        const fullTransactions = (config.MEMPOOL.BACKEND !== 'esplora') ? await this.getFullTransactions(newTransactions) : newTransactions;
 
+        if (removedTransactions.length) {
+          response['address-removed-transactions'] = JSON.stringify(removedTransactions);
+        }
         if (fullTransactions.length) {
           response['address-transactions'] = JSON.stringify(fullTransactions);
         }

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

@@ -174,6 +174,11 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.addTransaction(tx);
       });
 
+    this.stateService.mempoolRemovedTransactions$
+      .subscribe(tx => {
+        this.removeTransaction(tx);
+      });
+
     this.stateService.blockTransactions$
       .subscribe((transaction) => {
         const tx = this.transactions.find((t) => t.txid === transaction.txid);
@@ -222,6 +227,30 @@ export class AddressComponent implements OnInit, OnDestroy {
     return true;
   }
 
+  removeTransaction(transaction: Transaction): boolean {
+    const index = this.transactions.findIndex(((tx) => tx.txid === transaction.txid));
+    if (index === -1) {
+      return false;
+    }
+
+    this.transactions.splice(index, 1);
+    this.transactions = this.transactions.slice();
+    this.txCount--;
+
+    transaction.vin.forEach((vin) => {
+      if (vin?.prevout?.scriptpubkey_address === this.address.address) {
+        this.sent -= vin.prevout.value;
+      }
+    });
+    transaction.vout.forEach((vout) => {
+      if (vout?.scriptpubkey_address === this.address.address) {
+        this.received -= vout.value;
+      }
+    });
+
+    return true;
+  }
+
   loadMore() {
     if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) {
       return;

frontend/src/app/services/state.service.ts

@@ -117,6 +117,7 @@ export class StateService {
   difficultyAdjustment$ = new ReplaySubject<DifficultyAdjustment>(1);
   mempoolTransactions$ = new Subject<Transaction>();
   mempoolTxPosition$ = new Subject<{ txid: string, position: MempoolPosition, cpfp: CpfpInfo | null}>();
+  mempoolRemovedTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();
   isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
   isLoadingMempool$ = new BehaviorSubject<boolean>(true);

frontend/src/app/services/websocket.service.ts

@@ -358,6 +358,12 @@ export class WebsocketService {
       });
     }
 
+    if (response['address-removed-transactions']) {
+      response['address-removed-transactions'].forEach((addressTransaction: Transaction) => {
+        this.stateService.mempoolRemovedTransactions$.next(addressTransaction);
+      });
+    }
+
     if (response['block-transactions']) {
       response['block-transactions'].forEach((addressTransaction: Transaction) => {
         this.stateService.blockTransactions$.next(addressTransaction);