added some validation to splash

package.json

@@ -10,27 +10,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.1.5",
-    "@angular/common": "15.1.5",
-    "@angular/compiler": "15.1.5",
-    "@angular/core": "15.1.5",
-    "@angular/forms": "15.1.5",
-    "@angular/platform-browser": "15.1.5",
-    "@angular/platform-browser-dynamic": "15.1.5",
-    "@angular/router": "15.1.5",
+    "@angular/animations": "16.1.2",
+    "@angular/common": "16.1.2",
+    "@angular/compiler": "16.1.2",
+    "@angular/core": "16.1.2",
+    "@angular/forms": "16.1.2",
+    "@angular/platform-browser": "16.1.2",
+    "@angular/platform-browser-dynamic": "16.1.2",
+    "@angular/router": "16.1.2",
+    "bitcoin-address-validation": "^2.2.1",
     "chart.js": "^4.3.0",
     "chartjs-adapter-moment": "^1.0.1",
     "moment": "^2.29.4",
-    "primeflex": "^3.3.0",
-    "primeng": "15.2.0",
-    "rxjs": "~7.8.0",
+    "primeflex": "^3.3.1",
+    "primeicons": "^6.0.1",
+    "primeng": "16.0.2",
+    "rxjs": "~7.8.1",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.6",
-    "@angular/cli": "~15.1.6",
-    "@angular/compiler-cli": "^15.1.5",
+    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular/cli": "~16.1.1",
+    "@angular/compiler-cli": "^16.1.2",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.2.0",
     "karma": "~6.4.0",
@@ -38,6 +40,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.8.2"
+    "typescript": "~5.1.3"
   }
 }

src/app/components/dashboard/dashboard.component.ts

@@ -11,6 +11,7 @@ import { ClientService } from '../../services/client.service';
 })
 export class DashboardComponent {
 
+  public address: string;
 
   public clientInfo$: Observable<any>;
   public chartData$: Observable<any>;
@@ -18,8 +19,8 @@ export class DashboardComponent {
   public chartOptions: any;
 
   constructor(private clientService: ClientService, private route: ActivatedRoute) {
-    const address = this.route.snapshot.params['address'];
-    this.clientInfo$ = this.clientService.getClientInfo(address).pipe(
+    this.address = this.route.snapshot.params['address'];
+    this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(
       shareReplay({ refCount: true, bufferSize: 1 })
     )
 
@@ -34,25 +35,20 @@ export class DashboardComponent {
     this.chartData$ = this.clientInfo$.pipe(
       map((workerInfo: any) => {
 
-        const hourly = (workerInfo.chartData as any[]).reduce((pre, cur, idx, arr) => {
+        const GROUP_SIZE = 24; //12 = 1 hour
 
+        let chartData: any[] = workerInfo.chartData;
 
-          if (idx % 11 == 0 && idx != 0) {
-            pre[pre.length - 1].y = pre[pre.length - 1].y / 12;
+        let hourlyData = [];
+
+        for (let i = GROUP_SIZE; i < chartData.length; i += GROUP_SIZE) {
+          let sum = 0;
+          for (let j = GROUP_SIZE - 1; j >= 0; j--) {
+            sum += chartData[i - j].data;
           }
-
-          if (idx + 11 > arr.length) {
-            return pre;
-          }
-
-          if (idx % 11 == 0) {
-            pre.push({ y: cur.data, x: cur.label });
-          }
-          pre[pre.length - 1].y += cur.data;
-
-          return pre;
-
-        }, []);
+          sum = sum / GROUP_SIZE;
+          hourlyData.push({ y: sum, x: chartData[i].label });
+        }
 
 
         const data = workerInfo.chartData.map((d: any) => { return { y: d.data, x: d.label } });
@@ -63,7 +59,7 @@ export class DashboardComponent {
             {
               type: 'line',
               label: '2 Hour',
-              data: hourly,
+              data: hourlyData,
               fill: false,
               backgroundColor: documentStyle.getPropertyValue('--primary-color'),
               borderColor: documentStyle.getPropertyValue('--primary-color'),

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

@@ -14,14 +14,21 @@
                 </div>
                 <div>
                     <code>stratum+tcp://public-pool-web.airdns.org:40557</code>
+                    <br>
+                    <code>username: &lt;your address&gt;, password: x</code>
+                    <br>
+                    <br>
+                    <code>1.8% fee</code>
+                    <br>
+                    <code>No second best.</code>
                 </div>
 
-                <div class="field mt-8">
+                <div class="field mt-8 mb-8">
 
-                    <input [(ngModel)]="address" placeholder="Address" pInputText id="address" type="text"
+                    <input [formControl]="address" placeholder="Address (bc1...)" pInputText id="address" type="text"
                         class="p-inputtext p-component p-element">
-                    <button [disabled]="address == null" class="ml-3" pButton label="My Account"
-                        [routerLink]="['app',address]"></button>
+                    <button [disabled]="address.invalid" class="ml-3" pButton label="My Account"
+                        [routerLink]="['app',address.value]"></button>
                 </div>
             </div>
         </div>

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

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
 
 @Component({
   selector: 'app-splash',
@@ -7,6 +10,8 @@ import { Component } from '@angular/core';
 })
 export class SplashComponent {
 
-  public address!: string;
-  constructor() { }
+  public address: FormControl;
+  constructor() {
+    this.address = new FormControl(null, bitcoinAddressValidator());
+  }
 }

src/app/validators/bitcoin-address.validator.ts

@@ -0,0 +1,13 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { validate } from 'bitcoin-address-validation';
+
+export function bitcoinAddressValidator(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } | null => {
+
+        if (validate(control.value)) {
+            return null;
+        }
+        return { ['bitcoin-address']: true };
+
+    };
+}