Mining pool detail page draft PoC

backend/src/api/common.ts

@@ -154,4 +154,19 @@ export class Common {
     });
     return parents;
   }
+
+  static getSqlInterval(interval: string | null): string | null {
+    switch (interval) {
+      case '24h': return '1 DAY';
+      case '3d': return '3 DAY';
+      case '1w': return '1 WEEK';
+      case '1m': return '1 MONTH';
+      case '3m': return '3 MONTH';
+      case '6m': return '6 MONTH';
+      case '1y': return '1 YEAR';
+      case '2y': return '2 YEAR';
+      case '3y': return '3 YEAR';
+      default: return null;
+    }
+  }
 }

backend/src/api/mining.ts

@@ -2,36 +2,20 @@ import { PoolInfo, PoolStats } from '../mempool.interfaces';
 import BlocksRepository, { EmptyBlocks } from '../repositories/BlocksRepository';
 import PoolsRepository from '../repositories/PoolsRepository';
 import bitcoinClient from './bitcoin/bitcoin-client';
+import { Common } from './common';
 
 class Mining {
   constructor() {
   }
 
-  private getSqlInterval(interval: string | null): string | null {
-    switch (interval) {
-      case '24h': return '1 DAY';
-      case '3d': return '3 DAY';
-      case '1w': return '1 WEEK';
-      case '1m': return '1 MONTH';
-      case '3m': return '3 MONTH';
-      case '6m': return '6 MONTH';
-      case '1y': return '1 YEAR';
-      case '2y': return '2 YEAR';
-      case '3y': return '3 YEAR';
-      default: return null;
-    }
-  }
-
   /**
    * Generate high level overview of the pool ranks and general stats
    */
   public async $getPoolsStats(interval: string | null) : Promise<object> {
-    const sqlInterval = this.getSqlInterval(interval);
-
     const poolsStatistics = {};
 
-    const poolsInfo: PoolInfo[] = await PoolsRepository.$getPoolsInfo(sqlInterval);
+    const poolsInfo: PoolInfo[] = await PoolsRepository.$getPoolsInfo(interval);
-    const emptyBlocks: EmptyBlocks[] = await BlocksRepository.$countEmptyBlocks(sqlInterval);
+    const emptyBlocks: EmptyBlocks[] = await BlocksRepository.$getEmptyBlocks(null, interval);
 
     const poolsStats: PoolStats[] = [];
     let rank = 1;
@@ -58,7 +42,7 @@ class Mining {
     const oldestBlock = new Date(await BlocksRepository.$oldestBlockTimestamp());
     poolsStatistics['oldestIndexedBlockTimestamp'] = oldestBlock.getTime();
 
-    const blockCount: number = await BlocksRepository.$blockCount(sqlInterval);
+    const blockCount: number = await BlocksRepository.$blockCount(null, interval);
     poolsStatistics['blockCount'] = blockCount;
 
     const blockHeightTip = await bitcoinClient.getBlockCount();
@@ -74,15 +58,16 @@ class Mining {
   public async $getPoolStat(interval: string | null, poolId: number): Promise<object> {
     const pool = await PoolsRepository.$getPool(poolId);
     if (!pool) {
-      throw new Error("This mining pool does not exist");
+      throw new Error(`This mining pool does not exist`);
     }
 
-    const sqlInterval = this.getSqlInterval(interval);
+    const blockCount: number = await BlocksRepository.$blockCount(poolId, interval);
-    const blocks = await BlocksRepository.$getBlocksByPool(sqlInterval, poolId);
+    const emptyBlocks: EmptyBlocks[] = await BlocksRepository.$getEmptyBlocks(poolId, interval);
 
     return {
       pool: pool,
-      blocks: blocks,
+      blockCount: blockCount,
+      emptyBlocks: emptyBlocks,
     };
   }
 }

backend/src/index.ts

@@ -275,7 +275,9 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pools/3y', routes.$getPools.bind(routes, '3y'))
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pools/all', routes.$getPools.bind(routes, 'all'))
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pool/:poolId', routes.$getPool)
-        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pool/:poolId/:interval', routes.$getPool);
+        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pool/:poolId/:interval', routes.$getPool)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pool-blocks/:poolId', routes.$getPoolBlocks)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/pool-blocks/:poolId/:height', routes.$getPoolBlocks);
     }
 
     if (config.BISQ.ENABLED) {

backend/src/mempool.interfaces.ts

@@ -1,23 +1,23 @@
 import { IEsploraApi } from './api/bitcoin/esplora-api.interface';
 
 export interface PoolTag {
-  id: number, // mysql row id
+  id: number; // mysql row id
-  name: string,
+  name: string;
-  link: string,
+  link: string;
-  regexes: string, // JSON array
+  regexes: string; // JSON array
-  addresses: string, // JSON array
+  addresses: string; // JSON array
 }
 
 export interface PoolInfo {
-  poolId: number, // mysql row id
+  poolId: number; // mysql row id
-  name: string,
+  name: string;
-  link: string,
+  link: string;
-  blockCount: number,
+  blockCount: number;
 }
 
 export interface PoolStats extends PoolInfo {
-  rank: number,
+  rank: number;
-  emptyBlocks: number,
+  emptyBlocks: number;
 }
 
 export interface MempoolBlock {

backend/src/repositories/BlocksRepository.ts

@@ -1,6 +1,7 @@
 import { BlockExtended, PoolTag } from '../mempool.interfaces';
 import { DB } from '../database';
 import logger from '../logger';
+import { Common } from '../api/common';
 
 export interface EmptyBlocks {
   emptyBlocks: number;
@@ -43,6 +44,7 @@ class BlocksRepository {
         block.extras?.reward ?? 0,
       ];
 
+      logger.debug(query);
       await connection.query(query, params);
     } catch (e: any) {
       if (e.errno === 1062) { // ER_DUP_ENTRY
@@ -64,12 +66,12 @@ class BlocksRepository {
     }
 
     const connection = await DB.pool.getConnection();
-    const [rows] : any[] = await connection.query(`
+    const [rows]: any[] = await connection.query(`
       SELECT height
       FROM blocks
-      WHERE height <= ${startHeight} AND height >= ${endHeight}
+      WHERE height <= ? AND height >= ?
       ORDER BY height DESC;
-    `);
+    `, [startHeight, endHeight]);
     connection.release();
 
     const indexedBlockHeights: number[] = [];
@@ -81,18 +83,28 @@ class BlocksRepository {
   }
 
   /**
-   * Count empty blocks for all pools
+   * Get empty blocks for one or all pools
    */
-  public async $countEmptyBlocks(interval: string | null): Promise<EmptyBlocks[]> {
+  public async $getEmptyBlocks(poolId: number | null, interval: string | null = null): Promise<EmptyBlocks[]> {
-    const query = `
+    interval = Common.getSqlInterval(interval);
-      SELECT pool_id as poolId
-      FROM blocks
-      WHERE tx_count = 1` +
-      (interval != null ? ` AND blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()` : ``)
-    ;
 
+    const params: any[] = [];
+    let query = `SELECT height, hash, tx_count, size, pool_id, weight, UNIX_TIMESTAMP(blockTimestamp) as timestamp
+      FROM blocks
+      WHERE tx_count = 1`;
+
+    if (poolId) {
+      query += ` AND pool_id = ?`;
+      params.push(poolId);
+    }
+
+    if (interval) {
+      query += ` AND blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+    }
+
+    logger.debug(query);
     const connection = await DB.pool.getConnection();
-    const [rows] = await connection.query(query);
+    const [rows] = await connection.query(query, params);
     connection.release();
 
     return <EmptyBlocks[]>rows;
@@ -101,15 +113,30 @@ class BlocksRepository {
   /**
    * Get blocks count for a period
    */
-   public async $blockCount(interval: string | null): Promise<number> {
+  public async $blockCount(poolId: number | null, interval: string | null): Promise<number> {
-    const query = `
+    interval = Common.getSqlInterval(interval);
-      SELECT count(height) as blockCount
-      FROM blocks` +
-      (interval != null ? ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()` : ``)
-    ;
 
+    const params: any[] = [];
+    let query = `SELECT count(height) as blockCount
+      FROM blocks`;
+
+    if (poolId) {
+      query += ` WHERE pool_id = ?`;
+      params.push(poolId);
+    }
+
+    if (interval) {
+      if (poolId) {
+        query += ` AND`;
+      } else {
+        query += ` WHERE`;
+      }
+      query += ` blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+    }
+
+    logger.debug(query);
     const connection = await DB.pool.getConnection();
-    const [rows] = await connection.query(query);
+    const [rows] = await connection.query(query, params);
     connection.release();
 
     return <number>rows[0].blockCount;
@@ -119,13 +146,15 @@ class BlocksRepository {
    * Get the oldest indexed block
    */
   public async $oldestBlockTimestamp(): Promise<number> {
-    const connection = await DB.pool.getConnection();
+    const query = `SELECT blockTimestamp
-    const [rows]: any[] = await connection.query(`
-      SELECT blockTimestamp
       FROM blocks
       ORDER BY height
-      LIMIT 1;
+      LIMIT 1;`;
-    `);
+
+
+    logger.debug(query);
+    const connection = await DB.pool.getConnection();
+    const [rows]: any[] = await connection.query(query);
     connection.release();
 
     if (rows.length <= 0) {
@@ -138,18 +167,34 @@ class BlocksRepository {
   /**
    * Get blocks mined by a specific mining pool
    */
-  public async $getBlocksByPool(interval: string | null, poolId: number): Promise<object> {
+  public async $getBlocksByPool(
-    const query = `
+    poolId: number,
-      SELECT *
+    startHeight: number | null = null
+  ): Promise<object[]> {
+    const params: any[] = [];
+    let query = `SELECT height, hash, tx_count, size, weight, pool_id, UNIX_TIMESTAMP(blockTimestamp) as timestamp
       FROM blocks
-      WHERE pool_id = ${poolId}`
+      WHERE pool_id = ?`;
-      + (interval != null ? ` AND blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()` : ``);
+    params.push(poolId);
 
+    if (startHeight) {
+      query += ` AND height < ?`;
+      params.push(startHeight);
+    }
+
+    query += ` ORDER BY height DESC
+      LIMIT 10`;
+
+    logger.debug(query);
     const connection = await DB.pool.getConnection();
-    const [rows] = await connection.query(query);
+    const [rows] = await connection.query(query, params);
     connection.release();
 
-    return rows;
+    for (const block of <object[]>rows) {
+      delete block['blockTimestamp'];
+    }
+
+    return <object[]>rows;
   }
 
   /**

backend/src/repositories/PoolsRepository.ts

@@ -1,4 +1,6 @@
+import { Common } from '../api/common';
 import { DB } from '../database';
+import logger from '../logger';
 import { PoolInfo, PoolTag } from '../mempool.interfaces';
 
 class PoolsRepository {
@@ -25,16 +27,21 @@ class PoolsRepository {
   /**
    * Get basic pool info and block count
    */
-  public async $getPoolsInfo(interval: string | null): Promise<PoolInfo[]> {
+  public async $getPoolsInfo(interval: string | null = null): Promise<PoolInfo[]> {
-    const query = `
+    interval = Common.getSqlInterval(interval);
-      SELECT COUNT(height) as blockCount, pool_id as poolId, pools.name as name, pools.link as link
-      FROM blocks
-      JOIN pools on pools.id = pool_id` +
-      (interval != null ? ` WHERE blocks.blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()` : ``) +
-      ` GROUP BY pool_id
-      ORDER BY COUNT(height) DESC
-    `;
 
+    let query = `SELECT COUNT(height) as blockCount, pool_id as poolId, pools.name as name, pools.link as link
+      FROM blocks
+      JOIN pools on pools.id = pool_id`;
+
+    if (interval) {
+      query += ` WHERE blocks.blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+    }
+
+    query += ` GROUP BY pool_id
+      ORDER BY COUNT(height) DESC`;
+
+    logger.debug(query);
     const connection = await DB.pool.getConnection();
     const [rows] = await connection.query(query);
     connection.release();
@@ -45,15 +52,15 @@ class PoolsRepository {
   /**
    * Get mining pool statistics for one pool
    */
-   public async $getPool(poolId: number) : Promise<object> {
+   public async $getPool(poolId: any): Promise<object> {
     const query = `
       SELECT *
       FROM pools
-      WHERE pools.id = ${poolId}
+      WHERE pools.id = ?`;
-    `;
 
+    logger.debug(query);
     const connection = await DB.pool.getConnection();
-    const [rows] = await connection.query(query);
+    const [rows] = await connection.query(query, [poolId]);
     connection.release();
 
     return rows[0];

backend/src/routes.ts

@@ -24,6 +24,7 @@ import miningStats from './api/mining';
 import axios from 'axios';
 import PoolsRepository from './repositories/PoolsRepository';
 import mining from './api/mining';
+import BlocksRepository from './repositories/BlocksRepository';
 
 class Routes {
   constructor() {}
@@ -537,8 +538,7 @@ class Routes {
 
   public async $getPool(req: Request, res: Response) {
     try {
-      const poolId = parseInt(req.params.poolId);
+      const stats = await mining.$getPoolStat(req.params.interval ?? null, parseInt(req.params.poolId, 10));
-      const stats = await mining.$getPoolStat(req.params.interval ?? null, poolId);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
@@ -548,9 +548,24 @@ class Routes {
     }
   }
 
+  public async $getPoolBlocks(req: Request, res: Response) {
+    try {
+      const poolBlocks = await BlocksRepository.$getBlocksByPool(
+        parseInt(req.params.poolId, 10),
+        parseInt(req.params.height, 10) ?? null,
+      );
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json(poolBlocks);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   public async $getPools(interval: string, req: Request, res: Response) {
     try {
-      let stats = await miningStats.$getPoolsStats(interval);
+      const stats = await miningStats.$getPoolsStats(interval);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());

frontend/src/app/app-routing.module.ts

@@ -71,6 +71,10 @@ let routes: Routes = [
         path: 'mining/pool/:poolId',
         component: PoolComponent,
       },
+      {
+        path: 'mining/pool/:poolId/:interval',
+        component: PoolComponent,
+      },
       {
         path: 'graphs',
         component: StatisticsComponent,
@@ -163,6 +167,10 @@ let routes: Routes = [
             path: 'mining/pool/:poolId',
             component: PoolComponent,
           },
+          {
+            path: 'mining/pool/:poolId/:interval',
+            component: PoolComponent,
+          },
           {
             path: 'graphs',
             component: StatisticsComponent,
@@ -249,6 +257,10 @@ let routes: Routes = [
             path: 'mining/pool/:poolId',
             component: PoolComponent,
           },
+          {
+            path: 'mining/pool/:poolId/:interval',
+            component: PoolComponent,
+          },
           {
             path: 'graphs',
             component: StatisticsComponent,

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

@@ -1,5 +1,66 @@
 <div class="container-xl">
 
-  Pool
+  <div *ngIf="poolStats$ | async as poolStats">
+    <h1>
+      {{ poolStats.pool.name }}
+    </h1>
+
+    <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Address</td>
+                <td>{{ poolStats.pool.addresses }}</td>
+              </tr>
+              <tr>
+                <td>Coinbase Tag</td>
+                <td>{{ poolStats.pool.regexes }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Mined Blocks</td>
+                <td>{{ poolStats.blockCount }}</td>
+              </tr>
+              <tr>
+                <td>Empty Blocks</td>
+                <td>{{ poolStats.emptyBlocks.length }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
+    <thead>
+      <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
+      <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
+      <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
+      <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
+      <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let block of blocks">
+        <td><a [routerLink]="['/block' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+        <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
+        <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
+        <td>
+          <div class="progress">
+            <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
+            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
 </div>

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

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, switchMap, tap } from 'rxjs/operators';
+import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
+import { ApiService } from 'src/app/services/api.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-pool',
@@ -6,9 +12,55 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./pool.component.scss']
 })
 export class PoolComponent implements OnInit {
+  poolStats$: Observable<PoolStat>;
+  isLoading = false;
+
+  poolId: number;
+  interval: string;
+
+  blocks: any[] = [];
+
   constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute,
+    public stateService: StateService,
   ) { }
 
   ngOnInit(): void {
+    this.poolStats$ = this.route.params
+      .pipe(
+        switchMap((params) => {
+          this.poolId = params.poolId;
+          this.interval = params.interval;
+          this.loadMore(2);
+          return this.apiService.getPoolStats$(params.poolId, params.interval ?? 'all');
+        }),
+      );
+  }
+
+  loadMore(chunks = 0) {
+    let fromHeight: number | undefined;
+    if (this.blocks.length > 0) {
+      fromHeight = this.blocks[this.blocks.length - 1].height - 1;
+    }
+
+    this.apiService.getPoolBlocks$(this.poolId, fromHeight)
+      .subscribe((blocks) => {
+        this.blocks = this.blocks.concat(blocks);
+
+        const chunksLeft = chunks - 1;
+        if (chunksLeft > 0) {
+          this.loadMore(chunksLeft);
+        }
+        // this.cd.markForCheck();
+      },
+      (error) => {
+        console.log(error);
+        // this.cd.markForCheck();
+      });
+  }
+
+  trackByBlock(index: number, block: BlockExtended) {
+    return block.height;
   }
 }

frontend/src/app/interfaces/node-api.interface.ts

@@ -54,6 +54,9 @@ export interface LiquidPegs {
 
 export interface ITranslators { [language: string]: string; }
 
+/**
+ * PoolRanking component
+ */
 export interface SinglePoolStats {
   poolId: number;
   name: string;
@@ -66,20 +69,35 @@ export interface SinglePoolStats {
   emptyBlockRatio: string;
   logo: string;
 }
-
 export interface PoolsStats {
   blockCount: number;
   lastEstimatedHashrate: number;
   oldestIndexedBlockTimestamp: number;
   pools: SinglePoolStats[];
 }
-
 export interface MiningStats {
-  lastEstimatedHashrate: string,
+  lastEstimatedHashrate: string;
-  blockCount: number,
+  blockCount: number;
-  totalEmptyBlock: number,
+  totalEmptyBlock: number;
-  totalEmptyBlockRatio: string,
+  totalEmptyBlockRatio: string;
-  pools: SinglePoolStats[],
+  pools: SinglePoolStats[];
+}
+
+/**
+ * Pool component
+ */
+export interface PoolInfo {
+  id: number | null; // mysql row id
+  name: string;
+  link: string;
+  regexes: string; // JSON array
+  addresses: string; // JSON array
+  emptyBlocks: number;
+}
+export interface PoolStat {
+  pool: PoolInfo;
+  blockCount: number;
+  emptyBlocks: BlockExtended[];
 }
 
 export interface BlockExtension {

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs, ITranslators, PoolsStats } from '../interfaces/node-api.interface';
+import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs, ITranslators, PoolsStats, PoolStat, BlockExtended, BlockExtension } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
 import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
@@ -132,4 +132,12 @@ export class ApiService {
   listPools$(interval: string | null) : Observable<PoolsStats> {
     return this.httpClient.get<PoolsStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools/${interval}`);
   }
+
+  getPoolStats$(poolId: number, interval: string | null): Observable<PoolStat> {
+    return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}/${interval}`);
+  }
+
+  getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
+    return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
+  }
 }