Blink projected halving block.

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -1,7 +1,7 @@
 <div class="mempool-blocks-container">
   <div class="flashing">
     <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
-      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
+      <div class="bitcoin-block text-center mempool-block" [class.blink-bg]="blocksLeftToHalving === (i + 1)" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
         <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
         <div class="block-body" *ngIf="mempoolBlocks?.length">
           <div class="fees">

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;}
+}

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);