machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2885 from mempool/mononaut/empty-block-info

Browse Source 
Add FAQ link to empty blocks
This commit is contained in:
wiz 2023-01-12 22:46:12 +09:00 committed by GitHub
commit fd105c9c99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

20
frontend/src/app/components/block/block.component.scss
View File

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