Add pagination on /mining/blocks

backend/src/api/blocks.ts

@@ -108,14 +108,23 @@ class Blocks {
     blockExtended.extras.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
     blockExtended.extras.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
 
-    const stats = await bitcoinClient.getBlockStats(block.id);
     const coinbaseRaw: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(transactions[0].txid, true);
     blockExtended.extras.coinbaseRaw = coinbaseRaw.hex;
+
+    if (block.height === 0) {
+       blockExtended.extras.medianFee = 0; // 50th percentiles
+       blockExtended.extras.feeRange = [0, 0, 0, 0, 0, 0, 0];
+       blockExtended.extras.totalFees = 0;
+       blockExtended.extras.avgFee = 0;
+       blockExtended.extras.avgFeeRate = 0;
+     } else {
+      const stats = await bitcoinClient.getBlockStats(block.id);
       blockExtended.extras.medianFee = stats.feerate_percentiles[2]; // 50th percentiles
        blockExtended.extras.feeRange = [stats.minfeerate, stats.feerate_percentiles, stats.maxfeerate].flat();
        blockExtended.extras.totalFees = stats.totalfee;
        blockExtended.extras.avgFee = stats.avgfee;
        blockExtended.extras.avgFeeRate = stats.avgfeerate;
+     }
 
     if (Common.indexingEnabled()) {
       let pool: PoolTag;
@@ -336,10 +345,13 @@ class Blocks {
 
     await blocksRepository.$saveBlockInDatabase(blockExtended);
 
-    return blockExtended;
+    return this.prepareBlock(blockExtended);
   }
 
   public async $getBlocksExtras(fromHeight: number, limit: number = 15): 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
     try {
       loadingIndicators.setProgress('blocks', 0);
 
@@ -363,7 +375,7 @@ class Blocks {
       for (let i = 0; i < limit && currentHeight >= 0; i++) {
         let block = this.getBlocks().find((b) => b.height === currentHeight);
         if (!block && Common.indexingEnabled()) {
-          block = this.prepareBlock(await this.$indexBlock(currentHeight));
+          block = await this.$indexBlock(currentHeight);
         } else if (!block) {
           block = this.prepareBlock(await bitcoinApi.$getBlock(nextHash));
         }
@@ -383,24 +395,25 @@ 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
+      timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
-      height: block?.height,
+      height: block.height,
-      version: block?.version,
+      version: block.version,
-      bits: block?.bits,
+      bits: block.bits,
-      nonce: block?.nonce,
+      nonce: block.nonce,
-      difficulty: block?.difficulty,
+      difficulty: block.difficulty,
-      merkle_root: block?.merkle_root,
+      merkle_root: block.merkle_root,
-      tx_count: block?.tx_count,
+      tx_count: block.tx_count,
-      size: block?.size,
+      size: block.size,
-      weight: block?.weight,
+      weight: block.weight,
-      previousblockhash: block?.previousblockhash,
+      previousblockhash: block.previousblockhash,
       extras: {
-        medianFee: block?.medianFee,
+        medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
-        feeRange: block?.feeRange ?? [], // TODO
+        feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
-        reward: block?.reward,
+        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,
+          id: block.pool_id,
-          name: block?.pool_name,
+          name: block.pool_name,
         } : undefined),
       }
     };

backend/src/repositories/BlocksRepository.ts

@@ -277,7 +277,10 @@ class BlocksRepository {
     const connection = await DB.pool.getConnection();
     try {
       const [rows]: any[] = await connection.query(`
-        SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp, pools.id as pool_id, pools.name as pool_name, pools.link as pool_link, pools.addresses as pool_addresses, pools.regexes as pool_regexes
+        SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp,
+        pools.id as pool_id, pools.name as pool_name, pools.link as pool_link,
+        pools.addresses as pool_addresses, pools.regexes as pool_regexes,
+        previous_block_hash as previousblockhash
         FROM blocks
         JOIN pools ON blocks.pool_id = pools.id
         WHERE height = ${height};

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

@@ -7,32 +7,32 @@
   <table class="table table-borderless">
     <thead>
       <th class="height" i18n="latest-blocks.height">Height</th>
+      <th class="pool" i18n="latest-blocks.mined-by">Pool</th>
       <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
       <th class="mined" i18n="latest-blocks.mined">Mined</th>
-      <th class="pool" i18n="latest-blocks.mined-by">Pool</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 *ngIf="blocks$ | async as blocks">
+    <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>
           <a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ 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>
           <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
             onError="this.src = './resources/mining-pools/default.svg'">
           <span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
               block.extras.pool.name }}</a></span>
         </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="reward text-right">
           <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
         </td>
@@ -50,21 +50,10 @@
           </div>
         </td>
       </tr>
-      <ng-template [ngIf]="isLoading">
-        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-        </tr>
-      </ng-template>
     </tbody>
-    <tbody *ngIf="isLoading">
+    <ng-template #skeleton>
-      <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12]">
+      <tbody>
+        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
           <td>
             <span class="skeleton-loader"></span>
           </td>
@@ -91,10 +80,11 @@
           </td>
         </tr>
       </tbody>
+    </ng-template>
   </table>
 
-  <!-- <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true"
+  <ngb-pagination class="pagination-container float-right mt-3" [class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5"
-    [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)"
+    [pageSize]="15" [(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
-    [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> -->
+  </ngb-pagination>
 
 </div>

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

@@ -1,5 +1,6 @@
 .container-xl {
   max-width: 1400px;
+  padding-bottom: 0;
 }
 
 .container {
@@ -11,6 +12,15 @@
   padding-bottom: 15px;
 }
 
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
 .pool-name {
   display: inline-block;
   vertical-align: text-top;
@@ -18,7 +28,7 @@
 }
 
 .height {
-  width: 12%;
+  width: 10%;
   @media (max-width: 1100px) {
     width: 10%;
   }
@@ -31,6 +41,7 @@
 }
 
 .mined {
+  width: 13%;
   @media (max-width: 576px) {
     display: none;
   }
@@ -53,7 +64,7 @@
 }
 
 .pool {
-  width: 12%;
+  width: 17%;
 }
 
 .reward {

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable, timer } from 'rxjs';
-import { map, repeat, tap } from 'rxjs/operators';
+import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended } from 'src/app/interfaces/node-api.interface';
 import { ApiService } from 'src/app/services/api.service';
 import { StateService } from 'src/app/services/state.service';
@@ -13,35 +13,54 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class BlocksList implements OnInit {
   blocks$: Observable<BlockExtended[]> = undefined
+
   isLoading = true;
-  oldestBlockHeight = undefined;
+  fromBlockHeight = undefined;
+  paginationMaxSize: number;
+  page = 1;
+  blocksCount: number;
+  fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
 
   constructor(
     private apiService: ApiService,
-    public stateService: StateService
+    public stateService: StateService,
   ) {
 
   }
 
   ngOnInit(): void {
-    this.blocks$ = this.apiService.getBlocks$(this.oldestBlockHeight)
+    this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
+
+    this.blocks$ = this.fromHeightSubject.pipe(
+      switchMap(() => {
+        this.isLoading = true;
+        return this.apiService.getBlocks$(this.fromBlockHeight)
           .pipe(
             tap(blocks => {
+              if (this.blocksCount === undefined) {
+                this.blocksCount = blocks[0].height;
+              }
               this.isLoading = false;
             }),
             map(blocks => {
               for (const block of blocks) {
-            // @ts-ignore
+                // @ts-ignore: Need to add an extra field for the template
                 block.extras.pool.logo = `./resources/mining-pools/` +
                   block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
-            this.oldestBlockHeight = block.height;
               }
               return blocks;
             }),
-        repeat(2),
+            retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
+          )
+      })
     );
   }
 
+  pageChange(page: number) {
+    this.fromBlockHeight = this.blocksCount - (page - 1) * 15;
+    this.fromHeightSubject.next(this.fromBlockHeight);
+  }
+
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }