Create working template for the new blocks page

backend/src/api/blocks.ts

@@ -339,7 +339,7 @@ class Blocks {
     return blockExtended;
   }
 
-  public async $getBlocksExtras(fromHeight: number): Promise<BlockExtended[]> {
+  public async $getBlocksExtras(fromHeight: number, limit: number = 15): Promise<BlockExtended[]> {
     try {
       loadingIndicators.setProgress('blocks', 0);
 
@@ -360,7 +360,7 @@ class Blocks {
       }
 
       let nextHash = startFromHash;
-      for (let i = 0; i < 10 && currentHeight >= 0; i++) {
+      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));

backend/src/routes.ts

@@ -658,7 +658,7 @@ class Routes {
 
   public async getBlocksExtras(req: Request, res: Response) {
     try {
-      res.json(await blocks.$getBlocksExtras(parseInt(req.params.height, 10)))
+      res.json(await blocks.$getBlocksExtras(parseInt(req.params.height, 10), 15));
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
     }

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

@@ -31,6 +31,7 @@ import { MiningDashboardComponent } from './components/mining-dashboard/mining-d
 import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
 import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
+import { BlocksList } from './components/blocks-list/blocks-list.component';
 
 let routes: Routes = [
   {
@@ -75,6 +76,10 @@ let routes: Routes = [
         path: 'mining',
         component: MiningStartComponent,
         children: [
+          {
+            path: 'blocks',
+            component: BlocksList,
+          },
           {
             path: 'hashrate',
             component: HashrateChartComponent,
@@ -190,6 +195,10 @@ let routes: Routes = [
             path: 'mining',
             component: MiningStartComponent,
             children: [
+              {
+                path: 'blocks',
+                component: BlocksList,
+              },
               {
                 path: 'hashrate',
                 component: HashrateChartComponent,
@@ -299,6 +308,10 @@ let routes: Routes = [
             path: 'mining',
             component: MiningStartComponent,
             children: [
+              {
+                path: 'blocks',
+                component: BlocksList,
+              },
               {
                 path: 'hashrate',
                 component: HashrateChartComponent,
@@ -630,7 +643,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     initialNavigation: 'enabled',
     scrollPositionRestoration: 'enabled',
     anchorScrolling: 'enabled'
-})],
+  })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

frontend/src/app/app.module.ts

@@ -76,6 +76,7 @@ import { MiningStartComponent } from './components/mining-start/mining-start.com
 import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
+import { BlocksList } from './components/blocks-list/blocks-list.component';
 
 @NgModule({
   declarations: [
@@ -133,6 +134,7 @@ import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-
     MiningStartComponent,
     AmountShortenerPipe,
     DifficultyAdjustmentsTable,
+    BlocksList,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

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

@@ -0,0 +1,100 @@
+<div class="container-xl">
+  <h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
+  <br>
+
+  <div class="clearfix"></div>
+
+  <table class="table table-borderless">
+    <thead>
+      <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="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">
+      <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="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>
+            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+          </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">
+      <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12]">
+        <td>
+          <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>
+          <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>
+  </table>
+
+  <!-- <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true"
+    [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)"
+    [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> -->
+
+</div>

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

@@ -0,0 +1,74 @@
+.container-xl {
+  max-width: 1400px;
+}
+
+.container {
+  max-width: 100%;
+}
+
+.row {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.pool-name {
+  display: inline-block;
+  vertical-align: text-top;
+  padding-left: 10px;
+}
+
+.height {
+  width: 12%;
+  @media (max-width: 1100px) {
+    width: 10%;
+  }
+}
+
+.timestamp {
+  @media (max-width: 900px) {
+    display: none;
+  }
+}
+
+.mined {
+  @media (max-width: 576px) {
+    display: none;
+  }
+}
+
+.txs {
+  padding-right: 40px;
+  @media (max-width: 1100px) {
+    padding-right: 10px;
+  }
+  @media (max-width: 800px) {
+    display: none;
+  }
+}
+
+.fees {
+  @media (max-width: 650px) {
+    display: none;
+  }
+}
+
+.pool {
+  width: 12%;
+}
+
+.reward {
+  @media (max-width: 576px) {
+    width: 7%;
+    padding-right: 30px;
+  }
+}
+
+.size {
+  width: 12%;
+  @media (max-width: 1000px) {
+    width: 15%;
+  }
+  @media (max-width: 650px) {
+    width: 20%;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, repeat, 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';
+
+@Component({
+  selector: 'app-blocks-list',
+  templateUrl: './blocks-list.component.html',
+  styleUrls: ['./blocks-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlocksList implements OnInit {
+  blocks$: Observable<BlockExtended[]> = undefined
+  isLoading = true;
+  oldestBlockHeight = undefined;
+
+  constructor(
+    private apiService: ApiService,
+    public stateService: StateService
+  ) {
+
+  }
+
+  ngOnInit(): void {
+    this.blocks$ = this.apiService.getBlocks$(this.oldestBlockHeight)
+      .pipe(
+        tap(blocks => {
+          this.isLoading = false;
+        }),
+        map(blocks => {
+          for (const block of blocks) {
+            // @ts-ignore
+            block.extras.pool.logo = `./resources/mining-pools/` +
+              block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+            this.oldestBlockHeight = block.height;
+          }
+          return blocks;
+        }),
+        repeat(2),
+      );
+  }
+
+  trackByBlock(index: number, block: BlockExtended) {
+    return block.height;
+  }
+}

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

@@ -151,6 +151,13 @@ export class ApiService {
       );
   }
 
+  getBlocks$(from: number): Observable<BlockExtended[]> {
+    return this.httpClient.get<BlockExtended[]>(
+      this.apiBasePath + this.apiBasePath + `/api/v1/blocks-extras` +
+      (from !== undefined ? `/${from}` : ``)
+    );
+  }
+
   getHistoricalDifficulty$(interval: string | undefined): Observable<any> {
     return this.httpClient.get<any[]>(
         this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/difficulty` +