Frontend - Added non-BP web node + Dashboard improvements and fixes #989

Frontend - Added non-BP web node + Dashboard improvements and fixes

Author: directcuteo

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.66",
+  "version": "1.0.70",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -77,6 +77,7 @@
     "browser-sync": "^3.0.0",
     "cypress": "^13.3.2",
     "cypress-real-events": "^1.10.0",
+    "http-server": "^14.1.1",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -88,4 +89,4 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"
   }
-}
+}

frontend/package.json

@@ -31,6 +31,7 @@ export class WebNodeService {
 
   memory: WebAssembly.MemoryDescriptor;
   privateStake: PrivateStake;
+  noBlockProduction: boolean = false;
 
   constructor(private http: HttpClient) {
     FileProgressHelper.initDownloadProgress();
@@ -119,7 +120,10 @@ export class WebNodeService {
               }
             })();
             console.log('webnode config:', !!this.webNodeKeyPair.privateKey, this.webNodeNetwork, urls);
-            const privateKey = this.privateStake ? [this.privateStake.stake, this.privateStake.password] : this.webNodeKeyPair.privateKey;
+            let privateKey = this.privateStake ? [this.privateStake.stake, this.privateStake.password] : this.webNodeKeyPair.privateKey;
+            if (this.noBlockProduction) {
+              privateKey = null;
+            }
 
             return from(wasm.run(privateKey, urls.seeds, urls.genesisConfig));
           }),

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

@@ -1,12 +1,18 @@
-<div class="flex-column w-100 border-rad-6" [ngClass]="appliedPercentage === 100 ? 'bg-surface' : 'border'">
+<div class="flex-column w-100 border-rad-6 background-gradient" [ngClass]="appliedPercentage === 100 ? 'complete' : 'border'">
   <div class="h-xl lh-xl fx-row-vert-cent flex-between f-600 pl-12 pr-12 border-bottom">
     <div class="fx-row-vert-cent">
       @if (appliedPercentage === 100) {
         <span class="mina-icon f-20 success-primary">check_circle</span>
       } @else {
         <mina-loading-spinner></mina-loading-spinner>
       }
-      <div class="ml-8" [class.success-primary]="appliedPercentage === 100">Last 290 blocks</div>
+      <div class="ml-8" [class.success-primary]="appliedPercentage === 100">
+        @if (lengthWithoutRoot) {
+          {{ appliedPercentage < 100 ? 'Syncing Last' : 'Last' }} {{ lengthWithoutRoot }} blocks
+        } @else {
+          Waiting to sync ledgers
+        }
+      </div>
     </div>
     <div class="f-400 tertiary">{{ remaining ? 'ETA ~' + remaining + 's' : syncProgress }}</div>
   </div>