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