From 9eb159617fc986ae94c6d93a20dcaa5b4e5e4e68 Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 12 Nov 2021 20:24:15 +0400 Subject: [PATCH] Adding taproot countdown --- frontend/src/app/app.constants.ts | 6 ++-- .../blockchain-blocks.component.html | 2 +- .../mempool-blocks.component.html | 2 +- .../mempool-blocks.component.ts | 7 ++-- .../app/components/start/start.component.html | 3 ++ .../app/components/start/start.component.scss | 13 ++++--- .../app/components/start/start.component.ts | 34 +++++++++---------- .../transaction/transaction.component.ts | 2 +- frontend/src/styles.scss | 19 +++-------- 9 files changed, 42 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts index e18f223c2..893c0809c 100644 --- a/frontend/src/app/app.constants.ts +++ b/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 6.25 BTC per block', } }; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index f87aa1c99..5e160a90b 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -25,7 +25,7 @@
- +
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 de28df624..680563b4c 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -2,7 +2,7 @@
-
+
 
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 1cc83ad52..fe10d56bb 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/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); diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html index e0a3447c6..cf8eb80ad 100644 --- a/frontend/src/app/components/start/start.component.html +++ b/frontend/src/app/components/start/start.component.html @@ -5,6 +5,9 @@
{{ eventName }}
+ +
{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!
+
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss index d3268c199..f9784756c 100644 --- a/frontend/src/app/components/start/start.component.scss +++ b/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; - width: 150px; + position: relative; 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($height)-$height / 1.2 + px - hsl(random(360), 100, 50); + random($width) - math.div($width, 1.2) + px + random($height) - math.div($height, 1.2) + px + hsl(random(360), 100%, 50%); $box-shadow2: $box-shadow2, 0 0 #fff } @mixin keyframes ($animationName) { diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts index 09aaa2784..ec2b41472 100644 --- a/frontend/src/app/components/start/start.component.ts +++ b/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); diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 8bb1c4782..4f376eb62 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/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); }) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 91f981ba9..afc16ec52 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -947,29 +947,20 @@ th { // Blinking block @keyframes shadowyBackground { 0% { - box-shadow: -10px -15px 75px rgba(#5E35B1, 1); - transform: rotate(0deg) translateY(0px); - } - 25% { - transform: rotate(3deg) translateY(5px); + box-shadow: -10px -15px 75px rgba(#eba814, 1); } 50% { - box-shadow: -10px -15px 75px rgba(#5E35B1, .3); - transform: rotate(0deg) translateY(0px); - } - 75% { - transform: rotate(-3deg) translateY(5px); + box-shadow: -10px -15px 75px rgba(#eba814, .3); } 100% { - box-shadow: -10px -15px 75px rgba(#5E35B1, 1); - transform: rotate(0deg); + box-shadow: -10px -15px 75px rgba(#eba814, 1); } } .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; }