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

Merge branch 'master' into hunicus/doc-nav-fix

Browse Source
This commit is contained in:
Felipe Knorr Kuhn
2023-01-12 22:26:20 -08:00
committed by GitHub
parent a1d582a4c8 63bc1cf4d7
commit 8299f98387
95 changed files with 2550 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.constants.ts
View File

@@ -120,7 +120,7 @@ export const languages: Language[] = [
{ code: 'he', name: 'עברית' }, // Hebrew
{ code: 'ka', name: 'ქართული' }, // Georgian
// { code: 'lv', name: 'Latviešu' }, // Latvian
// { code: 'lt', name: 'Lietuvių' }, // Lithuanian
{ code: 'lt', name: 'Lietuvių' }, // Lithuanian
{ code: 'hu', name: 'Magyar' }, // Hungarian
{ code: 'mk', name: 'Македонски' }, // Macedonian
// { code: 'ms', name: 'Bahasa Melayu' }, // Malay

2
frontend/src/app/app.module.ts
View File

@@ -6,6 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './components/app/app.component';
import { ElectrsApiService } from './services/electrs-api.service';
import { StateService } from './services/state.service';
import { CacheService } from './services/cache.service';
import { EnterpriseService } from './services/enterprise.service';
import { WebsocketService } from './services/websocket.service';
import { AudioService } from './services/audio.service';
@@ -23,6 +24,7 @@ import { AppPreloadingStrategy } from './app.preloading-strategy';
const providers = [
ElectrsApiService,
StateService,
CacheService,
WebsocketService,
AudioService,
SeoService,

4
frontend/src/app/components/address-labels/address-labels.component.ts
View File

@@ -36,7 +36,9 @@ export class AddressLabelsComponent implements OnChanges {
handleChannel() {
const type = this.vout ? 'open' : 'close';
this.label = `Channel ${type}: ${this.channel.node_left.alias} <> ${this.channel.node_right.alias}`;
const leftNodeName = this.channel.node_left.alias || this.channel.node_left.public_key.substring(0, 10);
const rightNodeName = this.channel.node_right.alias || this.channel.node_right.public_key.substring(0, 10);
this.label = `Channel ${type}: ${leftNodeName} <> ${rightNodeName}`;
}
handleVin() {

4
frontend/src/app/components/app/app.component.ts
View File

@@ -42,6 +42,10 @@ export class AppComponent implements OnInit {
if (event.target instanceof HTMLInputElement) {
return;
}
// prevent arrow key horizontal scrolling
if(["ArrowLeft","ArrowRight"].indexOf(event.code) > -1) {
event.preventDefault();
}
this.stateService.keyNavigation$.next(event);
}

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@@ -77,6 +77,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
cancelAnimationFrame(this.animationFrameRequest);
clearTimeout(this.animationHeartBeat);
}
this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
}
clear(direction): void {

4
frontend/src/app/components/block/block-preview.component.html
View File

@@ -53,13 +53,13 @@
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
[class]="!block?.extras.pool.name || 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 [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
[class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>

4
frontend/src/app/components/block/block-preview.component.scss
View File

@@ -56,3 +56,7 @@
::ng-deep .symbol {
font-size: 24px;
}
.badge {
transition: none;
}

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

@@ -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,28 @@
<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>
<span
class="health-badge badge"
[class.badge-success]="blockAudit?.matchRate >= 99"
[class.badge-warning]="blockAudit?.matchRate >= 75 && blockAudit?.matchRate < 99"
[class.badge-danger]="blockAudit?.matchRate < 75"
*ngIf="blockAudit?.matchRate != null; else nullHealth"
>{{ blockAudit?.matchRate }}%</span>
<ng-template #nullHealth>
<ng-container *ngIf="!isLoadingAudit; else loadingHealth">
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
</ng-container>
</ng-template>
<ng-template #loadingHealth>
<span class="skeleton-loader" style="max-width: 60px"></span>
</ng-template>
</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 +88,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)">
@@ -263,11 +112,93 @@
[flip]="false"
(txClickEvent)="onTxClick($event)"
></app-block-overview-graph>
<ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
</div>
</div>
</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>
@@ -283,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>
@@ -413,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;
}
}

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

@@ -43,6 +43,7 @@ export class BlockComponent implements OnInit, OnDestroy {
strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string;
isLoadingOverview = true;
isLoadingAudit = true;
error: any;
blockSubsidy: number;
fees: number;
@@ -137,7 +138,6 @@ export class BlockComponent implements OnInit, OnDestroy {
this.page = 1;
this.error = undefined;
this.fees = undefined;
this.stateService.markBlock$.next({});
this.auditDataMissing = false;
if (history.state.data && history.state.data.blockHeight) {
@@ -297,13 +297,18 @@ export class BlockComponent implements OnInit, OnDestroy {
this.auditSubscription = block$.pipe(
startWith(null),
pairwise(),
switchMap(([prevBlock, block]) => this.apiService.getBlockAudit$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
return of([]);
})
)
switchMap(([prevBlock, block]) => {
this.isLoadingAudit = true;
this.blockAudit = null;
return this.apiService.getBlockAudit$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
this.isLoadingAudit = false;
return of([]);
})
);
}
),
filter((response) => response != null),
map((response) => {
@@ -375,12 +380,14 @@ export class BlockComponent implements OnInit, OnDestroy {
console.log(err);
this.error = err;
this.isLoadingOverview = false;
this.isLoadingAudit = false;
return of(null);
}),
).subscribe((blockAudit) => {
this.blockAudit = blockAudit;
this.setupBlockGraphs();
this.isLoadingOverview = false;
this.isLoadingAudit = false;
});
}

