Merge pull request #2763 from mempool/mononaut/fix-tx-unfurler

Fix broken transaction preview unfurler page

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

@@ -63,40 +63,14 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
     this.fetchCpfpSubscription = this.fetchCpfp$
       .pipe(
         switchMap((txId) =>
-          this.apiService
+          this.apiService.getCpfpinfo$(txId).pipe(
-            .getCpfpinfo$(txId)
+            catchError((err) => {
-            .pipe(retryWhen((errors) => errors.pipe(delay(2000))))
+              return of(null);
+            })
+          )
         )
       )
       .subscribe((cpfpInfo) => {
-        if (!this.tx) {
-          return;
-        }
-        if (cpfpInfo.effectiveFeePerVsize) {
-          this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
-        } else {
-          const lowerFeeParents = cpfpInfo.ancestors.filter(
-            (parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
-          );
-          let totalWeight =
-            this.tx.weight +
-            lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
-          let totalFees =
-            this.tx.fee +
-            lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
-
-          if (cpfpInfo?.bestDescendant) {
-            totalWeight += cpfpInfo?.bestDescendant.weight;
-            totalFees += cpfpInfo?.bestDescendant.fee;
-          }
-
-          this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
-        }
-        if (!this.tx.status.confirmed) {
-          this.stateService.markBlock$.next({
-            txFeePerVSize: this.tx.effectiveFeePerVsize,
-          });
-        }
         this.cpfpInfo = cpfpInfo;
         this.openGraphService.waitOver('cpfp-data-' + this.txId);
       });

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

@@ -7,10 +7,11 @@ import {
   catchError,
   retryWhen,
   delay,
-  map
+  map,
+  mergeMap
 } from 'rxjs/operators';
 import { Transaction } from '../../interfaces/electrs.interface';
-import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from } from 'rxjs';
+import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from '../../services/audio.service';
@@ -110,11 +111,24 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         switchMap((txId) =>
           this.apiService
             .getCpfpinfo$(txId)
-            .pipe(retryWhen((errors) => errors.pipe(delay(2000))))
+            .pipe(retryWhen((errors) => errors.pipe(
-        )
+              mergeMap((error) => {
+                if (!this.tx?.status || this.tx.status.confirmed) {
+                  return throwError(error);
+                } else {
+                  return of(null);
+                }
+              }),
+              delay(2000)
+            )))
+        ),
+        catchError(() => {
+          return of(null);
+        })
       )
       .subscribe((cpfpInfo) => {
-        if (!this.tx) {
+        if (!cpfpInfo || !this.tx) {
+          this.cpfpInfo = null;
           return;
         }
         if (cpfpInfo.effectiveFeePerVsize) {