Add expected weight to audit table

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

@@ -72,15 +72,6 @@
                   </ng-template>
                 </td>
               </tr>
-              <tr *ngIf="auditAvailable">
-                <td i18n="latest-blocks.expected_fees">Expected total fees</td>
-                <td>
-                  <app-amount [satoshis]="blockAudit?.expectedFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                  <span class="fiat">
-                    <app-fiat [blockConversion]="blockConversion" [value]="blockAudit?.expectedFees" digitsInfo="1.0-0"></app-fiat>
-                  </span>
-                </td>
-              </tr>
             </ng-container>
             <ng-template #skeletonRows>
               <tr>
@@ -235,6 +226,9 @@
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
         </div>
+        <ng-container *ngIf="network !== 'liquid'">
+          <ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
+        </ng-container>
       </div>
       <div class="col-sm" *ngIf="!isMobile">
         <h3 class="block-subtitle actual" *ngIf="!isMobile"><ng-container i18n="block.actual-block">Actual Block</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="how-do-block-audits-work"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></h3>
@@ -244,6 +238,9 @@
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>
+        <ng-container *ngIf="network !== 'liquid'">
+          <ng-container *ngTemplateOutlet="actualDetails"></ng-container>
+        </ng-container>
       </div>
     </div>
   </div>
@@ -394,5 +391,54 @@
   </a>
 </ng-template>
 
+<ng-template #expectedDetails>
+  <table *ngIf="block && blockAudit" class="table table-borderless table-striped audit-details-table">
+    <tbody>
+      <tr>
+        <td i18n="block.expected-total-fees|Expected total fees in a block">Expected fees</td>
+        <td>
+          <app-amount [satoshis]="blockAudit.expectedFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="block.expected-weight">Expected weight</td>
+        <td [innerHTML]="'&lrm;' + (blockAudit.expectedWeight | wuBytes: 2)"></td>
+      </tr>
+      <tr>
+        <td i18n="block.expected_transaction_count">Expected transactions</td>
+        <td>{{ blockAudit.template?.length || 0 }}</td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
+<ng-template #actualDetails>
+  <table *ngIf="block && blockAudit" class="table table-borderless table-striped audit-details-table">
+    <tbody>
+      <tr>
+        <td i18n="block.actual-total-fees|Actual total fees in a block">Actual fees</td>
+        <td>
+          <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+          <span *ngIf="blockAudit.feeDelta" class="difference" [class.positive]="blockAudit.feeDelta <= 0" [class.negative]="blockAudit.feeDelta > 0">
+            {{ blockAudit.feeDelta < 0 ? '+' : '' }}{{ (-blockAudit.feeDelta * 100) | amountShortener: 2 }}%
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="block.actual-weight">Actual weight</td>
+        <td [innerHTML]>
+          <span [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="block.actual_transaction_count">Actual transactions</td>
+        <td>
+          {{ block.tx_count }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
 <br>
 <br>

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

@@ -38,6 +38,17 @@
       color: rgba(255, 255, 255, 0.4);
       margin-left: 5px;
     }
+
+    .difference {
+      margin-left: 0.5em;
+  
+      &.positive {
+        color: rgb(66, 183, 71);
+      }
+      &.negative {
+        color: rgb(183, 66, 66);
+      }
+    }
   }
 }
 

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

@@ -388,6 +388,7 @@ export class BlockComponent implements OnInit, OnDestroy {
             for (const tx of blockAudit.transactions) {
               inBlock[tx.txid] = true;
             }
+            blockAudit.feeDelta = (blockAudit.expectedFees - this.block.extras.totalFees) / blockAudit.expectedFees;
             this.setAuditAvailable(true);
           } else {
             this.setAuditAvailable(false);

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

@@ -151,6 +151,8 @@ export interface BlockAudit extends BlockExtended {
   addedTxs: string[],
   matchRate: number,
   expectedFees: number,
+  expectedWeight: number,
+  feeDelta?: number,
   template: TransactionStripped[],
   transactions: TransactionStripped[],
 }