mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-28 01:04:28 +01:00
Code Issues Projects Releases Wiki Activity

Update mining/blocks in real time

Browse Source
This commit is contained in:
nymkappa 2022-03-12 15:55:19 +01:00
parent 123af53de2
commit d6a0d84d71
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <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 class="height "[class]="widget ? 'widget' : ''"> <td class="height "[class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
}}</a> }}</a>
</td> </td>
<td class="pool text-left" [class]="widget ? 'widget' : ''"> <td class="pool text-left" [class]="widget ? 'widget' : ''">

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

@ -1,9 +1,10 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { BehaviorSubject, Observable, timer } from 'rxjs'; import { BehaviorSubject, combineLatest, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators'; import { delayWhen, map, retryWhen, scan, skip, 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';
import { WebsocketService } from 'src/app/services/websocket.service';
@Component({ @Component({
selector: 'app-blocks-list', selector: 'app-blocks-list',
@ -14,57 +15,81 @@ import { StateService } from 'src/app/services/state.service';
export class BlocksList implements OnInit { export class BlocksList implements OnInit {
@Input() widget: boolean = false; @Input() widget: boolean = false;
blocks$: Observable<BlockExtended[]> = undefined blocks$: Observable<any[]> = undefined;
isLoading = true; isLoading = true;
fromBlockHeight = undefined; fromBlockHeight = undefined;
paginationMaxSize: number; paginationMaxSize: number;
page = 1; page = 1;
lastPage = 1;
blocksCount: number; blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight); fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
skeletonLines: number[] = []; skeletonLines: number[] = [];
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
private websocketService: WebsocketService,
public stateService: StateService, public stateService: StateService,
) { ) {
} }
ngOnInit(): void { ngOnInit(): void {
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; this.websocketService.want(['blocks']);
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.blocks$ = this.fromHeightSubject.pipe( this.blocks$ = combineLatest([
switchMap(() => { this.fromHeightSubject.pipe(
this.isLoading = true; switchMap((fromBlockHeight) => {
return this.apiService.getBlocks$(this.fromBlockHeight) this.isLoading = true;
.pipe( return this.apiService.getBlocks$(this.page === 1 ? undefined : fromBlockHeight)
tap(blocks => { .pipe(
if (this.blocksCount === undefined) { tap(blocks => {
this.blocksCount = blocks[0].height; if (this.blocksCount === undefined) {
} this.blocksCount = blocks[0].height;
this.isLoading = false; }
}), this.isLoading = false;
map(blocks => { }),
for (const block of blocks) { map(blocks => {
// @ts-ignore: Need to add an extra field for the template for (const block of blocks) {
block.extras.pool.logo = `./resources/mining-pools/` + // @ts-ignore: Need to add an extra field for the template
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'; block.extras.pool.logo = `./resources/mining-pools/` +
} block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
if (this.widget) { }
return blocks.slice(0, 5); if (this.widget) {
} return blocks.slice(0, 5);
return blocks; }
}), return blocks;
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000)))) }),
) retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
}) )
); })
),
this.stateService.blocks$
.pipe(
skip(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT - 1),
),
])
.pipe(
scan((acc, blocks) => {
if (this.page > 1 || acc.length === 0 || (this.page === 1 && this.lastPage !== 1)) {
this.lastPage = this.page;
return blocks[0];
}
this.blocksCount = Math.max(this.blocksCount, blocks[1][0].height);
// @ts-ignore: Need to add an extra field for the template
blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
acc.unshift(blocks[1][0]);
acc = acc.slice(0, this.widget ? 5 : 15);
return acc;
}, [])
);
} }
pageChange(page: number) { pageChange(page: number) {
this.fromBlockHeight = this.blocksCount - (page - 1) * 15; this.fromHeightSubject.next(this.blocksCount - (page - 1) * 15);
this.fromHeightSubject.next(this.fromBlockHeight);
} }
trackByBlock(index: number, block: BlockExtended) { trackByBlock(index: number, block: BlockExtended) {