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