Implement temporary reward stats for the mining dashboard

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

@@ -47,7 +47,7 @@
           </div>
         </div>
         <div class="item" *ngIf="showHalving">
-          <h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5>
+          <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
           <div class="card-text">
             <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
             <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -3,8 +3,35 @@
   <div class="row row-cols-1 row-cols-md-2">
 
     <div class="col">
-      <div class="main-title">Placeholder</div>
+      <div class="main-title">Reward stats</div>
       <div class="card" style="height: 123px">
+        <div class="card-body more-padding">
+          <div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
+            <div class="item">
+              <h5 class="card-title" i18n="">Miners Reward</h5>
+              <div class="card-text">
+                <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="">Reward Per Tx</h5>
+              <div class="card-text">
+                {{ rewardStats.rewardPerTx }}
+                <span class="symbol">sats/tx</span>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="">Average Fee</h5>
+              <div class="card-text">
+                {{ rewardStats.feePerTx }}
+                <span class="symbol">sats/tx</span>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -21,7 +48,8 @@
       <div class="card" style="height: 385px">
         <div class="card-body">
           <app-pool-ranking [widget]=true></app-pool-ranking>
-          <div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -34,7 +62,8 @@
             Hashrate (1y)
           </h5>
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
-          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -47,7 +76,8 @@
             Mining Pools Dominance (1y)
           </h5>
           <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
-          <div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
+              more &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -59,7 +89,8 @@
             Adjusments
           </h5>
           <app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
-          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
         </div>
       </div>
     </div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -55,3 +55,91 @@
   text-align: center;
   padding-bottom: 3px;
 }
+
+.general-stats {
+  min-height: 56px;
+  display: block;
+  @media (min-width: 485px) {
+    display: flex;
+    flex-direction: row;
+  }
+  h5 {
+    margin-bottom: 10px;
+  }
+  .item {
+    width: 50%;
+    margin: 0px auto 10px;
+    display: inline-block;
+    @media (min-width: 485px) {
+      margin: 0px auto 10px;
+    }
+    @media (min-width: 785px) {
+      margin: 0px auto 0px;
+    }
+    &:last-child {
+      margin: 0px auto 0px;
+    }
+    &:nth-child(2) {
+      order: 2;
+      @media (min-width: 485px) {
+        order: 3;
+      }
+    }
+    &:nth-child(3) {
+      order: 3;
+      @media (min-width: 485px) {
+        order: 2;
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    .card-title {
+      font-size: 1rem;
+      color: #4a68b9;
+    }
+    .card-text {
+      font-size: 18px;
+      span {
+        color: #ffffff66;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.difficulty-adjustment-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: #ffffff66;
+    font-size: 12px;
+  }
+  .item {
+    padding: 0 5px;
+    width: 100%;
+    &:nth-child(1) {
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}

frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts

@@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { formatNumber } from '@angular/common';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-mining-dashboard',
@@ -8,12 +13,36 @@ import { SeoService } from 'src/app/services/seo.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit {
+  private blocks = [];
 
-  constructor(private seoService: SeoService) {
+  public $rewardStats: Observable<any>;
+  public totalReward = 0;
+  public rewardPerTx = '~';
+  public feePerTx = '~';
+
+  constructor(private seoService: SeoService,
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
     this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
   }
 
   ngOnInit(): void {
-  }
+    this.$rewardStats = this.stateService.blocks$.pipe(
+      map(([block]) => {
+        this.blocks.push(block);
+        this.blocks = this.blocks.slice(0, 8);
+        const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0);
+        const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0);
+        const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0);
 
+        return {
+          'totalReward': totalReward,
+          'rewardPerTx': formatNumber(totalReward / totalTx, this.locale, '1.0-0'),
+          'feePerTx': formatNumber(totalFee / totalTx, this.locale, '1.0-0'),
+        }
+      })
+    );
+  }
 }

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

@@ -116,7 +116,7 @@ export class PoolRankingComponent implements OnInit {
     if (this.isMobile() && this.widget) {
       edgeDistance = 0;
     } else if (this.isMobile() && !this.widget || this.widget) {
-      edgeDistance = 20;
+      edgeDistance = 35;
     }
 
     miningStats.pools.forEach((pool) => {
@@ -131,7 +131,7 @@ export class PoolRankingComponent implements OnInit {
           color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
         },
         value: pool.share,
-        name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
+        name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
         label: {
           overflow: 'none',
           color: '#b1b1b1',