From 743f2a1cd473335c77572649d5fca7495b0e54f7 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 22 Dec 2022 07:49:12 -0600
Subject: [PATCH] refactor block page html

---
 .../app/components/block/block.component.html | 271 ++++++------------
 1 file changed, 94 insertions(+), 177 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 2c240c250..af69b0080 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -32,10 +32,10 @@
 
   <div class="box" *ngIf="!error">
     <div class="row">
-      <ng-template [ngIf]="!isLoadingBlock">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
+      <div class="col-sm">
+        <table class="table table-borderless table-striped">
+          <tbody>
+            <ng-container *ngIf="!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 class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
@@ -54,83 +54,15 @@
                 <td i18n="block.weight">Weight</td>
                 <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
               </tr>
-              <tr *ngIf="auditEnabled">
+              <tr *ngIf="!auditDataMissing && indexingAvailable">
                 <td i18n="block.health">Block health</td>
                 <td>
                   <span *ngIf="blockAudit?.matchRate != null">{{ blockAudit.matchRate }}%</span>
                   <span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</span>
                 </td>
               </tr>
-              <ng-container *ngIf="webGlEnabled && (auditDataMissing || !indexingAvailable)">
-                <tr *ngIf="isMobile && auditEnabled"></tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td i18n="mempool-block.fee-span">Fee span</td>
-                  <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
-                </tr>
-                <tr *ngIf="block?.extras?.medianFee != undefined">
-                  <td class="td-width" i18n="block.median-fee">Median fee</td>
-                  <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [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></td>
-                </tr>
-                <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
-                  <tr>
-                    <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                    <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
-                      <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                      <span class="fiat">
-                        <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
-                      </span>
-                    </td>
-                    <ng-template #liquidTotalFees>
-                      <td>
-                        <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
-                          [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
-                      </td>
-                    </ng-template>
-                  </tr>
-                  <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                    <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                    <td>
-                      <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                      <span class="fiat">
-                        <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
-                      </span>
-                    </td>
-                  </tr>
-                </ng-template>
-                <ng-template #loadingFees>
-                  <tr>
-                    <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                    <td style="width: 75%;"><span class="skeleton-loader"></span></td>
-                  </tr>
-                  <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                    <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                    <td><span class="skeleton-loader"></span></td>
-                  </tr>
-                </ng-template>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td i18n="block.miner">Miner</td>
-                  <td *ngIf="stateService.env.MINING_DASHBOARD">
-                    <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-                      [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                      {{ block.extras.pool.name }}
-                    </a>
-                  </td>
-                  <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
-                    <span placement="bottom" class="badge"
-                      [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                      {{ block.extras.pool.name }}
-                  </span>
-                  </td>
-                </tr>
-              </ng-container>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-      <ng-template [ngIf]="isLoadingBlock">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
+            </ng-container>
+            <ng-template #skeletonRows>
               <tr>
                 <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
@@ -143,114 +75,18 @@
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+              <tr *ngIf="!auditDataMissing && indexingAvailable">
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
-              <ng-container *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
-                <tr *ngIf="isMobile && !auditEnabled"></tr>
-                <tr>
-                  <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-              </ng-container>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-      <div class="col-sm">
-        <table class="table table-borderless table-striped" *ngIf="!isLoadingBlock && (!auditDataMissing || indexingAvailable && !webGlEnabled)">
-          <tbody>
-            <tr *ngIf="isMobile && auditEnabled"></tr>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td i18n="mempool-block.fee-span">Fee span</td>
-              <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
-            </tr>
-            <tr *ngIf="block?.extras?.medianFee != undefined">
-              <td class="td-width" i18n="block.median-fee">Median fee</td>
-              <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [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></td>
-            </tr>
-            <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
-              <tr>
-                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
-                  <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                  <span class="fiat">
-                    <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
-                  </span>
-                </td>
-                <ng-template #liquidTotalFees>
-                  <td>
-                    <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
-                      [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
-                  </td>
-                </ng-template>
-              </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                <td>
-                  <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                  <span class="fiat">
-                    <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
-                  </span>
-                </td>
-              </tr>
             </ng-template>
-            <ng-template #loadingFees>
-              <tr>
-                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                <td style="width: 75%;"><span class="skeleton-loader"></span></td>
-              </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </ng-template>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td i18n="block.miner">Miner</td>
-              <td *ngIf="stateService.env.MINING_DASHBOARD">
-                <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-                  [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block.extras.pool.name }}
-                </a>
-              </td>
-              <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
-                <span placement="bottom" class="badge"
-                  [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block.extras.pool.name }}
-              </span>
-              </td>
-            </tr>
+            <ng-container *ngIf="isMobile || (webGlEnabled && (auditDataMissing || !indexingAvailable)); then restOfTable;"></ng-container>
           </tbody>
         </table>
-        <table class="table table-borderless table-striped" *ngIf="isLoadingBlock && !auditDataMissing && (indexingAvailable || !webGlEnabled)">
+      </div>
+      <div class="col-sm">
+        <table class="table table-borderless table-striped" *ngIf="!isMobile && !(webGlEnabled && (auditDataMissing || !indexingAvailable))">
           <tbody>
-            <tr *ngIf="isMobile && !auditEnabled"></tr>
-            <tr>
-              <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
+            <ng-container *ngTemplateOutlet="restOfTable"></ng-container>
           </tbody>
         </table>
         <div class="col-sm chart-container" *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
@@ -268,6 +104,87 @@
     </div>
   </div>
 
+  <ng-template #restOfTable>
+    <ng-container *ngIf="!isLoadingBlock; else loadingRest">
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td i18n="mempool-block.fee-span">Fee span</td>
+        <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
+      </tr>
+      <tr *ngIf="block?.extras?.medianFee != undefined">
+        <td class="td-width" i18n="block.median-fee">Median fee</td>
+        <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [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></td>
+      </tr>
+      <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
+        <tr>
+          <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+          <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
+            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+            <span class="fiat">
+              <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
+            </span>
+          </td>
+          <ng-template #liquidTotalFees>
+            <td>
+              <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
+                [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
+            </td>
+          </ng-template>
+        </tr>
+        <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+          <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
+          <td>
+            <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+            <span class="fiat">
+              <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
+            </span>
+          </td>
+        </tr>
+      </ng-template>
+      <ng-template #loadingFees>
+        <tr>
+          <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+          <td style="width: 75%;"><span class="skeleton-loader"></span></td>
+        </tr>
+        <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+          <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
+          <td><span class="skeleton-loader"></span></td>
+        </tr>
+      </ng-template>
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td i18n="block.miner">Miner</td>
+        <td *ngIf="stateService.env.MINING_DASHBOARD">
+          <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
+            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            {{ block.extras.pool.name }}
+          </a>
+        </td>
+        <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
+          <span placement="bottom" class="badge"
+            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            {{ block.extras.pool.name }}
+        </span>
+        </td>
+      </tr>
+    </ng-container>
+    <ng-template #loadingRest>
+      <tr>
+        <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+    </ng-template>
+  </ng-template>
+
   <span id="overview"></span>
 
   <br>