Fix duplicated blocks in pool details page

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

@@ -3,8 +3,8 @@
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
     <div style="display:flex">
       <img width="50" height="50" src="{{ poolStats['logo'] }}"
-        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
+        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3 mb-3">
-      <h1 class="m-0 mb-2">{{ poolStats.pool.name }}</h1>
+      <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 
     <div class="box">
@@ -59,15 +59,15 @@
     <div class="spinner-border text-light"></div>
   </div>
 
-  <table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll
     [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
     (scrolled)="loadMore()">
     <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="coinbase text-left" i18n="latest-blocks.coinbase">
+      <th class="coinbase text-left" i18n="latest-blocks.scriptsig">
-        Coinbase</th>
+        ScriptSig</th>
       <th class="reward text-right" i18n="latest-blocks.reward">
         Reward</th>
       <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit }
 import { ActivatedRoute } from '@angular/router';
 import { EChartsOption, graphic } from 'echarts';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { distinctUntilChanged, map, switchMap, tap, toArray } from 'rxjs/operators';
+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';
@@ -40,8 +40,7 @@ export class PoolComponent implements OnInit {
     height: 'auto',
   };
 
-  fromHeight: number = -1;
+  loadMoreSubject: BehaviorSubject<undefined> = new BehaviorSubject(undefined);
-  fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromHeight);
 
   blocks: BlockExtended[] = [];
   poolId: number = undefined;
@@ -67,12 +66,9 @@ export class PoolComponent implements OnInit {
                 this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
                 return poolId;
               }),
-            )
+            );
         }),
         switchMap(() => {
-          if (this.blocks.length === 0) {
-            this.fromHeightSubject.next(undefined);
-          }
           return this.apiService.getPoolStats$(this.poolId);
         }),
         map((poolStats) => {
@@ -89,17 +85,16 @@ export class PoolComponent implements OnInit {
         })
       );
 
-    this.blocks$ = this.fromHeightSubject
+    this.blocks$ = this.loadMoreSubject
       .pipe(
-        distinctUntilChanged(),
+        switchMap((flag) => {
-        switchMap((fromHeight) => {
+          return this.apiService.getPoolBlocks$(this.poolId, this.blocks[this.blocks.length - 1]?.height);
-          return this.apiService.getPoolBlocks$(this.poolId, fromHeight);
         }),
         tap((newBlocks) => {
           this.blocks = this.blocks.concat(newBlocks);
         }),
         map(() => this.blocks)
-      )
+      );
   }
 
   prepareChartOptions(data) {
@@ -134,18 +129,18 @@ export class PoolComponent implements OnInit {
           align: 'left',
         },
         borderColor: '#000',
-        formatter: function(data) {
+        formatter: function(ticks: any[]) {
           let hashratePowerOfTen: any = selectPowerOfTen(1);
-          let hashrate = data[0].data[1];
+          let hashrate = ticks[0].data[1];
 
           if (this.isMobile()) {
-            hashratePowerOfTen = selectPowerOfTen(data[0].data[1]);
+            hashratePowerOfTen = selectPowerOfTen(ticks[0].data[1]);
-            hashrate = Math.round(data[0].data[1] / hashratePowerOfTen.divider);
+            hashrate = Math.round(ticks[0].data[1] / hashratePowerOfTen.divider);
           }
 
           return `
-            <b style="color: white; margin-left: 18px">${data[0].axisValueLabel}</b><br>
+            <b style="color: white; margin-left: 18px">${ticks[0].axisValueLabel}</b><br>
-            <span>${data[0].marker} ${data[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s</span><br>
+            <span>${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s</span><br>
           `;
         }.bind(this)
       },
@@ -192,7 +187,7 @@ export class PoolComponent implements OnInit {
   }
 
   loadMore() {
-    this.fromHeightSubject.next(this.blocks[this.blocks.length - 1]?.height);
+    this.loadMoreSubject.next(undefined);
   }
 
   trackByBlock(index: number, block: BlockExtended) {