precompute block fee spans

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

@@ -121,7 +121,7 @@
     <ng-container *ngIf="!isLoadingBlock; else loadingRest">
       <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
         <td i18n="mempool-block.fee-span">Fee span</td>
-        <td><span>{{ getMinBlockFee(block) | number:'1.0-0' }} - {{ getMaxBlockFee(block) | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
+        <td><span>{{ block?.extras?.minFee | number:'1.0-0' }} - {{ block?.extras?.maxFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
       </tr>
       <tr *ngIf="block?.extras?.medianFee != undefined">
         <td class="td-width" i18n="block.median-fee">Median fee</td>

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

@@ -138,6 +138,8 @@ export class BlockComponent implements OnInit, OnDestroy {
 
         if (block.id === this.blockHash) {
           this.block = block;
+          block.extras.minFee = this.getMinBlockFee(block);
+          block.extras.maxFee = this.getMaxBlockFee(block);
           if (block?.extras?.reward != undefined) {
             this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
           }
@@ -234,6 +236,8 @@ export class BlockComponent implements OnInit, OnDestroy {
         }
         this.updateAuditAvailableFromBlockHeight(block.height);
         this.block = block;
+        block.extras.minFee = this.getMinBlockFee(block);
+        block.extras.maxFee = this.getMaxBlockFee(block);
         this.blockHeight = block.height;
         this.lastBlockHeight = this.blockHeight;
         this.nextBlockHeight = block.height + 1;

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

@@ -31,9 +31,8 @@
               </div>
             </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
-              *ngIf="block?.extras?.feeRange; else emptyfeespan">
+              *ngIf="block?.extras?.minFee != null && block?.extras?.maxFee != null; else emptyfeespan">
-              {{ getMinBlockFee(block) | number:feeRounding }} - {{
+              {{ block.extras.minFee | number:feeRounding }} - {{ block.extras.maxFee | number:feeRounding }} <ng-container
-              getMaxBlockFee(block) | number:feeRounding }} <ng-container
                 i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
             </div>
             <ng-template #emptyfeespan>

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

@@ -113,6 +113,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
             this.blocksFilled = false;
           }
 
+          block.extras.minFee = this.getMinBlockFee(block);
+          block.extras.maxFee = this.getMaxBlockFee(block);
+
           this.blocks.unshift(block);
           this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
 
@@ -239,6 +242,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
       if (height >= 0) {
         this.cacheService.loadBlock(height);
         block = this.cacheService.getCachedBlock(height) || null;
+        if (block) {
+          block.extras.minFee = this.getMinBlockFee(block);
+          block.extras.maxFee = this.getMaxBlockFee(block);
+        }
       }
       this.blocks.push(block || {
         placeholder: height < 0,
@@ -277,6 +284,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   onBlockLoaded(block: BlockExtended) {
     const blockIndex = this.height - block.height;
     if (blockIndex >= 0 && blockIndex < this.blocks.length) {
+      block.extras.minFee = this.getMinBlockFee(block);
+      block.extras.maxFee = this.getMaxBlockFee(block);
       this.blocks[blockIndex] = block;
       this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
     }

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

@@ -129,6 +129,8 @@ export interface PoolStat {
 export interface BlockExtension {
   totalFees?: number;
   medianFee?: number;
+  minFee?: number;
+  maxFee?: number;
   feeRange?: number[];
   reward?: number;
   coinbaseRaw?: string;