Initial code commit.

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

@@ -0,0 +1,69 @@
+<div *ngIf="blocks.length === 0" class="text-center">
+  <h3>Loading blocks...</h3>
+  <br>
+  <div class="spinner-border text-light"></div>
+</div>
+<div *ngIf="blocks.length !== 0 && txTrackingLoading" class="text-center black-background">
+  <h3>Locating transaction...</h3>
+</div>
+<div *ngIf="txShowTxNotFound" class="text-center black-background">
+  <h3>Transaction not found!</h3>
+</div>
+<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>
+
+  <div id="divider" *ngIf="blocks.length"></div>
+  </div>
+
+</div>
+
+<app-tx-bubble *ngIf="blocks?.length && txTrackingTx" [tx]="txTrackingTx" [arrowPosition]="txBubbleArrowPosition" [ngStyle]="txBubbleStyle" [latestBlockHeight]="blocks[0].height" [txTrackingBlockHeight]="txTrackingBlockHeight"></app-tx-bubble>
+
+<app-footer></app-footer>

frontend/src/app/blockchain/blockchain.component.scss

@@ -0,0 +1,195 @@
+.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;
+  left: 0;
+  top: -1000px;
+  background-image: url('/assets/divider-new.png');
+  background-repeat: repeat-y;
+  position: absolute;
+  margin-bottom: 120px;
+}
+
+#divider > img {
+  position: absolute;
+  left: -100px;
+  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;
+}
+
+.position-container {
+  position: absolute;
+  left: 50%;
+  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;
+  }
+  .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) {
+  .position-container {
+    transform: scale(1.3);
+  }
+}
+
+@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/blockchain.component.ts

