Add difficulty adjustment in mining page + Fix pools table on mobile

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

@@ -39,13 +39,22 @@
               {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
           </div>
         </div>
-        <div class="item">
+        <div class="item" *ngIf="showProgress">
           <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
           <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
           <div class="progress small-bar">
             <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
           </div>
         </div>
+        <div class="item" *ngIf="showHalving">
+          <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>
+            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+          </div>
+          <div class="symbol"><app-time-until [time]="epochData.timeUntilHalving" [fastRender]="true"></app-time-until></div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -14,6 +14,8 @@ interface EpochProgress {
   timeAvg: string;
   remainingTime: number;
   previousRetarget: number;
+  blocksUntilHalving: number;
+  timeUntilHalving: number;
 }
 
 @Component({
@@ -26,6 +28,9 @@ export class DifficultyComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
 
+  @Input() showProgress: boolean = true;
+  @Input() showHalving: boolean = false;
+
   constructor(
     public stateService: StateService,
   ) { }
@@ -92,6 +97,9 @@ export class DifficultyComponent implements OnInit {
             colorPreviousAdjustments = '#ffffff66';
           }
 
+          const blocksUntilHalving = block.height % 210000;
+          const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000);
+
           return {
             base: `${progress}%`,
             change,
@@ -104,6 +112,8 @@ export class DifficultyComponent implements OnInit {
             newDifficultyHeight,
             remainingTime,
             previousRetarget,
+            blocksUntilHalving,
+            timeUntilHalving,
           };
         })
       );

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

@@ -1,6 +1,13 @@
 <div class="container-xl">
+
+  <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty>
+
+  <div style="height: 500px; margin-top: 30px;" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
   <div class="card-header">
-    <!-- <i class="fa fa-area-chart"></i> <span i18n="mining.pools-by-vBytes">Pools</span> -->
     <form [formGroup]="radioGroupForm" class="formRadioGroup">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"
         (change)="onChangeWindowPreference($event)">
@@ -38,33 +45,31 @@
     </form>
   </div>
 
-  <div style="height: 500px;" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
-    <div class="spinner-border text-light"></div>
-  </div>
-
   <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50">
     <thead>
-      <th i18n="latest-blocks.height">Rank</th>
-      <th class="d-none d-md-block"i18n="latest-blocks.timestamp">Name</th>
+      <th class="d-none d-md-block" i18n="latest-blocks.height">Rank</th>
+      <th><!-- LOGO --></th>
+      <th i18n="latest-blocks.timestamp">Name</th>
       <th i18n="latest-blocks.timestamp">Hashrate</th>
-      <th class="d-none d-md-block" i18n="latest-blocks.mined">Block Count (share)</th>
-      <th i18n="latest-blocks.transactions">Empty Blocks (ratio)</th>
+      <th i18n="latest-blocks.mined">Block Count (%)</th>
+      <th class="d-none d-md-block" i18n="latest-blocks.transactions">Empty Blocks (%)</th>
     </thead>
     <tbody *ngIf="(miningStatsEmitter$ | async) as miningStats">
       <tr>
-        <td>-</td>
+        <td class="d-none d-md-block">-</td>
+        <td><!-- LOGO --></td>
         <td>All miners</td>
         <td>{{ miningStats.lastEstimatedHashrate}} PH/s</td>
         <td>{{ miningStats.blockCount }}</td>
-        <td>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</td>
+        <td class="d-none d-md-block">{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</td>
       </tr>
       <tr *ngFor="let pool of miningStats.pools">
-        <td>{{ pool.rank }}</td>
-        <td><a href="{{ pool.link }}">{{ pool.name }}</a></td>
+        <td class="d-none d-md-block">{{ pool.rank }}</td>
+        <td><img width="25" height="25" src="{{ pool.logo }}"></td>
+        <td><a target="#" href="{{ pool.link }}">{{ pool.name }}</a></td>
         <td>{{ pool.lastEstimatedHashrate }} PH/s</td>
         <td>{{ pool.blockCount }} ({{ pool.share }}%)</td>
-        <td>{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
+        <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
       </tr>
     </tbody>
   </table>

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

@@ -93,7 +93,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
         return;
       }
       data.push({
-        value: pool.lastEstimatedHashrate,
+        value: pool.share,
         name: pool.name,
         label: { color: '#FFFFFF' },
         tooltip: {
@@ -125,8 +125,16 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
       tooltip: {
         trigger: 'item'
       },
+      legend: (window.innerWidth <= 767.98) ? {
+        bottom: '0%',
+        left: 'center',
+        textStyle: {
+          color: '#FFF'
+        }
+      } : null,
       series: [
         {
+          top: '5%',
           name: 'Mining pool',
           type: 'pie',
           radius: ['30%', '70%'],
@@ -137,6 +145,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
             },
           },
           label: {
+            show: (window.innerWidth > 767.98),
             fontSize: 14,
           },
           itemStyle: {

frontend/src/app/interfaces/node-api.interface.ts

@@ -62,6 +62,7 @@ export interface SinglePoolStats {
   share: string,
   lastEstimatedHashrate: string,
   emptyBlockRatio: string,
+  logo: string,
 }
 
 export interface PoolsStats {

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

@@ -29,6 +29,7 @@ export class MiningService {
         share: (poolStat.blockCount / stats.blockCount * 100).toFixed(2),
         lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / Math.pow(10, 15)).toFixed(2),
         emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2),
+        logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',
         ...poolStat
       }
     });