Replace by fee storage

fixes #1222

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

@@ -3,13 +3,13 @@
   <div class="title-block">
     <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
       <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
-      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction }">
+      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction.size ? rbfTransaction : null }">
         <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
         <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
       </a>
     </div>
 
-    <ng-container>
+    <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
       <h1 i18n="shared.transaction">Transaction</h1>
 
       <span class="tx-link float-left">

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

@@ -37,6 +37,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
   transactionTime = -1;
   subscription: Subscription;
   fetchCpfpSubscription: Subscription;
+  txReplacedSubscription: Subscription;
+  blocksSubscription: Subscription;
   rbfTransaction: undefined | Transaction;
   cpfpInfo: CpfpInfo | null;
   showCpfpDetails = false;
@@ -217,7 +219,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
         }
       );
 
-    this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
+    this.blocksSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
       this.latestBlock = block;
 
       if (txConfirmed && this.tx) {
@@ -232,9 +234,13 @@ export class TransactionComponent implements OnInit, OnDestroy {
       }
     });
 
-    this.stateService.txReplaced$.subscribe(
-      (rbfTransaction) => (this.rbfTransaction = rbfTransaction)
-    );
+    this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
+      if (!rbfTransaction.size) {
+        this.error = new Error();
+        this.waitingForTransaction = false;
+      }
+      this.rbfTransaction = rbfTransaction;
+    });
   }
 
   handleLoadElectrsTransactionError(error: any): Observable<any> {
@@ -302,6 +308,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
     this.fetchCpfpSubscription.unsubscribe();
+    this.txReplacedSubscription.unsubscribe();
+    this.blocksSubscription.unsubscribe();
     this.leaveTransaction();
   }
 }

frontend/src/app/interfaces/websocket.interface.ts

@@ -15,7 +15,8 @@ export interface WebsocketResponse {
   action?: string;
   data?: string[];
   tx?: Transaction;
-  rbfTransaction?: Transaction;
+  rbfTransaction?: ReplacedTransaction;
+  txReplaced?: ReplacedTransaction;
   utxoSpent?: object;
   transactions?: TransactionStripped[];
   loadingIndicators?: ILoadingIndicators;
@@ -27,6 +28,9 @@ export interface WebsocketResponse {
   'track-bisq-market'?: string;
 }
 
+export interface ReplacedTransaction extends Transaction {
+  txid: string;
+}
 export interface MempoolBlock {
   blink?: boolean;
   height?: number;

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

@@ -1,7 +1,7 @@
 import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
 import { Transaction } from '../interfaces/electrs.interface';
-import { IBackendInfo, MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
+import { IBackendInfo, MempoolBlock, MempoolInfo, ReplacedTransaction, TransactionStripped } from '../interfaces/websocket.interface';
 import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
@@ -80,7 +80,7 @@ export class StateService {
   bsqPrice$ = new ReplaySubject<number>(1);
   mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
-  txReplaced$ = new Subject<Transaction>();
+  txReplaced$ = new Subject<ReplacedTransaction>();
   utxoSpent$ = new Subject<object>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();

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

@@ -239,6 +239,10 @@ export class WebsocketService {
       this.stateService.txReplaced$.next(response.rbfTransaction);
     }
 
+    if (response.txReplaced) {
+      this.stateService.txReplaced$.next(response.txReplaced);
+    }
+
     if (response['mempool-blocks']) {
       this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
     }