From 6d95cfadac2a6ab43830f8d15a3a1faac01c4098 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 28 Dec 2022 09:42:27 -0600
Subject: [PATCH] Add FAQ link to empty blocks

---
 .../app/components/block/block.component.html | 31 +++++++++++++++----
 .../app/components/block/block.component.scss | 20 ++++++++++++
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 7a958735c..08ea04ca9 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -112,6 +112,7 @@
             [flip]="false"
             (txClickEvent)="onTxClick($event)"
           ></app-block-overview-graph>
+          <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>
       </div>
     </div>
@@ -213,15 +214,21 @@
     <div class="row">
       <div class="col-sm">
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.projected-block">Projected Block</h3>
-        <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
-          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !auditEnabled"></app-block-overview-graph> 
+        <div class="block-graph-wrapper">
+          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !auditEnabled"></app-block-overview-graph>
+          <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
+        </div>
       </div>
       <div class="col-sm" *ngIf="!isMobile">
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.actual-block">Actual Block</h3>
-        <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
-          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !auditEnabled"></app-block-overview-graph>
+        <div class="block-graph-wrapper">
+          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !auditEnabled"></app-block-overview-graph>
+          <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
+        </div>
       </div>
     </div>
   </div>
@@ -343,5 +350,17 @@
 
 </div>
 
+<ng-template #emptyBlockInfo>
+  <a
+    *ngIf="network === '' && block && block.height > 100000 && block.tx_count <= 1"
+    class="info-bubble-link badge badge-primary"
+    [routerLink]="['/docs/faq/' | relativeUrl]"
+    fragment="why-empty-blocks"
+  >
+    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+    <span i18n="block.empty-block-explanation">Why is this block empty?</span>
+  </a>
+</ng-template>
+
 <br>
 <br>
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 69002de79..931912e4e 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -202,4 +202,24 @@ h1 {
   &.active, &:hover {
     border-color: white;
   }
+}
+
+.block-graph-wrapper {
+  position: relative;
+}
+
+.info-bubble-link {
+  position: absolute;
+  display: block;
+  top: 2em;
+  left: 50%;
+  margin: auto;
+  text-align: center;
+  padding: 0.5em 1em;
+  font-size: 80%;
+  transform: translateX(-50%);
+
+  .ng-fa-icon {
+    margin-right: 1em;
+  }
 }
\ No newline at end of file