diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 9c0049c4d..57cb8d8fe 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -22,6 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { @Input() offset: number = 0; @Input() height: number = 0; // max height of blocks in chunk (dynamic blocks only) @Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only) + @Input() dynamicBlockCount: number = 8; // number of blocks in the dynamic block chunk @Input() loadingTip: boolean = false; @Input() connected: boolean = true; @@ -45,7 +46,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { feeRounding = '1.0-0'; arrowVisible = false; arrowLeftPx = 30; - blocksFilled = false; arrowTransition = '1s'; showMiningInfo = false; timeLtrSubscription: Subscription; @@ -96,14 +96,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden); if (!this.static) { this.blocksSubscription = this.stateService.blocks$ - .subscribe(([block, txConfirmed]) => { + .subscribe(([block, txConfirmed, batch]) => { if (this.blocks.some((b) => b.height === block.height)) { return; } if (this.blocks.length && block.height !== this.blocks[0].height + 1) { this.blocks = []; - this.blocksFilled = false; } this.blocks.unshift(block); @@ -117,7 +116,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { } this.blockStyles = []; - if (this.blocksFilled && block.height > this.chainTip) { + if (!batch && block.height > this.chainTip) { this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205))); setTimeout(() => { this.blockStyles = []; @@ -128,10 +127,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i))); } - if (this.blocks.length === this.dynamicBlocksAmount) { - this.blocksFilled = true; - } - this.chainTip = Math.max(this.chainTip, block.height); this.cd.markForCheck(); }); @@ -160,7 +155,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { if (this.static) { - const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1); + const animateSlide = !!changes.dynamicBlockCount || (changes.height && (changes.height.currentValue === changes.height.previousValue + 1)); this.updateStaticBlocks(animateSlide); } } diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index 0c4a1cbb7..85a5fc631 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -6,7 +6,7 @@ - +
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index ab9875a4c..1a991e204 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -12,6 +12,7 @@ export class BlockchainComponent implements OnInit, OnDestroy { @Input() pages: any[] = []; @Input() pageIndex: number; @Input() blocksPerPage: number = 8; + @Input() dynamicBlockCount: number = 8; @Input() minScrollWidth: number = 0; network: string; diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index d48d1f299..7a84e66f4 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -105,7 +105,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { }); this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks); this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden); - this.loadingBlocks$ = this.stateService.isLoadingWebSocket$; this.mempoolBlocks$ = merge( of(true), @@ -141,6 +140,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { }) ); + this.loadingBlocks$ = combineLatest([ + this.stateService.isLoadingWebSocket$, + this.mempoolBlocks$ + ]).pipe(map(([loading, mempoolBlocks]) => { + return loading || !mempoolBlocks.length; + })); + this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$ .pipe( map((da) => { diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html index 2527c52b2..e49b65c9c 100644 --- a/frontend/src/app/components/start/start.component.html +++ b/frontend/src/app/components/start/start.component.html @@ -16,7 +16,7 @@ (dragstart)="onDragStart($event)" (scroll)="onScroll($event)" > - +
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts index dde7bc234..a40aa9a89 100644 --- a/frontend/src/app/components/start/start.component.ts +++ b/frontend/src/app/components/start/start.component.ts @@ -29,7 +29,7 @@ export class StartComponent implements OnInit, OnDestroy { isMobile: boolean = false; isiOS: boolean = false; blockWidth = 155; - dynamicBlocksAmount: number = 8; + dynamicBlocksAmount: number = 0; blockCount: number = 0; blocksPerPage: number = 1; pageWidth: number; diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index c56a5e79e..7fbc2a2b7 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -89,7 +89,7 @@ export class StateService { networkChanged$ = new ReplaySubject(1); lightningChanged$ = new ReplaySubject(1); - blocks$: ReplaySubject<[BlockExtended, boolean]>; + blocks$: ReplaySubject<[BlockExtended, boolean, boolean]>; transactions$ = new ReplaySubject(6); conversions$ = new ReplaySubject(1); bsqPrice$ = new ReplaySubject(1); @@ -157,7 +157,7 @@ export class StateService { } }); - this.blocks$ = new ReplaySubject<[BlockExtended, boolean]>(this.env.KEEP_BLOCKS_AMOUNT); + this.blocks$ = new ReplaySubject<[BlockExtended, boolean, boolean]>(this.env.KEEP_BLOCKS_AMOUNT); if (this.env.BASE_MODULE === 'bisq') { this.network = this.env.BASE_MODULE; diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index d58ab58c9..43802e0b6 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/frontend/src/app/services/websocket.service.ts @@ -228,7 +228,7 @@ export class WebsocketService { blocks.forEach((block: BlockExtended) => { if (block.height > this.stateService.latestBlockHeight) { maxHeight = Math.max(maxHeight, block.height); - this.stateService.blocks$.next([block, false]); + this.stateService.blocks$.next([block, false, true]); } }); this.stateService.updateChainTip(maxHeight); @@ -241,7 +241,7 @@ export class WebsocketService { if (response.block) { if (response.block.height > this.stateService.latestBlockHeight) { this.stateService.updateChainTip(response.block.height); - this.stateService.blocks$.next([response.block, !!response.txConfirmed]); + this.stateService.blocks$.next([response.block, !!response.txConfirmed, false]); } if (response.txConfirmed) {