From 3d5c156776ebac6194c60e8bdd1938d8755dc81e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 14 Mar 2023 15:39:55 +0900
Subject: [PATCH] Use effective fee rates in mempool block visualizations &
 tooltips

---
 backend/src/api/common.ts                                  | 1 +
 backend/src/mempool.interfaces.ts                          | 1 +
 .../src/app/components/block-overview-graph/tx-view.ts     | 7 +++++--
 .../block-overview-tooltip.component.html                  | 6 ++++++
 .../block-overview-tooltip.component.ts                    | 2 ++
 frontend/src/app/interfaces/websocket.interface.ts         | 1 +
 6 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/backend/src/api/common.ts b/backend/src/api/common.ts
index 1d3b11d66..fed3f4fa2 100644
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -83,6 +83,7 @@ export class Common {
       fee: tx.fee,
       vsize: tx.weight / 4,
       value: tx.vout.reduce((acc, vout) => acc + (vout.value ? vout.value : 0), 0),
+      rate: tx.effectiveFeePerVsize,
     };
   }
 
diff --git a/backend/src/mempool.interfaces.ts b/backend/src/mempool.interfaces.ts
index 16b856bcc..dd315f10c 100644
--- a/backend/src/mempool.interfaces.ts
+++ b/backend/src/mempool.interfaces.ts
@@ -145,6 +145,7 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
+  rate?: number; // effective fee rate
 }
 
 export interface BlockExtension {
diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts
index fe224ebac..f2e67da5b 100644
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -36,6 +36,7 @@ export default class TxView implements TransactionStripped {
   vsize: number;
   value: number;
   feerate: number;
+  rate?: number;
   status?: 'found' | 'missing' | 'fresh' | 'added' | 'censored' | 'selected';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
@@ -58,7 +59,8 @@ export default class TxView implements TransactionStripped {
     this.fee = tx.fee;
     this.vsize = tx.vsize;
     this.value = tx.value;
-    this.feerate = tx.fee / tx.vsize;
+    this.feerate = tx.rate || (tx.fee / tx.vsize); // sort by effective fee rate where available
+    this.rate = tx.rate;
     this.status = tx.status;
     this.initialised = false;
     this.vertexArray = scene.vertexArray;
@@ -157,7 +159,8 @@ export default class TxView implements TransactionStripped {
   }
 
   getColor(): Color {
-    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
+    const rate = this.fee / this.vsize; // color by simple single-tx fee rate
+    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
     const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
     // Normal mode
     if (!this.scene?.highlightingEnabled) {
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
index e841e291f..7e2de8d67 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@@ -28,6 +28,12 @@
           {{ feeRate | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
         </td>
       </tr>
+      <tr *ngIf="effectiveRate && effectiveRate !== feeRate">
+        <td class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        <td>
+          {{ effectiveRate | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+        </td>
+      </tr>
       <tr>
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
index ea011d045..61c294263 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
@@ -20,6 +20,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
   value = 0;
   vsize = 1;
   feeRate = 0;
+  effectiveRate;
 
   tooltipPosition: Position = { x: 0, y: 0 };
 
@@ -51,6 +52,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
       this.value = tx.value || 0;
       this.vsize = tx.vsize || 1;
       this.feeRate = this.fee / this.vsize;
+      this.effectiveRate = tx.rate;
     }
   }
 }
diff --git a/frontend/src/app/interfaces/websocket.interface.ts b/frontend/src/app/interfaces/websocket.interface.ts
index 46416857e..ac86971f0 100644
--- a/frontend/src/app/interfaces/websocket.interface.ts
+++ b/frontend/src/app/interfaces/websocket.interface.ts
@@ -71,6 +71,7 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
+  rate?: number; // effective fee rate
   status?: 'found' | 'missing' | 'fresh' | 'added' | 'censored' | 'selected';
   context?: 'projected' | 'actual';
 }