Pizza tracker handle RBF replacements

frontend/src/app/components/tracker/tracker-bar.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
-export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed';
+export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed' | 'replaced';
 
 @Component({
   selector: 'app-tracker-bar',

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

@@ -43,9 +43,16 @@
         <app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
       </div>
     <div class="panel">
-      <div class="tracker-bar">
+      @if (replaced) {
-        <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
+        <div class="alert-replaced" role="alert">
-      </div>
+          <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
+          <app-truncate [text]="latestReplacement" [lastChars]="12" [link]="['/tracker/' | relativeUrl, latestReplacement]"></app-truncate>
+        </div>
+      } @else {
+        <div class="tracker-bar">
+          <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
+        </div>
+      }
       <div class="data">
         @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
           <div class="field narrower mt-2">
@@ -143,6 +150,12 @@
               </div>
               <span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
             }
+            @case ('replaced') {
+              <div class="progress-icon">
+                <fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
+              </div>
+              <span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
+            }
           }
         }
       }

frontend/src/app/components/tracker/tracker.component.scss

@@ -187,4 +187,12 @@
   padding: 0.5em;
   background: var(--primary);
   color: white;
+  cursor: pointer;
+}
+
+.alert-replaced {
+  background: var(--danger);
+  margin: 1em 0.5em;
+  padding: 0.5em;
+  border-radius: 0.5em;
 }

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

@@ -76,6 +76,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
   currencyChangeSubscription: Subscription;
   rbfTransaction: undefined | Transaction;
   replaced: boolean = false;
+  latestReplacement: string;
   rbfReplaces: string[];
   rbfInfo: RbfTree;
   cpfpInfo: CpfpInfo | null;
@@ -218,6 +219,9 @@ export class TrackerComponent implements OnInit, OnDestroy {
     ).subscribe((rbfResponse) => {
       this.rbfInfo = rbfResponse?.replacements;
       this.rbfReplaces = rbfResponse?.replaces || null;
+      if (this.rbfInfo) {
+        this.latestReplacement = this.rbfInfo.tx.txid;
+      }
     });
 
     this.fetchCachedTxSubscription = this.fetchCachedTx$
@@ -350,7 +354,9 @@ export class TrackerComponent implements OnInit, OnDestroy {
             this.tx.acceleratedBy = txPosition.position?.acceleratedBy;
           }
 
-          if (txPosition.position?.block === 0) {
+          if (this.replaced) {
+            this.trackerStage = 'replaced';
+          } else if (txPosition.position?.block === 0) {
             this.trackerStage = 'next';
           } else if (txPosition.position?.block < 3){
             this.trackerStage = 'soon';
@@ -520,6 +526,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
       }
       this.rbfTransaction = rbfTransaction;
       this.replaced = true;
+      this.trackerStage = 'replaced';
+      if (!this.rbfInfo) {
+        this.latestReplacement = this.rbfTransaction.txid;
+      }
       this.stateService.markBlock$.next({});
 
       if (rbfTransaction && !this.tx) {
@@ -663,6 +673,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
     this.isLoadingTx = true;
     this.rbfTransaction = undefined;
     this.replaced = false;
+    this.latestReplacement = '';
     this.transactionTime = -1;
     this.cpfpInfo = null;
     this.adjustedVsize = null;

frontend/src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -438,5 +438,6 @@ export class SharedModule {
     library.addIcons(faHourglassEnd);
     library.addIcons(faWandMagicSparkles);
     library.addIcons(faFaucetDrip);
+    library.addIcons(faTimeline);
   }
 }