From 422055046efce4b979376c4260f27906c80db866 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 12 May 2020 01:12:38 +0700
Subject: [PATCH] Blink projected halving block.

---
 .../mempool-blocks.component.html              |  2 +-
 .../mempool-blocks.component.scss              | 18 ++++++++++++++++++
 .../mempool-blocks/mempool-blocks.component.ts |  8 ++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 76a88f9f4..e4bf95f90 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/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">
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);