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();

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

@@ -11,6 +11,7 @@ export interface WebsocketResponse {
   action?: string;
   data?: string[];
   tx?: Transaction;
+  rbfTransaction?: Transaction;
   'track-tx'?: string;
   'track-address'?: string;
   'track-asset'?: string;

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

@@ -24,6 +24,7 @@ export class StateService {
   mempoolStats$ = new ReplaySubject<MemPoolState>(1);
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
   txConfirmed$ = new Subject<Block>();
+  txReplaced$ = new Subject<Transaction>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();
 

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

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

frontend/src/styles.scss

@@ -410,3 +410,9 @@ h1, h2, h3 {
 .tooltip-inner {
   max-width: inherit;
 }
+
+.alert-mempool {
+  color: #ffffff;
+  background-color: #653b9c;
+  border-color: #3a1c61;
+}