Frontend - Remove Dashboard Resyncs (#785)

Author: directcuteo

.idea/vcs.xml

@@ -40,3 +40,7 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Open Mina
+/src/assets/webnode/pkg
+/src/assets/webnode/circuit-blobs

frontend/.gitignore

@@ -7,33 +7,40 @@ This is a simple Angular application that will help you to see the behaviour of
 ### 1. Node.js v20.11.1
 
 #### MacOS
+
 ```bash
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 brew install [email protected]
 ```
 
 #### Linux
+
 ```bash
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
 source ~/.bashrc
 nvm install 20.11.1
 ```
 
 #### Windows
+
 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
+
 ```bash
 npm install -g @angular/[email protected]
 ```
 
 ### 3. Installation
+
 Open a terminal and navigate to this project's root directory
 
 ```bash
 cd PROJECT_LOCATION/openmina/frontend
 ```
+
 Install the dependencies
+
 ```bash
 npm install
 ```
@@ -43,3 +50,24 @@ npm install
 ```bash
 npm start
 ```
+
+# Using O1JS wrapper
+
+as of now, o1js is not prepared to work with Angular, therefore we need to use the wrapper that is provided in the `src/assets/o1js` folder. This wrapper is a simple javascript webpack based application that will allow us to use the o1js library in our Angular application.
+
+How to use it:
+
+1. Open a terminal and navigate to the `src/assets/o1js` folder
+2. Install the dependencies
+
+```bash
+npm install
+```
+
+3. Build the wrapper
+
+```bash
+npm run build-o1jswrapper
+```
+
+4. That's it. Now you can use your code from o1js-wrapper inside the Angular application by using `BenchmarksWalletsZkService => o1jsInterface`

frontend/README.md

@@ -10,8 +10,7 @@
     "watch": "ng build --watch --configuration development",
     "tests": "npx cypress open --config baseUrl=http://localhost:4200",
     "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",
-    "replace-assertion": "node replace-assertion.js"
+    "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest"
   },
   "private": true,
   "dependencies": {
@@ -39,7 +38,6 @@
     "mathjs": "^12.3.0",
     "mina-signer": "^3.0.7",
     "ngx-json-viewer": "^3.2.1",
-    "o1js": "^1.8.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

frontend/package-lock.json

@@ -8,26 +8,6 @@ import { AppSelectors } from '@app/app.state';
 import { AppActions } from '@app/app.actions';
 import { Observable, timer } from 'rxjs';
 import { CONFIG } from '@shared/constants/config';
-// import { AccountUpdate, declareMethods, Field, method, Mina, PrivateKey, SmartContract, State, state } from 'o1js';
-//
-// export class Square extends SmartContract {
-//   @state(Field) num = State<Field>();
-//
-//   override init() {
-//     super.init();
-//     this.num.set(Field(3));
-//   }
-//
-//   // @method
-//   async update(square: Field) {
-//     const currentState = this.num.get();
-//     this.num.requireEquals(currentState);
-//     square.assertEquals(currentState.mul(currentState));
-//     this.num.set(square);
-//   }
-// }
-
-declare const $: any;
 
 @Component({
   selector: 'app-root',
@@ -38,7 +18,7 @@ declare const $: any;
 })
 export class AppComponent extends ManualDetection implements OnInit {
 
-  menu$: Observable<AppMenu> = this.store.select(AppSelectors.menu);
+  protected readonly menu$: Observable<AppMenu> = this.store.select(AppSelectors.menu);
   subMenusLength: number = 0;
   hideToolbar: boolean = CONFIG.hideToolbar;
 
@@ -51,108 +31,13 @@ export class AppComponent extends ManualDetection implements OnInit {
     }
   }
 
-  async ngOnInit() {
+  ngOnInit(): void {
     if (!this.hideToolbar && !CONFIG.hideNodeStats) {
       this.scheduleNodeUpdates();
     }
     this.listenToWindowResizing();
-    // console.log('Start');
-    // // this.startZK();
-    // console.log('Finish!');
-    // try {
-    //   await this.loadScript('assets/o1js/main.js');
-    //   // Now the script is loaded, and you can access the exported variable
-    //   if (typeof (window as any).$ !== 'undefined') {
-    //     const $ = (window as any).$;
-    //     console.log('Script loaded:', $);
-    //     // Use $ here
-    //     $.default.gql4();
-    //   } else {
-    //     console.error('$ is not defined after loading the script');
-    //   }
-    // } catch (error) {
-    //   console.error('Error loading script:', error);
-    // }
-  }
-
-  loadScript(scriptUrl: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = scriptUrl;
-      script.onload = () => resolve();
-      script.onerror = (error) => reject(error);
-      document.body.appendChild(script);
-    });
   }
 
-//   async startZK() {
-//     //@ts-ignore
-//     declareMethods(Square, { update: [Field] });
-//
-//     const useProof = false;
-//
-//     const Local = await Mina.LocalBlockchain({ proofsEnabled: useProof });
-//     Mina.setActiveInstance(Local);
-//
-//     const deployerAccount = Local.testAccounts[0];
-//     const deployerKey = deployerAccount.key;
-//     const senderAccount = Local.testAccounts[1];
-//     const senderKey = senderAccount.key;
-// // ----------------------------------------------------
-//
-// // Create a public/private key pair. The public key is your address and where you deploy the zkApp to
-//     const zkAppPrivateKey = PrivateKey.random();
-//     const zkAppAddress = zkAppPrivateKey.toPublicKey();
-//
-// // create an instance of Square - and deploy it to zkAppAddress
-//     const zkAppInstance = new Square(zkAppAddress);
-//     const deployTxn = await Mina.transaction(deployerAccount, async () => {
-//       AccountUpdate.fundNewAccount(deployerAccount);
-//       await zkAppInstance.deploy();
-//     });
-//     await deployTxn.sign([deployerKey, zkAppPrivateKey]).send();
-//
-// // get the initial state of Square after deployment
-//     const num0 = zkAppInstance.num.get();
-//     console.log('state after init:', num0.toString());
-//
-// // ----------------------------------------------------
-//
-//     const txn1 = await Mina.transaction(senderAccount, async () => {
-//       await zkAppInstance.update(Field(9));
-//     });
-//     await txn1.prove();
-//     await txn1.sign([senderKey]).send();
-//
-//     const num1 = zkAppInstance.num.get();
-//     console.log('state after txn1:', num1.toString());
-//
-// // ----------------------------------------------------
-//
-//     try {
-//       const txn2 = await Mina.transaction(senderAccount, async () => {
-//         await zkAppInstance.update(Field(75));
-//       });
-//       await txn2.prove();
-//       await txn2.sign([senderKey]).send();
-//     } catch (error: any) {
-//       console.log(error.message);
-//     }
-//     const num2 = zkAppInstance.num.get();
-//     console.log('state after txn2:', num2.toString());
-//
-// // ----------------------------------------------------
-//
-//     const txn3 = await Mina.transaction(senderAccount, async () => {
-//       await zkAppInstance.update(Field(81));
-//     });
-//     await txn3.prove();
-//     await txn3.sign([senderKey]).send();
-//
-//     const num3 = zkAppInstance.num.get();
-//     console.log('state after txn3:', num3.toString());
-//   }
-
   private scheduleNodeUpdates(): void {
     timer(1000, 5000).subscribe(() => this.store.dispatch(AppActions.getNodeDetails()));
   }