Adding taproot countdown
This commit is contained in:
softsimon
parent
2dc930fad2
commit
9eb159617f
@ -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',
|
||||
}
|
||||
};
|
||||
|
||||
@ -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" >
|
||||
|
||||
@ -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"> </a>
|
||||
<div class="block-body">
|
||||
<div class="fees">
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -166,7 +166,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
|
||||
this.errorUnblinded = error;
|
||||
return of(tx);
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
return of(tx);
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user