average time to block calc

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.config.local.json ",
-    "start:prod": "ng serve --proxy-config proxy.config.prod.json ",
+    "start:prod": "ng serve --configuration=production",
     "build": "ng build --configuration=production && gzipper compress --gzip --brotli ./dist/public-pool-ui/",
     "build:electron": "ng build --configuration=electron --base-href ./",
     "build:github": "ng build --configuration=production && echo \"web.public-pool.io\" > dist/public-pool-ui/CNAME",

proxy.config.prod.json

@@ -1,11 +1,11 @@
 {
-    "/api/*": {
-        "target": "http://public-pool.io:40557",
-        "secure": false,
+    "/api": {
+        "target": "https://public-pool.io:40557",
+        "secure": true,
+        "changeOrigin": true,
         "logLevel": "debug",
         "pathRewrite": {
-            "^/api": ""
-        },
-        "changeOrigin": true
+            "^/api": "/api"
+        }
     }
 }

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { AppLayoutModule } from './layout/app.layout.module';
 import { DateAgoPipe } from './pipes/date-ago.pipe';
 import { HashSuffixPipe } from './pipes/hash-suffix.pipe';
 import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
+import { AverageTimeToBlockPipe } from './pipes/average-time-to-block.pipe';
 
 
 

src/app/components/splash/splash.component.html

@@ -65,6 +65,7 @@
                 <div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div>
 
                 <ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
+                    
                     <p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
 
                 </ng-container>

src/app/components/splash/splash.component.ts

@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, map, Observable, shareReplay } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { AppService } from '../../services/app.service';
 import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
+import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
+
 
 @Component({
   selector: 'app-splash',
@@ -26,10 +28,13 @@ export class SplashComponent {
 
   public stratumURL = '';
 
-  constructor(private appService: AppService) {
+  private info$: Observable<any>;
 
-    const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+  private networkInfo:any;
 
+  constructor(private appService: AppService, private cdr: ChangeDetectorRef) {
+
+    this.info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
 
     if (environment.STRATUM_URL.length > 1) {
       this.stratumURL = environment.STRATUM_URL;
@@ -37,13 +42,14 @@ export class SplashComponent {
       this.stratumURL = window.location.hostname + ':3333';
     }
 
-    this.blockData$ = info$.pipe(map(info => info.blockData));
-    this.userAgents$ = info$.pipe(map(info => info.userAgents));
-    this.highScores$ = info$.pipe(map(info => info.highScores));
-    this.uptime$ = info$.pipe(map(info => info.uptime))
+    this.blockData$ = this.info$.pipe(map(info => info.blockData));
+    this.userAgents$ = this.info$.pipe(map(info => info.userAgents));
+    this.highScores$ = this.info$.pipe(map(info => info.highScores));
+    this.uptime$ = this.info$.pipe(map(info => info.uptime))
 
-    this.chartData$ = this.appService.getInfoChart().pipe(
-      map((chartData: any) => {
+    this.chartData$ = combineLatest([this.appService.getInfoChart(), this.appService.getNetworkInfo()]).pipe(
+      map(([chartData, networkInfo]) => {
+        this.networkInfo = networkInfo;
         return {
 
           labels: chartData.map((d: any) => d.label),
@@ -100,7 +106,9 @@ export class SplashComponent {
         y: {
           ticks: {
             color: textColorSecondary,
-            callback: (value: number) => HashSuffixPipe.transform(value)
+            callback: (value: number) => {
+                return HashSuffixPipe.transform(value) + " - " + AverageTimeToBlockPipe.transform(value, this.networkInfo.difficulty);
+            }
           },
           grid: {
             color: surfaceBorder,

src/app/pipes/average-time-to-block.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { AverageTimeToBlockPipe } from './average-time-to-block.pipe';
+
+describe('AverageTimeToBlockPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AverageTimeToBlockPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/average-time-to-block.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DateAgoPipe } from './date-ago.pipe';
+
+@Pipe({
+  name: 'averageTimeToBlock',
+  standalone: true
+})
+export class AverageTimeToBlockPipe implements PipeTransform {
+
+  private static _this = new AverageTimeToBlockPipe();
+  private static _dateAgo = new DateAgoPipe();
+
+  public static transform(value: number, difficulty: number): string {
+    return this._this.transform(value, difficulty);
+  }
+
+  public transform(value: number, difficulty: number): string {
+    const blockTimeInSeconds = this.calculateBlockTime(value, difficulty);
+    const date = new Date(new Date().getTime() + (blockTimeInSeconds * 1000));
+    return AverageTimeToBlockPipe._dateAgo.transform(date);
+  }
+
+  private calculateBlockTime(hashRate: number, difficulty: number): number {
+    const hashesPerDifficulty = Math.pow(2, 32);
+
+    // Calculate the average block time in seconds
+    const averageBlockTime = (difficulty * hashesPerDifficulty) / hashRate;
+
+    return averageBlockTime;
+  }
+}

src/app/pipes/date-ago.pipe.ts

@@ -8,7 +8,7 @@ export class DateAgoPipe implements PipeTransform {
 
   transform(value: any, args?: any): any {
     if (value) {
-      const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+      const seconds = Math.abs(Math.floor((+new Date() - +new Date(value)) / 1000));
       if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
         return 'Just now';
       const intervals: { [key: string]: number } = {