Refresh reward stats when a new block is mined

frontend/src/app/components/reward-stats/reward-stats.component.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, skip, switchMap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-reward-stats',
@@ -12,17 +13,24 @@ import { ApiService } from 'src/app/services/api.service';
 export class RewardStatsComponent implements OnInit {
   public $rewardStats: Observable<any>;
 
-  constructor(private apiService: ApiService) { }
+  constructor(private apiService: ApiService, private stateService: StateService) { }
 
   ngOnInit(): void {
-    this.$rewardStats = this.apiService.getRewardStats$()
+    this.$rewardStats = this.stateService.blocks$
       .pipe(
-        map((res) => {
-          return {
-            totalReward: res.totalReward,
-            rewardPerTx: res.totalReward / res.totalTx,
-            feePerTx: res.totalFee / res.totalTx,
-          };
+        // (we always receives some blocks at start so only trigger for the last one)
+        skip(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT - 1),
+        switchMap(() => {
+          return this.apiService.getRewardStats$()
+            .pipe(
+              map((stats) => {
+                return {
+                  totalReward: stats.totalReward,
+                  rewardPerTx: stats.totalReward / stats.totalTx,
+                  feePerTx: stats.totalFee / stats.totalTx,
+                };
+              })
+            );
         })
       );
   }