mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-19 05:34:03 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2987 from mempool/mononaut/fix-liquid-scroll-blocks

Browse Source 
Fix blockchain gaps when KEEP_BLOCKS_AMOUNT > INITIAL_BLOCKS_AMOUNT
This commit is contained in:
softsimon 2023-01-28 17:11:45 +04:00 committed by GitHub
commit 150f16ea92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
specialBlocks = specialBlocks; specialBlocks = specialBlocks;
network = ''; network = '';
blocks: BlockchainBlock[] = []; blocks: BlockchainBlock[] = [];
dynamicBlocksAmount: number = 8;
emptyBlocks: BlockExtended[] = this.mountEmptyBlocks(); emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
markHeight: number; markHeight: number;
blocksSubscription: Subscription; blocksSubscription: Subscription;
@ -70,6 +71,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
ngOnInit() { ngOnInit() {
this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
if (['', 'testnet', 'signet'].includes(this.stateService.network)) { if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
this.enabledMiningInfoIfNeeded(this.location.path()); this.enabledMiningInfoIfNeeded(this.location.path());
this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url)); this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@ -100,7 +103,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
this.blocks.unshift(block); this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT); this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
if (txConfirmed) { if (txConfirmed) {
this.markHeight = block.height; this.markHeight = block.height;
@ -121,7 +124,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i))); this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
} }
if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) { if (this.blocks.length === this.dynamicBlocksAmount) {
this.blocksFilled = true; this.blocksFilled = true;
} }
this.cd.markForCheck(); this.cd.markForCheck();
@ -312,7 +315,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
mountEmptyBlocks() { mountEmptyBlocks() {
const emptyBlocks = []; const emptyBlocks = [];
for (let i = 0; i < this.stateService.env.KEEP_BLOCKS_AMOUNT; i++) { for (let i = 0; i < this.dynamicBlocksAmount; i++) {
emptyBlocks.push({ emptyBlocks.push({
id: '', id: '',
height: 0, height: 0,

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

@ -22,10 +22,13 @@ export class StartComponent implements OnInit, OnDestroy {
chainTipSubscription: Subscription; chainTipSubscription: Subscription;
chainTip: number = -1; chainTip: number = -1;
markBlockSubscription: Subscription; markBlockSubscription: Subscription;
blockCounterSubscription: Subscription;
@ViewChild('blockchainContainer') blockchainContainer: ElementRef; @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
isMobile: boolean = false; isMobile: boolean = false;
blockWidth = 155; blockWidth = 155;
dynamicBlocksAmount: number = 8;
blockCount: number = 0;
blocksPerPage: number = 1; blocksPerPage: number = 1;
pageWidth: number; pageWidth: number;
firstPageWidth: number; firstPageWidth: number;
@ -39,7 +42,15 @@ export class StartComponent implements OnInit, OnDestroy {
) { } ) { }
ngOnInit() { ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT); this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe(() => {
this.blockCount++;
this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
this.onResize();
}
});
this.onResize(); this.onResize();
this.updatePages(); this.updatePages();
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@ -241,7 +252,7 @@ export class StartComponent implements OnInit, OnDestroy {
} }
getPageAt(index: number) { getPageAt(index: number) {
const height = this.chainTip - 8 - ((index - 1) * this.blocksPerPage) const height = this.chainTip - this.dynamicBlocksAmount - ((index - 1) * this.blocksPerPage);
return { return {
offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)), offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
height: height, height: height,
@ -255,7 +266,7 @@ export class StartComponent implements OnInit, OnDestroy {
} }
getPageIndexOf(height: number): number { getPageIndexOf(height: number): number {
const delta = this.chainTip - 8 - height; const delta = this.chainTip - this.dynamicBlocksAmount - height;
return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1); return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
} }
@ -290,5 +301,6 @@ export class StartComponent implements OnInit, OnDestroy {
this.timeLtrSubscription.unsubscribe(); this.timeLtrSubscription.unsubscribe();
this.chainTipSubscription.unsubscribe(); this.chainTipSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe(); this.markBlockSubscription.unsubscribe();
this.blockCounterSubscription.unsubscribe();
} }
} }