Web node file upload

File upload

Fuzzing

Author: directcuteo

frontend/angular.json

@@ -87,6 +87,15 @@
               ],
               "outputHashing": "all"
             },
+            "fuzzing": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.fuzzing.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
             "producer": {
               "fileReplacements": [
                 {
@@ -110,6 +119,9 @@
             },
             "local": {
               "browserTarget": "frontend:build:local"
+            },
+            "fuzzing": {
+              "browserTarget": "frontend:build:fuzzing"
             }
           },
           "options": {
@@ -185,6 +197,15 @@
                 }
               ]
             },
+            "fuzzing": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.fuzzing.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
             "producer": {
               "outputHashing": "media",
               "fileReplacements": [

frontend/package-lock.json

@@ -1,11 +1,12 @@
 {
   "name": "frontend",
-  "version": "1.0.59",
+  "version": "1.0.66",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
     "start:dev": "ng serve --configuration development",
     "start:dev:mobile": "ng serve --configuration development --host 0.0.0.0",
+    "start:fuzzing": "npm run install:deps && ng build --configuration fuzzing && npm run start:bundle",
     "build": "ng build",
     "build:prod": "ng build --configuration production && npm run sentry:sourcemaps",
     "tests": "npx cypress open --config baseUrl=http://localhost:4200",
@@ -87,4 +88,4 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"
   }
-}
+}

frontend/package.json

@@ -22,6 +22,7 @@
         <mina-toolbar></mina-toolbar>
       }
       <div id="mina-content"
+           class="overflow-hidden"
            [class.no-toolbar]="hideToolbar"
            [class.no-submenus]="subMenusLength < 2"
            [class.mobile]="menu.isMobile">

frontend/src/app/app.component.html

