use new effective fee stat fields in frontend

frontend/src/app/components/block/block-preview.component.html

@@ -32,9 +32,9 @@
             <td i18n="block.weight">Weight</td>
             <td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
           </tr>
-          <tr *ngIf="block?.extras?.medianFee != undefined">
+          <tr *ngIf="block?.extras?.medianFee != undefined && block?.extras?.effectiveMedianFee != undefined">
             <td class="td-width" i18n="block.median-fee">Median fee</td>
-            <td>~<app-fee-rate [fee]="block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate></td>
+            <td>~<app-fee-rate [fee]="block?.extras?.effectiveMedianFee ?? block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate></td>
           </tr>
           <ng-template [ngIf]="fees !== undefined">
             <tr>

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

@@ -132,11 +132,11 @@
         <td i18n="mempool-block.fee-span">Fee span</td>
         <td><app-fee-rate [fee]="block.extras?.minFee" [showUnit]="false" rounding="1.0-0"></app-fee-rate> - <app-fee-rate [fee]="block.extras?.maxFee" rounding="1.0-0"></app-fee-rate></td>
       </tr>
-      <tr *ngIf="block.extras?.medianFee != undefined">
+      <tr *ngIf="block.extras?.effectiveMedianFee != undefined || block.extras?.medianFee != undefined">
         <td class="td-width" i18n="block.median-fee">Median fee</td>
-        <td>~<app-fee-rate [fee]="block.extras?.medianFee" rounding="1.0-0"></app-fee-rate>
+        <td>~<app-fee-rate [fee]="block.extras?.effectiveMedianFee ?? block.extras?.medianFee" rounding="1.0-0"></app-fee-rate>
           <span class="fiat">
-            <app-fiat [blockConversion]="blockConversion" [value]="block.extras?.medianFee * 140" digitsInfo="1.2-2"
+            <app-fiat [blockConversion]="blockConversion" [value]="(block.extras?.effectiveMedianFee ?? block.extras?.medianFee) * 140" digitsInfo="1.2-2"
               i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes"
               placement="bottom"></app-fiat>
           </span>

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