77
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -1,36 +1,55 @@
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
<a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
<div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [style.left]="static ? (offset || 0) + 'px' : null" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
<ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
<div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
<a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
<div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
</div>
<div class="block-body">
<div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="block?.extras?.feeRange">
{{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="!block?.extras?.feeRange">
&nbsp;
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
<app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + 'block-size'" *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-time'" class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
</div>
<div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
<a [attr.data-cy]="'bitcoin-block-' + i + '-pool'" class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
{{ block.extras.pool.name}}</a>
</div>
</div>
<div class="block-body">
<div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</ng-container>
<ng-template #placeholderBlock>
<ng-container *ngIf="block && block.placeholder; else loadingBlock">
<div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span">
{{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</ng-container>
</ng-template>
<ng-template #loadingBlock>
<ng-container *ngIf="block && block.loading">
<div class="flashing">
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
<app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + 'block-size'" *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</div>
<div [attr.data-cy]="'bitcoin-block-' + i + '-time'" class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
</div>
<div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
<a [attr.data-cy]="'bitcoin-block-' + i + '-pool'" class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
{{ block.extras.pool.name}}</a>
</div>
</div>
</ng-container>
</ng-template>
</div>
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="arrowTransition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
</div>
<ng-template #loadingBlocksTemplate>

14
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -25,6 +25,10 @@
transition: background 2s, left 2s, transform 1s;
}
.mined-block.placeholder-block {
background: none !important;
}
.block-size {
font-size: 16px;
font-weight: bold;
@@ -96,6 +100,16 @@
transform-origin: top;
}
.bitcoin-block.placeholder-block::after {
content: none;
background: 0;
}
.bitcoin-block.placeholder-block::before {
content: none;
background: 0;
}
.black-background {
background-color: #11131f;
z-index: 100;

212
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -1,10 +1,16 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants';
import { BlockExtended } from '../../interfaces/node-api.interface';
import { Location } from '@angular/common';
import { config } from 'process';
import { CacheService } from 'src/app/services/cache.service';
interface BlockchainBlock extends BlockExtended {
placeholder?: boolean;
loading?: boolean;
}
@Component({
selector: 'app-blockchain-blocks',
@@ -12,13 +18,19 @@ import { config } from 'process';
styleUrls: ['./blockchain-blocks.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() static: boolean = false;
@Input() offset: number = 0;
@Input() height: number = 0;
@Input() count: number = 8;
specialBlocks = specialBlocks;
network = '';
blocks: BlockExtended[] = [];
blocks: BlockchainBlock[] = [];
emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
markHeight: number;
blocksSubscription: Subscription;
blockPageSubscription: Subscription;
networkSubscription: Subscription;
tabHiddenSubscription: Subscription;
markBlockSubscription: Subscription;
@@ -31,7 +43,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
arrowVisible = false;
arrowLeftPx = 30;
blocksFilled = false;
transition = '1s';
arrowTransition = '1s';
showMiningInfo = false;
timeLtrSubscription: Subscription;
timeLtr: boolean;
@@ -47,6 +59,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
constructor(
public stateService: StateService,
public cacheService: CacheService,
private cd: ChangeDetectorRef,
private location: Location,
) {
@@ -75,44 +88,52 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed]) => {
if (this.blocks.some((b) => b.height === block.height)) {
return;
}
if (!this.static) {
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed]) => {
if (this.blocks.some((b) => b.height === block.height)) {
return;
}
if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
this.blocks = [];
this.blocksFilled = false;
}
if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
this.blocks = [];
this.blocksFilled = false;
}
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
if (this.blocksFilled && !this.tabHidden && block.extras) {
block.extras.stage = block.extras.matchRate >= 66 ? 1 : 2;
}
if (txConfirmed) {
this.markHeight = block.height;
this.moveArrowToPosition(true, true);
} else {
this.moveArrowToPosition(true, false);
}
if (txConfirmed) {
this.markHeight = block.height;
this.moveArrowToPosition(true, true);
} else {
this.moveArrowToPosition(true, false);
}
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.cd.markForCheck();
}, 50);
if (this.blocksFilled) {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
this.cd.markForCheck();
}, 50);
} else {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
}
if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
this.blocksFilled = true;
if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
this.blocksFilled = true;
}
this.cd.markForCheck();
});
} else {
this.blockPageSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
if (block.height <= this.height && block.height > this.height - this.count) {
this.onBlockLoaded(block);
}
this.cd.markForCheck();
});
}
this.markBlockSubscription = this.stateService.markBlock$
.subscribe((state) => {
@@ -123,10 +144,26 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.moveArrowToPosition(false);
this.cd.markForCheck();
});
if (this.static) {
this.updateStaticBlocks();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (this.static) {
const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1);
this.updateStaticBlocks(animateSlide);
}
}
ngOnDestroy() {
this.blocksSubscription.unsubscribe();
if (this.blocksSubscription) {
this.blocksSubscription.unsubscribe();
}
if (this.blockPageSubscription) {
this.blockPageSubscription.unsubscribe();
}
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
@@ -142,13 +179,13 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex > -1) {
if (!animate) {
this.transition = 'inherit';
this.arrowTransition = 'inherit';
}
this.arrowVisible = true;
if (newBlockFromLeft) {
this.arrowLeftPx = blockindex * 155 + 30 - 205;
setTimeout(() => {
this.transition = '2s';
this.arrowTransition = '2s';
this.arrowLeftPx = blockindex * 155 + 30;
this.cd.markForCheck();
}, 50);
@@ -156,45 +193,117 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.arrowLeftPx = blockindex * 155 + 30;
if (!animate) {
setTimeout(() => {
this.transition = '2s';
this.arrowTransition = '2s';
this.cd.markForCheck();
});
}, 50);
}
}
} else {
this.arrowVisible = false;
}
}
trackByBlocksFn(index: number, item: BlockExtended) {
trackByBlocksFn(index: number, item: BlockchainBlock) {
return item.height;
}
getStyleForBlock(block: BlockExtended) {
updateStaticBlocks(animateSlide: boolean = false) {
// reset blocks
this.blocks = [];
this.blockStyles = [];
while (this.blocks.length < this.count) {
const height = this.height - this.blocks.length;
let block;
if (height >= 0) {
this.cacheService.loadBlock(height);
block = this.cacheService.getCachedBlock(height) || null;
}
this.blocks.push(block || {
placeholder: height < 0,
loading: height >= 0,
id: '',
height,
version: 0,
timestamp: 0,
bits: 0,
nonce: 0,
difficulty: 0,
merkle_root: '',
tx_count: 0,
size: 0,
weight: 0,
previousblockhash: '',
});
}
this.blocks = this.blocks.slice(0, this.count);
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
this.cd.markForCheck();
if (animateSlide) {
// animate blocks slide right
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
this.cd.markForCheck();
}, 50);
this.moveArrowToPosition(true, true);
} else {
this.moveArrowToPosition(false, false);
}
}
onBlockLoaded(block: BlockExtended) {
const blockIndex = this.height - block.height;
if (blockIndex >= 0 && blockIndex < this.blocks.length) {
this.blocks[blockIndex] = block;
this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
}
this.cd.markForCheck();
}
getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
if (!block || block.placeholder) {
return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
} else if (block.loading) {
return this.getStyleForLoadingBlock(index, animateEnterFrom);
}
const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
let addLeft = 0;
if (block?.extras?.stage === 1) {
block.extras.stage = 2;
addLeft = -205;
if (animateEnterFrom) {
addLeft = animateEnterFrom || 0;
}
return {
left: addLeft + 155 * this.blocks.indexOf(block) + 'px',
left: addLeft + 155 * index + 'px',
background: `repeating-linear-gradient(
#2d3348,
#2d3348 ${greenBackgroundHeight}%,
${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
${this.gradientColors[this.network][1]} 100%
)`,
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
};
}
getStyleForEmptyBlock(block: BlockExtended) {
let addLeft = 0;
getStyleForLoadingBlock(index: number, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
if (block?.extras?.stage === 1) {
block.extras.stage = 2;
addLeft = -205;
}
return {
left: addLeft + (155 * index) + 'px',
background: "#2d3348",
};
}
getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
};
}
getStyleForEmptyBlock(block: BlockExtended, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
@@ -219,7 +328,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
weight: 0,
previousblockhash: '',
matchRate: 0,
stage: 0,
});
}
return emptyBlocks;

