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

Add pagination on /mining/blocks

Browse Source
This commit is contained in:
nymkappa 2022-03-11 14:54:34 +01:00
parent 0e0331d8ab
commit d8e986996f
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 135 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
backend/src/api/blocks.ts
View File

@ -108,14 +108,23 @@ class Blocks {
blockExtended.extras.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0); blockExtended.extras.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
blockExtended.extras.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]); blockExtended.extras.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
const stats = await bitcoinClient.getBlockStats(block.id);
const coinbaseRaw: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(transactions[0].txid, true); const coinbaseRaw: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(transactions[0].txid, true);
blockExtended.extras.coinbaseRaw = coinbaseRaw.hex; blockExtended.extras.coinbaseRaw = coinbaseRaw.hex;
blockExtended.extras.medianFee = stats.feerate_percentiles[2]; // 50th percentiles
blockExtended.extras.feeRange = [stats.minfeerate, stats.feerate_percentiles, stats.maxfeerate].flat(); if (block.height === 0) {
blockExtended.extras.totalFees = stats.totalfee; blockExtended.extras.medianFee = 0; // 50th percentiles
blockExtended.extras.avgFee = stats.avgfee; blockExtended.extras.feeRange = [0, 0, 0, 0, 0, 0, 0];
blockExtended.extras.avgFeeRate = stats.avgfeerate; blockExtended.extras.totalFees = 0;
blockExtended.extras.avgFee = 0;
blockExtended.extras.avgFeeRate = 0;
} else {
const stats = await bitcoinClient.getBlockStats(block.id);
blockExtended.extras.medianFee = stats.feerate_percentiles[2]; // 50th percentiles
blockExtended.extras.feeRange = [stats.minfeerate, stats.feerate_percentiles, stats.maxfeerate].flat();
blockExtended.extras.totalFees = stats.totalfee;
blockExtended.extras.avgFee = stats.avgfee;
blockExtended.extras.avgFeeRate = stats.avgfeerate;
}
if (Common.indexingEnabled()) { if (Common.indexingEnabled()) {
let pool: PoolTag; let pool: PoolTag;
@ -336,10 +345,13 @@ class Blocks {
await blocksRepository.$saveBlockInDatabase(blockExtended); await blocksRepository.$saveBlockInDatabase(blockExtended);
return blockExtended; return this.prepareBlock(blockExtended);
} }
public async $getBlocksExtras(fromHeight: number, limit: number = 15): Promise<BlockExtended[]> { public async $getBlocksExtras(fromHeight: number, limit: number = 15): Promise<BlockExtended[]> {
// Note - This API is breaking if indexing is not available. For now it is okay because we only
// use it for the mining pages, and mining pages should not be available if indexing is turned off.
// I'll need to fix it before we refactor the block(s) related pages
try { try {
loadingIndicators.setProgress('blocks', 0); loadingIndicators.setProgress('blocks', 0);
@ -363,7 +375,7 @@ class Blocks {
for (let i = 0; i < limit && currentHeight >= 0; i++) { for (let i = 0; i < limit && currentHeight >= 0; i++) {
let block = this.getBlocks().find((b) => b.height === currentHeight); let block = this.getBlocks().find((b) => b.height === currentHeight);
if (!block && Common.indexingEnabled()) { if (!block && Common.indexingEnabled()) {
block = this.prepareBlock(await this.$indexBlock(currentHeight)); block = await this.$indexBlock(currentHeight);
} else if (!block) { } else if (!block) {
block = this.prepareBlock(await bitcoinApi.$getBlock(nextHash)); block = this.prepareBlock(await bitcoinApi.$getBlock(nextHash));
} }
@ -383,24 +395,25 @@ class Blocks {
private prepareBlock(block: any): BlockExtended { private prepareBlock(block: any): BlockExtended {
return <BlockExtended>{ return <BlockExtended>{
id: block.id ?? block.hash, // hash for indexed block id: block.id ?? block.hash, // hash for indexed block
timestamp: block?.timestamp ?? block?.blockTimestamp, // blockTimestamp for indexed block timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
height: block?.height, height: block.height,
version: block?.version, version: block.version,
bits: block?.bits, bits: block.bits,
nonce: block?.nonce, nonce: block.nonce,
difficulty: block?.difficulty, difficulty: block.difficulty,
merkle_root: block?.merkle_root, merkle_root: block.merkle_root,
tx_count: block?.tx_count, tx_count: block.tx_count,
size: block?.size, size: block.size,
weight: block?.weight, weight: block.weight,
previousblockhash: block?.previousblockhash, previousblockhash: block.previousblockhash,
extras: { extras: {
medianFee: block?.medianFee, medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
feeRange: block?.feeRange ?? [], // TODO feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
reward: block?.reward, reward: block.reward ?? block?.extras?.reward,
totalFees: block.totalFees ?? block?.fees ?? block?.extras.totalFees,
pool: block?.extras?.pool ?? (block?.pool_id ? { pool: block?.extras?.pool ?? (block?.pool_id ? {
id: block?.pool_id, id: block.pool_id,
name: block?.pool_name, name: block.pool_name,
} : undefined), } : undefined),
} }
}; };

5
backend/src/repositories/BlocksRepository.ts
View File

@ -277,7 +277,10 @@ class BlocksRepository {
const connection = await DB.pool.getConnection(); const connection = await DB.pool.getConnection();
try { try {
const [rows]: any[] = await connection.query(` const [rows]: any[] = await connection.query(`
SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp, pools.id as pool_id, pools.name as pool_name, pools.link as pool_link, pools.addresses as pool_addresses, pools.regexes as pool_regexes SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp,
pools.id as pool_id, pools.name as pool_name, pools.link as pool_link,
pools.addresses as pool_addresses, pools.regexes as pool_regexes,
previous_block_hash as previousblockhash
FROM blocks FROM blocks
JOIN pools ON blocks.pool_id = pools.id JOIN pools ON blocks.pool_id = pools.id
WHERE height = ${height}; WHERE height = ${height};

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

@ -7,32 +7,32 @@
<table class="table table-borderless"> <table class="table table-borderless">
<thead> <thead>
<th class="height" i18n="latest-blocks.height">Height</th> <th class="height" i18n="latest-blocks.height">Height</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th> <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th> <th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="reward text-right" i18n="latest-blocks.reward">Reward</th> <th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th> <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th> <th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th> <th class="size" i18n="latest-blocks.size">Size</th>
</thead> </thead>
<tbody *ngIf="blocks$ | async as blocks"> <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock"> <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td> <td>
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height <a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a> }}</a>
</td> </td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td> <td>
<img width="25" height="25" src="{{ block.extras.pool['logo'] }}" <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'"> onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{ <span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
block.extras.pool.name }}</a></span> block.extras.pool.name }}</a></span>
</td> </td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td class="reward text-right"> <td class="reward text-right">
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount> <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
</td> </td>
@ -50,51 +50,41 @@
</div> </div>
</td> </td>
</tr> </tr>
<ng-template [ngIf]="isLoading"> </tbody>
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]"> <ng-template #skeleton>
<td><span class="skeleton-loader"></span></td> <tbody>
<td><span class="skeleton-loader"></span></td> <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
<td><span class="skeleton-loader"></span></td> <td>
<td><span class="skeleton-loader"></span></td> <span class="skeleton-loader"></span>
<td><span class="skeleton-loader"></span></td> </td>
<td><span class="skeleton-loader"></span></td> <td class="timestamp">
<td><span class="skeleton-loader"></span></td> <span class="skeleton-loader"></span>
<td><span class="skeleton-loader"></span></td> </td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td>
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr> </tr>
</ng-template> </tbody>
</tbody> </ng-template>
<tbody *ngIf="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12]">
<td>
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td>
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr>
</tbody>
</table> </table>
<!-- <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" <ngb-pagination class="pagination-container float-right mt-3" [class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5"
[pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [pageSize]="15" [(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
[maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> --> </ngb-pagination>
</div> </div>

17
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -1,5 +1,6 @@
.container-xl { .container-xl {
max-width: 1400px; max-width: 1400px;
padding-bottom: 0;
} }
.container { .container {
@ -11,6 +12,15 @@
padding-bottom: 15px; padding-bottom: 15px;
} }
.disabled {
pointer-events: none;
opacity: 0.5;
}
.progress {
background-color: #2d3348;
}
.pool-name { .pool-name {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
@ -18,7 +28,7 @@
} }
.height { .height {
width: 12%; width: 10%;
@media (max-width: 1100px) { @media (max-width: 1100px) {
width: 10%; width: 10%;
} }
@ -31,6 +41,7 @@
} }
.mined { .mined {
width: 13%;
@media (max-width: 576px) { @media (max-width: 576px) {
display: none; display: none;
} }
@ -53,7 +64,7 @@
} }
.pool { .pool {
width: 12%; width: 17%;
} }
.reward { .reward {
@ -71,4 +82,4 @@
@media (max-width: 650px) { @media (max-width: 650px) {
width: 20%; width: 20%;
} }
} }

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

@ -1,6 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs'; import { BehaviorSubject, Observable, timer } from 'rxjs';
import { map, repeat, tap } from 'rxjs/operators'; import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface'; import { BlockExtended } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service'; import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
@ -13,33 +13,52 @@ import { StateService } from 'src/app/services/state.service';
}) })
export class BlocksList implements OnInit { export class BlocksList implements OnInit {
blocks$: Observable<BlockExtended[]> = undefined blocks$: Observable<BlockExtended[]> = undefined
isLoading = true; isLoading = true;
oldestBlockHeight = undefined; fromBlockHeight = undefined;
paginationMaxSize: number;
page = 1;
blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
public stateService: StateService public stateService: StateService,
) { ) {
} }
ngOnInit(): void { ngOnInit(): void {
this.blocks$ = this.apiService.getBlocks$(this.oldestBlockHeight) this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
.pipe(
tap(blocks => { this.blocks$ = this.fromHeightSubject.pipe(
this.isLoading = false; switchMap(() => {
}), this.isLoading = true;
map(blocks => { return this.apiService.getBlocks$(this.fromBlockHeight)
for (const block of blocks) { .pipe(
// @ts-ignore tap(blocks => {
block.extras.pool.logo = `./resources/mining-pools/` + if (this.blocksCount === undefined) {
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'; this.blocksCount = blocks[0].height;
this.oldestBlockHeight = block.height; }
} this.isLoading = false;
return blocks; }),
}), map(blocks => {
repeat(2), for (const block of blocks) {
); // @ts-ignore: Need to add an extra field for the template
block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
}
return blocks;
}),
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
)
})
);
}
pageChange(page: number) {
this.fromBlockHeight = this.blocksCount - (page - 1) * 15;
this.fromHeightSubject.next(this.fromBlockHeight);
} }
trackByBlock(index: number, block: BlockExtended) { trackByBlock(index: number, block: BlockExtended) {