Block page audit fallback

frontend/mempool-frontend-config.sample.json

@@ -17,5 +17,6 @@
   "LIQUID_WEBSITE_URL": "https://liquid.network",
   "BISQ_WEBSITE_URL": "https://bisq.markets",
   "MINING_DASHBOARD": true,
+  "BLOCK_AUDIT_START_HEIGHT": 0,
   "LIGHTNING": false
 }

frontend/src/app/components/block/block.component.html

@@ -61,7 +61,7 @@
                   <span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</span>
                 </td>
               </tr>
-              <ng-container *ngIf="!indexingAvailable && webGlEnabled">
+              <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>
@@ -146,7 +146,7 @@
               <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
-              <ng-container *ngIf="!indexingAvailable && webGlEnabled">
+              <ng-container *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
                 <tr *ngIf="isMobile && !auditEnabled"></tr>
                 <tr>
                   <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
@@ -169,7 +169,7 @@
         </div>
       </ng-template>
       <div class="col-sm">
-        <table class="table table-borderless table-striped" *ngIf="!isLoadingBlock && (indexingAvailable || !webGlEnabled)">
+        <table class="table table-borderless table-striped" *ngIf="!isLoadingBlock && (!auditDataMissing || indexingAvailable && !webGlEnabled)">
           <tbody>
             <tr *ngIf="isMobile && auditEnabled"></tr>
             <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
@@ -233,7 +233,7 @@
             </tr>
           </tbody>
         </table>
-        <table class="table table-borderless table-striped" *ngIf="isLoadingBlock && (indexingAvailable || !webGlEnabled)">
+        <table class="table table-borderless table-striped" *ngIf="isLoadingBlock && !auditDataMissing && (indexingAvailable || !webGlEnabled)">
           <tbody>
             <tr *ngIf="isMobile && !auditEnabled"></tr>
             <tr>
@@ -253,7 +253,7 @@
             </tr>
           </tbody>
         </table>
-        <div class="col-sm chart-container" *ngIf="webGlEnabled && !indexingAvailable">
+        <div class="col-sm chart-container" *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
           <app-block-overview-graph
             #blockGraphActual
             [isLoading]="isLoadingOverview"
@@ -273,7 +273,7 @@
   <br>
 
   <!-- VISUALIZATIONS -->
-  <div class="box" *ngIf="!error && webGlEnabled && indexingAvailable">
+  <div class="box" *ngIf="!error && webGlEnabled && indexingAvailable && !auditDataMissing">
     <div class="nav nav-tabs" *ngIf="isMobile && auditEnabled">
       <a class="nav-link" [class.active]="mode === 'projected'" i18n="block.projected"
         fragment="projected" (click)="changeMode('projected')">Projected</a>

frontend/src/app/components/block/block.component.ts

@@ -58,6 +58,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   webGlEnabled = true;
   indexingAvailable = false;
   auditEnabled = true;
+  auditDataMissing: boolean;
   isMobile = window.innerWidth <= 767.98;
   hoverTx: string;
   numMissing: number = 0;
@@ -137,6 +138,7 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.error = undefined;
         this.fees = undefined;
         this.stateService.markBlock$.next({});
+        this.auditDataMissing = false;
 
         if (history.state.data && history.state.data.blockHeight) {
           this.blockHeight = history.state.data.blockHeight;
@@ -152,6 +154,9 @@ export class BlockComponent implements OnInit, OnDestroy {
 
         if (history.state.data && history.state.data.block) {
           this.blockHeight = history.state.data.block.height;
+          if (this.blockHeight < this.stateService.env.BLOCK_AUDIT_START_HEIGHT) {
+            this.auditDataMissing = true;
+          }
           return of(history.state.data.block);
         } else {
           this.isLoadingBlock = true;
@@ -213,7 +218,9 @@ export class BlockComponent implements OnInit, OnDestroy {
             this.apiService.getBlockAudit$(block.previousblockhash);
           }, 100);
         }
-
+        if (block.height < this.stateService.env.BLOCK_AUDIT_START_HEIGHT) {
+          this.auditDataMissing = true;
+        }
         this.block = block;
         this.blockHeight = block.height;
         this.lastBlockHeight = this.blockHeight;
@@ -363,6 +370,7 @@ export class BlockComponent implements OnInit, OnDestroy {
             this.auditEnabled = true;
           } else {
             this.auditEnabled = false;
+            this.auditDataMissing = true;
           }
           return blockAudit;
         }),

frontend/src/app/services/state.service.ts

@@ -39,6 +39,7 @@ export interface Env {
   BISQ_WEBSITE_URL: string;
   MINING_DASHBOARD: boolean;
   LIGHTNING: boolean;
+  BLOCK_AUDIT_START_HEIGHT: number;
 }
 
 const defaultEnv: Env = {
@@ -64,6 +65,7 @@ const defaultEnv: Env = {
   'BISQ_WEBSITE_URL': 'https://bisq.markets',
   'MINING_DASHBOARD': true,
   'LIGHTNING': false,
+  'BLOCK_AUDIT_START_HEIGHT': 0,
 };
 
 @Injectable({

frontend/src/app/shared/graphs.utils.ts

@@ -85,10 +85,10 @@ export const download = (href, name) => {
   document.body.removeChild(a);
 };
 
-export function detectWebGL() {
+export function detectWebGL(): boolean {
   const canvas = document.createElement('canvas');
   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-  return (gl && gl instanceof WebGLRenderingContext);
+  return !!(gl && gl instanceof WebGLRenderingContext);
 }
 
 /**