@@ -0,0 +1,272 @@
+import { Component, OnInit, OnDestroy, Renderer2, HostListener } from '@angular/core';
+import { IMempoolDefaultResponse, IBlock, IProjectedBlock, ITransaction } from './interfaces';
+import { retryWhen, tap } from 'rxjs/operators';
+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';
+
+@Component({
+  selector: 'app-blockchain',
+  templateUrl: './blockchain.component.html',
+  styleUrls: ['./blockchain.component.scss']
+})
+export class BlockchainComponent implements OnInit, OnDestroy {
+  blocks: IBlock[] = [];
+  projectedBlocks: IProjectedBlock[] = [];
+  subscription: any;
+  socket: any;
+  innerWidth: any;
+  txBubbleStyle: any = {};
+
+  txTrackingLoading = false;
+  txTrackingEnabled = false;
+  txTrackingTx: ITransaction | null = null;
+  txTrackingBlockHeight = 0;
+  txShowTxNotFound = false;
+  txBubbleArrowPosition = 'top';
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event) {
+    this.innerWidth = window.innerWidth;
+    this.moveTxBubbleToPosition();
+  }
+
+  constructor(
+    private memPoolService: MemPoolService,
+    private apiService: ApiService,
+    private renderer: Renderer2,
+    private route: ActivatedRoute,
+    private modalService: NgbModal,
+  ) {}
+
+  ngOnInit() {
+
+    this.txBubbleStyle = {
+      'position': 'absolute',
+      'top': '425px',
+      'visibility': 'hidden',
+    };
+
+    this.innerWidth = window.innerWidth;
+    this.socket = this.apiService.websocketSubject;
+    this.subscription = this.socket
+      .pipe(
+        retryWhen((errors: any) => errors.pipe(
+        tap(() => this.memPoolService.isOffline.next(true))))
+      )
+      .subscribe((response: IMempoolDefaultResponse) => {
+        this.memPoolService.isOffline.next(false);
+        if (response.mempoolInfo && response.txPerSecond !== undefined) {
+          this.memPoolService.loaderSubject.next({
+            memPoolInfo: response.mempoolInfo,
+            txPerSecond: response.txPerSecond,
+            vBytesPerSecond: response.vBytesPerSecond,
+          });
+        }
+        if (response.blocks && response.blocks.length) {
+          this.blocks = response.blocks;
+          this.blocks.reverse();
+        }
+        if (response.block) {
+          if (!this.blocks.some((block) => response.block !== undefined && response.block.height === block.height )) {
+            this.blocks.unshift(response.block);
+            if (this.blocks.length >= 8) {
+              this.blocks.pop();
+            }
+          }
+        }
+        if (response.conversions) {
+          this.memPoolService.conversions.next(response.conversions);
+        }
+        if (response.projectedBlocks) {
+          this.projectedBlocks = response.projectedBlocks;
+          const mempoolWeight = this.projectedBlocks.map((block) => block.blockWeight).reduce((a, b) => a + b);
+          this.memPoolService.mempoolWeight.next(mempoolWeight);
+        }
+        if (response['track-tx']) {
+          if (response['track-tx'].tracking) {
+            this.txTrackingEnabled = true;
+            this.txTrackingBlockHeight = response['track-tx'].blockHeight;
+            if (response['track-tx'].tx) {
+              this.txTrackingTx = response['track-tx'].tx;
+              this.txTrackingLoading = false;
+            }
+          } else {
+            this.txTrackingEnabled = false;
+            this.txTrackingTx = null;
+            this.txTrackingBlockHeight = 0;
+          }
+          if (response['track-tx'].message && response['track-tx'].message === 'not-found') {
+            this.txTrackingLoading = false;
+            this.txShowTxNotFound = true;
+            setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
+          }
+          setTimeout(() => {
+            this.moveTxBubbleToPosition();
+          });
+        }
+      },
+      (err: Error) => console.log(err)
+    );
+    this.renderer.addClass(document.body, 'disable-scroll');
+
+    this.route.paramMap
+      .subscribe((params: ParamMap) => {
+        const txId: string | null = params.get('id');
+        if (!txId) {
+          return;
+        }
+        this.txTrackingLoading = true;
+        this.socket.next({'action': 'track-tx', 'txId': txId});
+      });
+
+    this.memPoolService.txIdSearch
+      .subscribe((txId) => {
+        if (txId) {
+          this.txTrackingLoading = true;
+          this.socket.next({'action': 'track-tx', 'txId': txId});
+        }
+      });
+  }
+
+  moveTxBubbleToPosition() {
+    let element: HTMLElement | null = null;
+    if (this.txTrackingBlockHeight === 0) {
+      const index = this.projectedBlocks.findIndex((pB) => pB.hasMytx);
+      if (index > -1) {
+        element = document.getElementById('projected-block-' + index);
+      } else {
+        return;
+      }
+    } else {
+      element = document.getElementById('bitcoin-block-' + this.txTrackingBlockHeight);
+    }
+
+    this.txBubbleStyle['visibility'] = 'visible';
+    this.txBubbleStyle['position'] = 'absolute';
+
+    if (!element) {
+      if (this.innerWidth <= 768) {
+        this.txBubbleArrowPosition = 'bottom';
+        this.txBubbleStyle['left'] = window.innerWidth / 2 - 50 + 'px';
+        this.txBubbleStyle['bottom'] = '270px';
+        this.txBubbleStyle['top'] = 'inherit';
+        this.txBubbleStyle['position'] = 'fixed';
+      } else {
+        this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
+        this.txBubbleArrowPosition = 'right';
+        this.txBubbleStyle['top'] = '425px';
+      }
+    } else {
+      this.txBubbleArrowPosition = 'top';
+      const domRect: DOMRect | ClientRect = element.getBoundingClientRect();
+      this.txBubbleStyle['left'] = domRect.left - 50 + 'px';
+      this.txBubbleStyle['top'] = domRect.top + 125 + window.scrollY + 'px';
+
+      if (domRect.left + 100 > window.innerWidth) {
+        this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
+        this.txBubbleArrowPosition = 'right';
+      } else if (domRect.left + 220 > window.innerWidth) {
+        this.txBubbleStyle['left'] = window.innerWidth - 240 + 'px';
+        this.txBubbleArrowPosition = 'top-right';
+      } else {
+        this.txBubbleStyle['left'] = domRect.left + 15 + 'px';
+      }
+
+      if (domRect.left < 86) {
+        this.txBubbleArrowPosition = 'top-left';
+        this.txBubbleStyle['left'] = 125 + 'px';
+      }
+    }
+  }
+
+  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;
+  }
+}

frontend/src/app/blockchain/interfaces.ts

