Updated blocks list in /pool/{id} page

2022-03-16 17:00:06 +01:00 · 2022-03-16 17:00:06 +01:00 · 56bf267664
commit 56bf267664
parent 226b345c0a
6 changed files with 202 additions and 79 deletions
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@ -12,6 +12,7 @@ import poolsRepository from '../repositories/PoolsRepository';
 import blocksRepository from '../repositories/BlocksRepository';
 import loadingIndicators from './loading-indicators';
 import BitcoinApi from './bitcoin/bitcoin-api';
+import { prepareBlock } from '../utils/blocks-utils';

 class Blocks {
  private blocks: BlockExtended[] = [];
@ -336,7 +337,7 @@ class Blocks {
  public async $indexBlock(height: number): Promise<BlockExtended> {
    const dbBlock = await blocksRepository.$getBlockByHeight(height);
    if (dbBlock != null) {
-      return this.prepareBlock(dbBlock);
+      return prepareBlock(dbBlock);
    }

    const blockHash = await bitcoinApi.$getBlockHash(height);
@ -346,10 +347,11 @@ class Blocks {

    await blocksRepository.$saveBlockInDatabase(blockExtended);

-    return this.prepareBlock(blockExtended);
+    return prepareBlock(blockExtended);
  }

-  public async $getBlocksExtras(fromHeight: number, limit: number = 15): Promise<BlockExtended[]> {
+  public async $getBlocksExtras(fromHeight: number, limit: number = 15,
+    poolId: number | undefined= undefined): Promise<BlockExtended[]> {
    // Note - This API is breaking if indexing is not available. For now it is okay because we only
    // use it for the mining pages, and mining pages should not be available if indexing is turned off.
    // I'll need to fix it before we refactor the block(s) related pages
@ -378,7 +380,7 @@ class Blocks {
        if (!block && Common.indexingEnabled()) {
          block = await this.$indexBlock(currentHeight);
        } else if (!block) {
-          block = this.prepareBlock(await bitcoinApi.$getBlock(nextHash));
+          block = prepareBlock(await bitcoinApi.$getBlock(nextHash));
        }
        returnBlocks.push(block);
        nextHash = block.previousblockhash;
@ -393,34 +395,6 @@ class Blocks {
    }
  }

-  private prepareBlock(block: any): BlockExtended {
-    return <BlockExtended>{
-      id: block.id ?? block.hash, // hash for indexed block
-      timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
-      height: block.height,
-      version: block.version,
-      bits: block.bits,
-      nonce: block.nonce,
-      difficulty: block.difficulty,
-      merkle_root: block.merkle_root,
-      tx_count: block.tx_count,
-      size: block.size,
-      weight: block.weight,
-      previousblockhash: block.previousblockhash,
-      extras: {
-        coinbaseRaw: block.coinbase_raw ?? block.extras.coinbaseRaw,
-        medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
-        feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
-        reward: block.reward ?? block?.extras?.reward,
-        totalFees: block.totalFees ?? block?.fees ?? block?.extras.totalFees,
-        pool: block?.extras?.pool ?? (block?.pool_id ? {
-          id: block.pool_id,
-          name: block.pool_name,
-        } : undefined),
-      }
-    };
-  }
-
  public getLastDifficultyAdjustmentTime(): number {
    return this.lastDifficultyAdjustmentTime;
  }
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@ -2,6 +2,7 @@ import { BlockExtended, PoolTag } from '../mempool.interfaces';
 import { DB } from '../database';
 import logger from '../logger';
 import { Common } from '../api/common';
+import { prepareBlock } from '../utils/blocks-utils';

 class BlocksRepository {
  /**
@ -153,7 +154,6 @@ class BlocksRepository {
      query += ` blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
    }

-    // logger.debug(query);
    const connection = await DB.getConnection();
    try {
      const [rows] = await connection.query(query, params);
@ -169,10 +169,10 @@ class BlocksRepository {

  /**
   * Get blocks count between two dates
-   * @param poolId 
+   * @param poolId
   * @param from - The oldest timestamp
   * @param to - The newest timestamp
-   * @returns 
+   * @returns
   */
  public async $blockCountBetweenTimestamp(poolId: number | null, from: number, to: number): Promise<number> {
    const params: any[] = [];
@ -193,7 +193,6 @@ class BlocksRepository {
    }
    query += ` blockTimestamp BETWEEN FROM_UNIXTIME('${from}') AND FROM_UNIXTIME('${to}')`;

-    // logger.debug(query);
    const connection = await DB.getConnection();
    try {
      const [rows] = await connection.query(query, params);
@ -216,7 +215,6 @@ class BlocksRepository {
      ORDER BY height
      LIMIT 1;`;

-    // logger.debug(query);
    const connection = await DB.getConnection();
    try {
      const [rows]: any[] = await connection.query(query);
@ -239,7 +237,8 @@ class BlocksRepository {
   */
  public async $getBlocksByPool(poolId: number, startHeight: number | null = null): Promise<object[]> {
    const params: any[] = [];
-    let query = `SELECT height, hash as id, tx_count, size, weight, pool_id, UNIX_TIMESTAMP(blockTimestamp) as timestamp, reward
+    let query = ` SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp,
+      previous_block_hash as previousblockhash
      FROM blocks
      WHERE pool_id = ?`;
    params.push(poolId);
@ -252,17 +251,17 @@ class BlocksRepository {
    query += ` ORDER BY height DESC
      LIMIT 10`;

-    // logger.debug(query);
    const connection = await DB.getConnection();
    try {
      const [rows] = await connection.query(query, params);
      connection.release();

-      for (const block of <object[]>rows) {
-        delete block['blockTimestamp'];
+      const blocks: BlockExtended[] = [];
+      for (let block of <object[]>rows) {
+        blocks.push(prepareBlock(block));
      }

-      return <object[]>rows;
+      return blocks;
    } catch (e) {
      connection.release();
      logger.err('$getBlocksByPool() error' + (e instanceof Error ? e.message : e));
@ -314,7 +313,7 @@ class BlocksRepository {
    let query = `
      SELECT
      *
-      FROM 
+      FROM
      (
        SELECT
        UNIX_TIMESTAMP(blockTimestamp) as timestamp, difficulty, height,
@ -322,7 +321,7 @@ class BlocksRepository {
          IF(@prevStatus := YT.difficulty, @rn := 1, @rn := 1)
        ) AS rn
        FROM blocks YT
-        CROSS JOIN 
+        CROSS JOIN
        (
          SELECT @prevStatus := -1, @rn := 1
        ) AS var
--- a/backend/src/utils/blocks-utils.ts
+++ b/backend/src/utils/blocks-utils.ts
@ -0,0 +1,29 @@
+import { BlockExtended } from "../mempool.interfaces";
+
+export function prepareBlock(block: any): BlockExtended {
+  return <BlockExtended>{
+    id: block.id ?? block.hash, // hash for indexed block
+    timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
+    height: block.height,
+    version: block.version,
+    bits: block.bits,
+    nonce: block.nonce,
+    difficulty: block.difficulty,
+    merkle_root: block.merkle_root,
+    tx_count: block.tx_count,
+    size: block.size,
+    weight: block.weight,
+    previousblockhash: block.previousblockhash,
+    extras: {
+      coinbaseRaw: block.coinbase_raw ?? block.extras.coinbaseRaw,
+      medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
+      feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
+      reward: block.reward ?? block?.extras?.reward,
+      totalFees: block.totalFees ?? block?.fees ?? block?.extras.totalFees,
+      pool: block?.extras?.pool ?? (block?.pool_id ? {
+        id: block.pool_id,
+        name: block.pool_name,
+      } : undefined),
+    }
+  };
+}
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@ -1,11 +1,11 @@
-<div class="container">
+<div class="container-xl">

  <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
-    <h1 class="m-0 mb-2">
+    <div style="display:flex">
      <img width="50" height="50" src="{{ poolStats['logo'] }}"
        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
-      {{ poolStats.pool.name }}
-    </h1>
+      <h1 class="m-0 mb-2">{{ poolStats.pool.name }}</h1>
+    </div>

    <div class="box">
      <div class="row">
@ -63,27 +63,44 @@
    [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="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th>
-      <th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px"
-        i18n="latest-blocks.transactions">
-        Transactions</th>
-      <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
+      <th class="height" i18n="latest-blocks.height">Height</th>
+      <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
+      <th class="mined" i18n="latest-blocks.mined">Mined</th>
+      <th class="coinbase text-left" i18n="latest-blocks.coinbase">
+        Coinbase</th>
+      <th class="reward text-right" i18n="latest-blocks.reward">
+        Reward</th>
+      <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
+      <th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
+      <th class="size" i18n="latest-blocks.size">Size</th>
    </thead>
-    <tbody>
-      <tr *ngFor="let block of blocks">
-        <td><a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a></td>
-        <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
-        <td>
+    <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
+        <td class="height">
+          <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
+            }}</a>
+        </td>
+        <td class="timestamp">
+          &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+        </td>
+        <td class="mined">
          <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
        </td>
-        <td class="text-right" style="padding-right: 30px">
-          <app-amount [satoshis]="block['reward']" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+        <td class="coinbase">
+          <span class="badge badge-secondary scriptmessage longer">
+            {{ block.extras.coinbaseRaw | hex2ascii }}
+          </span>
        </td>
-        <td class="d-none d-lg-block text-right" style="padding-right: 40px">{{ block.tx_count | number }}</td>
-        <td>
+        <td class="reward text-right">
+          <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
+        </td>
+        <td class="fees text-right">
+          <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
+        </td>
+        <td class="txs text-right">
+          {{ block.tx_count | number }}
+        </td>
+        <td class="size">
          <div class="progress">
            <div class="progress-bar progress-mempool" role="progressbar"
              [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
@ -92,6 +109,37 @@
        </td>
      </tr>
    </tbody>
+    <ng-template #skeleton>
+      <tbody>
+        <tr *ngFor="let item of skeletonLines">
+          <td class="height">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="pool text-left">
+            <img width="0" height="25" style="opacity: 0">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="timestamp">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="mined">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="reward text-right">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="fees text-right">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="txs text-right">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="size">
+            <span class="skeleton-loader"></span>
+          </td>
+        </tr>
+      </tbody>
+    </ng-template>
  </table>

 </div>
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@ -1,5 +1,6 @@
-.progress {
-  background-color: #2d3348;
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
 }

@media (min-width: 768px) {
@ -44,13 +45,8 @@ div.scrollable {
  max-width: 90px;
 }

-.table {
-  margin: 0px auto;
-  max-width: 900px;
-}
-
 .box {
-  padding-bottom: 0px;
+  padding-bottom: 5px;
 }

 .label {
@ -59,8 +55,85 @@ div.scrollable {
 }

 .data {
-  text-align: center;
-  @media (max-width: 767.98px) {
+  text-align: left;
+  padding-left: 25%;
+  @media (max-width: 991px) {
+    padding-left: 12px;
+  }
+  @media (max-width: 450px) {
    text-align: right;
  }
-}
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.coinbase {
+  width: 20%;
+  @media (max-width: 875px) {
+    display: none;
+  }
+}
+
+.height {
+  width: 10%;
+}
+
+.timestamp {
+  @media (max-width: 875px) {
+    padding-left: 50px;
+  }
+  @media (max-width: 650px) {
+    display: none;
+  }
+}
+
+.mined {
+  width: 13%;
+  @media (max-width: 1100px) {
+    display: none;
+  }
+}
+
+.txs {
+  padding-right: 40px;
+  @media (max-width: 1100px) {
+    padding-right: 10px;
+  }
+  @media (max-width: 875px) {
+    padding-right: 50px;
+  }
+  @media (max-width: 567px) {
+    padding-right: 10px;
+  }
+}
+
+.fees {
+  width: 0%;  
+}
+
+.size {
+  width: 12%;
+  @media (max-width: 1000px) {
+    width: 15%;
+  }
+  @media (max-width: 875px) {
+    width: 20%;
+  }
+  @media (max-width: 650px) {
+    width: 20%;
+  }
+  @media (max-width: 450px) {
+    display: none;
+  }
+}
+
+.scriptmessage {
+	overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	width: auto;
+  text-align: left;
+}
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@ -31,6 +31,7 @@ export class PoolComponent implements OnInit {
  poolStats$: Observable<PoolStat>;
  blocks$: Observable<BlockExtended[]>;
  isLoading = true;
+  skeletonLines: number[] = [...Array(5).keys()];

  chartOptions: EChartsOption = {};
  chartInitOptions = {
@ -133,7 +134,7 @@ export class PoolComponent implements OnInit {
          align: 'left',
        },
        borderColor: '#000',
-        formatter: function (data) {
+        formatter: function(data) {
          let hashratePowerOfTen: any = selectPowerOfTen(1);
          let hashrate = data[0].data[1];

@ -154,11 +155,10 @@ export class PoolComponent implements OnInit {
      },
      yAxis: [
        {
-          min: function (value) {
+          min: (value) => {
            return value.min * 0.9;
          },
          type: 'value',
-          name: 'Hashrate',
          axisLabel: {
            color: 'rgb(110, 112, 121)',
            formatter: (val) => {