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

Reversible blockchain components

Browse Source
This commit is contained in:
Mononaut 2022-09-29 22:45:40 +00:00
parent 135fbfc4f3
commit d07bf30737
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
9 changed files with 130 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div [attr.data-cy]="'bitcoin-block-' + i" 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 draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
@ -34,7 +34,7 @@
</div>
<ng-template #loadingBlocksTemplate>
<div class="blocks-container">
<div class="blocks-container" [class.time-ltr]="timeLtr">
<div class="flashing">
<div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="emptyBlockStyles[i]"></div>

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

@ -22,7 +22,7 @@
.mined-block {
position: absolute;
top: 0px;
transition: 2s;
transition: background 2s, left 2s, transform 1s;
}
.block-size {
@ -34,6 +34,7 @@
position: absolute;
top: 0px;
left: 40px;
transition: left 2s;
}
.block-body {
@ -145,3 +146,9 @@
opacity: 0;
pointer-events : none;
}
.time-ltr {
.bitcoin-block {
transform: scaleX(-1);
}
}

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

@ -33,6 +33,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
blocksFilled = false;
transition = '1s';
showMiningInfo = false;
timeLtrSubscription: Subscription;
timeLtr: boolean;
gradientColors = {
'': ['#9339f4', '#105fb0'],
@ -61,6 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
}
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
this.cd.markForCheck();
});
if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
this.feeRounding = '1.0-1';
}
@ -123,6 +130,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
this.timeLtrSubscription.unsubscribe();
clearInterval(this.interval);
}

14
frontend/src/app/components/blockchain/blockchain.component.html
View File

@ -1,9 +1,13 @@
<div class="text-center" class="blockchain-wrapper" #container>
<div class="position-container {{ network }}">
<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
<div class="position-container" [class]="['position-container']">
<span>
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div id="divider"></div>
<div class="blocks-wrapper">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
</div>
<div id="divider">
<button class="time-toggle" (click)="toggleTimeDirection()"><fa-icon [icon]="['fas', 'arrows-rotate']" [fixedWidth]="true"></fa-icon></button>
</div>
</span>
</div>
</div>

68
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@ -24,23 +24,46 @@
.position-container {
position: absolute;
left: 50%;
left: 0;
top: 75px;
transform: translateX(50vw);
transition: transform 1s;
}
.position-container.liquid, .position-container.liquidtestnet {
left: 420px;
transform: translateX(420px);
}
@media (min-width: 768px) {
.blockchain-wrapper.time-ltr {
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(calc(100vw - 420px));
}
}
}
@media (max-width: 767.98px) {
.position-container {
left: 95%;
.blockchain-wrapper {
.position-container {
transform: translateX(95vw);
}
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(50vw);
}
.position-container.loading {
transform: translateX(50vw);
}
}
.position-container.liquid, .position-container.liquidtestnet {
left: 50%;
}
.position-container.loading {
left: 50%;
.blockchain-wrapper.time-ltr {
.position-container {
transform: translateX(5vw);
}
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(50vw);
}
.position-container.loading {
transform: translateX(50vw);
}
}
}
@ -58,3 +81,30 @@
left: -150px;
top: 0px;
}
.time-toggle {
color: white;
font-size: 1rem;
position: absolute;
bottom: -1.5em;
left: 1px;
transform: translateX(-50%);
background: none;
border: none;
outline: none;
margin: 0;
padding: 0;
transition: transform 1s;
}
.blockchain-wrapper.ltr-transition .blocks-wrapper {
transition: transform 1s;
}
.blockchain-wrapper.time-ltr .blocks-wrapper {
transform: scaleX(-1);
}
.blockchain-wrapper.time-ltr .time-toggle {
transform: translateX(-50%) scaleX(-1);
}

20
frontend/src/app/components/blockchain/blockchain.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@Component({
@ -7,8 +8,11 @@ import { StateService } from '../../services/state.service';
styleUrls: ['./blockchain.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainComponent implements OnInit {
export class BlockchainComponent implements OnInit, OnDestroy {
network: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
ltrTransitionEnabled = false;
constructor(
public stateService: StateService,
@ -16,5 +20,17 @@ export class BlockchainComponent implements OnInit {
ngOnInit() {
this.network = this.stateService.network;
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
});
}
ngOnDestroy() {
this.timeLtrSubscription.unsubscribe();
}
toggleTimeDirection() {
this.ltrTransitionEnabled = true;
this.stateService.timeLtr.next(!this.timeLtr);
}
}

4
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@ -1,5 +1,5 @@
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
<div class="mempool-blocks-container" *ngIf="(difficultyAdjustments$ | async) as da;">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
@ -45,7 +45,7 @@
</ng-container>
<ng-template #loadingBlocks>
<div class="mempool-blocks-container">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>

21
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -1,7 +1,7 @@
.bitcoin-block {
width: 125px;
height: 125px;
transition: 2s;
transition: background 2s, right 2s, transform 1s;
}
.block-size {
@ -33,6 +33,7 @@
.block-body {
text-align: center;
transition: transform 1s;
}
@keyframes opacityPulse {
@ -73,6 +74,7 @@
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
transition: transform 1s, left 1s;
}
.bitcoin-block::before {
@ -83,9 +85,11 @@
top: -12px;
left: -20px;
background-color: #191c27;
z-index: -1;
transform: skewY(50deg);
transform-origin: top;
transition: transform 1s, left 1s;
}
.mempool-block.bitcoin-block::after {
@ -128,3 +132,18 @@
.blockLink:hover {
text-decoration: none;
}
.time-ltr {
.bitcoin-block::after {
transform: skew(-40deg);
left: 20px;
}
.bitcoin-block::before {
transform: skewY(-50deg);
left: 125px;
}
.block-body {
transform: scaleX(-1);
}
}

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

@ -46,7 +46,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
feeRounding = '1.0-0';
rightPosition = 0;
transition = '2s';
transition = 'background 2s, right 2s, transform 1s';
markIndex: number;
txFeePerVSize: number;
@ -76,6 +76,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
this.cd.markForCheck();
});
if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
@ -278,7 +279,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.arrowVisible = true;
this.resetTransitionTimeout = window.setTimeout(() => {
this.transition = '2s';
this.transition = 'background 2s, right 2s, transform 1s';
this.cd.markForCheck();
}, 100);
return;