diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html index 1461b0c59..0865708af 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html @@ -56,7 +56,7 @@ - + diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index 8011c7e6f..d1de5f076 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -1,7 +1,15 @@ -
Difficulty Adjustment
+
Difficulty Adjustment
+
Halving Countdown
-
+
+ difficulty + | + halving +
+
@@ -76,6 +84,52 @@
+ +
+
+
+
+
+
+ {{ ((210000 - epochData.blocksUntilHalving) / 2100).toFixed(2) }}% +
+
+
+
+
+ +
+
+ New subsidy +
+
+
+
+ {{ epochData.blocksUntilHalving | number }} +
+
+ Blocks remaining + Block remaining +
+
+
+
+ {{ epochData.timeUntilHalving | date }} +
+
+ +
+ +
+ +
+ +
+
+
+
+ +
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index 1da1591d0..3b591dc2d 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -168,7 +168,7 @@ white-space: nowrap; } -.epoch-progress { +.epoch-progress, .halving-progress { width: 100%; height: 22px; margin-bottom: 12px; @@ -212,4 +212,43 @@ } .blocks-behind { color: #D81B60; +} + +.halving-progress { + position: relative; + .background, .remaining { + position: absolute; + top: 0; + bottom: 0; + height: 100%; + } + .background { + background: linear-gradient(to right, #105fb0, #9339f4); + left: 0; + right: 0; + } + .remaining { + background: #2d3348; + right: 0; + } + .label { + position: relative; + margin: auto; + } +} + +.widget-toggler { + font-size: 12px; + position: absolute; + top: -20px; + right: 3px; + text-align: right; +} + +.toggler-option { + text-decoration: none; +} + +.inactive { + color: #ffffff66; } \ No newline at end of file diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts index d37667312..13f61dc5e 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.ts +++ b/frontend/src/app/components/difficulty/difficulty.component.ts @@ -51,6 +51,10 @@ export class DifficultyComponent implements OnInit { isLoadingWebSocket$: Observable; difficultyEpoch$: Observable; + mode: 'difficulty' | 'halving' = 'difficulty'; + userSelectedMode: boolean = false; + + now: number = Date.now(); epochStart: number; currentHeight: number; currentIndex: number; @@ -101,6 +105,11 @@ export class DifficultyComponent implements OnInit { const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000); const newEpochStart = Math.floor(this.stateService.latestBlockHeight / EPOCH_BLOCK_LENGTH) * EPOCH_BLOCK_LENGTH; const newExpectedHeight = Math.floor(newEpochStart + da.expectedBlocks); + this.now = new Date().getTime(); + + if (blocksUntilHalving < da.remainingBlocks && !this.userSelectedMode) { + this.mode = 'halving'; + } if (newEpochStart !== this.epochStart || newExpectedHeight !== this.expectedHeight || this.currentHeight !== this.stateService.latestBlockHeight) { this.epochStart = newEpochStart; @@ -194,6 +203,12 @@ export class DifficultyComponent implements OnInit { return shapes; } + setMode(mode: 'difficulty' | 'halving'): boolean { + this.mode = mode; + this.userSelectedMode = true; + return false; + } + @HostListener('pointerdown', ['$event']) onPointerDown(event): void { if (this.epochSvgElement?.nativeElement?.contains(event.target)) {