Redesign difficulty adjustment dashboard widget

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

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { combineLatest, Observable, timer } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { StateService } from '../../services/state.service';
+
+interface EpochProgress {
+  base: string;
+  change: number;
+  progress: number;
+  remainingBlocks: number;
+  newDifficultyHeight: number;
+  colorAdjustments: string;
+  colorPreviousAdjustments: string;
+  estimatedRetargetDate: number;
+  previousRetarget: number;
+  blocksUntilHalving: number;
+  timeUntilHalving: number;
+}
+
+@Component({
+  selector: 'app-difficulty-mining',
+  templateUrl: './difficulty-mining.component.html',
+  styleUrls: ['./difficulty-mining.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DifficultyMiningComponent implements OnInit {
+  isLoadingWebSocket$: Observable<boolean>;
+  difficultyEpoch$: Observable<EpochProgress>;
+
+  @Input() showProgress = true;
+  @Input() showHalving = false;
+  @Input() showTitle = true;
+
+  constructor(
+    public stateService: StateService,
+  ) { }
+
+  ngOnInit(): void {
+    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
+    this.difficultyEpoch$ = combineLatest([
+      this.stateService.blocks$.pipe(map(([block]) => block)),
+      this.stateService.difficultyAdjustment$,
+    ])
+    .pipe(
+      map(([block, da]) => {
+        let colorAdjustments = '#ffffff66';
+        if (da.difficultyChange > 0) {
+          colorAdjustments = '#3bcc49';
+        }
+        if (da.difficultyChange < 0) {
+          colorAdjustments = '#dc3545';
+        }
+
+        let colorPreviousAdjustments = '#dc3545';
+        if (da.previousRetarget) {
+          if (da.previousRetarget >= 0) {
+            colorPreviousAdjustments = '#3bcc49';
+          }
+          if (da.previousRetarget === 0) {
+            colorPreviousAdjustments = '#ffffff66';
+          }
+        } else {
+          colorPreviousAdjustments = '#ffffff66';
+        }
+
+        const blocksUntilHalving = 210000 - (block.height % 210000);
+        const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+
+        const data = {
+          base: `${da.progressPercent.toFixed(2)}%`,
+          change: da.difficultyChange,
+          progress: da.progressPercent,
+          remainingBlocks: da.remainingBlocks - 1,
+          colorAdjustments,
+          colorPreviousAdjustments,
+          newDifficultyHeight: da.nextRetargetHeight,
+          estimatedRetargetDate: da.estimatedRetargetDate,
+          previousRetarget: da.previousRetarget,
+          blocksUntilHalving,
+          timeUntilHalving,
+        };
+        return data;
+      })
+    );
+  }
+}