Show alert banner on stale blocks

This commit is contained in:
Mononaut 2023-07-08 00:34:57 -04:00
parent 385cb087d3
commit 6942a6fd6a
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 31 additions and 0 deletions

View File

@ -227,6 +227,7 @@ export interface BlockExtension {
*/ */
export interface BlockExtended extends IEsploraApi.Block { export interface BlockExtended extends IEsploraApi.Block {
extras: BlockExtension; extras: BlockExtension;
canonical?: string;
} }
export interface BlockSummary { export interface BlockSummary {

View File

@ -1,6 +1,10 @@
<div class="container-xl" (window:resize)="onResize($event)"> <div class="container-xl" (window:resize)="onResize($event)">
<div class="title-block" [class.time-ltr]="timeLtr" id="block"> <div class="title-block" [class.time-ltr]="timeLtr" id="block">
<div *ngIf="block?.stale" class="alert alert-mempool" role="alert">
<span i18n="block.reorged|Block reorg" class="alert-text">This block does not belong to the main chain, it has been replaced by:</span>
<app-truncate [text]="block.canonical" [lastChars]="12" [link]="['/block/' | relativeUrl, block.canonical]" [maxWidth]="480"></app-truncate>
</div>
<h1> <h1>
<ng-container *ngIf="blockHeight == null || blockHeight > 0; else genesis" i18n="shared.block-title">Block</ng-container> <ng-container *ngIf="blockHeight == null || blockHeight > 0; else genesis" i18n="shared.block-title">Block</ng-container>
<ng-template #genesis i18n="@@2303359202781425764">Genesis</ng-template> <ng-template #genesis i18n="@@2303359202781425764">Genesis</ng-template>
@ -23,6 +27,8 @@
<div class="grow"></div> <div class="grow"></div>
<button *ngIf="block?.stale" type="button" class="btn btn-sm btn-danger container-button" i18n="block.stale|Stale block state">Stale</button>
<button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button> <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
</div> </div>

View File

@ -1,3 +1,26 @@
.title-block {
flex-wrap: wrap;
align-items: baseline;
@media (min-width: 650px) {
flex-direction: row;
}
h1 {
margin: 0rem;
margin-right: 15px;
line-height: 1;
}
.alert-mempool {
flex-direction: row;
flex-wrap: wrap;
}
.container-button {
align-self: center;
margin-right: 1em;
}
}
.qr-wrapper { .qr-wrapper {
background-color: #FFF; background-color: #FFF;
padding: 10px; padding: 10px;

View File

@ -121,6 +121,7 @@ export interface Block {
weight: number; weight: number;
previousblockhash: string; previousblockhash: string;
stale?: boolean; stale?: boolean;
canonical?: string;
} }
export interface Address { export interface Address {