Add expected fee % diff to blocks list page

backend/src/api/blocks.ts

@@ -283,11 +283,13 @@ class Blocks {
 
       extras.matchRate = null;
       extras.expectedFees = null;
+      extras.expectedWeight = null;
       if (config.MEMPOOL.AUDIT) {
         const auditScore = await BlocksAuditsRepository.$getBlockAuditScore(block.id);
         if (auditScore != null) {
           extras.matchRate = auditScore.matchRate;
           extras.expectedFees = auditScore.expectedFees;
+          extras.expectedWeight = auditScore.expectedWeight;
         }
       }
     }

backend/src/api/websocket-handler.ts

@@ -602,6 +602,7 @@ class WebsocketHandler {
         if (block.extras) {
           block.extras.matchRate = matchRate;
           block.extras.expectedFees = totalFees;
+          block.extras.expectedWeight = totalWeight;
           block.extras.similarity = similarity;
         }
       }

backend/src/repositories/BlocksRepository.ts

@@ -1033,6 +1033,7 @@ class BlocksRepository {
     // Match rate is not part of the blocks table, but it is part of APIs so we must include it
     extras.matchRate = null;
     extras.expectedFees = null;
+    extras.expectedWeight = null;
     if (config.MEMPOOL.AUDIT) {
       const auditScore = await BlocksAuditsRepository.$getBlockAuditScore(dbBlk.id);
       if (auditScore != null) {

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

@@ -13,14 +13,12 @@
         <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name"
           i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
         <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
-        <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
         <th *ngIf="auditAvailable" class="health text-right" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
-        <th *ngIf="auditAvailable" class="text-right" i18n="latest-blocks.expected-fees" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
-          i18n-ngbTooltip="latest-blocks.expected-fees" ngbTooltip="Expected fees" placement="bottom">Expected fees</th>
         <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
         <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
+        <th *ngIf="auditAvailable && !widget" class="fee-delta text-right" i18n="latest-blocks.vs-expected-fees" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">vs Expected</th>
         <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="dashboard.txs" ngbTooltip="TXs" placement="bottom" #txs [disableTooltip]="!isEllipsisActive(txs)">TXs</th>
         <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
@@ -44,9 +42,6 @@
           <td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
           </td>
-          <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
-            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time>
-          </td>
           <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <a
               class="health-badge badge"
@@ -66,15 +61,17 @@
               <span class="skeleton-loader" style="max-width: 60px"></span>
             </ng-template>
           </td>
-          <td *ngIf="auditAvailable" class="text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
-            <app-amount [satoshis]="block.extras.expectedFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
-          </td>
           <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
           </td>
           <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
             <app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
           </td>
+          <td *ngIf="auditAvailable" class="fee-delta text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
+            <span *ngIf="block.extras.feeDelta" class="difference" [class.positive]="block.extras.feeDelta >= 0" [class.negative]="block.extras.feeDelta < 0">
+              {{ block.extras.feeDelta > 0 ? '+' : '' }}{{ (block.extras.feeDelta * 100) | amountShortener: 2 }}%
+            </span>
+          </td>
           <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             {{ block.tx_count | number }}
           </td>

frontend/src/app/components/blocks-list/blocks-list.component.scss

@@ -23,6 +23,17 @@ tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;
   padding-bottom: 0.7rem !important;
+
+  .difference {
+    margin-left: 0.5em;
+
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
 }
 
 .clear-link {
@@ -90,7 +101,7 @@ tr, td, th {
 }
 
 .timestamp {
-  width: 18%;
+  width: 10%;
   @media (max-width: 1100px) {
     display: none;
   }
@@ -123,8 +134,8 @@ tr, td, th {
 }
 
 .txs {
-  padding-right: 40px;
+  padding-right: 20px;
-  width: 8%;
+  width: 6%;
   @media (max-width: 1100px) {
     padding-right: 10px;
   }
@@ -160,6 +171,15 @@ tr, td, th {
 .fees.widget {
   width: 20%;
 }
+.fee-delta {
+  width: 6%;
+  @media (max-width: 991px) {
+    display: none;
+  }
+}
+.fee-delta.widget {
+  display: none;
+}
 
 .reward {
   width: 8%;
@@ -214,7 +234,7 @@ tr, td, th {
 
 .health {
   width: 10%;
-  @media (max-width: 1105px) {
+  @media (max-width: 1100px) {
     width: 13%;
   }
   @media (max-width: 560px) {

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

@@ -112,7 +112,14 @@ export class BlocksList implements OnInit, OnDestroy {
             acc = acc.slice(0, this.widget ? 6 : 15);
           }
           return acc;
-        }, [])
+        }, []),
+        switchMap((blocks) => {
+          console.log(blocks);
+          blocks.forEach(block => {
+            block.extras.feeDelta = block.extras.expectedFees ? (block.extras.totalFees - block.extras.expectedFees) / block.extras.expectedFees : 0;
+          });
+          return of(blocks);
+        })
       );
 
     if (this.indexingAvailable && this.auditAvailable) {

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

@@ -134,6 +134,8 @@ export interface BlockExtension {
   coinbaseRaw?: string;
   matchRate?: number;
   expectedFees?: number;
+  expectedWeight?: number;
+  feeDelta?: number;
   similarity?: number;
   pool?: {
     id: number;