machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<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>
</td>
<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 { BehaviorSubject, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
import { BehaviorSubject, combineLatest, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, scan, skip, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service';
import { WebsocketService } from 'src/app/services/websocket.service';
@Component({
selector: 'app-blocks-list',
@ -14,57 +15,81 @@ import { StateService } from 'src/app/services/state.service';
export class BlocksList implements OnInit {
@Input() widget: boolean = false;
blocks$: Observable<BlockExtended[]> = undefined
blocks$: Observable<any[]> = undefined;
isLoading = true;
fromBlockHeight = undefined;
paginationMaxSize: number;
page = 1;
lastPage = 1;
blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
skeletonLines: number[] = [];
constructor(
private apiService: ApiService,
private websocketService: WebsocketService,
public stateService: StateService,
) {
}
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.blocks$ = this.fromHeightSubject.pipe(
switchMap(() => {
this.isLoading = true;
return this.apiService.getBlocks$(this.fromBlockHeight)
.pipe(
tap(blocks => {
if (this.blocksCount === undefined) {
this.blocksCount = blocks[0].height;
}
this.isLoading = false;
}),
map(blocks => {
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';
}
if (this.widget) {
return blocks.slice(0, 5);
}
return blocks;
}),
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
)
})
);
this.blocks$ = combineLatest([
this.fromHeightSubject.pipe(
switchMap((fromBlockHeight) => {
this.isLoading = true;
return this.apiService.getBlocks$(this.page === 1 ? undefined : fromBlockHeight)
.pipe(
tap(blocks => {
if (this.blocksCount === undefined) {
this.blocksCount = blocks[0].height;
}
this.isLoading = false;
}),
map(blocks => {
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';
}
if (this.widget) {
return blocks.slice(0, 5);
}
return blocks;
}),
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) {
this.fromBlockHeight = this.blocksCount - (page - 1) * 15;
this.fromHeightSubject.next(this.fromBlockHeight);
this.fromHeightSubject.next(this.blocksCount - (page - 1) * 15);
}
trackByBlock(index: number, block: BlockExtended) {