From 3f80dbc5ce45eda7f59fdb03582623a60305c40a Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 1 Apr 2024 18:00:10 +0900
Subject: [PATCH] Fix random console errors on block loading

---
 .../src/app/components/block/block.component.html  | 14 +++++++-------
 .../src/app/components/block/block.component.ts    |  6 +++---
 .../transactions-list.component.ts                 |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 0c0655c01..282863fab 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -39,7 +39,7 @@
       <div class="col-sm">
         <table class="table table-borderless table-striped">
           <tbody>
-            <ng-container *ngIf="!isLoadingBlock; else skeletonRows">
+            <ng-container *ngIf="block && !isLoadingBlock; else skeletonRows">
               <tr>
                 <td class="td-width" i18n="block.hash">Hash</td>
                 <td>&lrm;<a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
@@ -126,16 +126,16 @@
   </div>
 
   <ng-template #restOfTable>
-    <ng-container *ngIf="!isLoadingBlock; else loadingRest">
+    <ng-container *ngIf="block && !isLoadingBlock; else loadingRest">
       <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
         <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>
+        <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?.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?.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?.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>
@@ -259,7 +259,7 @@
     </div>
   </div>
 
-  <ng-template [ngIf]="!isLoadingBlock && !error">
+  <ng-template [ngIf]="block && !isLoadingBlock && !error">
     <div [hidden]="!showDetails" id="details">
       <br>
 
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 2602c5ecd..9c812c6f0 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -460,9 +460,9 @@ export class BlockComponent implements OnInit, OnDestroy {
             inBlock[tx.txid] = true;
           }
 
-          blockAudit.feeDelta = blockAudit.expectedFees > 0 ? (blockAudit.expectedFees - (this.block.extras.totalFees + this.oobFees)) / blockAudit.expectedFees : 0;
-          blockAudit.weightDelta = blockAudit.expectedWeight > 0 ? (blockAudit.expectedWeight - this.block.weight) / blockAudit.expectedWeight : 0;
-          blockAudit.txDelta = blockAudit.template.length > 0 ? (blockAudit.template.length - this.block.tx_count) / blockAudit.template.length : 0;
+          blockAudit.feeDelta = blockAudit.expectedFees > 0 ? (blockAudit.expectedFees - (this.block?.extras.totalFees + this.oobFees)) / blockAudit.expectedFees : 0;
+          blockAudit.weightDelta = blockAudit.expectedWeight > 0 ? (blockAudit.expectedWeight - this.block?.weight) / blockAudit.expectedWeight : 0;
+          blockAudit.txDelta = blockAudit.template.length > 0 ? (blockAudit.template.length - this.block?.tx_count) / blockAudit.template.length : 0;
           this.blockAudit = blockAudit;
           this.setAuditAvailable(true);
         } else {
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts
index 8f91489c1..b66889f0b 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -154,7 +154,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       });
     } else {
       this.priceService.getBlockPrice$(this.blockTime, true, this.currency).pipe(
-        tap((price) => this.transactions.forEach((tx) => tx['price'] = price)),
+        tap((price) => this.transactions?.forEach((tx) => tx['price'] = price)),
       ).subscribe();
     }
   }
@@ -239,7 +239,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
 
       if (this.blockTime && this.transactions?.length && this.currency) {
         this.priceService.getBlockPrice$(this.blockTime, true, this.currency).pipe(
-          tap((price) => this.transactions.forEach((tx) => tx['price'] = price)),
+          tap((price) => this.transactions?.forEach((tx) => tx['price'] = price)),
         ).subscribe();
       }
       const txIds = this.transactions.filter((tx) => !tx._outspends).map((tx) => tx.txid);