From df7f1cc86b98dd24d1d67e674f7bd16346276424 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 7 Feb 2024 11:31:22 +0100
Subject: [PATCH] Blockchain component: display dash when feerate is undefined

---
 .../blockchain-blocks/blockchain-blocks.component.html |  4 ++--
 .../shared/components/fee-rate/fee-rate.component.html | 10 ++++++++--
 .../shared/components/fee-rate/fee-rate.component.ts   |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 680beb006..443fc1946 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -26,7 +26,7 @@
             </div>
             <ng-template #emptyfees>
               <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
-                &nbsp;
+                <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
@@ -37,7 +37,7 @@
             </div>
             <ng-template #emptyfeespan>
               <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
-                &nbsp;
+                <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
index c3e1615ff..f9e86cc2b 100644
--- a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
@@ -1,4 +1,10 @@
 <ng-container *ngIf="rateUnits$ | async as units">
-  <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
-  <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  <ng-container *ngIf="fee !== undefined; else noFee">
+    <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
+    <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  </ng-container>
+  <ng-template #noFee>
+      <ng-container *ngIf="units !== 'wu'">- <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
+      <ng-container *ngIf="units === 'wu'">- <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  </ng-template>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
index 4d65ef0c2..b1d143e7f 100644
--- a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
@@ -8,7 +8,7 @@ import { StateService } from '../../../services/state.service';
   styleUrls: ['./fee-rate.component.scss']
 })
 export class FeeRateComponent implements OnInit {
-  @Input() fee: number;
+  @Input() fee: number | undefined;
   @Input() weight: number = 4;
   @Input() rounding: string = null;
   @Input() showUnit: boolean = true;