machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add taproot activation fireworks.

Browse Source
This commit is contained in:
Miguel Medeiros
2021-11-09 22:25:03 -03:00
parent a2a8375898
commit dbc56c79d8
7 changed files with 239 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -1,6 +1,6 @@
<div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
<div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
<div class="block-height">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>

34
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -111,7 +111,7 @@
.flashing {
animation: opacityPulse 2s ease-out;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 1;
}
@@ -119,4 +119,34 @@
0% {opacity: 0.7;}
50% {opacity: 1.0;}
100% {opacity: 0.7;}
}
}
// Blinking block
@keyframes shadowyBackground {
0% {
box-shadow: -10px -15px 75px rgba(#5E35B1, 1);
transform: rotate(0deg) translateY(0px);
}
25% {
transform: rotate(3deg) translateY(5px);
}
50% {
box-shadow: -10px -15px 75px rgba(#5E35B1, .3);
transform: rotate(0deg) translateY(0px);
}
75% {
transform: rotate(-3deg) translateY(5px);
}
100% {
box-shadow: -10px -15px 75px rgba(#5E35B1, 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;
animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba(#5E35B1, 1);
transition: 100ms all ease-in;
}

5
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -1,8 +1,9 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
import { specialBlocks } from 'src/app/app.constants';
@Component({
selector: 'app-blockchain-blocks',
@@ -11,7 +12,7 @@ import { Router } from '@angular/router';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
specialBlocks = specialBlocks;
network = '';
blocks: Block[] = [];
emptyBlocks: Block[] = this.mountEmptyBlocks();