Refactored the "blockchain" into separate sub components.

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,

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({

frontend/src/app/blockchain-blocks/blockchain-blocks.component.html

@@ -0,0 +1,26 @@
+<div class="blocks-container" *ngIf="blocks.length">
+  
+  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
+    <div (click)="openBlockModal(block);" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
+      
+      <div class="block-height">
+        <a href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
+      </div>
+
+      <div class="block-body">
+        <div class="fees">
+          ~{{ block.medianFee | ceil }} sat/vB
+          <br/>
+          <span class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</span>
+        </div>
+
+        <div class="block-size">{{ block.size | bytes: 2 }}</div>
+        <div class="transaction-count">{{ block.nTx }} transactions</div>
+        <br /><br />
+        <div class="time-difference">{{ getTimeSinceMined(block) }} ago</div>
+      </div>
+
+    </div>
+  </div>
+
+</div>

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

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%)`,
+      };
+    }
+  }
+
+}

frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html

@@ -0,0 +1,20 @@
+<div class="projected-blocks-container">
+  <div *ngFor="let projectedBlock of projectedBlocks; let i = index; trackBy: trackByProjectedFn">
+    <div (click)="openProjectedBlockModal(projectedBlock, i);" class="bitcoin-block text-center projected-block" id="projected-block-{{ i }}" [ngStyle]="getStyleForProjectedBlockAtIndex(i)">
+      <div class="block-body" *ngIf="projectedBlocks?.length">
+        <div class="fees">
+          ~{{ projectedBlock.medianFee | ceil }} sat/vB
+          <br/>
+          <span class="yellow-color">{{ projectedBlock.minFee | ceil }} - {{ projectedBlock.maxFee | ceil }} sat/vB</span>
+        </div>
+        <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
+        <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
+        <div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
+        <ng-template [ngIf]="i === 3 && projectedBlocks?.length >= 4 && (projectedBlock.blockWeight / 4000000 | ceil) > 1">
+          <div class="time-difference">+{{ projectedBlock.blockWeight / 4000000 | ceil }} blocks</div>
+        </ng-template>
+      </div>
+      <span class="animated-border"></span>
+    </div>
+  </div>
+</div>

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

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%)`,
+      };
+    }
+  }
+
+}

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({

frontend/src/app/blockchain/blockchain.component.html

@@ -12,52 +12,8 @@
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container">
 
-  <div class="projected-blocks-container">
-    <div *ngFor="let projectedBlock of projectedBlocks; let i = index; trackBy: trackByProjectedFn">
-      <div (click)="openProjectedBlockModal(projectedBlock, i);" class="bitcoin-block text-center projected-block" id="projected-block-{{ i }}" [ngStyle]="getStyleForProjectedBlockAtIndex(i)">
-        <div class="block-body" *ngIf="projectedBlocks?.length">
-          <div class="fees">
-            ~{{ projectedBlock.medianFee | ceil }} sat/vB
-            <br/>
-            <span class="yellow-color">{{ projectedBlock.minFee | ceil }} - {{ projectedBlock.maxFee | ceil }} sat/vB</span>
-          </div>
-          <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
-          <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
-          <div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
-          <ng-template [ngIf]="i === 3 && projectedBlocks?.length >= 4 && (projectedBlock.blockWeight / 4000000 | ceil) > 1">
-            <div class="time-difference">+{{ projectedBlock.blockWeight / 4000000 | ceil }} blocks</div>
-          </ng-template>
-        </div>
-        <span class="animated-border"></span>
-      </div>
-    </div>
-  </div>
-  <div class="blocks-container" *ngIf="blocks.length">
-    
-    <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-      <div (click)="openBlockModal(block);" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
-        
-        <div class="block-height">
-          <a href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
-        </div>
-
-        <div class="block-body">
-          <div class="fees">
-            ~{{ block.medianFee | ceil }} sat/vB
-            <br/>
-            <span class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</span>
-          </div>
-
-          <div class="block-size">{{ block.size | bytes: 2 }}</div>
-          <div class="transaction-count">{{ block.nTx }} transactions</div>
-          <br /><br />
-          <div class="time-difference">{{ getTimeSinceMined(block) }} ago</div>
-        </div>
-
-      </div>
-    </div>
-
-  </div>
+  <app-blockchain-projected-blocks [projectedBlocks]="projectedBlocks"></app-blockchain-projected-blocks>
+  <app-blockchain-blocks [blocks]="blocks"></app-blockchain-blocks>
 
   <div id="divider" *ngIf="blocks.length"></div>
   </div>

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;

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