New base code for mempool blockchain explorerer

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

@@ -0,0 +1,20 @@
+<div class="mempool-blocks-container">
+  <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
+    <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
+      <div class="block-body" *ngIf="mempoolBlocks?.length">
+        <div class="fees">
+          ~{{ projectedBlock.medianFee | ceil }} sat/vB
+          <br/>
+          <span class="yellow-color">{{ projectedBlock.feeRange[0] | ceil }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | 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 && mempoolBlocks?.length >= 4 && (projectedBlock.blockVSize / 1000000 | ceil) > 1">
+          <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
+        </ng-template>
+      </div>
+      <span class="animated-border"></span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,102 @@
+.bitcoin-block {
+  width: 125px;
+  height: 125px;
+}
+
+.block-size {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mempool-blocks-container {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+
+  animation: opacityPulse 2s ease-out;
+  animation-iteration-count: infinite; 
+  opacity: 1;
+}
+
+.mempool-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;
+}
+
+.transaction-count {
+  font-size: 12px;
+}
+
+@media (max-width: 767.98px) {
+  .mempool-blocks-container {
+    position: absolute;
+    left: -165px;
+    top: -40px;
+  }
+}
+
+@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;     
+  }
+
+  .mempool-block.bitcoin-block::after {
+    background-color: #403834; 
+  }
+
+  .mempool-block.bitcoin-block::before {
+    background-color: #2d2825; 
+  }
+}
+
+.black-background {
+  background-color: #11131f;
+  z-index: 100;
+  position: relative;
+}

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

@@ -0,0 +1,83 @@
+import { Component, OnInit, OnDestroy, Input, EventEmitter, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
+import { StateService } from 'src/app/services/state.service';
+
+@Component({
+  selector: 'app-mempool-blocks',
+  templateUrl: './mempool-blocks.component.html',
+  styleUrls: ['./mempool-blocks.component.scss']
+})
+export class MempoolBlocksComponent implements OnInit, OnDestroy {
+  mempoolBlocks: MempoolBlock[];
+  mempoolBlocksSubscription: Subscription;
+
+  blockWidth = 125;
+  blockMarginLeft = 20;
+
+  @Input() txFeePerVSize: number;
+  @Output() rightPosition: EventEmitter<number> = new EventEmitter<number>(true);
+  @Output() blockDepth: EventEmitter<number> = new EventEmitter<number>(true);
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
+      .subscribe((blocks) => {
+        this.mempoolBlocks = blocks;
+        this.calculateTransactionPosition();
+      });
+  }
+
+  ngOnDestroy() {
+    this.mempoolBlocksSubscription.unsubscribe();
+  }
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  getStyleForMempoolBlockAtIndex(index: number) {
+    const greenBackgroundHeight = 100 - this.mempoolBlocks[index].blockVSize / 1000000 * 100;
+    return {
+      'right': 40 + index * 155 + 'px',
+      'background': `repeating-linear-gradient(to right,  #554b45, #554b45 ${greenBackgroundHeight}%,
+        #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
+    };
+  }
+
+  calculateTransactionPosition() {
+    if (!this.txFeePerVSize) {
+      return;
+    }
+
+    for (const block of this.mempoolBlocks) {
+      for (let i = 0; i < block.feeRange.length - 1; i++) {
+        if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
+          const txInBlockIndex = this.mempoolBlocks.indexOf(block);
+          const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
+          const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
+
+          const txFee = this.txFeePerVSize - block.feeRange[i];
+          const max = block.feeRange[i + 1] - block.feeRange[i];
+          const blockLocation = txFee / max;
+
+          const chunkPositionOffset = blockLocation * feeRangeChunkSize;
+          const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
+
+          const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
+
+          const arrowRightPosition = txInBlockIndex * (this.blockMarginLeft + this.blockWidth)
+            + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
+
+          this.rightPosition.next(arrowRightPosition);
+          this.blockDepth.next(txInBlockIndex);
+          break;
+        }
+      }
+    }
+  }
+
+}