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

backend/src/api/mining.ts

@@ -17,7 +17,8 @@ class Mining {
   public async $getPoolsStats(interval: string = "100 YEAR") : Promise<object> {
     let poolsStatistics = {};
 
-    const lastBlockHashrate = await this.bitcoinApi.$getEstimatedHashrate(717960);
+    const blockHeightTip = await this.bitcoinApi.$getBlockHeightTip();
+    const lastBlockHashrate = await this.bitcoinApi.$getEstimatedHashrate(blockHeightTip);
     const poolsInfo: PoolInfo[] = await PoolsRepository.$getPoolsInfo(interval);
     const blockCount: number = await BlocksRepository.$blockCount(interval);
     const emptyBlocks: EmptyBlocks[] = await BlocksRepository.$countEmptyBlocks(interval);

frontend/cypress/fixtures/pools.json

@@ -421,7 +421,7 @@
             "link" : "http://www.dpool.top/"
         },
         "/Rawpool.com/": {
-            "name" : "Rawpool.com",
+            "name" : "Rawpool",
             "link" : "https://www.rawpool.com/"
         },
         "/haominer/": {
@@ -947,7 +947,7 @@
             "link" : "http://www.dpool.top/"
         },
         "1FbBbv5oYqFKwiPm4CAqvAy8345n8AQ74b" : {
-            "name" : "Rawpool.com",
+            "name" : "Rawpool",
             "link" : "https://www.rawpool.com/"
         },
         "1LsFmhnne74EmU4q4aobfxfrWY4wfMVd8w" : {

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
       }
     });

frontend/src/resources/mining-pools/unknown.svg

@@ -0,0 +1,7 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64.001" width="64.001" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<g transform="translate(-289.60744,-317.50471)">
+<path d="m352.64,357.25c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z" fill="#f7931a"/>
+<path d="m335.71,344.95c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z" fill="#FFF"/>
+</g>
+</svg>