Merge pull request #923 from mempool/simon/taproot-activation-countdown

Adding taproot countdown

frontend/src/app/app.constants.ts

@@ -132,9 +132,11 @@ export const languages: Language[] = [
 
 export const specialBlocks = {
   '709632': {
-    labelEvent: '🌱 Taproot activated!',
+    labelEvent: 'Taproot 🌱 activation',
+    labelEventCompleted: 'Taproot 🌱 has been activated!',
   },
   '840000': {
-    labelEvent: '🥳 Halving',
+    labelEvent: 'Halving 🥳',
+    labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
   }
 };

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

@@ -25,7 +25,7 @@
   <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
 
-<ng-template #loadingBlocksTemplate >
+<ng-template #loadingBlocksTemplate>
   <div class="blocks-container">
     <div class="flashing">
       <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >

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

@@ -2,7 +2,7 @@
   <div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
     <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]"  [class.blink-bg]="projectedBlock.blink">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
           <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
           <div class="block-body">
             <div class="fees">

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

@@ -3,10 +3,9 @@ import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer }
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
-import { take, map, switchMap, share } from 'rxjs/operators';
+import { take, map, switchMap } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 import { specialBlocks } from 'src/app/app.constants';
-import { Block } from 'src/app/interfaces/electrs.interface';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -85,7 +84,9 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           mempoolBlocks.forEach((block, i) => {
             block.index = this.blockIndex + i;
             block.height = lastBlock.height + i + 1;
-            block.blink = specialBlocks[block.height] ? true : false;
+            if (this.stateService.network === '') {
+              block.blink = specialBlocks[block.height] ? true : false;
+            }
           });
           const stringifiedBlocks = JSON.stringify(mempoolBlocks);
           this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);

frontend/src/app/components/start/start.component.html

@@ -5,6 +5,9 @@
   </div>
   <div class="warning-label">{{ eventName }}</div>
 </ng-container>
+
+<div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
+
 <div id="blockchain-container" dir="ltr">
   <app-blockchain></app-blockchain>
 </div>

frontend/src/app/components/start/start.component.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 #blockchain-container {
   position: relative;
   overflow-x: scroll;
@@ -11,15 +13,12 @@
 }
 
 .warning-label {
-  position: absolute;
+  position: relative;
-  width: 150px;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
   padding: 6px 4px;
-  border-radius: 4px;
   margin-top: -10px;
-  margin-left: 10px;
 }
 // Fireworks
 
@@ -32,9 +31,9 @@ $box-shadow: ();
 $box-shadow2: ();
 @for $i from 0 through $particles {
   $box-shadow: $box-shadow,
-               random($width)-$width / 2 + px
+               random($width) - math.div($width, 1.2) + px
-               random($height)-$height / 1.2 + px
+               random($height) - math.div($height, 1.2) + px
-               hsl(random(360), 100, 50);
+               hsl(random(360), 100%, 50%);
   $box-shadow2: $box-shadow2, 0 0 #fff
 }
 @mixin keyframes ($animationName) {

frontend/src/app/components/start/start.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { specialBlocks } from 'src/app/app.constants';
+import { takeLast } from 'rxjs/operators';
 
 @Component({
   selector: 'app-start',
@@ -9,26 +10,12 @@ import { specialBlocks } from 'src/app/app.constants';
   styleUrls: ['./start.component.scss'],
 })
 export class StartComponent implements OnInit {
-
   interval = 60;
   colors = ['#5E35B1', '#ffffff'];
 
+  countdown = 0;
   specialEvent = false;
   eventName = '';
-  optionsLeft = {
-    particleCount: 2,
-    angle: 70,
-    spread: 50,
-    origin: { x: 0 },
-    colors: this.colors,
-  };
-  optionsRight = {
-    particleCount: 2,
-    angle: 110,
-    spread: 50,
-    origin: { x: 1 },
-    colors: this.colors,
-  };
 
   constructor(
     private websocketService: WebsocketService,
@@ -39,10 +26,23 @@ export class StartComponent implements OnInit {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
     this.stateService.blocks$
       .subscribe((blocks: any) => {
+        if (this.stateService.network !== '') {
+          return;
+        }
+        this.countdown = 0;
         const block = blocks[0];
-        if(specialBlocks[block.height]) {
+
+        for (const sb in specialBlocks) {
+          const height = parseInt(sb, 10);
+          const diff = height - block.height;
+          if (diff > 0 && diff <= 1008) {
+            this.countdown = diff;
+            this.eventName = specialBlocks[sb].labelEvent;
+          }
+        }
+        if (specialBlocks[block.height]) {
           this.specialEvent = true;
-          this.eventName = specialBlocks[block.height].labelEvent;
+          this.eventName = specialBlocks[block.height].labelEventCompleted;
           setTimeout(() => {
             this.specialEvent = false;
           }, 60 * 60 * 1000);

frontend/src/app/components/transaction/transaction.component.ts

@@ -166,7 +166,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
                   this.errorUnblinded = error;
                   return of(tx);
                 })
-              )
+              );
           }
           return of(tx);
         })

frontend/src/styles.scss

@@ -947,29 +947,20 @@ th {
 // Blinking block
 @keyframes shadowyBackground {
   0% {
-    box-shadow: -10px -15px 75px rgba(#5E35B1, 1);
+    box-shadow: -10px -15px 75px rgba(#eba814, 1);
-    transform: rotate(0deg) translateY(0px);
-  }
-  25% {
-    transform: rotate(3deg) translateY(5px);
   }
   50% {
-    box-shadow: -10px -15px 75px rgba(#5E35B1, .3);
+    box-shadow: -10px -15px 75px rgba(#eba814, .3);
-    transform: rotate(0deg) translateY(0px);
-  }
-  75% {
-    transform: rotate(-3deg) translateY(5px);
   }
   100% {
-    box-shadow: -10px -15px 75px rgba(#5E35B1, 1);
+    box-shadow: -10px -15px 75px rgba(#eba814, 1);
-    transform: rotate(0deg);
   }
 }
 
 .blink-bg {
   color: #fff;
-  background: repeating-linear-gradient(rgb(45, 51, 72), rgb(45, 51, 72) 0.163525%, rgb(16, 95, 176) 100%, rgb(147, 57, 244) 0.163525%) !important;
+  background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important;
   animation: shadowyBackground 1s infinite;
-  box-shadow: -10px -15px 75px rgba(#5E35B1, 1);
+  box-shadow: -10px -15px 75px rgba(#eba814, 1);
   transition: 100ms all ease-in;
 }