diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index fca1ce215..80fae9df8 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -1,7 +1,7 @@
-
- +
+
combineLatest([ - this.stateService.blocks$.pipe(map((blocks) => blocks[0])), - this.stateService.mempoolBlocks$ - .pipe( - map((mempoolBlocks) => { - if (!mempoolBlocks.length) { - return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }]; - } - return mempoolBlocks; - }), - ) - ])), - 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; - }); + this.mempoolBlocks$ = combineLatest([ + this.stateService.blocks$.pipe(map((blocks) => blocks[0])), + this.stateService.mempoolBlocks$ + .pipe( + map((mempoolBlocks) => { + if (!mempoolBlocks.length) { + return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }]; + } + return mempoolBlocks; + }), + ) + ]).pipe( + 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); - this.mempoolBlocksFull = JSON.parse(stringifiedBlocks); - this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); + const stringifiedBlocks = JSON.stringify(mempoolBlocks); + this.mempoolBlocksFull = JSON.parse(stringifiedBlocks); + this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); - this.now = Date.now(); + this.now = Date.now(); - this.updateMempoolBlockStyles(); - this.calculateTransactionPosition(); - - return this.mempoolBlocks; - }), - tap(() => { - const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset; - if (this.mempoolWidth !== width) { - this.mempoolWidth = width; - this.widthChange.emit(this.mempoolWidth); - this.cd.markForCheck(); - } - }) - ); + this.updateMempoolBlockStyles(); + this.calculateTransactionPosition(); + + return this.mempoolBlocks; + }), + tap(() => { + const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset; + if (this.mempoolWidth !== width) { + this.mempoolWidth = width; + this.widthChange.emit(this.mempoolWidth); + } + }) + ); this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$ .pipe(