From e56b828adebabb815cb79f7f57729340d32c5665 Mon Sep 17 00:00:00 2001 From: Simon Lindh Date: Tue, 23 Jul 2019 18:13:36 +0300 Subject: [PATCH] Refactored the "blockchain" into separate sub components. --- frontend/src/app/app.module.ts | 8 +- .../block-modal/block-modal.component.html | 0 .../block-modal/block-modal.component.scss | 0 .../block-modal/block-modal.component.ts | 6 +- .../blockchain-blocks.component.html | 26 ++++ .../blockchain-blocks.component.scss | 128 ++++++++++++++++ .../blockchain-blocks.component.ts | 62 ++++++++ ...blockchain-projected-blocks.component.html | 20 +++ ...blockchain-projected-blocks.component.scss | 128 ++++++++++++++++ .../blockchain-projected-blocks.component.ts | 56 +++++++ .../projected-block-modal.component.html | 0 .../projected-block-modal.component.scss | 0 .../projected-block-modal.component.ts | 6 +- .../app/blockchain/blockchain.component.html | 48 +----- .../app/blockchain/blockchain.component.scss | 137 ------------------ .../app/blockchain/blockchain.component.ts | 91 +----------- 16 files changed, 437 insertions(+), 279 deletions(-) rename frontend/src/app/{ => blockchain-blocks}/block-modal/block-modal.component.html (100%) rename frontend/src/app/{ => blockchain-blocks}/block-modal/block-modal.component.scss (100%) rename frontend/src/app/{ => blockchain-blocks}/block-modal/block-modal.component.ts (90%) create mode 100644 frontend/src/app/blockchain-blocks/blockchain-blocks.component.html create mode 100644 frontend/src/app/blockchain-blocks/blockchain-blocks.component.scss create mode 100644 frontend/src/app/blockchain-blocks/blockchain-blocks.component.ts create mode 100644 frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html create mode 100644 frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.scss create mode 100644 frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.ts rename frontend/src/app/{ => blockchain-projected-blocks}/projected-block-modal/projected-block-modal.component.html (100%) rename frontend/src/app/{ => blockchain-projected-blocks}/projected-block-modal/projected-block-modal.component.scss (100%) rename frontend/src/app/{ => blockchain-projected-blocks}/projected-block-modal/projected-block-modal.component.ts (90%) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 6330c103d..70d488ef2 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -11,9 +11,11 @@ import { FooterComponent } from './footer/footer.component'; import { AboutComponent } from './about/about.component'; import { TxBubbleComponent } from './tx-bubble/tx-bubble.component'; import { ReactiveFormsModule } from '@angular/forms'; -import { BlockModalComponent } from './block-modal/block-modal.component'; +import { BlockModalComponent } from './blockchain-blocks/block-modal/block-modal.component'; import { StatisticsComponent } from './statistics/statistics.component'; -import { ProjectedBlockModalComponent } from './projected-block-modal/projected-block-modal.component'; +import { ProjectedBlockModalComponent } from './blockchain-projected-blocks/projected-block-modal/projected-block-modal.component'; +import { BlockchainBlocksComponent } from './blockchain-blocks/blockchain-blocks.component'; +import { BlockchainProjectedBlocksComponent } from './blockchain-projected-blocks/blockchain-projected-blocks.component'; @NgModule({ declarations: [ @@ -25,6 +27,8 @@ import { ProjectedBlockModalComponent } from './projected-block-modal/projected- TxBubbleComponent, BlockModalComponent, ProjectedBlockModalComponent, + BlockchainBlocksComponent, + BlockchainProjectedBlocksComponent, ], imports: [ ReactiveFormsModule, diff --git a/frontend/src/app/block-modal/block-modal.component.html b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html similarity index 100% rename from frontend/src/app/block-modal/block-modal.component.html rename to frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html diff --git a/frontend/src/app/block-modal/block-modal.component.scss b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.scss similarity index 100% rename from frontend/src/app/block-modal/block-modal.component.scss rename to frontend/src/app/blockchain-blocks/block-modal/block-modal.component.scss diff --git a/frontend/src/app/block-modal/block-modal.component.ts b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts similarity index 90% rename from frontend/src/app/block-modal/block-modal.component.ts rename to frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts index b65c92cd9..fe2bf5da6 100644 --- a/frontend/src/app/block-modal/block-modal.component.ts +++ b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit, Input } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; -import { ApiService } from '../services/api.service'; -import { IBlock } from '../blockchain/interfaces'; -import { MemPoolService } from '../services/mem-pool.service'; +import { ApiService } from '../../services/api.service'; +import { IBlock } from '../../blockchain/interfaces'; +import { MemPoolService } from '../../services/mem-pool.service'; import * as Chartist from 'chartist'; @Component({ diff --git a/frontend/src/app/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.html new file mode 100644 index 000000000..0299d829c --- /dev/null +++ b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.html @@ -0,0 +1,26 @@ +
+ +
+
+ +
+ #{{ block.height }} +
+ +
+
+ ~{{ block.medianFee | ceil }} sat/vB +
+ {{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB +
+ +
{{ block.size | bytes: 2 }}
+
{{ block.nTx }} transactions
+

+
{{ getTimeSinceMined(block) }} ago
+
+ +
+
+ +
\ No newline at end of file diff --git a/frontend/src/app/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.scss new file mode 100644 index 000000000..e11412d2b --- /dev/null +++ b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.scss @@ -0,0 +1,128 @@ +.bitcoin-block { + width: 125px; + height: 125px; + cursor: pointer; +} + +.mined-block { + position: absolute; + top: 0px; + transition: 1s; +} + +.block-size { + font-size: 18px; + font-weight: bold; +} + +.blocks-container { + position: absolute; + top: 0px; + left: 40px; +} + +.projected-block { + position: absolute; + top: 0; +} + +.block-body { + text-align: center; +} + +@keyframes opacityPulse { + 0% {opacity: 0.7;} + 50% {opacity: 1.0;} + 100% {opacity: 0.7;} +} + +.time-difference { + position: absolute; + bottom: 10px; + text-align: center; + width: 100%; + font-size: 14px; +} + +.fees { + font-size: 10px; + margin-top: 10px; + margin-bottom: 2px; +} + +.btcblockmiddle { + height: 18px; +} + +.breakRow { + height: 30px; + margin-top: 20px; +} + +.yellow-color { + color: #ffd800; +} + +.transaction-count { + font-size: 12px; +} + +.block-height { + position: absolute; + font-size: 12px; + bottom: 160px; + width: 100%; + left: -12px; + text-shadow: 0px 32px 3px #111; + z-index: 100; +} + +@media (max-width: 767.98px) { + .block-height { + bottom: 125px; + left: inherit; + text-shadow: inherit; + z-index: inherit; + } +} + +@media (min-width: 768px) { + .bitcoin-block::after { + content: ''; + width: 125px; + height: 24px; + position:absolute; + top: -24px; + left: -20px; + background-color: #232838; + transform:skew(40deg); + transform-origin:top; + } + + .bitcoin-block::before { + content: ''; + width: 20px; + height: 125px; + position: absolute; + top: -12px; + left: -20px; + background-color: #191c27; + + transform: skewY(50deg); + transform-origin: top; + } + + .projected-block.bitcoin-block::after { + background-color: #403834; + } + + .projected-block.bitcoin-block::before { + background-color: #2d2825; + } +} + +.black-background { + background-color: #11131f; + z-index: 100; + position: relative; +} diff --git a/frontend/src/app/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.ts new file mode 100644 index 000000000..61b34ebdc --- /dev/null +++ b/frontend/src/app/blockchain-blocks/blockchain-blocks.component.ts @@ -0,0 +1,62 @@ +import { Component, Input } from '@angular/core'; +import { IBlock } from '../blockchain/interfaces'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { BlockModalComponent } from './block-modal/block-modal.component'; + +@Component({ + selector: 'app-blockchain-blocks', + templateUrl: './blockchain-blocks.component.html', + styleUrls: ['./blockchain-blocks.component.scss'] +}) +export class BlockchainBlocksComponent { + + @Input() blocks: IBlock[]; + + constructor( + private modalService: NgbModal, + ) { } + + getTimeSinceMined(block: IBlock): string { + const minutes = ((new Date().getTime()) - (new Date(block.time * 1000).getTime())) / 1000 / 60; + if (minutes >= 120) { + return Math.floor(minutes / 60) + ' hours'; + } + if (minutes >= 60) { + return Math.floor(minutes / 60) + ' hour'; + } + if (minutes <= 1) { + return '< 1 minute'; + } + if (minutes === 1) { + return '1 minute'; + } + return Math.round(minutes) + ' minutes'; + } + + trackByBlocksFn(index: number, item: IBlock) { + return item.height; + } + + openBlockModal(block: IBlock) { + const modalRef = this.modalService.open(BlockModalComponent, { size: 'lg' }); + modalRef.componentInstance.block = block; + } + + getStyleForBlock(block: IBlock) { + const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100; + if (window.innerWidth <= 768) { + return { + 'top': 155 * this.blocks.indexOf(block) + 'px', + 'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, + #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, + }; + } else { + return { + 'left': 155 * this.blocks.indexOf(block) + 'px', + 'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, + #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, + }; + } + } + +} diff --git a/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html new file mode 100644 index 000000000..930b10013 --- /dev/null +++ b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html @@ -0,0 +1,20 @@ +
+
+
+
+
+ ~{{ projectedBlock.medianFee | ceil }} sat/vB +
+ {{ projectedBlock.minFee | ceil }} - {{ projectedBlock.maxFee | ceil }} sat/vB +
+
{{ projectedBlock.blockSize | bytes: 2 }}
+
{{ projectedBlock.nTx }} transactions
+
In ~{{ 10 * i + 10 }} minutes
+ +
+{{ projectedBlock.blockWeight / 4000000 | ceil }} blocks
+ +
+ +
+
+
diff --git a/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.scss b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.scss new file mode 100644 index 000000000..710bffe1f --- /dev/null +++ b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.scss @@ -0,0 +1,128 @@ +.bitcoin-block { + width: 125px; + height: 125px; + cursor: pointer; +} + +.block-size { + font-size: 18px; + font-weight: bold; +} + +.blocks-container { + position: absolute; + top: 0px; + left: 40px; +} + +.projected-blocks-container { + position: absolute; + top: 0px; + right: 0px; + left: 0px; + + animation: opacityPulse 2s ease-out; + animation-iteration-count: infinite; + opacity: 1; +} + +.projected-block { + position: absolute; + top: 0; +} + +.block-body { + text-align: center; +} + +@keyframes opacityPulse { + 0% {opacity: 0.7;} + 50% {opacity: 1.0;} + 100% {opacity: 0.7;} +} + +.time-difference { + position: absolute; + bottom: 10px; + text-align: center; + width: 100%; + font-size: 14px; +} + +.fees { + font-size: 10px; + margin-top: 10px; + margin-bottom: 2px; +} + +.btcblockmiddle { + height: 18px; +} + +.breakRow { + height: 30px; + margin-top: 20px; +} + +.yellow-color { + color: #ffd800; +} + +.transaction-count { + font-size: 12px; +} + +@media (max-width: 767.98px) { + .projected-blocks-container { + position: absolute; + left: -165px; + top: -40px; + } + .block-height { + bottom: 125px; + left: inherit; + text-shadow: inherit; + z-index: inherit; + } +} + +@media (min-width: 768px) { + .bitcoin-block::after { + content: ''; + width: 125px; + height: 24px; + position:absolute; + top: -24px; + left: -20px; + background-color: #232838; + transform:skew(40deg); + transform-origin:top; + } + + .bitcoin-block::before { + content: ''; + width: 20px; + height: 125px; + position: absolute; + top: -12px; + left: -20px; + background-color: #191c27; + + transform: skewY(50deg); + transform-origin: top; + } + + .projected-block.bitcoin-block::after { + background-color: #403834; + } + + .projected-block.bitcoin-block::before { + background-color: #2d2825; + } +} + +.black-background { + background-color: #11131f; + z-index: 100; + position: relative; +} diff --git a/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.ts b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.ts new file mode 100644 index 000000000..ff6f3bfac --- /dev/null +++ b/frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.ts @@ -0,0 +1,56 @@ +import { Component, Input } from '@angular/core'; +import { IProjectedBlock, IBlock } from '../blockchain/interfaces'; +import { ProjectedBlockModalComponent } from './projected-block-modal/projected-block-modal.component'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-blockchain-projected-blocks', + templateUrl: './blockchain-projected-blocks.component.html', + styleUrls: ['./blockchain-projected-blocks.component.scss'] +}) +export class BlockchainProjectedBlocksComponent { + + @Input() projectedBlocks: IProjectedBlock[]; + + constructor( + private modalService: NgbModal, + ) { } + + trackByProjectedFn(index: number) { + return index; + } + + openProjectedBlockModal(block: IBlock, index: number) { + const modalRef = this.modalService.open(ProjectedBlockModalComponent, { size: 'lg' }); + modalRef.componentInstance.block = block; + modalRef.componentInstance.index = index; + } + + getStyleForProjectedBlockAtIndex(index: number) { + const greenBackgroundHeight = 100 - (this.projectedBlocks[index].blockWeight / 4000000) * 100; + if (window.innerWidth <= 768) { + if (index === 3) { + return { + 'top': 40 + index * 155 + 'px' + }; + } + return { + 'top': 40 + index * 155 + 'px', + 'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%, + #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`, + }; + } else { + if (index === 3) { + return { + 'right': 40 + index * 155 + 'px' + }; + } + return { + 'right': 40 + index * 155 + 'px', + 'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%, + #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`, + }; + } + } + +} diff --git a/frontend/src/app/projected-block-modal/projected-block-modal.component.html b/frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.html similarity index 100% rename from frontend/src/app/projected-block-modal/projected-block-modal.component.html rename to frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.html diff --git a/frontend/src/app/projected-block-modal/projected-block-modal.component.scss b/frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.scss similarity index 100% rename from frontend/src/app/projected-block-modal/projected-block-modal.component.scss rename to frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.scss diff --git a/frontend/src/app/projected-block-modal/projected-block-modal.component.ts b/frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.ts similarity index 90% rename from frontend/src/app/projected-block-modal/projected-block-modal.component.ts rename to frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.ts index b0d280aa7..d66340337 100644 --- a/frontend/src/app/projected-block-modal/projected-block-modal.component.ts +++ b/frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit, Input } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; -import { ApiService } from '../services/api.service'; -import { IBlock } from '../blockchain/interfaces'; -import { MemPoolService } from '../services/mem-pool.service'; +import { ApiService } from '../../services/api.service'; +import { IBlock } from '../../blockchain/interfaces'; +import { MemPoolService } from '../../services/mem-pool.service'; import * as Chartist from 'chartist'; @Component({ diff --git a/frontend/src/app/blockchain/blockchain.component.html b/frontend/src/app/blockchain/blockchain.component.html index 98075f441..f18cb433c 100644 --- a/frontend/src/app/blockchain/blockchain.component.html +++ b/frontend/src/app/blockchain/blockchain.component.html @@ -12,52 +12,8 @@
-
-
-
-
-
- ~{{ projectedBlock.medianFee | ceil }} sat/vB -
- {{ projectedBlock.minFee | ceil }} - {{ projectedBlock.maxFee | ceil }} sat/vB -
-
{{ projectedBlock.blockSize | bytes: 2 }}
-
{{ projectedBlock.nTx }} transactions
-
In ~{{ 10 * i + 10 }} minutes
- -
+{{ projectedBlock.blockWeight / 4000000 | ceil }} blocks
- -
- -
-
-
-
- -
-
- -
- #{{ block.height }} -
- -
-
- ~{{ block.medianFee | ceil }} sat/vB -
- {{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB -
- -
{{ block.size | bytes: 2 }}
-
{{ block.nTx }} transactions
-

-
{{ getTimeSinceMined(block) }} ago
-
- -
-
- -
+ +
diff --git a/frontend/src/app/blockchain/blockchain.component.scss b/frontend/src/app/blockchain/blockchain.component.scss index 1898bcbbf..ed9cf3f82 100644 --- a/frontend/src/app/blockchain/blockchain.component.scss +++ b/frontend/src/app/blockchain/blockchain.component.scss @@ -1,72 +1,14 @@ -.block-filled { - width: 100%; - background-color: #aeffb0; - position: absolute; - bottom: 0; - left: 0; -} - -.block-filled .segwit { - background-color: #16ca1a; -} - -.bitcoin-block { - width: 125px; - height: 125px; - cursor: pointer; -} - -.mined-block { - position: absolute; - top: 0px; - transition: 1s; -} - -.block-size { - font-size: 18px; - font-weight: bold; -} - -.blocks-container { - position: absolute; - top: 0px; - left: 40px; -} - -.projected-blocks-container { - position: absolute; - top: 0px; - right: 0px; - left: 0px; - - animation: opacityPulse 2s ease-out; - animation-iteration-count: infinite; - opacity: 1; -} - .projected-block { position: absolute; top: 0; } -.block-body { - text-align: center; -} - @keyframes opacityPulse { 0% {opacity: 0.7;} 50% {opacity: 1.0;} 100% {opacity: 0.7;} } -.time-difference { - position: absolute; - bottom: 10px; - text-align: center; - width: 100%; - font-size: 14px; -} - #divider { width: 3px; height: 3000px; @@ -84,29 +26,6 @@ top: -28px; } -.fees { - font-size: 10px; - margin-top: 10px; - margin-bottom: 2px; -} - -.btcblockmiddle { - height: 18px; -} - -.breakRow { - height: 30px; - margin-top: 20px; -} - -.yellow-color { - color: #ffd800; -} - -.transaction-count { - font-size: 12px; -} - .blockchain-wrapper { overflow: hidden; } @@ -117,16 +36,6 @@ top: calc(50% - 60px); } -.block-height { - position: absolute; - font-size: 12px; - bottom: 160px; - width: 100%; - left: -12px; - text-shadow: 0px 32px 3px #111; - z-index: 100; -} - @media (max-width: 767.98px) { #divider { top: -50px; @@ -134,17 +43,6 @@ .position-container { top: 100px; } - .projected-blocks-container { - position: absolute; - left: -165px; - top: -40px; - } - .block-height { - bottom: 125px; - left: inherit; - text-shadow: inherit; - z-index: inherit; - } } @media (min-width: 1920px) { @@ -153,41 +51,6 @@ } } -@media (min-width: 768px) { - .bitcoin-block::after { - content: ''; - width: 125px; - height: 24px; - position:absolute; - top: -24px; - left: -20px; - background-color: #232838; - transform:skew(40deg); - transform-origin:top; - } - - .bitcoin-block::before { - content: ''; - width: 20px; - height: 125px; - position: absolute; - top: -12px; - left: -20px; - background-color: #191c27; - - transform: skewY(50deg); - transform-origin: top; - } - - .projected-block.bitcoin-block::after { - background-color: #403834; - } - - .projected-block.bitcoin-block::before { - background-color: #2d2825; - } -} - .black-background { background-color: #11131f; z-index: 100; diff --git a/frontend/src/app/blockchain/blockchain.component.ts b/frontend/src/app/blockchain/blockchain.component.ts index 5b0600aae..8adc040da 100644 --- a/frontend/src/app/blockchain/blockchain.component.ts +++ b/frontend/src/app/blockchain/blockchain.component.ts @@ -5,8 +5,8 @@ import { MemPoolService } from '../services/mem-pool.service'; import { ApiService } from '../services/api.service'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { BlockModalComponent } from '../block-modal/block-modal.component'; -import { ProjectedBlockModalComponent } from '../projected-block-modal/projected-block-modal.component'; +import { BlockModalComponent } from '../blockchain-blocks/block-modal/block-modal.component'; +import { ProjectedBlockModalComponent } from '../blockchain-projected-blocks/projected-block-modal/projected-block-modal.component'; @Component({ selector: 'app-blockchain', @@ -18,7 +18,6 @@ export class BlockchainComponent implements OnInit, OnDestroy { projectedBlocks: IProjectedBlock[] = []; subscription: any; socket: any; - innerWidth: any; txBubbleStyle: any = {}; txTrackingLoading = false; @@ -30,7 +29,6 @@ export class BlockchainComponent implements OnInit, OnDestroy { @HostListener('window:resize', ['$event']) onResize(event: Event) { - this.innerWidth = window.innerWidth; this.moveTxBubbleToPosition(); } @@ -39,7 +37,6 @@ export class BlockchainComponent implements OnInit, OnDestroy { private apiService: ApiService, private renderer: Renderer2, private route: ActivatedRoute, - private modalService: NgbModal, ) {} ngOnInit() { @@ -49,8 +46,6 @@ export class BlockchainComponent implements OnInit, OnDestroy { 'top': '425px', 'visibility': 'hidden', }; - - this.innerWidth = window.innerWidth; this.socket = this.apiService.websocketSubject; this.subscription = this.socket .pipe( @@ -149,7 +144,7 @@ export class BlockchainComponent implements OnInit, OnDestroy { this.txBubbleStyle['position'] = 'absolute'; if (!element) { - if (this.innerWidth <= 768) { + if (window.innerWidth <= 768) { this.txBubbleArrowPosition = 'bottom'; this.txBubbleStyle['left'] = window.innerWidth / 2 - 50 + 'px'; this.txBubbleStyle['bottom'] = '270px'; @@ -183,90 +178,10 @@ export class BlockchainComponent implements OnInit, OnDestroy { } } - getTimeSinceMined(block: IBlock): string { - const minutes = ((new Date().getTime()) - (new Date(block.time * 1000).getTime())) / 1000 / 60; - if (minutes >= 120) { - return Math.floor(minutes / 60) + ' hours'; - } - if (minutes >= 60) { - return Math.floor(minutes / 60) + ' hour'; - } - if (minutes <= 1) { - return '< 1 minute'; - } - if (minutes === 1) { - return '1 minute'; - } - return Math.round(minutes) + ' minutes'; - } - - getStyleForBlock(block: IBlock) { - const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100; - if (this.innerWidth <= 768) { - return { - 'top': 155 * this.blocks.indexOf(block) + 'px', - 'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, - #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, - }; - } else { - return { - 'left': 155 * this.blocks.indexOf(block) + 'px', - 'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, - #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, - }; - } - } - - getStyleForProjectedBlockAtIndex(index: number) { - const greenBackgroundHeight = 100 - (this.projectedBlocks[index].blockWeight / 4000000) * 100; - if (this.innerWidth <= 768) { - if (index === 3) { - return { - 'top': 40 + index * 155 + 'px' - }; - } - return { - 'top': 40 + index * 155 + 'px', - 'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%, - #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`, - }; - } else { - if (index === 3) { - return { - 'right': 40 + index * 155 + 'px' - }; - } - return { - 'right': 40 + index * 155 + 'px', - 'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%, - #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`, - }; - } - } - - trackByProjectedFn(index: number) { - return index; - } - - trackByBlocksFn(index: number, item: IBlock) { - return item.height; - } - ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe(); } this.renderer.removeClass(document.body, 'disable-scroll'); } - - openBlockModal(block: IBlock) { - const modalRef = this.modalService.open(BlockModalComponent, { size: 'lg' }); - modalRef.componentInstance.block = block; - } - - openProjectedBlockModal(block: IBlock, index: number) { - const modalRef = this.modalService.open(ProjectedBlockModalComponent, { size: 'lg' }); - modalRef.componentInstance.block = block; - modalRef.componentInstance.index = index; - } }