Frontend - Firebase Caching #916

Author: directcuteo

README.md

@@ -191,10 +191,10 @@ nvm install 20.11.1
 
 Download [Node.js v20.11.1](https://nodejs.org/) from the official website, open the installer and follow the prompts to complete the installation.
 
-### 2. Angular CLI v16.2.0
+### 2. Angular CLI v17.3.0
 
 ```bash
-npm install -g @angular/cli@16.2.0
+npm install -g @angular/cli@17.3.0
 ```
 
 ### 3. Installation

frontend/firebase.json

@@ -34,6 +34,24 @@
             "value": "require-corp"
           }
         ]
+      },
+      {
+        "source": "**/*.@(js|wasm|html)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
+      },
+      {
+        "source": "/",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
       }
     ]
   }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.8.20",
+  "version": "1.0.16",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -12,14 +12,14 @@
     "tests:headless": "npx cypress run --headless --config baseUrl=http://localhost:4200",
     "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest",
     "start:bundle": "npx http-server dist/frontend -p 4200",
-    "prebuild": "node scripts/update-webnode-version.js",
+    "prebuild": "node scripts/update-frontend-version.js",
     "dev:ssr": "ng run frontend:serve-ssr",
     "serve:ssr": "node dist/frontend/server/main.js",
     "build:ssr": "ng build && ng run frontend:server",
     "prerender": "ng run frontend:prerender",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser",
     "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js",
-    "deploy": "npm run build:prod && npm run copy-env && firebase deploy"
+    "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy"
   },
   "private": true,
   "dependencies": {
@@ -86,4 +86,4 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"
   }
-}
+}

frontend/scripts/download-webnode.sh

@@ -36,7 +36,7 @@ download_circuit_files() {
         "wrap-wrap-proving-key-transaction-snark-b9a01295c8cc9bda6d12142a581cd305_internal_vars.bin"
         "wrap-wrap-proving-key-transaction-snark-b9a01295c8cc9bda6d12142a581cd305_rows_rev.bin"
     )
-    DOWNLOAD_DIR="/Users/teofil/teo/mina/openmina/frontend/dist/frontend/browser/assets/webnode/circuit-blobs/$CIRCUITS_VERSION"
+    DOWNLOAD_DIR="../src/assets/webnode/circuit-blobs/$CIRCUITS_VERSION"
 
     mkdir -p "$DOWNLOAD_DIR"
 

frontend/scripts/update-frontend-version.js

@@ -0,0 +1,56 @@
+import {readFileSync, writeFileSync} from 'fs';
+import {platform, release} from 'os';
+
+console.log('⏳ Updating Deployment Info...');
+
+const packageJsonPath = './package.json';
+const packageJson = readFileSync(packageJsonPath, 'utf8');
+const packageJsonObj = JSON.parse(packageJson);
+const version = packageJsonObj.version.split('.');
+const newVersion = `${version[0]}.${version[1]}.${parseInt(version[2]) + 1}`;
+packageJsonObj.version = newVersion;
+writeFileSync(packageJsonPath, JSON.stringify(packageJsonObj, null, 2));
+
+const publicIp = await getPublicIpAddress();
+const deploymentInfo = {
+  dateUTC: new Date().toISOString(),
+  deviceIp: publicIp,
+  deviceOS: formatOS(platform()),
+  deviceOSVersion: release(),
+  version: newVersion,
+};
+
+const newDeploymentScript = `
+const deployment = {
+    dateUTC: '${deploymentInfo.dateUTC}',
+    deviceIp: '${deploymentInfo.deviceIp}',
+    deviceOS: '${deploymentInfo.deviceOS}',
+    deviceOSVersion: '${deploymentInfo.deviceOSVersion}',
+    version: '${deploymentInfo.version}',
+};
+window.deployment = deployment;
+`;
+const deploymentScriptPattern = /const deployment = \{[\s\S]*?\};[\s\S]*?window\.deployment = deployment;/;
+
+// Read and update index.html
+const indexPath = './src/index.html';
+let indexHtml = readFileSync(indexPath, 'utf8');
+indexHtml = indexHtml.replace(deploymentScriptPattern, newDeploymentScript.trim());
+
+writeFileSync(indexPath, indexHtml);
+
+console.log('✅ Updated Deployment Info!');
+
+async function getPublicIpAddress() {
+  const response = await fetch('https://api.ipify.org/');
+  return await response.text();
+}
+
+function formatOS(platform) {
+  const osMap = {
+    'darwin': 'macOS',
+    'win32': 'Windows',
+    'linux': 'Linux',
+  };
+  return osMap[platform] || platform;
+}

frontend/scripts/update-webnode-version.js

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { any, getMergedRoute, getWindow, MAX_WIDTH_700, MergedRoute, safelyExecuteInBrowser } from '@openmina/shared';
+import { any, getMergedRoute, getWindow, isBrowser, MAX_WIDTH_700, MergedRoute, safelyExecuteInBrowser } from '@openmina/shared';
 import { AppMenu } from '@shared/types/app/app-menu.type';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { AppSelectors } from '@app/app.state';
@@ -38,14 +38,16 @@ export class AppComponent extends StoreDispatcher implements OnInit {
         any(window).config = CONFIG;
         any(window).store = this.store;
       }
-    })
+    });
   }
 
   ngOnInit(): void {
-    const args = new URLSearchParams(window.location.search).get("a");
-    if (!!args) {
-      window.localStorage.setItem("webnodeArgs", args);
-    } 
+    if (isBrowser()) {
+      const args = new URLSearchParams(window.location.search).get('a');
+      if (!!args) {
+        localStorage.setItem('webnodeArgs', args);
+      }
+    }
 
     this.select(
       getMergedRoute,

frontend/src/app/app.component.ts

@@ -101,6 +101,9 @@ export class AppEffects extends BaseEffect {
           upload: 0,
           transactions: 0,
           snarks: 0,
+          producingBlockAt: null,
+          producingBlockGlobalSlot: null,
+          producingBlockStatus: null,
         },
       })),
     ));

frontend/src/app/app.effects.ts

@@ -39,6 +39,7 @@ import { Router } from '@angular/router';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getAnalytics, provideAnalytics, ScreenTrackingService } from '@angular/fire/analytics';
 import { getPerformance, providePerformance } from '@angular/fire/performance';
+import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component';
 
 registerLocaleData(localeFr, 'fr');
 registerLocaleData(localeEn, 'en');
@@ -159,6 +160,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     ReactiveFormsModule,
     CopyComponent,
     WebNodeLandingPageComponent,
+    BlockProductionPillComponent,
   ],
   providers: [
     THEME_PROVIDER,

frontend/src/app/app.module.ts

@@ -22,6 +22,9 @@ const initialState: AppState = {
     upload: 0,
     transactions: 0,
     snarks: 0,
+    producingBlockAt: null,
+    producingBlockGlobalSlot: null,
+    producingBlockStatus: null,
   },
 };