Frontend - o1js integration - working ZK App

frontend/package.json

@@ -10,7 +10,8 @@
     "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"
+    "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"
   },
   "private": true,
   "dependencies": {
@@ -38,7 +39,7 @@
     "mathjs": "^12.3.0",
     "mina-signer": "^3.0.7",
     "ngx-json-viewer": "^3.2.1",
-    "o1js": "^1.7.0",
+    "o1js": "^1.8.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
@@ -62,6 +63,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.1.3",
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"

frontend/replace-assertion.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+const filePath = path.join(__dirname, 'src', 'assets', 'o1js', 'main.js');
+
+fs.readFile(filePath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading file:', err);
+    process.exit(1);
+  }
+
+  console.log('Replacement already done.');
+  const updatedContent = data.replace(
+    /if\(!g\)throw Error/g,
+    'if(!g)new Error'
+  );
+
+  fs.writeFile(filePath, updatedContent, 'utf8', (err) => {
+    if (err) {
+      console.error('Error writing file:', err);
+      process.exit(1);
+    }
+    console.log('Replacement completed successfully.');
+  });
+});

frontend/src/app/app.component.ts

@@ -9,7 +9,7 @@ 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>();
 //
@@ -27,6 +27,8 @@ import { CONFIG } from '@shared/constants/config';
 //   }
 // }
 
+declare const $: any;
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -49,16 +51,39 @@ export class AppComponent extends ManualDetection implements OnInit {
     }
   }
 
