Detect RBF-transactions and offer to track them.

fixes #78

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

@@ -1,6 +1,14 @@
 <div class="container-xl">
 
   <div class="title-block">
+    <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
+      This transaction has been replaced by:
+      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction }">
+        <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
+        <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
+      </a>
+    </div>
+  
     <h1 class="float-left mr-3 mb-md-3">Transaction</h1>
 
     <ng-template [ngIf]="tx?.status?.confirmed">

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

@@ -36,6 +36,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
     potentialP2shGains: 0,
   };
   isRbfTransaction: boolean;
+  rbfTransaction: undefined | Transaction;
 
   constructor(
     private route: ActivatedRoute,
@@ -126,6 +127,9 @@ export class TransactionComponent implements OnInit, OnDestroy {
         this.audioService.playSound('magic');
         this.findBlockAndSetFeeRating();
       });
+
+    this.stateService.txReplaced$
+      .subscribe((rbfTransaction) => this.rbfTransaction = rbfTransaction);
   }
 
   handleLoadElectrsTransactionError(error: any): Observable<any> {
@@ -198,6 +202,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
     this.feeRating = undefined;
     this.waitingForTransaction = false;
     this.isLoadingTx = true;
+    this.rbfTransaction = undefined;
     this.transactionTime = -1;
     document.body.scrollTo(0, 0);
     this.leaveTransaction();