@@ -60,7 +60,6 @@ mat-sidenav-content {
   $toolbar: 40px;
   height: calc(100% - #{$toolbar});
   border-top-left-radius: 6px;
-  overflow: hidden;
   background-color: $base-surface;
 
   &.no-toolbar {

frontend/src/app/app.component.scss

@@ -15,6 +15,7 @@ export const BLOCK_PRODUCTION_TITLE: string = APP_TITLE + ' - Block Production';
 export const MEMPOOL_TITLE: string = APP_TITLE + ' - Mempool';
 export const BENCHMARKS_TITLE: string = APP_TITLE + ' - Benchmarks';
 export const WEBNODE_TITLE: string = APP_TITLE + ' - Web Node';
+export const FUZZING_TITLE: string = APP_TITLE + ' - Fuzzing';
 
 
 function generateRoutes(): Routes {
@@ -57,17 +58,22 @@ function generateRoutes(): Routes {
     },
     {
       path: 'mempool',
-      loadChildren: () => import('./features/mempool/mempool.module').then(m => m.MempoolModule),
+      loadChildren: () => import('@mempool/mempool.module').then(m => m.MempoolModule),
       title: MEMPOOL_TITLE,
     },
     {
       path: 'benchmarks',
-      loadChildren: () => import('./features/benchmarks/benchmarks.module').then(m => m.BenchmarksModule),
+      loadChildren: () => import('@benchmarks/benchmarks.module').then(m => m.BenchmarksModule),
       title: BENCHMARKS_TITLE,
     },
+    {
+      path: 'fuzzing',
+      loadChildren: () => import('@fuzzing/fuzzing.module').then(m => m.FuzzingModule),
+      title: FUZZING_TITLE,
+    },
     {
       path: 'loading-web-node',
-      loadChildren: () => import('./features/webnode/webnode.module').then(m => m.WebnodeModule),
+      loadChildren: () => import('@web-node/web-node.module').then(m => m.WebNodeModule),
       title: WEBNODE_TITLE,
     },
   ];

frontend/src/app/app.routing.ts

@@ -35,6 +35,9 @@ import { MempoolState } from '@app/features/mempool/mempool.state';
 import { mempoolReducer } from '@app/features/mempool/mempool.reducer';
 import { BenchmarksState } from '@benchmarks/benchmarks.state';
 import { benchmarksReducer } from '@benchmarks/benchmarks.reducer';
+import { fuzzingReducer } from '@fuzzing/fuzzing.reducer';
+import { FuzzingState } from '@fuzzing/fuzzing.state';
+import { FuzzingAction } from '@fuzzing/fuzzing.actions';
 
 export interface MinaState {
   [APP_KEY]: AppState;
@@ -49,6 +52,7 @@ export interface MinaState {
   state: StateState;
   snarks: SnarksState;
   benchmarks: BenchmarksState;
+  fuzzing: FuzzingState;
 }
 
 type MinaAction =
@@ -59,6 +63,7 @@ type MinaAction =
   & ResourcesAction
   & StateAction
   & SnarksAction
+  & FuzzingAction
   ;
 
 export const reducers: ActionReducerMap<MinaState, MinaAction> = {
@@ -74,6 +79,7 @@ export const reducers: ActionReducerMap<MinaState, MinaAction> = {
   state: stateReducer,
   snarks: snarksReducer,
   benchmarks: benchmarksReducer,
+  fuzzing: fuzzingReducer,
 };
 
 export const metaReducers: MetaReducer<MinaState, MinaAction>[] = [];

frontend/src/app/app.setup.ts

@@ -4,15 +4,18 @@ import * as Sentry from '@sentry/angular';
 import { NodesOverviewBlock, NodesOverviewNodeBlockStatus } from '@shared/types/nodes/dashboard/nodes-overview-block.type';
 import { lastItem, ONE_BILLION } from '@openmina/shared';
 import { RustService } from '@core/services/rust.service';
+import { getElapsedTime } from '@shared/helpers/date.helper';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SentryService {
 
+  private readonly rustService: RustService = inject(RustService);
   private ledgerIsSynced: boolean = false;
   private blockIsSynced: boolean = false;
-  private rustService: RustService = inject(RustService);
+  private ledgerSyncedTime: number;
+  private blockSyncedTime: number;
 
   updateLedgerSyncStatus(ledger: NodesOverviewLedger): void {
     if (this.ledgerIsSynced) {
@@ -40,8 +43,9 @@ export class SentryService {
       };
 
       const syncedIn = Math.round((ledger.rootStaged.staged.reconstructEnd - ledger.stakingEpoch.snarked.fetchHashesStart) / ONE_BILLION);
+      this.ledgerSyncedTime = syncedIn;
 
-      Sentry.captureMessage(`Ledger synced in ${syncedIn}s`, {
+      Sentry.captureMessage(`Ledger synced in ${getElapsedTime(syncedIn)}s`, {
         level: 'info',
         tags: { type: 'webnode', subType: 'sync.ledger' },
         contexts: { ledger: syncDetails },
@@ -60,11 +64,20 @@ export class SentryService {
       blocks = blocks.slice(1);
       const bestTipBlock = blocks[0].height;
       const root = lastItem(blocks).height;
-      Sentry.captureMessage(`Last 290 blocks synced in ${Math.round((Date.now() - startTime) / 1000)}s`, {
+      this.blockSyncedTime = Math.round((Date.now() - startTime) / 1000);
+      Sentry.captureMessage(`Last 290 blocks synced in ${getElapsedTime(this.blockSyncedTime)}s`, {
         level: 'info',
         tags: { type: 'webnode', subType: 'sync.block' },
         contexts: { blocks: { bestTipBlock, root } },
       });
+
+      const syncTotal = this.ledgerSyncedTime + this.blockSyncedTime;
+      setTimeout(() => {
+        Sentry.captureMessage(`Web Node Synced in ${getElapsedTime(syncTotal)}`, {
+          level: 'info',
+          tags: { type: 'webnode', subType: 'sync.total' },
+        });
+      }, 2000);
     }
   }
 }

frontend/src/app/core/services/sentry.service.ts

@@ -8,13 +8,20 @@ import { DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer';
 import { FileProgressHelper } from '@core/helpers/file-progress.helper';
 import { CONFIG } from '@shared/constants/config';
 
+export interface PrivateStake {
+  publicKey: string;
+  password: string;
+  stake: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class WebNodeService {
 
   private readonly webnode$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
   private readonly wasm$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+
   private webNodeKeyPair: { publicKey: string, privateKey: string };
   private webNodeNetwork: String;
   private webNodeStartTime: number;
@@ -23,6 +30,7 @@ export class WebNodeService {
   readonly webnodeProgress$: BehaviorSubject<string> = new BehaviorSubject<string>('');
 
   memory: WebAssembly.MemoryDescriptor;
+  privateStake: PrivateStake;
 
   constructor(private http: HttpClient) {
     FileProgressHelper.initDownloadProgress();
@@ -111,7 +119,9 @@ export class WebNodeService {
               }
             })();
             console.log('webnode config:', !!this.webNodeKeyPair.privateKey, this.webNodeNetwork, urls);
-            return from(wasm.run(this.webNodeKeyPair.privateKey, urls.seeds, urls.genesisConfig));
+            const privateKey = this.privateStake ? [this.privateStake.stake, this.privateStake.password] : this.webNodeKeyPair.privateKey;
+
+            return from(wasm.run(privateKey, urls.seeds, urls.genesisConfig));
           }),
           tap((webnode: any) => {
             any(window).webnode = webnode;

frontend/src/app/core/services/web-node.service.ts

@@ -1 +1,7 @@
 <span [tooltip]="'Started ' + startedAgo + ' ago'">{{ epoch }}</span>
+@if (isMobile) {
+  <span [copyToClipboard]="publicKey" class="fx-row-vert-cent tertiary">
+    <span>{{ publicKey | truncateMid: 6: 6 }}</span>
+    <span class="mina-icon ml-5">content_copy</span>
+  </span>
+}