-  ngOnInit(): void {
+  async ngOnInit() {
     if (!this.hideToolbar && !CONFIG.hideNodeStats) {
       this.scheduleNodeUpdates();
     }
     this.listenToWindowResizing();
     // console.log('Start');
-    // this.startZK();
+    // // 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

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html

@@ -4,7 +4,7 @@
     <form [formGroup]="formGroup" class="h-xl fx-row-vert-cent pl-12 pr-12 secondary shrink-0">
       <button (click)="send()"
               class="live-button active"
-              [class.disabled]="streamSending">Send
+              [class.disabled]="streamSending">Send Payment
       </button>
       <input type="number" class="mina-input border-rad-4 mr-8 ml-8 text-center" formControlName="batch">
       <div>transactions with</div>

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss

@@ -1,5 +1,9 @@
 @import 'openmina';
 
+.live-button {
+  width: 110px;
+}
+
 .mina-input[formcontrolname='batch'] {
   width: 55px;
 }

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, filter, Observable, of, ReplaySubject, switchMap } from 'rxjs';
+import { BenchmarksZkapp } from '@shared/types/benchmarks/transactions/benchmarks-zkapp.type';
+import { fromPromise } from 'rxjs/internal/observable/innerFrom';
+import { CONFIG } from '@shared/constants/config';
+
+@Injectable()
+export class BenchmarksWalletsZkService {
+
+  private readonly updates = new BehaviorSubject<string>(null);
+  private readonly o1jsInterface: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+
+  readonly updates$ = this.updates.asObservable();
+
+  loadO1js(): void {
+    this.loadScript();
+  }
+
+  sendZkApp(zkApps: BenchmarksZkapp[]): Observable<any> {
+    console.log('sendZkApp', zkApps);
+    // return of([]);
+    return this.o1jsInterface.pipe(
+      filter(Boolean),
+      switchMap((o1js: any) => {
+        return fromPromise(o1js.sendZkApp(CONFIG.globalConfig?.graphQL, zkApps[0], this.updates));
+      }),
+    );
+  }
+
+  private loadScript(): void {
+    const script = document.createElement('script');
+    script.src = 'assets/o1js/main.js';
+    script.onload = () => {
+      if (typeof (window as any).$ !== 'undefined') {
+        const $ = (window as any).$;
+        console.log('Script loaded:', $);
+        this.o1jsInterface.next($.default);
+      } else {
+        console.error('$ is not defined after loading the script');
+      }
+    };
+    document.body.appendChild(script);
+  }
+}

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html

@@ -0,0 +1,66 @@
+<mina-horizontal-menu [template]="template"></mina-horizontal-menu>
+<ng-template #template>
+  <div class="fx-row-vert-cent flex-between w-100">
+    <form [formGroup]="formGroup" class="h-xl fx-row-vert-cent pl-12 pr-12 secondary shrink-0">
+      <button (click)="send()"
+              class="live-button active"
+              [class.disabled]="streamSending">Send ZK App
+      </button>
+      <input type="number" class="mina-input border-rad-4 mr-8 ml-8 text-center" formControlName="batch">
+      <div>transactions with</div>
+      <input type="number" class="mina-input border-rad-4 mr-8 ml-8 text-center" formControlName="fee">
+      <div>MINA fee from</div>
+
+      <div class="button-group fx-row-vert-cent ml-5 mr-16">
+        <button class="fx-row-vert-cent pl-12 pr-12 lh-md"
+                [ngClass]="randomWallet ? 'btn-selected' : 'btn-primary'"
+                [tooltip]="'Send ZK Apps from <b>random</b> senders'"
+                [html]="true"
+                [maxWidth]="1000"
+                (click)="!randomWallet ? toggleRandomWallet() : null">Random Senders
+        </button>
+        <button class="fx-row-vert-cent pl-12 pr-12 lh-md"
+                [ngClass]="!randomWallet ? 'btn-selected' : 'btn-primary'"
+                [tooltip]="'Send ZK Apps from <b>specific</b> sender'"
+                [html]="true"
+                [maxWidth]="1000"
+                (click)="randomWallet ? toggleRandomWallet() : null">Specific Sender
+        </button>
+      </div>
+      <button class="btn-selected h-sm fx-row-vert-cent flex-between mr-5"
+              *ngIf="!randomWallet"
+              #dropdownTrigger
+              (click)="openDropdown($event)">
+        <div class="fx-row-vert-cent">
+          <span class="mina-icon f-20 mr-5">account_balance_wallet</span>
+          <span *ngIf="!activeWallet" class="selected-secondary">Loading wallet..</span>
+        </div>
+        <div class="fx-row-vert-cent">
+          <span class="selected-secondary monospace">{{ activeWallet?.publicKey | truncateMid }}</span>
+          <span class="mina-icon">arrow_drop_down</span>
+        </div>
+      </button>
+    </form>
+    <!--    <div class="tertiary pr-10 shrink-0">Sent Tx. overview: {{ successSentTransactions }}-->
+    <!--      success, {{ failSentTransactions }} failed-->
+    <!--    </div>-->
+  </div>
+</ng-template>
+
+<ng-template #walletDropdown>
+  <div class="dropdown border-rad-4 popup-box-shadow-weak flex-column border bg-surface overflow-hidden"
+       (clickOutside)="detachOverlay()">
+    <div class="flex-column h-100 p-10">
+      <cdk-virtual-scroll-viewport [itemSize]="24" class="h-100 w-100">
+        <div *cdkVirtualFor="let wallet of wallets"
+             class="dropdown-item fx-row-vert-cent flex-between pointer pl-8 pr-8 border-rad-4 mb-5"
+             [class.active]="activeWallet.publicKey === wallet.publicKey"
+             (click)="changeWallet(wallet)">
+          <span class="mina-icon f-20">check_small</span>
+          <span class="text-right pr-12 text-nowrap">{{ wallet.minaTokens | number:'1.0-3':'fr' }} MINA</span>
+          <span class="monospace text-right">{{ wallet.publicKey | truncateMid }}</span>
+        </div>
+      </cdk-virtual-scroll-viewport>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss

@@ -0,0 +1,77 @@
+@import 'openmina';
+
+.live-button {
+  width: 110px;
+}
+
+.mina-input[formcontrolname='batch'] {
+  width: 55px;
+}
+
+.mina-input[formcontrolname='fee'] {
+  width: 55px;
+}
+
+.button-group {
+  button:first-child {
+    margin-right: 2px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.dropdown {
+  box-sizing: border-box;
+  max-height: 300px;
+  min-width: 325px;
+
+  .dropdown-item {
+    display: grid;
+    height: 24px;
+    grid-template-columns: 18px 1fr 125px;
+    color: $base-tertiary;
+    box-sizing: border-box;
+
+    span:nth-child(2), span:nth-child(4):hover {
+      color: $base-primary;
+    }
+
+    &:hover:not(.active) {
+      background-color: $base-container;
+    }
+
+    &.active {
+      background-color: $selected-container;
+
+      span:nth-child(1), span:nth-child(2), span:nth-child(4):hover {
+        color: $selected-primary;
+      }
+
+      span:nth-child(3), span:nth-child(4) {
+        color: $selected-secondary;
+      }
+    }
+
+    &:not(.active) .mina-icon {
+      color: $base-divider;
+    }
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @media (max-width: 768px) {
+    width: 100vw;
+    max-height: calc(100vh - 44px - 44px - 56px);
+
+    .dropdown-item {
+      height: 48px !important;
+    }
+  }
+}