Merge branch 'master' of https://github.com/benjamin-wilson/public-pool-ui

2023-07-26 14:52:12 -04:00
parent da257201b2 c34b618a9a
commit 8c51c86ff1
32 changed files with 817 additions and 70 deletions
@@ -32,7 +32,7 @@ export class BackgroundParticlesComponent implements OnInit {
    const lineColor: string = '#afccfa';

    this.particleOptions = {
-      fpsLimit: this.deviceService.isDesktop() ? 30 : 1,
+      fpsLimit: 30,
      detectRetina: true,
      background: {
        position: "50% 50%",
@@ -75,11 +75,11 @@ export class BackgroundParticlesComponent implements OnInit {
  }

  particlesLoaded(container: Container): void {
-    console.log(container);
+
  }

  async particlesInit(engine: Engine): Promise<void> {
-    console.log(engine);
+

    // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
@@ -1,4 +1,22 @@
 <ng-container *ngIf="clientInfo$ | async as clientInfo">
+    <div class="grid">
+        <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-4">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Best Difficulty</span>
+                        <div class="text-900 font-medium text-xl">{{clientInfo.bestDifficulty | numberSuffix}}
+                        </div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
+                        [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                        <i class="pi pi-star text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">{{clientInfo.bestDifficulty | number}}</span>
+            </div>
+        </div>
+    </div>
    <div class="card">


@@ -31,7 +49,7 @@
                        {{getSessionCount(worker.name, clientInfo.workers)}} Sessions
                    </td>
                    <td>
-                        {{getTotalHashRate(worker.name, clientInfo.workers)}} GH/s
+                        {{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
                    </td>
                    <td>
                        {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
@@ -47,7 +65,7 @@
                <tr [routerLink]="[worker.name, worker.sessionId]">
                    <td></td>
                    <td>{{worker.sessionId}}</td>
-                    <td>{{worker.hashRate}} GH/s</td>
+                    <td>{{worker.hashRate | hashSuffix}}</td>
                    <td>{{worker.bestDifficulty | numberSuffix}}</td>
                    <td>{{worker.startTime | dateAgo}}</td>
                </tr>
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';

+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { ClientService } from '../../services/client.service';

@Component({
@@ -18,6 +19,8 @@ export class DashboardComponent {

  public chartOptions: any;

+
+
  constructor(private clientService: ClientService, private route: ActivatedRoute) {
    this.address = this.route.snapshot.params['address'];
    this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(
@@ -61,18 +64,22 @@ export class DashboardComponent {
              label: '2 Hour',
              data: hourlyData,
              fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
-              borderColor: documentStyle.getPropertyValue('--primary-color'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--yellow-600'),
+              borderColor: documentStyle.getPropertyValue('--yellow-600'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
            },
            {
              type: 'line',
              label: '10 Minute',
              data: data,
              fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
            },

          ]
@@ -108,7 +115,7 @@ export class DashboardComponent {
        y: {
          ticks: {
            color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
          },
          grid: {
            color: surfaceBorder,
@@ -0,0 +1,5 @@
+<div class="card">
+    <h5>Background Particles </h5>
+    <p-inputSwitch [(ngModel)]="value" (ngModelChange)="particlesChanged($event)" optionLabel="label"
+        optionValue="value"></p-inputSwitch>
+</div>
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SettingsComponent]
+    });
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+import { LocalStorageService } from '../../services/local-storage.service';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent {
+
+  public stateOptions: any[] = [{ label: 'On', value: true }, { label: 'Off', value: false },];
+
+  public value: boolean = true;
+
+  constructor(private localStorageService: LocalStorageService) {
+    this.value = this.localStorageService.getParticles();
+  }
+
+  public particlesChanged(newVal: boolean) {
+    this.localStorageService.setParticles(newVal);
+    this.value = newVal;
+  }
+}
@@ -1,26 +1,42 @@
-<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
+<div class="py-4 px-4 lg:px-8 mx-0 lg:mx-8 main">
    <div class="grid justify-content-center">

        <div class="col-12">

            <div class="card text-center">
-                <div class="col-12 text-center mt-4 mb-4">
-                    <h2 class="text-900 font-normal mb-2">Public Pool</h2>
-                </div>

                <div>
                    <img style="height: 200px;" src="assets/layout/images/logo.svg" alt="logo">

                </div>
+
+                <div class="col-12 text-center">
+                    <h1 class="text-900 font-normal">Public Pool</h1>
+                </div>
+                <div class="mb-4">
+                    <a class="mr-4" href="https://github.com/benjamin-wilson/public-pool" target="_blank">
+                        <i class="pi pi-github" style="font-size: 30pt; color: white;"></i>
+                    </a>
+                    <a href="https://discord.gg/pF9smpe3yE" target="_blank">
+                        <i class="pi pi-discord" style="font-size: 30pt; color: white;"></i>
+                    </a>
+                </div>
+
                <div>
+                    <code>Fully Open Source Solo Bitcoin Mining Pool</code>
+                    <br>
+                    <br>
                    <div class="info">
-                        <code>stratum+tcp://public-pool-web.airdns.org:21496</code>
+                        <code>stratum+tcp://public-pool.airdns.org:21496</code>
                        <br>
                        <code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
                        <br>
                        <br>
                    </div>
-                    <code>1.8% fee includes donations to <a href="https://discord.gg/pF9smpe3yE" target="_blank">open source Bitcoin mining</a></code>
+                    <code>Pleb mining (under 50TH/s miners) mine with <b>NO FEES*</b></code>
+                    <br>
+                    <code>Miners with > 50TH/s will incur a 1.5% fee, a portion of which will go back into <a href="https://discord.gg/pF9smpe3yE" target="_blank">open source Bitcoin mining</a>*</code>
+                    <br>
                    <br>
                    <code>No second best.</code>
                </div>
@@ -32,6 +48,65 @@
                    <button [disabled]="address.invalid" class="ml-3 mt-3" pButton label="My Workers"
                        [routerLink]="['app',address.value]"></button>
                </div>
+
+                <code><small>* Based on a machine-by-machine basis</small></code>
+            </div>
+        </div>
+
+        <div class="col-12">
+
+            <div *ngIf="chartData$ | async as chartData">
+                <div class="card">
+                    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+                </div>
+            </div>
+
+        </div>
+
+
+        <div class="col-12" *ngIf="userAgents$ | async as userAgents">
+            <div class="card">
+                <h4 style="text-align: center;">Devices</h4>
+                <p-table [value]="userAgents">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Device</th>
+                            <th>Currently Working</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-userAgent>
+                        <tr>
+                            <td>{{ userAgent.userAgent | userAgent }}</td>
+                            <td>{{ userAgent.count }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+            </div>
+        </div>
+
+        <div class="col-12" *ngIf="blockData$ | async as blockData">
+            <div class="card">
+                <h4 style="text-align: center;"> Found Blocks</h4>
+                <p-table [value]="blockData">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Height</th>
+                            <th>Address</th>
+                            <th>Worker</th>
+                            <th>Session</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-block>
+                        <tr>
+                            <td>{{ block.height }}</td>
+                            <td>{{ block.minerAddress }}</td>
+                            <td>{{ block.worker }}</td>
+                            <td>{{ block.sessionId }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
            </div>
        </div>
    </div>
@@ -2,6 +2,15 @@
    min-width: 50%;
 }

+.main {
+    margin-top: 60px;
+}
+
 .info {
    font-weight: bold;
+}
+
+.card {
+    max-width: 1024px;
+    margin: 0 auto;
 }
@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { map, Observable, shareReplay } from 'rxjs';

+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
+import { AppService } from '../../services/app.service';
 import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';

@Component({
@@ -11,7 +14,83 @@ import { bitcoinAddressValidator } from '../../validators/bitcoin-address.valida
 export class SplashComponent {

  public address: FormControl;
-  constructor() {
+
+  public chartData$: Observable<any>;
+  public blockData$: Observable<any>;
+  public userAgents$: Observable<any>;
+
+  public chartOptions: any;
+
+  constructor(private appService: AppService) {
+
+    const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+    this.blockData$ = info$.pipe(map(info => info.blockData));
+    this.userAgents$ = info$.pipe(map(info => info.userAgents));
+    this.chartData$ = info$.pipe(
+      map((info: any) => {
+        return {
+          labels: info.chartData.map((d: any) => d.label),
+          datasets: [
+            {
+              label: 'Public-Pool Hashrate',
+              data: info.chartData.map((d: any) => d.data),
+              fill: false,
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
+            }
+          ]
+        }
+      })
+    );
+
    this.address = new FormControl(null, bitcoinAddressValidator());
+
+
+
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+
+    this.chartOptions = {
+      plugins: {
+        legend: {
+          labels: {
+            color: textColor
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'hour', // Set the unit to 'minute'
+          },
+          ticks: {
+            color: textColorSecondary
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false,
+            display: true
+          }
+        },
+        y: {
+          ticks: {
+            color: textColorSecondary,
+            callback: (value: number) => HashSuffixPipe.transform(value)
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false
+          }
+        }
+      }
+    };
+
  }
 }
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';

+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';

@Component({
@@ -37,9 +38,11 @@ export class WorkerGroupComponent {
              label: workerInfo.name,
              data: workerInfo.chartData.map((d: any) => d.data),
              fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
            }
          ]
        }
@@ -60,9 +63,7 @@ export class WorkerGroupComponent {
        x: {
          type: 'time',
          time: {
-            unit: 'minute', // Set the unit to 'minute'
-            stepSize: 10, // Set the desired interval between labels in minutes
-
+            unit: 'hour'
          },
          ticks: {
            color: textColorSecondary
@@ -75,7 +76,7 @@ export class WorkerGroupComponent {
        y: {
          ticks: {
            color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
          },
          grid: {
            color: surfaceBorder,
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, Observable, shareReplay } from 'rxjs';

+import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';

@Component({
@@ -37,9 +38,11 @@ export class WorkerComponent {
              label: workerInfo.name,
              data: workerInfo.chartData.map((d: any) => d.data),
              fill: false,
-              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-              tension: .4
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4,
+              pointRadius: 1,
+              borderWidth: 1
            }
          ]
        }
@@ -60,9 +63,7 @@ export class WorkerComponent {
        x: {
          type: 'time',
          time: {
-            unit: 'minute', // Set the unit to 'minute'
-            stepSize: 10, // Set the desired interval between labels in minutes
-
+            unit: 'hour'
          },
          ticks: {
            color: textColorSecondary
@@ -75,7 +76,7 @@ export class WorkerComponent {
        y: {
          ticks: {
            color: textColorSecondary,
-            callback: (value: number) => value + ' GH/s',
+            callback: (value: number) => HashSuffixPipe.transform(value)
          },
          grid: {
            color: surfaceBorder,