diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 8e3655724..4ffef5c91 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -1,5 +1,5 @@
-
+
  @@ -18,10 +18,10 @@
- + - +
@@ -38,10 +38,6 @@
-In ~{{ i }} minutes - -In ~{{ i }} minute -
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 51033ac6f..d418f27c7 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core'; -import { Subscription, Observable, fromEvent, merge, of } from 'rxjs'; +import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer } from 'rxjs'; import { MempoolBlock } from 'src/app/interfaces/websocket.interface'; import { StateService } from 'src/app/services/state.service'; import { Router } from '@angular/router'; @@ -17,6 +17,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks(); mempoolBlocks$: Observable; + timeAvg$: Observable; mempoolBlocksFull: MempoolBlock[] = this.mountEmptyBlocks(); mempoolBlockStyles = []; @@ -24,6 +25,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { blockSubscription: Subscription; networkSubscription: Subscription; network = ''; + now = new Date().getTime(); blockWidth = 125; blockPadding = 30; @@ -75,10 +77,39 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); this.updateMempoolBlockStyles(); this.calculateTransactionPosition(); + this.now = new Date().getTime(); return this.mempoolBlocks; }) ); + + this.timeAvg$ = timer(0, 1000) + .pipe( + switchMap(() => combineLatest([ + this.stateService.blocks$.pipe(map(([block]) => block)), + this.stateService.lastDifficultyAdjustment$ + ])), + map(([block, DATime]) => { + const now = new Date().getTime() / 1000; + const diff = now - DATime; + const blocksInEpoch = block.height % 2016; + let difficultyChange = 0; + if (blocksInEpoch > 0) { + difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100; + } + const timeAvgDiff = difficultyChange * 0.1; + + let timeAvgMins = 10; + if (timeAvgDiff > 0 ){ + timeAvgMins -= Math.abs(timeAvgDiff); + } else { + timeAvgMins += Math.abs(timeAvgDiff); + } + + return timeAvgMins * 60 * 1000; + }) + ); + this.markBlocksSubscription = this.stateService.markBlock$ .subscribe((state) => { this.markIndex = undefined; diff --git a/frontend/src/app/components/time-since/time-since.component.ts b/frontend/src/app/components/time-since/time-since.component.ts index 3acfc11c5..84161c841 100644 --- a/frontend/src/app/components/time-since/time-since.component.ts +++ b/frontend/src/app/components/time-since/time-since.component.ts @@ -69,8 +69,8 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy { case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break; case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break; case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break; - case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; - case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; + case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break; + case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break; } } else { switch (i) { // plural (2 days) @@ -79,8 +79,8 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy { case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break; case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break; case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break; - case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; - case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; + case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break; + case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break; } } } diff --git a/frontend/src/app/components/time-span/time-span.component.ts b/frontend/src/app/components/time-span/time-span.component.ts index 7d3b987fe..411987c79 100644 --- a/frontend/src/app/components/time-span/time-span.component.ts +++ b/frontend/src/app/components/time-span/time-span.component.ts @@ -69,8 +69,8 @@ export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy { case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break; case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break; case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break; - case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; - case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; + case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break; + case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break; } } else { switch (i) { // plural (2 days) @@ -79,8 +79,8 @@ export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy { case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break; case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break; case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break; - case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; - case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; + case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break; + case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break; } } } diff --git a/frontend/src/app/components/time-until/time-until.component.ts b/frontend/src/app/components/time-until/time-until.component.ts index ee67e712b..c047e5e2a 100644 --- a/frontend/src/app/components/time-until/time-until.component.ts +++ b/frontend/src/app/components/time-until/time-until.component.ts @@ -14,6 +14,7 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy { @Input() time: number; @Input() fastRender = false; + @Input() fixedRender = false; constructor( private ref: ChangeDetectorRef, @@ -31,6 +32,11 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy { } ngOnInit() { + if(this.fixedRender){ + this.text = this.calculate(); + return; + } + if (!this.stateService.isBrowser) { this.text = this.calculate(); this.ref.markForCheck(); @@ -55,12 +61,13 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy { const seconds = Math.floor((+new Date(this.time) - +new Date()) / 1000); if (seconds < 60) { - return $localize`:@@date-base.minute:${1}:DATE: minute`; + const dateStrings = dates(1); + return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`; } let counter; for (const i in this.intervals) { if (this.intervals.hasOwnProperty(i)) { - counter = Math.floor(seconds / this.intervals[i]); + counter = Math.round(seconds / this.intervals[i]); const dateStrings = dates(counter); if (counter > 0) { if (counter === 1) { @@ -80,8 +87,8 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy { case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break; case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break; case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break; - case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; - case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; + case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break; + case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break; } } }