Merge pull request #3380 from mempool/mononaut/mempool-effective-rates

Use effective fee rates in mempool block visualizations & tooltips

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,
     };
   }
 

backend/src/api/mempool-blocks.ts

@@ -138,6 +138,7 @@ class MempoolBlocks {
     for (let i = 0; i < Math.max(mempoolBlocks.length, prevBlocks.length); i++) {
       let added: TransactionStripped[] = [];
       let removed: string[] = [];
+      const changed: { txid: string, rate: number | undefined }[] = [];
       if (mempoolBlocks[i] && !prevBlocks[i]) {
         added = mempoolBlocks[i].transactions;
       } else if (!mempoolBlocks[i] && prevBlocks[i]) {
@@ -146,7 +147,7 @@ class MempoolBlocks {
         const prevIds = {};
         const newIds = {};
         prevBlocks[i].transactions.forEach(tx => {
-          prevIds[tx.txid] = true;
+          prevIds[tx.txid] = tx;
         });
         mempoolBlocks[i].transactions.forEach(tx => {
           newIds[tx.txid] = true;
@@ -159,12 +160,15 @@ class MempoolBlocks {
         mempoolBlocks[i].transactions.forEach(tx => {
           if (!prevIds[tx.txid]) {
             added.push(tx);
+          } else if (tx.rate !== prevIds[tx.txid].rate) {
+            changed.push({ txid: tx.txid, rate: tx.rate });
           }
         });
       }
       mempoolBlockDeltas.push({
         added,
-        removed
+        removed,
+        changed,
       });
     }
     return mempoolBlockDeltas;

backend/src/mempool.interfaces.ts

@@ -58,6 +58,7 @@ export interface MempoolBlockWithTransactions extends MempoolBlock {
 export interface MempoolBlockDelta {
   added: TransactionStripped[];
   removed: string[];
+  changed: { txid: string, rate: number | undefined }[];
 }
 
 interface VinStrippedToScriptsig {
@@ -149,6 +150,7 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
+  rate?: number; // effective fee rate
 }
 
 export interface BlockExtension {

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -132,9 +132,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
-  update(add: TransactionStripped[], remove: string[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
     if (this.scene) {
-      this.scene.update(add, remove, direction, resetLayout);
+      this.scene.update(add, remove, change, direction, resetLayout);
       this.start();
     }
   }

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -150,7 +150,7 @@ export default class BlockScene {
     this.updateAll(startTime, 200, direction);
   }
 
-  update(add: TransactionStripped[], remove: string[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
     const startTime = performance.now();
     const removed = this.removeBatch(remove, startTime, direction);
 
@@ -172,6 +172,15 @@ export default class BlockScene {
         this.place(tx);
       });
     } else {
+      // update effective rates
+      change.forEach(tx => {
+        if (this.txs[tx.txid]) {
+          this.txs[tx.txid].feerate = tx.rate || (this.txs[tx.txid].fee / this.txs[tx.txid].vsize);
+          this.txs[tx.txid].rate = tx.rate;
+          this.txs[tx.txid].dirty = true;
+        }
+      });
+
       // try to insert new txs directly
       const remaining = [];
       add.map(tx => new TxView(tx, this)).sort(feeRateDescending).forEach(tx => {

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) {

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>

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;
     }
   }
 }

frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts

@@ -99,7 +99,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
       const direction = (this.blockIndex == null || this.index < this.blockIndex) ? this.poolDirection : this.chainDirection;
       this.blockGraph.replace(delta.added, direction);
     } else {
-      this.blockGraph.update(delta.added, delta.removed, blockMined ? this.chainDirection : this.poolDirection, blockMined);
+      this.blockGraph.update(delta.added, delta.removed, delta.changed || [], blockMined ? this.chainDirection : this.poolDirection, blockMined);
     }
 
     this.lastBlockHeight = this.stateService.latestBlockHeight;

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

@@ -57,6 +57,7 @@ export interface MempoolBlockWithTransactions extends MempoolBlock {
 export interface MempoolBlockDelta {
   added: TransactionStripped[],
   removed: string[],
+  changed?: { txid: string, rate: number | undefined }[];
 }
 
 export interface MempoolInfo {
@@ -74,6 +75,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';
 }