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

Fix missing mempool blocks bug

Browse Source
This commit is contained in:
Mononaut 2024-03-06 21:43:50 +00:00
parent 31e320b2e2
commit 3178d30f2a
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 40 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@ -1,7 +1,7 @@
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.minimal]="minimal"> <ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.minimal]="minimal">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;"> <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;">
<div class="flashing"> <div class="flashing" *ngIf="(mempoolBlocks$ | async) as mempoolBlocks">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn"> <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div <div
*ngIf="minimal && spotlight > 0 && spotlight === i + 1" *ngIf="minimal && spotlight > 0 && spotlight === i + 1"
class="spotlight-bottom" class="spotlight-bottom"

80
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs'; import { Subscription, Observable, of, combineLatest } from 'rxjs';
import { MempoolBlock } from '../../interfaces/websocket.interface'; import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { take, map, switchMap, tap } from 'rxjs/operators'; import { map, switchMap, tap } from 'rxjs/operators';
import { feeLevels, mempoolFeeColors } from '../../app.constants'; import { feeLevels, mempoolFeeColors } from '../../app.constants';
import { specialBlocks } from '../../app.constants'; import { specialBlocks } from '../../app.constants';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe'; import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@ -86,7 +86,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
public stateService: StateService, public stateService: StateService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
private relativeUrlPipe: RelativeUrlPipe, private relativeUrlPipe: RelativeUrlPipe,
private location: Location private location: Location,
) { } ) { }
enabledMiningInfoIfNeeded(url) { enabledMiningInfoIfNeeded(url) {
@ -129,50 +129,44 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}) })
); );
this.mempoolBlocks$ = merge( this.mempoolBlocks$ = combineLatest([
of(true), this.stateService.blocks$.pipe(map((blocks) => blocks[0])),
fromEvent(window, 'resize') this.stateService.mempoolBlocks$
) .pipe(
.pipe( map((mempoolBlocks) => {
switchMap(() => combineLatest([ if (!mempoolBlocks.length) {
this.stateService.blocks$.pipe(map((blocks) => blocks[0])), return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
this.stateService.mempoolBlocks$ }
.pipe( return mempoolBlocks;
map((mempoolBlocks) => { }),
if (!mempoolBlocks.length) { )
return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }]; ]).pipe(
} map(([lastBlock, mempoolBlocks]) => {
return mempoolBlocks; mempoolBlocks.forEach((block, i) => {
}), block.index = this.blockIndex + i;
) block.height = lastBlock.height + i + 1;
])), block.blink = specialBlocks[block.height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
map(([lastBlock, mempoolBlocks]) => { });
mempoolBlocks.forEach((block, i) => {
block.index = this.blockIndex + i;
block.height = lastBlock.height + i + 1;
block.blink = specialBlocks[block.height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
});
const stringifiedBlocks = JSON.stringify(mempoolBlocks); const stringifiedBlocks = JSON.stringify(mempoolBlocks);
this.mempoolBlocksFull = JSON.parse(stringifiedBlocks); this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
this.now = Date.now(); this.now = Date.now();
this.updateMempoolBlockStyles(); this.updateMempoolBlockStyles();
this.calculateTransactionPosition(); this.calculateTransactionPosition();
return this.mempoolBlocks; return this.mempoolBlocks;
}), }),
tap(() => { tap(() => {
const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset; const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
if (this.mempoolWidth !== width) { if (this.mempoolWidth !== width) {
this.mempoolWidth = width; this.mempoolWidth = width;
this.widthChange.emit(this.mempoolWidth); this.widthChange.emit(this.mempoolWidth);
this.cd.markForCheck(); }
} })
}) );
);
this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$ this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$
.pipe( .pipe(