Basic address tracking.

backend/src/api/bitcoin/electrs-api.ts

@@ -70,7 +70,7 @@ class ElectrsApi {
     });
   }
 
-  getTxIdsForBlock(hash: string): Promise<Block> {
+  getTxIdsForBlock(hash: string): Promise<string[]> {
     return new Promise((resolve, reject) => {
       request(config.ELECTRS_API_URL + '/block/' + hash + '/txids', { json: true, timeout: 10000 }, (err, res, response) => {
         if (err) {

backend/src/api/blocks.ts

@@ -1,6 +1,7 @@
 const config = require('../../mempool-config.json');
 import bitcoinApi from './bitcoin/electrs-api';
-import { Block } from '../interfaces';
+import memPool from './mempool';
+import { Block, TransactionExtended } from '../interfaces';
 
 class Blocks {
   private blocks: Block[] = [];
@@ -39,15 +40,36 @@ class Blocks {
         const block = await bitcoinApi.getBlock(blockHash);
         const txIds = await bitcoinApi.getTxIdsForBlock(blockHash);
 
-        block.medianFee = 2;
+        const mempool = memPool.getMempool();
-        block.feeRange = [1, 3];
+        let found = 0;
+        let notFound = 0;
+
+        const transactions: TransactionExtended[] = [];
+
+        for (let i = 1; i < txIds.length; i++) {
+          if (mempool[txIds[i]]) {
+            transactions.push(mempool[txIds[i]]);
+            found++;
+          } else {
+            console.log(`Fetching block tx ${i} of ${txIds.length}`);
+            const tx = await memPool.getTransactionExtended(txIds[i]);
+            if (tx) {
+              transactions.push(tx);
+            }
+            notFound++;
+          }
+        }
+
+        transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
+        block.medianFee = this.median(transactions.map((tx) => tx.feePerVsize));
+        block.feeRange = this.getFeesInRange(transactions, 8);
 
         this.blocks.push(block);
         if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) {
           this.blocks.shift();
         }
 
-        this.newBlockCallback(block, txIds);
+        this.newBlockCallback(block, txIds, transactions);
       }
 
     } catch (err) {

backend/src/api/mempool-blocks.ts

@@ -1,5 +1,5 @@
 const config = require('../../mempool-config.json');
-import { MempoolBlock, SimpleTransaction } from '../interfaces';
+import { MempoolBlock, TransactionExtended } from '../interfaces';
 
 class MempoolBlocks {
   private mempoolBlocks: MempoolBlock[] = [];
@@ -10,9 +10,9 @@ class MempoolBlocks {
     return this.mempoolBlocks;
   }
 
-  public updateMempoolBlocks(memPool: { [txid: string]: SimpleTransaction }): void {
+  public updateMempoolBlocks(memPool: { [txid: string]: TransactionExtended }): void {
     const latestMempool = memPool;
-    const memPoolArray: SimpleTransaction[] = [];
+    const memPoolArray: TransactionExtended[] = [];
     for (const i in latestMempool) {
       if (latestMempool.hasOwnProperty(i)) {
         memPoolArray.push(latestMempool[i]);
@@ -23,11 +23,11 @@ class MempoolBlocks {
     this.mempoolBlocks = this.calculateMempoolBlocks(transactionsSorted);
   }
 
-  private calculateMempoolBlocks(transactionsSorted: SimpleTransaction[]): MempoolBlock[] {
+  private calculateMempoolBlocks(transactionsSorted: TransactionExtended[]): MempoolBlock[] {
     const mempoolBlocks: MempoolBlock[] = [];
     let blockWeight = 0;
     let blockSize = 0;
-    let transactions: SimpleTransaction[] = [];
+    let transactions: TransactionExtended[] = [];
     transactionsSorted.forEach((tx) => {
       if (blockWeight + tx.vsize < 1000000 || mempoolBlocks.length === config.DEFAULT_PROJECTED_BLOCKS_AMOUNT) {
         blockWeight += tx.vsize;
@@ -46,7 +46,7 @@ class MempoolBlocks {
     return mempoolBlocks;
   }
 
-  private dataToMempoolBlocks(transactions: SimpleTransaction[], blockSize: number, blockVSize: number, blocksIndex: number): MempoolBlock {
+  private dataToMempoolBlocks(transactions: TransactionExtended[], blockSize: number, blockVSize: number, blocksIndex: number): MempoolBlock {
     let rangeLength = 3;
     if (blocksIndex === 0) {
       rangeLength = 8;
@@ -79,7 +79,7 @@ class MempoolBlocks {
     return medianNr;
   }
 
-  private getFeesInRange(transactions: SimpleTransaction[], rangeLength: number) {
+  private getFeesInRange(transactions: TransactionExtended[], rangeLength: number) {
     const arr = [transactions[transactions.length - 1].feePerVsize];
     const chunk = 1 / (rangeLength - 1);
     let itemsToAdd = rangeLength - 2;

backend/src/api/mempool.ts

@@ -1,6 +1,6 @@
 const config = require('../../mempool-config.json');
 import bitcoinApi from './bitcoin/electrs-api';
-import { MempoolInfo, SimpleTransaction, Transaction } from '../interfaces';
+import { MempoolInfo, TransactionExtended, Transaction } from '../interfaces';
 
 class Mempool {
   private mempoolCache: any = {};
@@ -21,7 +21,7 @@ class Mempool {
     this.mempoolChangedCallback = fn;
   }
 
-  public getMempool(): { [txid: string]: SimpleTransaction } {
+  public getMempool(): { [txid: string]: TransactionExtended } {
     return this.mempoolCache;
   }
 
@@ -52,16 +52,13 @@ class Mempool {
     return this.vBytesPerSecond;
   }
 
-  public async getRawTransaction(txId: string): Promise<SimpleTransaction | false> {
+  public async getTransactionExtended(txId: string): Promise<TransactionExtended | false> {
     try {
       const transaction: Transaction = await bitcoinApi.getRawTransaction(txId);
-      return {
+      return Object.assign({
-        txid: transaction.txid,
-        fee: transaction.fee,
-        size: transaction.size,
         vsize: transaction.weight / 4,
-        feePerVsize: transaction.fee / (transaction.weight / 4)
+        feePerVsize: transaction.fee / (transaction.weight / 4),
-      };
+      }, transaction);
     } catch (e) {
       console.log(txId + ' not found');
       return false;
@@ -76,10 +73,11 @@ class Mempool {
     try {
       const transactions = await bitcoinApi.getRawMempool();
       const diff = transactions.length - Object.keys(this.mempoolCache).length;
+      const newTransactions: TransactionExtended[] = [];
 
       for (const txid of transactions) {
         if (!this.mempoolCache[txid]) {
-          const transaction = await this.getRawTransaction(txid);
+          const transaction = await this.getTransactionExtended(txid);
           if (transaction) {
             this.mempoolCache[txid] = transaction;
             txCount++;
@@ -94,6 +92,7 @@ class Mempool {
             } else {
               console.log('Fetched transaction ' + txCount);
             }
+            newTransactions.push(transaction);
           } else {
             console.log('Error finding transaction in mempool.');
           }
@@ -117,7 +116,7 @@ class Mempool {
       this.mempoolCache = newMempool;
 
       if (hasChange && this.mempoolChangedCallback) {
-        this.mempoolChangedCallback(this.mempoolCache);
+        this.mempoolChangedCallback(this.mempoolCache, newTransactions);
       }
 
       const end = new Date().getTime();

backend/src/api/statistics.ts

@@ -1,7 +1,7 @@
 import memPool from './mempool';
 import { DB } from '../database';
 
-import { Statistic, SimpleTransaction, OptimizedStatistic } from '../interfaces';
+import { Statistic, TransactionExtended, OptimizedStatistic } from '../interfaces';
 
 class Statistics {
   protected intervalTimer: NodeJS.Timer | undefined;
@@ -37,7 +37,7 @@ class Statistics {
 
     console.log('Running statistics');
 
-    let memPoolArray: SimpleTransaction[] = [];
+    let memPoolArray: TransactionExtended[] = [];
     for (const i in currentMempool) {
       if (currentMempool.hasOwnProperty(i)) {
         memPoolArray.push(currentMempool[i]);

backend/src/index.ts

@@ -13,7 +13,7 @@ import mempoolBlocks from './api/mempool-blocks';
 import diskCache from './api/disk-cache';
 import statistics from './api/statistics';
 
-import { Block, SimpleTransaction, Statistic } from './interfaces';
+import { Block, TransactionExtended, Statistic } from './interfaces';
 
 import fiatConversion from './api/fiat-conversion';
 
@@ -98,6 +98,15 @@ class Server {
             }
           }
 
+          if (parsedMessage && parsedMessage['track-address']) {
+            if (/^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,87})$/
+              .test(parsedMessage['track-address'])) {
+              client['track-address'] = parsedMessage['track-address'];
+            } else {
+              client['track-address'] = null;
+            }
+          }
+
           if (parsedMessage.action === 'init') {
             const _blocks = blocks.getBlocks();
             if (!_blocks) {
@@ -133,7 +142,7 @@ class Server {
       });
     });
 
-    blocks.setNewBlockCallback((block: Block, txIds: string[]) => {
+    blocks.setNewBlockCallback((block: Block, txIds: string[], transactions: TransactionExtended[]) => {
       this.wss.clients.forEach((client) => {
         if (client.readyState !== WebSocket.OPEN) {
           return;
@@ -143,21 +152,40 @@ class Server {
           return;
         }
 
+        const response = {
+          'block': block
+        };
+
         if (client['track-tx'] && txIds.indexOf(client['track-tx']) > -1) {
           client['track-tx'] = null;
-          client.send(JSON.stringify({
+          response['txConfirmed'] = true;
-            'block': block,
-            'txConfirmed': true,
-          }));
-        } else {
-          client.send(JSON.stringify({
-            'block': block,
-          }));
         }
+
+        if (client['track-address']) {
+          const foundTransactions: TransactionExtended[] = [];
+
+          transactions.forEach((tx) => {
+            const someVin = tx.vin.some((vin) => vin.prevout.scriptpubkey_address === client['track-address']);
+            if (someVin) {
+              foundTransactions.push(tx);
+              return;
+            }
+            const someVout = tx.vout.some((vout) => vout.scriptpubkey_address === client['track-address']);
+            if (someVout) {
+              foundTransactions.push(tx);
+            }
+          });
+
+          if (foundTransactions.length) {
+            response['address-block-transactions'] = foundTransactions;
+          }
+        }
+
+        client.send(JSON.stringify(response));
       });
     });
 
-    memPool.setMempoolChangedCallback((newMempool: { [txid: string]: SimpleTransaction }) => {
+    memPool.setMempoolChangedCallback((newMempool: { [txid: string]: TransactionExtended }, newTransactions: TransactionExtended[]) => {
       mempoolBlocks.updateMempoolBlocks(newMempool);
       const mBlocks = mempoolBlocks.getMempoolBlocks();
       const mempoolInfo = memPool.getMempoolInfo();
@@ -179,6 +207,27 @@ class Server {
           response['mempool-blocks'] = mBlocks;
         }
 
+        // Send all new incoming transactions related to tracked address
+        if (client['track-address']) {
+          const foundTransactions: TransactionExtended[] = [];
+
+          newTransactions.forEach((tx) => {
+            const someVin = tx.vin.some((vin) => vin.prevout.scriptpubkey_address === client['track-address']);
+            if (someVin) {
+              foundTransactions.push(tx);
+              return;
+            }
+            const someVout = tx.vout.some((vout) => vout.scriptpubkey_address === client['track-address']);
+            if (someVout) {
+              foundTransactions.push(tx);
+            }
+          });
+
+          if (foundTransactions.length) {
+            response['address-transactions'] = foundTransactions;
+          }
+        }
+
         if (Object.keys(response).length) {
           client.send(JSON.stringify(response));
         }

backend/src/interfaces.ts

@@ -27,7 +27,7 @@ export interface Transaction {
   status: Status;
 }
 
-export interface SimpleTransaction {
+export interface TransactionExtended extends Transaction {
   txid: string;
   fee: number;
   size: number;

frontend/src/app/components/address/address.component.html

@@ -40,7 +40,7 @@
 
     <br>
 
-    <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }} transactions</h2>
+    <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count + addedTransactions }} transactions</h2>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
 

frontend/src/app/components/address/address.component.ts

@@ -1,28 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap } from 'rxjs/operators';
 import { Address, Transaction } from '../../interfaces/electrs.interface';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-address',
   templateUrl: './address.component.html',
   styleUrls: ['./address.component.scss']
 })
-export class AddressComponent implements OnInit {
+export class AddressComponent implements OnInit, OnDestroy {
   address: Address;
   addressString: string;
   isLoadingAddress = true;
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
+  addedTransactions = 0;
 
   constructor(
     private route: ActivatedRoute,
     private electrsApiService: ElectrsApiService,
+    private websocketService: WebsocketService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.error = undefined;
@@ -35,6 +42,7 @@ export class AddressComponent implements OnInit {
     )
     .subscribe((address) => {
       this.address = address;
+      this.websocketService.startTrackAddress(address.address);
       this.isLoadingAddress = false;
       document.body.scrollTo({ top: 0, behavior: 'smooth' });
       this.getAddressTransactions(address.address);
@@ -44,6 +52,28 @@ export class AddressComponent implements OnInit {
       this.error = error;
       this.isLoadingAddress = false;
     });
+
+    this.stateService.mempoolTransactions$
+      .subscribe((transaction) => {
+        this.transactions.unshift(transaction);
+        this.addedTransactions++;
+      });
+
+    this.stateService.blockTransactions$
+      .subscribe((transaction) => {
+        const tx = this.transactions.find((t) => t.txid === transaction.txid);
+        if (tx) {
+          tx.status = transaction.status;
+        }
+      });
+
+    this.stateService.isOffline$
+      .subscribe((state) => {
+        if (!state && this.transactions && this.transactions.length) {
+          this.isLoadingTransactions = true;
+          this.getAddressTransactions(this.address.address);
+        }
+      });
   }
 
   getAddressTransactions(address: string) {
@@ -62,4 +92,8 @@ export class AddressComponent implements OnInit {
         this.isLoadingTransactions = false;
       });
   }
+
+  ngOnDestroy() {
+    this.websocketService.startTrackAddress('stop');
+  }
 }

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

@@ -69,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (window.innerWidth <= 768) {
       return {
         top: 155 * this.blocks.indexOf(block) + 'px',
-        background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
+        background: `repeating-linear-gradient(to right, #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}%,
+        background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
           #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
       };
     }

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

@@ -1,14 +1,17 @@
-<div *ngIf="isLoading" class="loading-block">
-  <h3>Waiting for blocks...</h3>
-  <br>
-  <div class="spinner-border text-light"></div>
-</div>
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container" [ngStyle]="{'top': position === 'top' ? '75px' : 'calc(50% - 60px)'}">
     <app-mempool-blocks [txFeePerVSize]="txFeePerVSize"></app-mempool-blocks>
     <app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
 
-    <div id="divider" *ngIf="!isLoading"></div>
+    <div id="divider" *ngIf="!isLoading; else loadingTmpl"></div>
-  </div>
 
+    <ng-template #loadingTmpl>
+      <div class="loading-block">
+        <h3>Waiting for blocks...</h3>
+        <br>
+        <div class="spinner-border text-light"></div>
+      </div>
+    </ng-template>
+
+  </div>
 </div>

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

@@ -51,6 +51,7 @@
   position: absolute;
   text-align: center;
   margin: auto;
-  width: 100%;
+  width: 300px;
-  top: 80px;
+  left: -150px;
+  top: 0px;
 }

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

@@ -76,7 +76,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
           const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
 
           const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
-          console.log(txInBlockIndex);
           const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
             + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
 

frontend/src/app/components/search-form/search-form.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
+<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" class="mr-4" novalidate>
   <div class="form-row">
     <div style="width: 350px;" class="mr-2">
       <input formControlName="searchText" type="text" class="form-control" [placeholder]="searchBoxPlaceholderText">

frontend/src/app/components/transaction/transaction.component.ts

@@ -65,7 +65,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
 
-    this.stateService.txConfirmed
+    this.stateService.txConfirmed$
       .subscribe((block) => {
         this.tx.status = {
           confirmed: true,

frontend/src/app/services/state.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
-import { Block } from '../interfaces/electrs.interface';
+import { Block, Transaction } from '../interfaces/electrs.interface';
 import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 
@@ -13,7 +13,10 @@ export class StateService {
   conversions$ = new ReplaySubject<any>(1);
   mempoolStats$ = new ReplaySubject<MemPoolState>();
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
-  txConfirmed = new Subject<Block>();
+  txConfirmed$ = new Subject<Block>();
+  mempoolTransactions$ = new Subject<Transaction>();
+  blockTransactions$ = new Subject<Transaction>();
+
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 
   viewFiat$ = new BehaviorSubject<boolean>(false);

frontend/src/app/services/websocket.service.ts

@@ -3,7 +3,7 @@ import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { retryWhen, tap, delay } from 'rxjs/operators';
 import { StateService } from './state.service';
-import { Block } from '../interfaces/electrs.interface';
+import { Block, Transaction } from '../interfaces/electrs.interface';
 
 const WEB_SOCKET_PROTOCOL = (document.location.protocol === 'https:') ? 'wss:' : 'ws:';
 const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//' + document.location.hostname + ':8999';
@@ -58,7 +58,7 @@ export class WebsocketService {
 
           if (response.txConfirmed) {
             this.trackingTxId = null;
-            this.stateService.txConfirmed.next(response.block);
+            this.stateService.txConfirmed$.next(response.block);
           }
         }
 
@@ -70,6 +70,18 @@ export class WebsocketService {
           this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
         }
 
+        if (response['address-transactions']) {
+          response['address-transactions'].forEach((addressTransaction: Transaction) => {
+            this.stateService.mempoolTransactions$.next(addressTransaction);
+          });
+        }
+
+        if (response['address-block-transactions']) {
+          response['address-block-transactions'].forEach((addressTransaction: Transaction) => {
+            this.stateService.blockTransactions$.next(addressTransaction);
+          });
+        }
+
         if (response['live-2h-chart']) {
           this.stateService.live2Chart$.next(response['live-2h-chart']);
         }