New base code for mempool blockchain explorerer

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

@@ -0,0 +1,20 @@
+<div class="blocks-container" *ngIf="blocks.length">
+  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
+    <div [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
+      <div class="block-height">
+        <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">#{{ block.height }}</a>
+      </div>
+      <div class="block-body">
+        <div class="fees">
+          ~{{ block.medianFee | ceil }} sat/vB
+          <br/>
+          <span class="yellow-color">{{ block.feeRange[0] | ceil }} - {{ block.feeRange[block.feeRange.length - 1] | ceil }} sat/vB</span>
+        </div>
+        <div class="block-size">{{ block.size | bytes: 2 }}</div>
+        <div class="transaction-count">{{ block.tx_count }} transactions</div>
+        <br /><br />
+        <div class="time-difference">{{ block.timestamp | timeSince : trigger }} ago</div>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -0,0 +1,96 @@
+.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;
+}
+
+.block-body {
+  text-align: center;
+}
+
+.time-difference {
+  position: absolute;
+  bottom: 10px;
+  text-align: center;
+  width: 100%;
+  font-size: 14px;
+}
+
+.fees {
+  font-size: 10px;
+  margin-top: 10px;
+  margin-bottom: 2px;
+}
+
+.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;     
+  }
+}
+
+.black-background {
+  background-color: #11131f;
+  z-index: 100;
+  position: relative;
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Block } from 'src/app/interfaces/electrs.interface';
+import { StateService } from 'src/app/services/state.service';
+
+@Component({
+  selector: 'app-blockchain-blocks',
+  templateUrl: './blockchain-blocks.component.html',
+  styleUrls: ['./blockchain-blocks.component.scss']
+})
+export class BlockchainBlocksComponent implements OnInit, OnDestroy {
+  blocks: Block[] = [];
+  blocksSubscription: Subscription;
+  interval: any;
+  trigger = 0;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe((block) => {
+        if (this.blocks.some((b) => b.height === block.height)) {
+          return;
+        }
+        this.blocks.unshift(block);
+        this.blocks = this.blocks.slice(0, 8);
+      });
+
+    this.interval = setInterval(() => this.trigger++, 10 * 1000);
+  }
+
+  ngOnDestroy() {
+    this.blocksSubscription.unsubscribe();
+    clearInterval(this.interval);
+  }
+
+  trackByBlocksFn(index: number, item: Block) {
+    return item.height;
+  }
+
+  getStyleForBlock(block: Block) {
+    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%)`,
+      };
+    }
+  }
+
+}