@@ -792,6 +792,9 @@ export class BlockComponent implements OnInit, OnDestroy {
   }
 
   getMinBlockFee(block: BlockExtended): number {
+    if (block?.extras?.effectiveFeeRange) {
+      return block.extras.effectiveFeeRange[0];
+    }
     if (block?.extras?.feeRange) {
       // heuristic to check if feeRange is adjusted for effective rates
       if (block.extras.medianFee === block.extras.feeRange[3]) {
@@ -804,6 +807,9 @@ export class BlockComponent implements OnInit, OnDestroy {
   }
 
   getMaxBlockFee(block: BlockExtended): number {
+    if (block?.extras?.effectiveFeeRange) {
+      return block.extras.effectiveFeeRange[block.extras.effectiveFeeRange.length - 1];
+    }
     if (block?.extras?.feeRange) {
       return block.extras.feeRange[block.extras.feeRange.length - 1];
     }

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -23,7 +23,7 @@
         <div class="block-body">
           <ng-container *ngIf="!minimal">
             <div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
-              ~<app-fee-rate [fee]="block?.extras?.medianFee" unitClass="" rounding="1.0-0"></app-fee-rate>
+              ~<app-fee-rate [fee]="block?.extras?.effectiveMedianFee ?? block?.extras?.medianFee" unitClass="" rounding="1.0-0"></app-fee-rate>
             </div>
             <ng-template #emptyfees>
               <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -414,6 +414,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   getMinBlockFee(block: BlockExtended): number {
+    if (block?.extras?.effectiveFeeRange) {
+      return block.extras.effectiveFeeRange[0];
+    }
     if (block?.extras?.feeRange) {
       // heuristic to check if feeRange is adjusted for effective rates
       if (block.extras.medianFee === block.extras.feeRange[3]) {
@@ -426,6 +429,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   getMaxBlockFee(block: BlockExtended): number {
+    if (block?.extras?.effectiveFeeRange) {
+      return block.extras.effectiveFeeRange[block.extras.effectiveFeeRange.length - 1];
+    }
     if (block?.extras?.feeRange) {
       return block.extras.feeRange[block.extras.feeRange.length - 1];
     }

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

@@ -57,6 +57,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
                   this.mempoolBlockIndex--;
                 }
                 const ordinal = this.getOrdinal(mempoolBlocks[this.mempoolBlockIndex]);
+                // prefer effective fee stats if available
+                mempoolBlocks[this.mempoolBlockIndex].feeRange = mempoolBlocks[this.mempoolBlockIndex].effectiveFeeRange ?? mempoolBlocks[this.mempoolBlockIndex].feeRange;
+                mempoolBlocks[this.mempoolBlockIndex].medianFee = mempoolBlocks[this.mempoolBlockIndex].effectiveMedianFee ?? mempoolBlocks[this.mempoolBlockIndex].medianFee;
                 this.ordinal$.next(ordinal);
                 this.seoService.setTitle(ordinal);
                 this.seoService.setDescription($localize`:@@meta.description.mempool-block:See stats for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} transactions in the mempool: fee range, aggregate size, and more. Mempool blocks are updated in real-time as the network receives new transactions.`);

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -171,6 +171,8 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
           block.index = this.blockIndex + i;
           block.height = lastBlock.height + i + 1;
           block.blink = specialBlocks[block.height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
+          block.medianFee = block.effectiveMedianFee ?? block.medianFee;
+          block.feeRange = block.effectiveFeeRange ?? block.feeRange;
         });
 
         const stringifiedBlocks = JSON.stringify(mempoolBlocks);

frontend/src/app/components/tx-fee-rating/tx-fee-rating.component.ts

@@ -30,7 +30,7 @@ export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     this.blocksSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
-      if (this.tx.status.confirmed && this.tx.status.block_height === block.height && block?.extras?.medianFee > 0) {
+      if (this.tx.status.confirmed && this.tx.status.block_height === block.height && (block?.extras?.effectiveMedianFee ?? block?.extras?.medianFee) > 0) {
         this.calculateRatings(block);
         this.cd.markForCheck();
       }
@@ -45,7 +45,7 @@ export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
     this.cacheService.loadBlock(this.tx.status.block_height);
 
     const foundBlock = this.cacheService.getCachedBlock(this.tx.status.block_height) || null;
-    if (foundBlock && foundBlock?.extras?.medianFee > 0) {
+    if (foundBlock && (foundBlock?.extras?.effectiveMedianFee ?? foundBlock?.extras?.medianFee) > 0) {
       this.calculateRatings(foundBlock);
     }
   }
@@ -56,7 +56,7 @@ export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
 
   calculateRatings(block: BlockExtended) {
     const feePervByte = this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
-    this.medianFeeNeeded = block?.extras?.medianFee;
+    this.medianFeeNeeded = block?.extras?.effectiveMedianFee ?? block?.extras?.medianFee;
 
     // Block not filled
     if (block.weight < this.stateService.env.BLOCK_WEIGHT_UNITS * 0.95) {

frontend/src/app/interfaces/node-api.interface.ts

@@ -196,6 +196,8 @@ export interface BlockExtension {
   minFee?: number;
   maxFee?: number;
   feeRange?: number[];
+  effectiveMedianFee?: number;
+  effectiveFeeRange?: number[];
   reward?: number;
   coinbaseRaw?: string;
   matchRate?: number;

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

@@ -61,8 +61,10 @@ export interface MempoolBlock {
   blockVSize: number;
   nTx: number;
   medianFee: number;
+  effectiveMedianFee?: number;
   totalFees: number;
   feeRange: number[];
+  effectiveFeeRange?: number[];
   index: number;
   isStack?: boolean;
 }