diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index 4fea06bc1..e6cf5b687 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -111,3 +111,21 @@
left: 0;
z-index: 10;
}
+
+
+
+// Blinking block
+
+.blink-bg {
+ color: #fff;
+ animation: blinkingBackground 1s infinite;
+ background: inherit !important;
+}
+
+@keyframes blinkingBackground {
+ 0% { background-color: #10c018;}
+ 25% { background-color: #1056c0;}
+ 50% { background-color: #ef0a1a;}
+ 75% { background-color: #CFB53B;}
+ 100% { background-color: #04a1d5;}
+}
\ No newline at end of file
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 841272042..2cddfd4bf 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -28,12 +28,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
resetTransitionTimeout: number;
+ blocksLeftToHalving: number;
+
constructor(
private router: Router,
private stateService: StateService,
) { }
ngOnInit() {
+
+ this.stateService.blocks$
+ .subscribe((block) => {
+ this.blocksLeftToHalving = 630000 - block.height;
+ });
+
this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
.subscribe((blocks) => {
const stringifiedBlocks = JSON.stringify(blocks);