From 0ac76e12c4f7d834ab7b7a5be6a495fbf119f0f3 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 31 May 2023 12:11:56 -0400
Subject: [PATCH] Fix frontend logic for displaying effective fee rate

---
 .../components/transaction/transaction.component.html    | 4 ++--
 .../app/components/transaction/transaction.component.ts  | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 2e00682c1..4e301790b 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -485,11 +485,11 @@
           {{ tx.feePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
           <ng-template [ngIf]="tx?.status?.confirmed">
             &nbsp;
-            <app-tx-fee-rating *ngIf="tx.fee && (!cpfpInfo || (!cpfpInfo.effectiveFeePerVsize && !cpfpInfo?.descendants?.length && !cpfpInfo?.bestDescendant && !cpfpInfo?.ancestors?.length))" [tx]="tx"></app-tx-fee-rating>
+            <app-tx-fee-rating *ngIf="tx.fee && !hasEffectiveFeeRate" [tx]="tx"></app-tx-fee-rating>
           </ng-template>
         </td>
       </tr>
-      <tr *ngIf="cpfpInfo && (cpfpInfo.effectiveFeePerVsize || cpfpInfo.bestDescendant || cpfpInfo.descendants?.length || cpfpInfo.ancestors?.length)">
+      <tr *ngIf="cpfpInfo && hasEffectiveFeeRate">
         <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td>
           <div class="effective-fee-container">
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index e548fdc46..60051634d 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -86,6 +86,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   segwitEnabled: boolean;
   rbfEnabled: boolean;
   taprootEnabled: boolean;
+  hasEffectiveFeeRate: boolean;
 
   @ViewChild('graphContainer')
   graphContainer: ElementRef;
@@ -157,6 +158,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe((cpfpInfo) => {
         if (!cpfpInfo || !this.tx) {
           this.cpfpInfo = null;
+          this.hasEffectiveFeeRate = false;
           return;
         }
         // merge ancestors/descendants
@@ -164,7 +166,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
           relatives.push(cpfpInfo.bestDescendant);
         }
-        if (!cpfpInfo.effectiveFeePerVsize) {
+        const hasRelatives = !!relatives.length;
+        if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
           let totalWeight =
             this.tx.weight +
             relatives.reduce((prev, val) => prev + val.weight, 0);
@@ -177,6 +180,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         }
 
         this.cpfpInfo = cpfpInfo;
+        this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
       });
 
     this.fetchRbfSubscription = this.fetchRbfHistory$
@@ -362,6 +366,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                 ancestors: tx.ancestors,
                 bestDescendant: tx.bestDescendant,
               };
+              const hasRelatives = !!(tx.ancestors.length || tx.bestDescendant);
+              this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
             } else {
               this.fetchCpfp$.next(this.tx.txid);
             }
@@ -503,6 +509,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.replaced = false;
     this.transactionTime = -1;
     this.cpfpInfo = null;
+    this.hasEffectiveFeeRate = false;
     this.rbfInfo = null;
     this.rbfReplaces = [];
     this.showCpfpDetails = false;