mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2768 from mempool/simon/block-component-loader

Browse Source
This commit is contained in:
wiz 2022-12-01 21:38:09 +09:00 committed by GitHub
commit 5ff5275b36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/mempool-frontend-config.sample.json
View File

@ -17,5 +17,8 @@
"LIQUID_WEBSITE_URL": "https://liquid.network",
"BISQ_WEBSITE_URL": "https://bisq.markets",
"MINING_DASHBOARD": true,
"MAINNET_BLOCK_AUDIT_START_HEIGHT": 0,
"TESTNET_BLOCK_AUDIT_START_HEIGHT": 0,
"SIGNET_BLOCK_AUDIT_START_HEIGHT": 0,
"LIGHTNING": false
}

12
frontend/src/app/components/block/block.component.html
View File

@ -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>

26
frontend/src/app/components/block/block.component.ts
View File

@ -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,9 +138,11 @@ 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;
this.updateAuditDataMissingFromBlockHeight(this.blockHeight);
}
let isBlockHeight = false;
@ -152,6 +155,7 @@ export class BlockComponent implements OnInit, OnDestroy {
if (history.state.data && history.state.data.block) {
this.blockHeight = history.state.data.block.height;
this.updateAuditDataMissingFromBlockHeight(this.blockHeight);
return of(history.state.data.block);
} else {
this.isLoadingBlock = true;
@ -213,7 +217,7 @@ export class BlockComponent implements OnInit, OnDestroy {
this.apiService.getBlockAudit$(block.previousblockhash);
}, 100);
}
this.updateAuditDataMissingFromBlockHeight(block.height);
this.block = block;
this.blockHeight = block.height;
this.lastBlockHeight = this.blockHeight;
@ -363,6 +367,7 @@ export class BlockComponent implements OnInit, OnDestroy {
this.auditEnabled = true;
} else {
this.auditEnabled = false;
this.auditDataMissing = true;
}
return blockAudit;
}),
@ -582,4 +587,23 @@ export class BlockComponent implements OnInit, OnDestroy {
this.hoverTx = null;
}
}
updateAuditDataMissingFromBlockHeight(blockHeight: number): void {
switch (this.stateService.network) {
case 'testnet':
if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
}
break;
case 'signet':
if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
}
break;
default:
if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
}
}
}
}

6
frontend/src/app/services/state.service.ts
View File

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

4
frontend/src/app/shared/graphs.utils.ts
View File

@ -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);
}
/**