machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mining] update halving widget to be more human readable

Browse Source
This commit is contained in:
nymkappa 2024-01-27 16:16:32 +01:00
parent 520e79aec4
commit 057abbb6c1
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 1403 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1358
frontend/src/app/components/difficulty-mining/countdown.js Normal file
View File

File diff suppressed because it is too large Load Diff

30
frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
View File

@ -47,20 +47,34 @@
</div> </div>
</div> </div>
<div class="item" *ngIf="showHalving"> <div class="item" *ngIf="showHalving">
<h5 class="card-title" i18n="difficulty-box.next-halving" i18n-ngbTooltip="difficulty-box.next-halving" <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
ngbTooltip="Next Halving" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Next Halving</h5> <div class="card-text" i18n-ngbTooltip="mining.average-fee" [ngbTooltip]="halvingBlocksLeft" [tooltipContext]="{ epochData: epochData }" placement="bottom">
<div class="card-text"> <span>{{ timeUntilHalving | date }}</span>
<ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container> <div class="symbol" *ngIf="!countdownObject; else countdownValid">
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template> <app-time kind="until" [time]="epochData.timeAvg + now" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template> </div>
<ng-template #countdownValid>
<div class="symbol">
<span>In </span>
<span *ngIf="countdownObject.years">{{ countdownObject.years }} years </span>
<span *ngIf="countdownObject.months">{{ countdownObject.months }} months </span>
<span *ngIf="countdownObject.days">{{ countdownObject.days }} days </span>
<span *ngIf="countdownObject.hours">{{ countdownObject.hours }} hours</span>
</div>
</ng-template>
</div>
</div> </div>
<div class="symbol"><app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="true" [precision]="1"></app-time></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ng-template #halvingBlocksLeft let-epochData="epochData">
<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>
</ng-template>
<ng-template #loadingDifficulty> <ng-template #loadingDifficulty>
<div class="difficulty-skeleton loading-container"> <div class="difficulty-skeleton loading-container">
<div class="item"> <div class="item">

27
frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
View File

@ -1,7 +1,8 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { combineLatest, Observable, timer } from 'rxjs'; import { combineLatest, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
const countdown = require('./countdown');
interface EpochProgress { interface EpochProgress {
base: string; base: string;
@ -15,6 +16,7 @@ interface EpochProgress {
previousRetarget: number; previousRetarget: number;
blocksUntilHalving: number; blocksUntilHalving: number;
timeUntilHalving: number; timeUntilHalving: number;
timeAvg: number;
} }
@Component({ @Component({
@ -26,6 +28,9 @@ interface EpochProgress {
export class DifficultyMiningComponent implements OnInit { export class DifficultyMiningComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
difficultyEpoch$: Observable<EpochProgress>; difficultyEpoch$: Observable<EpochProgress>;
countdownObject = null;
timeUntilHalving = 0;
now = new Date().getTime();
@Input() showProgress = true; @Input() showProgress = true;
@Input() showHalving = false; @Input() showHalving = false;
@ -65,7 +70,20 @@ export class DifficultyMiningComponent implements OnInit {
} }
const blocksUntilHalving = 210000 - (maxHeight % 210000); const blocksUntilHalving = 210000 - (maxHeight % 210000);
const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000); this.timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
this.now = new Date().getTime();
if (blocksUntilHalving - 1 === 0) {
this.countdownObject = null;
} else {
this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.YEARS | countdown.MONTHS);
if (this.countdownObject.years === 0) {
this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.DAYS | countdown.HOURS);
}
if (this.countdownObject.hours === 0) {
this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.MINUTES);
}
}
const data = { const data = {
base: `${da.progressPercent.toFixed(2)}%`, base: `${da.progressPercent.toFixed(2)}%`,
@ -78,7 +96,8 @@ export class DifficultyMiningComponent implements OnInit {
estimatedRetargetDate: da.estimatedRetargetDate, estimatedRetargetDate: da.estimatedRetargetDate,
previousRetarget: da.previousRetarget, previousRetarget: da.previousRetarget,
blocksUntilHalving, blocksUntilHalving,
timeUntilHalving, timeUntilHalving: this.timeUntilHalving,
timeAvg: da.timeAvg,
}; };
return data; return data;
}) })