Frontend - Adapt frontend to new API changes (#726)

Frontend - Adapt frontend to new API changes

Author: directcuteo

frontend/angular.json

@@ -29,8 +29,11 @@
       "prefix": "mina",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            },
             "outputPath": "dist/frontend",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -123,7 +126,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "configurations": {
             "production": {
               "browserTarget": "frontend:build:production"

frontend/package-lock.json

@@ -31,12 +31,14 @@
     "@ngrx/store": "^16.2.0",
     "@openmina/shared": "^0.102.0",
     "base-x": "^5.0.0",
+    "bs58check": "^4.0.0",
     "buffer": "^6.0.3",
     "d3": "^7.8.4",
     "eigen": "^0.2.2",
     "mathjs": "^12.3.0",
     "mina-signer": "^3.0.7",
     "ngx-json-viewer": "^3.2.1",
+    "o1js": "^1.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

frontend/package.json

@@ -8,6 +8,24 @@ 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);
+//   }
+// }
 
 @Component({
   selector: 'app-root',
@@ -36,8 +54,80 @@ export class AppComponent extends ManualDetection implements OnInit {
       this.scheduleNodeUpdates();
     }
     this.listenToWindowResizing();
+    // console.log('Start');
+    // this.startZK();
+    // console.log('Finish!');
   }
 
+
+//   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()));
   }

frontend/src/app/app.component.ts

@@ -12,6 +12,9 @@ import { getFirstFeature, isFeatureEnabled } from '@shared/constants/config';
 import { RustService } from '@core/services/rust.service';
 import { BaseEffect } from '@shared/base-classes/mina-rust-base.effect';
 import { WebNodeService } from '@core/services/web-node.service';
+import { catchErrorAndRepeat2 } from '@shared/constants/store-functions';
+import { MinaErrorType } from '@shared/types/error-preview/mina-error-type.enum';
+import { AppNodeStatus } from '@shared/types/app/app-node-details.type';
 
 const INIT_EFFECTS = '@ngrx/effects/init';
 
@@ -82,6 +85,18 @@ export class AppEffects extends BaseEffect {
       switchMap(() => this.appService.getActiveNodeDetails()),
       tap(() => this.requestInProgress = false),
       map(details => AppActions.getNodeDetailsSuccess({ details })),
+      catchErrorAndRepeat2(MinaErrorType.GENERIC, AppActions.getNodeDetailsSuccess({
+        details: {
+          status: AppNodeStatus.OFFLINE,
+          blockHeight: null,
+          blockTime: null,
+          peers: 0,
+          download: 0,
+          upload: 0,
+          transactions: 0,
+          snarks: 0,
+        },
+      })),
     ));
   }
 }

frontend/src/app/app.effects.ts

@@ -5,6 +5,7 @@ import { AppComponent } from './app.component';
 import { AppRouting } from './app.routing';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import {
+  CopyComponent,
   GlobalErrorHandlerService,
   HorizontalMenuComponent,
   NgrxRouterStoreModule,
@@ -79,6 +80,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     OpenminaEagerSharedModule,
     HorizontalMenuComponent,
     ReactiveFormsModule,
+    CopyComponent,
   ],
   providers: [
     THEME_PROVIDER,

frontend/src/app/app.module.ts

@@ -68,6 +68,11 @@ const routes: Routes = [
     loadChildren: () => import('./features/benchmarks/benchmarks.module').then(m => m.BenchmarksModule),
     title: BENCHMARKS_TITLE,
   },
+  {
+    path: 'zk',
+    loadChildren: () => import('./features/zk/zk.module').then(m => m.ZkModule),
+    title: BENCHMARKS_TITLE,
+  },
   {
     path: '**',
     redirectTo: getFirstFeature(),