10
frontend/src/app/components/blockchain/blockchain.component.html
View File

@@ -2,10 +2,14 @@
<div class="position-container" [ngClass]="network ? network : ''">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div class="scroll-spacer" *ngIf="minScrollWidth" [style.left]="minScrollWidth + 'px'"></div>
<app-mempool-blocks [hidden]="pageIndex > 0"></app-mempool-blocks>
<app-blockchain-blocks [hidden]="pageIndex > 0"></app-blockchain-blocks>
<ng-container *ngFor="let page of pages; trackBy: trackByPageFn">
<app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [count]="blocksPerPage"></app-blockchain-blocks>
</ng-container>
</div>
<div id="divider">
<div id="divider" [hidden]="pageIndex > 0">
<button class="time-toggle" (click)="toggleTimeDirection()"><fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon></button>
</div>
</span>

9
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@@ -72,6 +72,15 @@
position: relative;
}
.scroll-spacer {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.loading-block {
position: absolute;
text-align: center;

11
frontend/src/app/components/blockchain/blockchain.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@@ -9,6 +9,11 @@ import { StateService } from '../../services/state.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainComponent implements OnInit, OnDestroy {
@Input() pages: any[] = [];
@Input() pageIndex: number;
@Input() blocksPerPage: number = 8;
@Input() minScrollWidth: number = 0;
network: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
@@ -29,6 +34,10 @@ export class BlockchainComponent implements OnInit, OnDestroy {
this.timeLtrSubscription.unsubscribe();
}
trackByPageFn(index: number, item: { index: number }) {
return item.index;
}
toggleTimeDirection() {
this.ltrTransitionEnabled = true;
this.stateService.timeLtr.next(!this.timeLtr);

31
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@@ -14,7 +14,7 @@
i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
<th *ngIf="indexingAvailable" class="health text-left" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
<th *ngIf="indexingAvailable" class="health text-right" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
<th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
@@ -27,7 +27,7 @@
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td class="text-left" [class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a>
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
</td>
<td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<div class="tooltip-custom">
@@ -46,16 +46,23 @@
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<a class="clear-link" [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null">
<div class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': (100 - (auditScores[block.id] || 0)) + '%' }"></div>
<div class="progress-text">
<span *ngIf="auditScores[block.id] != null;">{{ auditScores[block.id] }}%</span>
<span *ngIf="auditScores[block.id] == null">~</span>
</div>
</div>
</a>
<a
class="health-badge badge"
[class.badge-success]="auditScores[block.id] >= 99"
[class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
[class.badge-danger]="auditScores[block.id] < 75"
[routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
[state]="{ data: { block: block } }"
*ngIf="auditScores[block.id] != null; else nullHealth"
>{{ auditScores[block.id] }}%</a>
<ng-template #nullHealth>
<ng-container *ngIf="!loadingScores; else loadingHealth">
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
</ng-container>
</ng-template>
<ng-template #loadingHealth>
<span class="skeleton-loader" style="max-width: 60px"></span>
</ng-template>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>

3
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@@ -23,6 +23,7 @@ export class BlocksList implements OnInit, OnDestroy {
indexingAvailable = false;
isLoading = true;
loadingScores = true;
fromBlockHeight = undefined;
paginationMaxSize: number;
page = 1;
@@ -113,6 +114,7 @@ export class BlocksList implements OnInit, OnDestroy {
if (this.indexingAvailable) {
this.auditScoreSubscription = this.fromHeightSubject.pipe(
switchMap((fromBlockHeight) => {
this.loadingScores = true;
return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
.pipe(
catchError(() => {
@@ -124,6 +126,7 @@ export class BlocksList implements OnInit, OnDestroy {
Object.values(scores).forEach(score => {
this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
});
this.loadingScores = false;
});
this.latestScoreSubscription = this.stateService.blocks$.pipe(

2
frontend/src/app/components/search-form/search-form.component.html
View File

@@ -5,7 +5,7 @@
<app-search-results #searchResults [hidden]="dropdownHidden" [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
</div>
<div>
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary">
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-purple">
<fa-icon *ngIf="!(isTypeaheading$ | async) else searchLoading" [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon>
</button>
</div>

3
frontend/src/app/components/search-form/search-form.component.scss
View File

@@ -43,9 +43,6 @@ form {
@media (min-width: 1200px) {
min-width: 300px;
}
input {
border: 0px;
}
.btn {
width: 100px;
}

3
frontend/src/app/components/start/start.component.html
View File

@@ -11,8 +11,9 @@
<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
(mousedown)="onMouseDown($event)"
(dragstart)="onDragStart($event)"
(scroll)="onScroll($event)"
>
<app-blockchain></app-blockchain>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
</div>
<router-outlet></router-outlet>

207
frontend/src/app/components/start/start.component.ts
View File

@@ -19,16 +19,51 @@ export class StartComponent implements OnInit, OnDestroy {
blockchainScrollLeftInit: number;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
chainTipSubscription: Subscription;
chainTip: number = -1;
markBlockSubscription: Subscription;
@ViewChild('blockchainContainer') blockchainContainer: ElementRef;
isMobile: boolean = false;
blockWidth = 155;
blocksPerPage: number = 1;
pageWidth: number;
firstPageWidth: number;
minScrollWidth: number;
pageIndex: number = 0;
pages: any[] = [];
pendingMark: number | void = null;
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT);
this.onResize();
this.updatePages();
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
});
this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
this.chainTip = height;
this.updatePages();
if (this.pendingMark != null) {
this.scrollToBlock(this.pendingMark);
this.pendingMark = null;
}
});
this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
if (mark?.blockHeight != null) {
if (this.chainTip >=0) {
if (!this.blockInViewport(mark.blockHeight)) {
this.scrollToBlock(mark.blockHeight);
}
} else {
this.pendingMark = mark.blockHeight;
}
}
});
this.stateService.blocks$
.subscribe((blocks: any) => {
if (this.stateService.network !== '') {
@@ -55,6 +90,34 @@ export class StartComponent implements OnInit, OnDestroy {
});
}
@HostListener('window:resize', ['$event'])
onResize(): void {
this.isMobile = window.innerWidth <= 767.98;
let firstVisibleBlock;
let offset;
if (this.blockchainContainer?.nativeElement != null) {
this.pages.forEach(page => {
const left = page.offset - this.getConvertedScrollOffset();
const right = left + this.pageWidth;
if (left <= 0 && right > 0) {
const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
firstVisibleBlock = page.height - blockIndex;
offset = left + (blockIndex * this.blockWidth);
}
});
}
this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
this.pageWidth = this.blocksPerPage * this.blockWidth;
this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
if (firstVisibleBlock != null) {
this.scrollToBlock(firstVisibleBlock, offset);
} else {
this.updatePages();
}
}
onMouseDown(event: MouseEvent) {
this.mouseDragStartX = event.clientX;
this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
@@ -70,7 +133,7 @@ export class StartComponent implements OnInit, OnDestroy {
if (this.mouseDragStartX != null) {
this.stateService.setBlockScrollingInProgress(true);
this.blockchainContainer.nativeElement.scrollLeft =
this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX
this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
}
}
@HostListener('document:mouseup', [])
@@ -79,7 +142,149 @@ export class StartComponent implements OnInit, OnDestroy {
this.stateService.setBlockScrollingInProgress(false);
}
onScroll(e) {
const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
// compensate for css transform
const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
const scrollLeft = this.getConvertedScrollOffset();
if (scrollLeft > backThreshold) {
if (this.shiftPagesBack()) {
this.addConvertedScrollOffset(-this.pageWidth);
this.blockchainScrollLeftInit -= this.pageWidth;
}
} else if (scrollLeft < forwardThreshold) {
if (this.shiftPagesForward()) {
this.addConvertedScrollOffset(this.pageWidth);
this.blockchainScrollLeftInit += this.pageWidth;
}
}
}
scrollToBlock(height, blockOffset = 0) {
if (!this.blockchainContainer?.nativeElement) {
setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
return;
}
const targetHeight = this.isMobile ? height - 1 : height;
const viewingPageIndex = this.getPageIndexOf(targetHeight);
const pages = [];
this.pageIndex = Math.max(viewingPageIndex - 1, 0);
let viewingPage = this.getPageAt(viewingPageIndex);
const isLastPage = viewingPage.height < this.blocksPerPage;
if (isLastPage) {
this.pageIndex = Math.max(viewingPageIndex - 2, 0);
viewingPage = this.getPageAt(viewingPageIndex);
}
const left = viewingPage.offset - this.getConvertedScrollOffset();
const blockIndex = viewingPage.height - targetHeight;
const targetOffset = (this.blockWidth * blockIndex) + left;
let deltaOffset = targetOffset - blockOffset;
if (isLastPage) {
pages.push(this.getPageAt(viewingPageIndex - 2));
}
if (viewingPageIndex > 1) {
pages.push(this.getPageAt(viewingPageIndex - 1));
}
if (viewingPageIndex > 0) {
pages.push(viewingPage);
}
if (!isLastPage) {
pages.push(this.getPageAt(viewingPageIndex + 1));
}
if (viewingPageIndex === 0) {
pages.push(this.getPageAt(viewingPageIndex + 2));
}
this.pages = pages;
this.addConvertedScrollOffset(deltaOffset);
}
updatePages() {
const pages = [];
if (this.pageIndex > 0) {
pages.push(this.getPageAt(this.pageIndex));
}
pages.push(this.getPageAt(this.pageIndex + 1));
pages.push(this.getPageAt(this.pageIndex + 2));
this.pages = pages;
}
shiftPagesBack(): boolean {
const nextPage = this.getPageAt(this.pageIndex + 3);
if (nextPage.height >= 0) {
this.pageIndex++;
this.pages.forEach(page => page.offset -= this.pageWidth);
if (this.pageIndex !== 1) {
this.pages.shift();
}
this.pages.push(this.getPageAt(this.pageIndex + 2));
return true;
} else {
return false;
}
}
shiftPagesForward(): boolean {
if (this.pageIndex > 0) {
this.pageIndex--;
this.pages.forEach(page => page.offset += this.pageWidth);
this.pages.pop();
if (this.pageIndex) {
this.pages.unshift(this.getPageAt(this.pageIndex));
}
return true;
}
return false;
}
getPageAt(index: number) {
const height = this.chainTip - 8 - ((index - 1) * this.blocksPerPage)
return {
offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
height: height,
depth: this.chainTip - height,
index: index,
};
}
getPageIndexOf(height: number): number {
const delta = this.chainTip - 8 - height;
return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
}
blockInViewport(height: number): boolean {
const firstHeight = this.pages[0].height;
const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation;
const xPos = firstX + ((firstHeight - height) * 155);
return xPos > -55 && xPos < (window.innerWidth - 100);
}
getConvertedScrollOffset(): number {
if (this.timeLtr) {
return -this.blockchainContainer?.nativeElement?.scrollLeft || 0;
} else {
return this.blockchainContainer?.nativeElement?.scrollLeft || 0;
}
}
addConvertedScrollOffset(offset: number): void {
if (!this.blockchainContainer?.nativeElement) {
return;
}
if (this.timeLtr) {
this.blockchainContainer.nativeElement.scrollLeft -= offset;
} else {
this.blockchainContainer.nativeElement.scrollLeft += offset;
}
}
ngOnDestroy() {
this.timeLtrSubscription.unsubscribe();
this.chainTipSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
}
}

4
frontend/src/app/components/transaction/transaction-preview.component.ts
View File

@@ -11,6 +11,7 @@ import {
import { Transaction, Vout } from '../../interfaces/electrs.interface';
import { of, merge, Subscription, Observable, Subject, from } from 'rxjs';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { OpenGraphService } from '../../services/opengraph.service';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
@@ -45,6 +46,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private electrsApiService: ElectrsApiService,
private stateService: StateService,
private cacheService: CacheService,
private apiService: ApiService,
private seoService: SeoService,
private openGraphService: OpenGraphService,
@@ -97,7 +99,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
}),
switchMap(() => {
let transactionObservable$: Observable<Transaction>;
const cached = this.stateService.getTxFromCache(this.txId);
const cached = this.cacheService.getTxFromCache(this.txId);
if (cached && cached.fee !== -1) {
transactionObservable$ = of(cached);
} else {

38
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -13,6 +13,7 @@ import {
import { Transaction } from '../../interfaces/electrs.interface';
import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { WebsocketService } from '../../services/websocket.service';
import { AudioService } from '../../services/audio.service';
import { ApiService } from '../../services/api.service';
@@ -74,6 +75,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
private relativeUrlPipe: RelativeUrlPipe,
private electrsApiService: ElectrsApiService,
private stateService: StateService,
private cacheService: CacheService,
private websocketService: WebsocketService,
private audioService: AudioService,
private apiService: ApiService,
@@ -131,26 +133,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.cpfpInfo = null;
return;
}
if (cpfpInfo.effectiveFeePerVsize) {
this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
} else {
const lowerFeeParents = cpfpInfo.ancestors.filter(
(parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
);
let totalWeight =
this.tx.weight +
lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
let totalFees =
this.tx.fee +
lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
if (cpfpInfo?.bestDescendant) {
totalWeight += cpfpInfo?.bestDescendant.weight;
totalFees += cpfpInfo?.bestDescendant.fee;
}
this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
// merge ancestors/descendants
const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
relatives.push(cpfpInfo.bestDescendant);
}
let totalWeight =
this.tx.weight +
relatives.reduce((prev, val) => prev + val.weight, 0);
let totalFees =
this.tx.fee +
relatives.reduce((prev, val) => prev + val.fee, 0);
this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
if (!this.tx.status.confirmed) {
this.stateService.markBlock$.next({
txFeePerVSize: this.tx.effectiveFeePerVsize,
@@ -203,7 +199,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}),
switchMap(() => {
let transactionObservable$: Observable<Transaction>;
const cached = this.stateService.getTxFromCache(this.txId);
const cached = this.cacheService.getTxFromCache(this.txId);
if (cached && cached.fee !== -1) {
transactionObservable$ = of(cached);
} else {
@@ -302,7 +298,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.waitingForTransaction = false;
}
this.rbfTransaction = rbfTransaction;
this.stateService.setTxCache([this.rbfTransaction]);
this.cacheService.setTxCache([this.rbfTransaction]);
});
this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {

7
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription } from 'rxjs';
import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -44,6 +45,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
constructor(
public stateService: StateService,
private cacheService: CacheService,
private electrsApiService: ElectrsApiService,
private apiService: ApiService,
private assetsService: AssetsService,
@@ -91,6 +93,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
filter(() => this.stateService.env.LIGHTNING),
switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
tap((channels) => {
if (!this.transactions) {
return;
}
const transactions = this.transactions.filter((tx) => !tx._channels);
channels.forEach((channel, i) => {
transactions[i]._channels = channel;
@@ -120,7 +125,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
this.transactionsLength = this.transactions.length;
this.stateService.setTxCache(this.transactions);
this.cacheService.setTxCache(this.transactions);
this.transactions.forEach((tx) => {
tx['@voutLimit'] = true;

14
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
View File

@@ -88,7 +88,7 @@
<stop offset="100%" stop-color="transparent" />
</linearGradient>
</defs>
<path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<ng-container *ngFor="let input of inputs; let i = index">
<path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
[attr.d]="input.connectorPath"
@@ -106,7 +106,7 @@
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path
<path *ngIf="!input.zeroValue"
[attr.d]="input.path"
class="line {{input.class}}"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@@ -116,6 +116,16 @@
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path *ngIf="input.zeroValue"
[attr.d]="input.path"
class="line {{input.class}} zerovalue"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
[class.zerovalue]="input.zeroValue"
[style]="input.style"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
</ng-container>
<ng-container *ngFor="let output of outputs; let i = index">
<path *ngIf="connectors && outspends[outputData[i].index]?.spent"

9
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
View File

@@ -68,6 +68,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
outspends: Outspend[] = [];
zeroValueWidth = 60;
zeroValueThickness = 20;
hasLine: boolean;
outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -162,7 +163,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
let truncatedInputs = this.tx.vin.map((v, i) => {
return {
type: 'input',
value: v?.prevout?.value,
value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
txid: v.txid,
vout: v.vout,
address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@@ -198,6 +199,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
};
this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
&& this.outputs.reduce((line, put) => line || !put.zeroValue, false);
}
calcTotalValue(tx: Transaction): number {
@@ -278,6 +282,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
lineParams.forEach((line, i) => {
if (xputs[i].value === 0) {
line.outerY = lastOuter + (this.zeroValueThickness / 2);
if (xputs.length === 1) {
line.outerY = (this.height / 2);
}
lastOuter += this.zeroValueThickness + spacing;
return;
}

3
frontend/src/app/interfaces/node-api.interface.ts
View File

@@ -24,7 +24,6 @@ export interface CpfpInfo {
ancestors: Ancestor[];
descendants?: Ancestor[];
bestDescendant?: BestDescendant | null;
effectiveFeePerVsize?: number;
}
export interface DifficultyAdjustment {
@@ -122,8 +121,6 @@ export interface BlockExtension {
name: string;
slug: string;
}
stage?: number; // Frontend only
}
export interface BlockExtended extends Block {

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View File

@@ -118,7 +118,7 @@ export class NodesNetworksChartComponent implements OnInit {
color: 'grey',
fontSize: 15
},
text: $localize`Indexing in progess`,
text: $localize`Indexing in progress`,
left: 'center',
top: 'center',
};

2
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
View File

@@ -109,7 +109,7 @@ export class LightningStatisticsChartComponent implements OnInit {
color: 'grey',
fontSize: 15
},
text: $localize`Indexing in progess`,
text: $localize`Indexing in progress`,
left: 'center',
top: 'center'
};

105
frontend/src/app/services/cache.service.ts Normal file
View File

@@ -0,0 +1,105 @@
import { Injectable } from '@angular/core';
import { firstValueFrom, Subject, Subscription} from 'rxjs';
import { Transaction } from '../interfaces/electrs.interface';
import { BlockExtended } from '../interfaces/node-api.interface';
import { StateService } from './state.service';
import { ApiService } from './api.service';
const BLOCK_CACHE_SIZE = 500;
const KEEP_RECENT_BLOCKS = 50;
@Injectable({
providedIn: 'root'
})
export class CacheService {
loadedBlocks$ = new Subject<BlockExtended>();
tip: number = 0;
txCache: { [txid: string]: Transaction } = {};
blockCache: { [height: number]: BlockExtended } = {};
blockLoading: { [height: number]: boolean } = {};
copiesInBlockQueue: { [height: number]: number } = {};
blockPriorities: number[] = [];
constructor(
private stateService: StateService,
private apiService: ApiService,
) {
this.stateService.blocks$.subscribe(([block]) => {
this.addBlockToCache(block);
this.clearBlocks();
});
this.stateService.chainTip$.subscribe((height) => {
this.tip = height;
});
}
setTxCache(transactions) {
this.txCache = {};
transactions.forEach(tx => {
this.txCache[tx.txid] = tx;
});
}
getTxFromCache(txid) {
if (this.txCache && this.txCache[txid]) {
return this.txCache[txid];
} else {
return null;
}
}
addBlockToCache(block: BlockExtended) {
this.blockCache[block.height] = block;
this.bumpBlockPriority(block.height);
}
async loadBlock(height) {
if (!this.blockCache[height] && !this.blockLoading[height]) {
const chunkSize = 10;
const maxHeight = Math.ceil(height / chunkSize) * chunkSize;
for (let i = 0; i < chunkSize; i++) {
this.blockLoading[maxHeight - i] = true;
}
const result = await firstValueFrom(this.apiService.getBlocks$(maxHeight));
for (let i = 0; i < chunkSize; i++) {
delete this.blockLoading[maxHeight - i];
}
if (result && result.length) {
result.forEach(block => {
this.addBlockToCache(block);
this.loadedBlocks$.next(block);
});
}
this.clearBlocks();
} else {
this.bumpBlockPriority(height);
}
}
// increase the priority of a block, to delay removal
bumpBlockPriority(height) {
this.blockPriorities.push(height);
this.copiesInBlockQueue[height] = (this.copiesInBlockQueue[height] || 0) + 1;
}
// remove lowest priority blocks from the cache
clearBlocks() {
while (Object.keys(this.blockCache).length > (BLOCK_CACHE_SIZE + KEEP_RECENT_BLOCKS) && this.blockPriorities.length > KEEP_RECENT_BLOCKS) {
const height = this.blockPriorities.shift();
if (this.copiesInBlockQueue[height] > 1) {
this.copiesInBlockQueue[height]--;
} else if ((this.tip - height) < KEEP_RECENT_BLOCKS) {
this.bumpBlockPriority(height);
} else {
delete this.blockCache[height];
delete this.copiesInBlockQueue[height];
}
}
}
getCachedBlock(height) {
return this.blockCache[height];
}
}

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

@@ -104,6 +104,7 @@ export class StateService {
backendInfo$ = new ReplaySubject<IBackendInfo>(1);
loadingIndicators$ = new ReplaySubject<ILoadingIndicators>(1);
recommendedFees$ = new ReplaySubject<Recommendedfees>(1);
chainTip$ = new ReplaySubject<number>(-1);
live2Chart$ = new Subject<OptimizedMempoolStats>();
@@ -111,15 +112,13 @@ export class StateService {
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
isTabHidden$: Observable<boolean>;
markBlock$ = new ReplaySubject<MarkBlockState>();
markBlock$ = new BehaviorSubject<MarkBlockState>({});
keyNavigation$ = new Subject<KeyboardEvent>();
blockScrolling$: Subject<boolean> = new Subject<boolean>();
timeLtr: BehaviorSubject<boolean>;
hideFlow: BehaviorSubject<boolean>;
txCache: { [txid: string]: Transaction } = {};
constructor(
@Inject(PLATFORM_ID) private platformId: any,
@Inject(LOCALE_ID) private locale: string,
@@ -274,18 +273,15 @@ export class StateService {
return this.network === 'liquid' || this.network === 'liquidtestnet';
}
setTxCache(transactions) {
this.txCache = {};
transactions.forEach(tx => {
this.txCache[tx.txid] = tx;
});
resetChainTip() {
this.latestBlockHeight = -1;
this.chainTip$.next(-1);
}
getTxFromCache(txid) {
if (this.txCache && this.txCache[txid]) {
return this.txCache[txid];
} else {
return null;
updateChainTip(height) {
if (height > this.latestBlockHeight) {
this.latestBlockHeight = height;
this.chainTip$.next(height);
}
}
}

8
frontend/src/app/services/websocket.service.ts
View File

@@ -70,7 +70,7 @@ export class WebsocketService {
clearTimeout(this.onlineCheckTimeout);
clearTimeout(this.onlineCheckTimeoutTwo);
this.stateService.latestBlockHeight = -1;
this.stateService.resetChainTip();
this.websocketSubject.complete();
this.subscription.unsubscribe();
@@ -224,12 +224,14 @@ export class WebsocketService {
handleResponse(response: WebsocketResponse) {
if (response.blocks && response.blocks.length) {
const blocks = response.blocks;
let maxHeight = 0;
blocks.forEach((block: BlockExtended) => {
if (block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = block.height;
maxHeight = Math.max(maxHeight, block.height);
this.stateService.blocks$.next([block, false]);
}
});
this.stateService.updateChainTip(maxHeight);
}
if (response.tx) {
@@ -238,7 +240,7 @@ export class WebsocketService {
if (response.block) {
if (response.block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = response.block.height;
this.stateService.updateChainTip(response.block.height);
this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
}