From ca7c8906a5716cb190aa09aaddfee793d2d0b3f1 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 5 Apr 2023 07:11:13 +0900
Subject: [PATCH] Fix missing null checks in tx component

---
 .../app/components/transaction/transaction.component.html | 8 ++++----
 .../app/components/transaction/transaction.component.ts   | 8 ++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 712ed2d7a..09efaee1c 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl">
 
   <div class="title-block">
-    <div *ngIf="rbfTransaction && !tx.status.confirmed" class="alert alert-mempool" role="alert">
+    <div *ngIf="rbfTransaction && !tx?.status?.confirmed" class="alert alert-mempool" role="alert">
       <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
       <app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
     </div>
@@ -38,7 +38,7 @@
 
   <ng-template [ngIf]="!isLoadingTx && !error">
 
-    <ng-template [ngIf]="tx.status.confirmed" [ngIfElse]="unconfirmedTemplate">
+    <ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedTemplate">
 
       <div class="box">
         <div class="row">
@@ -479,7 +479,7 @@
         <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
         <td>
           {{ tx.feePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-          <ng-template [ngIf]="tx.status.confirmed">
+          <ng-template [ngIf]="tx?.status?.confirmed">
             &nbsp;
             <app-tx-fee-rating *ngIf="tx.fee && ((cpfpInfo && !cpfpInfo?.descendants?.length && !cpfpInfo?.bestDescendant && !cpfpInfo?.ancestors?.length) || !cpfpInfo)" [tx]="tx"></app-tx-fee-rating>
           </ng-template>
@@ -490,7 +490,7 @@
         <td>
           <div class="effective-fee-container">
             {{ tx.effectiveFeePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-            <ng-template [ngIf]="tx.status.confirmed">
+            <ng-template [ngIf]="tx?.status?.confirmed">
               <app-tx-fee-rating class="ml-2 mr-2" *ngIf="tx.fee || tx.effectiveFeePerVsize" [tx]="tx"></app-tx-fee-rating>
             </ng-template>
           </div>
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index bd6db8634..ed3c84439 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -540,9 +540,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostListener('window:resize', ['$event'])
   setGraphSize(): void {
     this.isMobile = window.innerWidth < 850;
-    if (this.graphContainer) {
+    if (this.graphContainer?.nativeElement) {
       setTimeout(() => {
-        this.graphWidth = this.graphContainer.nativeElement.clientWidth;
+        if (this.graphContainer?.nativeElement) {
+          this.graphWidth = this.graphContainer.nativeElement.clientWidth;
+        } else {
+          setTimeout(() => { this.setGraphSize(); }, 1);
+        }
       }, 1);
     }
   }