@@ -0,0 +1,176 @@
+export interface IMempoolInfo {
+  size: number;
+  bytes: number;
+  usage: number;
+  maxmempool: number;
+  mempoolminfee: number;
+  minrelaytxfee: number;
+}
+
+export interface IMempoolDefaultResponse {
+  mempoolInfo?: IMempoolInfo;
+  blocks?: IBlock[];
+  block?: IBlock;
+  projectedBlocks?: IProjectedBlock[];
+  txPerSecond?: number;
+  vBytesPerSecond: number;
+  'track-tx'?: ITrackTx;
+  conversions?: any;
+}
+
+export interface ITrackTx {
+  tx?: ITransaction;
+  blockHeight: number;
+  tracking: boolean;
+  message?: string;
+}
+
+export interface IProjectedBlock {
+  blockSize: number;
+  blockWeight: number;
+  maxFee: number;
+  maxWeightFee: number;
+  medianFee: number;
+  minFee: number;
+  minWeightFee: number;
+  nTx: number;
+  hasMytx: boolean;
+}
+
+export interface IStrippedBlock {
+  bits: number;
+  difficulty: number;
+  hash: string;
+  height: number;
+  nTx: number;
+  size: number;
+  strippedsize: number;
+  time: number;
+  weight: number;
+}
+
+export interface ITransaction {
+  txid: string;
+  hash: string;
+  version: number;
+  size: number;
+  vsize: number;
+  locktime: number;
+  vin: Vin[];
+  vout: Vout[];
+  hex: string;
+
+  fee: number;
+  feePerVsize: number;
+  feePerWeightUnit: number;
+}
+
+export interface IBlock {
+  hash: string;
+  confirmations: number;
+  strippedsize: number;
+  size: number;
+  weight: number;
+  height: number;
+  version: number;
+  versionHex: string;
+  merkleroot: string;
+  tx: ITransaction[];
+  time: number;
+  mediantime: number;
+  nonce: number;
+  bits: string;
+  difficulty: number;
+  chainwork: string;
+  nTx: number;
+  previousblockhash: string;
+
+  minFee: number;
+  maxFee: number;
+  medianFee: number;
+  fees: number;
+}
+
+interface ScriptSig {
+  asm: string;
+  hex: string;
+}
+
+interface Vin {
+  txid: string;
+  vout: number;
+  scriptSig: ScriptSig;
+  sequence: number;
+}
+
+interface ScriptPubKey {
+  asm: string;
+  hex: string;
+  reqSigs: number;
+  type: string;
+  addresses: string[];
+}
+
+interface Vout {
+  value: number;
+  n: number;
+  scriptPubKey: ScriptPubKey;
+}
+
+export interface IMempoolStats {
+  id: number;
+  added: string;
+  unconfirmed_transactions: number;
+  tx_per_second: number;
+  vbytes_per_second: number;
+  mempool_byte_weight: number;
+  fee_data: IFeeData;
+  vsize_1: number;
+  vsize_2: number;
+  vsize_3: number;
+  vsize_4: number;
+  vsize_5: number;
+  vsize_6: number;
+  vsize_8: number;
+  vsize_10: number;
+  vsize_12: number;
+  vsize_15: number;
+  vsize_20: number;
+  vsize_30: number;
+  vsize_40: number;
+  vsize_50: number;
+  vsize_60: number;
+  vsize_70: number;
+  vsize_80: number;
+  vsize_90: number;
+  vsize_100: number;
+  vsize_125: number;
+  vsize_150: number;
+  vsize_175: number;
+  vsize_200: number;
+  vsize_250: number;
+  vsize_300: number;
+  vsize_350: number;
+  vsize_400: number;
+  vsize_500: number;
+  vsize_600: number;
+  vsize_700: number;
+  vsize_800: number;
+  vsize_900: number;
+  vsize_1000: number;
+  vsize_1200: number;
+  vsize_1400: number;
+  vsize_1600: number;
+  vsize_1800: number;
+  vsize_2000: number;
+}
+
+export interface IBlockTransaction {
+  f: number;
+  fpv: number;
+}
+
+interface IFeeData {
+  wu: { [ fee: string ]: number };
+  vsize: { [ fee: string ]: number };
+}