diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.ts b/frontend/src/app/components/mempool-block/mempool-block.component.ts
index 45b9c71e8..98f70aaf7 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.ts
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts
@@ -22,20 +22,20 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
) { }
ngOnInit(): void {
- this.seoService.setTitle('Mempool block');
this.mempoolBlock$ = this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
return this.stateService.mempoolBlocks$
- .pipe(
- map((mempoolBlocks) => {
- while (!mempoolBlocks[this.mempoolBlockIndex]) {
- this.mempoolBlockIndex--;
- }
- return mempoolBlocks[this.mempoolBlockIndex];
- })
- );
+ .pipe(
+ map((mempoolBlocks) => {
+ while (!mempoolBlocks[this.mempoolBlockIndex]) {
+ this.mempoolBlockIndex--;
+ }
+ this.seoService.setTitle(this.getGetOrdinal());
+ return mempoolBlocks[this.mempoolBlockIndex];
+ })
+ );
}),
tap(() => {
this.stateService.markBlock$.next({ mempoolBlockIndex: this.mempoolBlockIndex });
@@ -47,4 +47,14 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
this.stateService.markBlock$.next({});
}
+ getGetOrdinal() {
+ if (this.mempoolBlockIndex === 0) {
+ return 'Next block';
+ }
+
+ const s = ['th', 'st', 'nd', 'rd'];
+ const v = this.mempoolBlockIndex + 1 % 100;
+ return this.mempoolBlockIndex + 1 + (s[(v - 20) % 10] || s[v] || s[0]) + ' next block';
+ }
+
}
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 40d129bdb..487659896 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -25,6 +25,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
markIndex: number;
txFeePerVSize: number;
+ resetTransitionTimeout: number;
+
constructor(
private router: Router,
private stateService: StateService,
@@ -133,10 +135,11 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.arrowVisible = false;
return;
} else if (this.markIndex > -1) {
+ clearTimeout(this.resetTransitionTimeout);
this.transition = 'inherit';
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
this.arrowVisible = true;
- setTimeout(() => this.transition = '1s');
+ this.resetTransitionTimeout = window.setTimeout(() => this.transition = '1s', 100);
return;
}
diff --git a/frontend/src/app/components/statistics/chartist.component.ts b/frontend/src/app/components/statistics/chartist.component.ts
index da0f53a5e..c53784190 100644
--- a/frontend/src/app/components/statistics/chartist.component.ts
+++ b/frontend/src/app/components/statistics/chartist.component.ts
@@ -636,7 +636,7 @@ Chartist.plugins.ctPointLabels = (options) => {
labelClass: 'ct-point-label',
labelOffset: {
x: 0,
- y: -10
+ y: -7
},
textAnchor: 'middle'
};