Bugfix: Change mempool block time precision. (#650)

* Fix time precision.

* Fix rounding numbers only for minutes range.
Fix reflected avg time to ETA transactions.

* Fix now variable update.

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -77,7 +77,6 @@ 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;
       })
     );
@@ -90,6 +89,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           this.stateService.lastDifficultyAdjustment$
         ])),
         map(([block, DATime]) => {
+          this.now = new Date().getTime();
           const now = new Date().getTime() / 1000;
           const diff = now - DATime;
           const blocksInEpoch = block.height % 2016;

frontend/src/app/components/time-since/time-since.component.ts

@@ -56,7 +56,7 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
     if (seconds < 60) {
       return $localize`:@@date-base.just-now:Just now`;
     }
-    let counter;
+    let counter: number;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
         counter = Math.floor(seconds / this.intervals[i]);

frontend/src/app/components/time-span/time-span.component.ts

@@ -56,7 +56,7 @@ export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy {
     if (seconds < 60) {
       return $localize`:@@date-base.just-now:Just now`;
     }
-    let counter;
+    let counter: number;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
         counter = Math.floor(seconds / this.intervals[i]);

frontend/src/app/components/time-until/time-until.component.ts

@@ -58,16 +58,20 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   calculate() {
-    const seconds = Math.floor((+new Date(this.time) - +new Date()) / 1000);
+    const seconds = (+new Date(this.time) - +new Date()) / 1000;
 
     if (seconds < 60) {
       const dateStrings = dates(1);
       return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
     }
-    let counter;
+    let counter: number;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
+        if (i === 'minute') {
           counter = Math.round(seconds / this.intervals[i]);
+        } else {
+          counter = Math.floor(seconds / this.intervals[i]);
+        }
         const dateStrings = dates(counter);
         if (counter > 0) {
           if (counter === 1) {

frontend/src/app/components/transaction/transaction.component.html

@@ -117,10 +117,10 @@
                       </ng-template>
                       <ng-template #belowBlockLimit>
                         <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeEstimateDefault">
-                          <ng-container *ngTemplateOutlet="1 * txInBlockIndex + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * txInBlockIndex + 1 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
+                          <app-time-until [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time-until>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * txInBlockIndex + 10 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
+                          <app-time-until *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true"></app-time-until>
                         </ng-template>
                       </ng-template>
                     </ng-template>

frontend/src/app/components/transaction/transaction.component.ts

@@ -7,9 +7,10 @@ import {
   catchError,
   retryWhen,
   delay,
+  map
 } from 'rxjs/operators';
 import { Transaction, Block } from '../../interfaces/electrs.interface';
-import { of, merge, Subscription, Observable, Subject } from 'rxjs';
+import { of, merge, Subscription, Observable, Subject, timer, combineLatest,  } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
@@ -40,6 +41,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
   showCpfpDetails = false;
   fetchCpfp$ = new Subject<string>();
   commitments: Map<any, any>;
+  now = new Date().getTime();
+  timeAvg$: Observable<number>;
 
   constructor(
     private route: ActivatedRoute,
@@ -57,6 +60,33 @@ export class TransactionComponent implements OnInit, OnDestroy {
       (network) => (this.network = network)
     );
 
+    this.timeAvg$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
+          this.stateService.blocks$.pipe(map(([block]) => block)),
+          this.stateService.lastDifficultyAdjustment$
+        ])),
+        map(([block, DATime]) => {
+          this.now = new Date().getTime();
+          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.fetchCpfpSubscription = this.fetchCpfp$
       .pipe(
         switchMap((txId) =>