diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index 135a8b842..eacd16118 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -26,15 +26,7 @@
position: absolute;
left: 0;
top: 75px;
- --divider-offset: 50vw;
- --mempool-offset: 0px;
- transform: translateX(calc(var(--divider-offset) + var(--mempool-offset)));
-}
-
-.blockchain-wrapper.time-ltr {
- .position-container {
- transform: translateX(calc(100vw - var(--divider-offset) - var(--mempool-offset)));
- }
+ transform: translateX(1280px);
}
.black-background {
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts
index f8f2966dd..2293b9479 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -27,8 +27,11 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
loadingTip: boolean = true;
connected: boolean = true;
- dividerOffset: number = 0;
- mempoolOffset: number = 0;
+ dividerOffset: number | null = null;
+ mempoolOffset: number | null = null;
+ positionStyle = {
+ transform: "translateX(1280px)",
+ };
constructor(
public stateService: StateService,
@@ -40,6 +43,7 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
this.network = this.stateService.network;
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
+ this.updateStyle();
});
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
this.connected = (state === 2);
@@ -63,29 +67,47 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
const prevOffset = this.mempoolOffset;
this.mempoolOffset = 0;
this.mempoolOffsetChange.emit(0);
+ this.updateStyle();
setTimeout(() => {
this.ltrTransitionEnabled = true;
this.flipping = true;
this.stateService.timeLtr.next(!this.timeLtr);
+ this.cd.markForCheck();
setTimeout(() => {
this.ltrTransitionEnabled = false;
this.flipping = false;
this.mempoolOffset = prevOffset;
- this.mempoolOffsetChange.emit(this.mempoolOffset);
+ this.mempoolOffsetChange.emit((this.mempoolOffset || 0));
+ this.updateStyle();
+ this.cd.markForCheck();
}, 1000);
}, 0);
- this.cd.markForCheck();
}
onMempoolWidthChange(width): void {
if (this.flipping) {
return;
}
- this.mempoolOffset = Math.max(0, width - this.dividerOffset);
- this.cd.markForCheck();
+ this.mempoolOffset = Math.max(0, width - (this.dividerOffset || 0));
+ this.updateStyle();
this.mempoolOffsetChange.emit(this.mempoolOffset);
}
+ updateStyle(): void {
+ if (this.dividerOffset == null || this.mempoolOffset == null) {
+ return;
+ }
+ const oldTransform = this.positionStyle.transform;
+ this.positionStyle = this.timeLtr ? {
+ transform: `translateX(calc(100vw - ${this.dividerOffset + this.mempoolOffset}px)`,
+ } : {
+ transform: `translateX(${this.dividerOffset + this.mempoolOffset}px)`,
+ };
+ if (oldTransform !== this.positionStyle.transform) {
+ this.cd.detectChanges();
+ }
+ }
+
ngOnChanges(changes: SimpleChanges): void {
if (changes.containerWidth) {
this.onResize();
@@ -107,6 +129,6 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
this.dividerOffset = width * 0.95;
}
}
- this.cd.markForCheck();
+ this.updateStyle();
}
}
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 484389cd3..0ddbbd4b7 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -97,6 +97,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.chainTip = this.stateService.latestBlockHeight;
+ const width = this.containerOffset + (this.stateService.env.MEMPOOL_BLOCKS_AMOUNT) * this.blockOffset;
+ this.mempoolWidth = width;
+ this.widthChange.emit(this.mempoolWidth);
+
if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
this.enabledMiningInfoIfNeeded(this.location.path());
this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@@ -161,11 +165,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
return this.mempoolBlocks;
}),
tap(() => {
- this.cd.markForCheck();
const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
if (this.mempoolWidth !== width) {
this.mempoolWidth = width;
this.widthChange.emit(this.mempoolWidth);
+ this.cd.markForCheck();
}
})
);
@@ -215,11 +219,13 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (isNewBlock && (block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) {
this.blockIndex++;
}
+ this.cd.markForCheck();
});
this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
if (this.chainTip === -1) {
this.chainTip = height;
+ this.cd.markForCheck();
}
});
@@ -257,6 +263,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blockPadding = 0.24 * this.blockWidth;
this.containerOffset = 0.32 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
+ this.cd.markForCheck();
}
}
@@ -275,6 +282,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
onResize(): void {
this.animateEntry = false;
this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
+ this.cd.markForCheck();
}
trackByFn(index: number, block: MempoolBlock) {
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index 86748bc8c..4a15157f0 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -24,7 +24,7 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
chainTipSubscription: Subscription;
- chainTip: number = -1;
+ chainTip: number = 100;
tipIsSet: boolean = false;
lastMark: MarkBlockState;
markBlockSubscription: Subscription;
@@ -42,7 +42,7 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
blocksPerPage: number = 1;
pageWidth: number;
firstPageWidth: number;
- minScrollWidth: number;
+ minScrollWidth: number = 40 + (155 * (8 + (2 * Math.ceil(window.innerWidth / 155))));
currentScrollWidth: number = null;
pageIndex: number = 0;
pages: any[] = [];
@@ -51,7 +51,7 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
lastUpdate: number = 0;
lastMouseX: number;
velocity: number = 0;
- mempoolOffset: number | null = null;
+ mempoolOffset: number = null;
mempoolWidth: number = 0;
scrollLeft: number = null;
@@ -67,12 +67,13 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
}
- ngOnInit(): void {
+ ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {
this.blockCount = blocks.length;
this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
+ this.minScrollWidth = 40 + (8 * this.blockWidth) + (this.pageWidth * 2);
if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
this.onResize();
}
@@ -181,7 +182,9 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
}
onMempoolOffsetChange(offset): void {
- this.pendingOffset = offset;
+ if (offset !== this.mempoolOffset) {
+ this.pendingOffset = offset;
+ }
}
applyScrollLeft(): void {
@@ -198,11 +201,11 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
}
this.blockchainContainer.nativeElement.scrollLeft = this.scrollLeft;
}
- this.cd.markForCheck();
+ this.cd.detectChanges();
}
applyPendingMarkArrow(): void {
- if (this.pendingMark != null) {
+ if (this.pendingMark != null && this.pendingMark <= this.chainTip) {
if (this.pendingMark < 0) {
this.scrollToBlock(this.chainTip - this.pendingMark);
} else {
@@ -239,13 +242,14 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
this.blocksPerPage = Math.ceil(this.chainWidth / this.blockWidth);
this.pageWidth = this.blocksPerPage * this.blockWidth;
- this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
+ this.minScrollWidth = 40 + (8 * this.blockWidth) + (this.pageWidth * 2);
if (firstVisibleBlock != null) {
this.scrollToBlock(firstVisibleBlock, offset);
} else {
this.updatePages();
}
+ this.cd.markForCheck();
}
onMouseDown(event: MouseEvent) {