Frontend - Benchmarks - O1JS Wrapper and UI improvements and updates

frontend/replace-assertion.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const filePath = path.join(__dirname, 'src', 'assets', 'o1js', 'main.js');
+const filePath = path.join(__dirname, 'src', 'assets', 'o1js', 'o1jsWrapper.js');
 
 fs.readFile(filePath, 'utf8', (err, data) => {
   if (err) {

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

@@ -19,7 +19,8 @@
     color: $special-selected-alt-2-primary;
   }
 
-  &.error {
+  &.error,
+  &.rejected {
     background-color: $warn-container;
     color: $warn-primary;
   }

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

@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, filter, Observable, of, ReplaySubject, switchMap } from 'rxjs';
+import { BehaviorSubject, filter, map, Observable, 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';
+import { any } from '@openmina/shared';
 
 @Injectable()
 export class BenchmarksWalletsZkService {
 
-  private readonly updates = new BehaviorSubject<string>(null);
+  private readonly updates = new BehaviorSubject<{ step: string, duration: number }>(null);
   private readonly o1jsInterface: BehaviorSubject<any> = new BehaviorSubject<any>(null);
 
   readonly updates$ = this.updates.asObservable();
@@ -16,28 +17,34 @@ export class BenchmarksWalletsZkService {
     this.loadScript();
   }
 
-  sendZkApp(zkApps: BenchmarksZkapp[]): Observable<any> {
-    console.log('sendZkApp', zkApps);
-    // return of([]);
+  sendZkApp(zkApps: BenchmarksZkapp[]): Observable<Partial<{
+    zkApps: BenchmarksZkapp[],
+    error: Error
+  }>> {
     return this.o1jsInterface.pipe(
       filter(Boolean),
       switchMap((o1js: any) => {
         return fromPromise(o1js.sendZkApp(CONFIG.globalConfig?.graphQL, zkApps[0], this.updates));
       }),
+      map((response: any) => {
+        if (response.errors[0]) {
+          let error = new Error(response.errors[0]);
+          error.name = response.status;
+          return { error, zkApps };
+        }
+        return { zkApps };
+      }),
     );
   }
 
   private loadScript(): void {
+    if (any(window).o1jsWrapper) {
+      return;
+    }
     const script = document.createElement('script');
-    script.src = 'assets/o1js/main.js';
+    script.src = 'assets/o1js/o1jsWrapper.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');
-      }
+      this.o1jsInterface.next(any(window).o1jsWrapper.default);
     };
     document.body.appendChild(script);
   }

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

@@ -40,10 +40,10 @@
           <span class="mina-icon">arrow_drop_down</span>
         </div>
       </button>
+      <!--      <div class="tertiary" *ngIf="updates$ | async as updates">-->
+      <!--        {{ updates.step }} {{ updates.duration }}s-->
+      <!--      </div>-->
     </form>
-    <!--    <div class="tertiary pr-10 shrink-0">Sent Tx. overview: {{ successSentTransactions }}-->
-    <!--      success, {{ failSentTransactions }} failed-->
-    <!--    </div>-->
   </div>
 </ng-template>
 

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

@@ -36,6 +36,7 @@ import {
   BenchmarksWalletsToggleRandomWallet,
 } from '@benchmarks/wallets/benchmarks-wallets.actions';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { BenchmarksWalletsZkService } from '@benchmarks/wallets/benchmarks-wallets-zk.service';
 
 interface TransactionForm {
   batch: FormControl<number>;
@@ -52,10 +53,10 @@ interface TransactionForm {
 })
 export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection implements OnInit {
 
+  protected readonly updates$ = this.zkService.updates$;
+
   formGroup: FormGroup<TransactionForm>;
   streamSending: boolean;
-  successSentTransactions: number;
-  failSentTransactions: number;
   randomWallet: boolean;
   activeWallet: BenchmarksWallet;
   wallets: BenchmarksWallet[];
@@ -71,12 +72,12 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl
   constructor(private store: Store<MinaState>,
               private formBuilder: FormBuilder,
               private overlay: Overlay,
-              private viewContainerRef: ViewContainerRef) { super(); }
+              private viewContainerRef: ViewContainerRef,
+              private zkService: BenchmarksWalletsZkService) { super(); }
 
   ngOnInit(): void {
     this.initForm();
     this.listenToWalletsChanges();
-    this.listenToTransactionChanges();
     this.listenToStressingSendStreaming();
     this.listenToBatchChange();
     this.listenToFeeChange();
@@ -98,16 +99,6 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl
       });
   }
 
-  private listenToTransactionChanges(): void {
-    // this.store.select(selectBenchmarksSentTransactionsStats)
-    //   .pipe(untilDestroyed(this))
-    //   .subscribe(stats => {
-    //     this.successSentTransactions = stats.success;
-    //     this.failSentTransactions = stats.fail;
-    //     this.detect();
-    //   });
-  }
-
   private listenToBatchChange(): void {
     this.store.select(selectBenchmarksZkappsSendingBatch)
       .pipe(untilDestroyed(this))

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts

@@ -2,6 +2,7 @@ import { FeatureAction } from '@openmina/shared';
 import { BenchmarksWallet } from '@shared/types/benchmarks/wallets/benchmarks-wallet.type';
 import { BenchmarksWalletTransaction } from '@shared/types/benchmarks/wallets/benchmarks-wallet-transaction.type';
 import { MempoolTransaction } from '@shared/types/mempool/mempool-transaction.type';
+import { BenchmarksZkapp } from '@shared/types/benchmarks/transactions/benchmarks-zkapp.type';
 
 enum BenchmarksWalletsActionTypes {
   BENCHMARKS_WALLETS_CLOSE = 'BENCHMARKS_WALLETS_CLOSE',
@@ -96,7 +97,7 @@ export class BenchmarksWalletsSendZkApps implements BenchmarksWalletsAction {
 export class BenchmarksWalletsSendZkAppsSuccess implements BenchmarksWalletsAction {
   readonly type = BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS;
 
-  constructor(public payload: Partial<{ transactions: BenchmarksWalletTransaction[], error: Error }>) {}
+  constructor(public payload: Partial<{ zkApps: BenchmarksZkapp[], error: Error }>) {}
 }
 
 export class BenchmarksWalletsToggleRandomWallet implements BenchmarksWalletsAction {

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts

@@ -65,7 +65,7 @@ export class BenchmarksWalletsEffects extends MinaRustBaseEffect<BenchmarksWalle
     ));
 
     this.sendTxSuccess$ = createEffect(() => this.actions$.pipe(
-      ofType(BENCHMARKS_WALLETS_SEND_TX_SUCCESS),
+      ofType(BENCHMARKS_WALLETS_SEND_TX_SUCCESS, BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS),
       map(() => ({ type: BENCHMARKS_WALLETS_GET_WALLETS })),
     ));
 

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts

@@ -11,7 +11,7 @@ import {
   BENCHMARKS_WALLETS_SELECT_WALLET,
   BENCHMARKS_WALLETS_SEND_TX_SUCCESS,
   BENCHMARKS_WALLETS_SEND_TXS,
-  BENCHMARKS_WALLETS_SEND_ZKAPPS,
+  BENCHMARKS_WALLETS_SEND_ZKAPPS, BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS,
   BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET,
   BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS,
   BenchmarksWalletsActions,
@@ -60,7 +60,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
         wallets,
         blockSending: false,
         txSendingBatch: !hasValue(state.txSendingBatch) ? action.payload.length : state.txSendingBatch,
-        activeWallet: wallets[0],
+        activeWallet: state.activeWallet ?? wallets[0],
       };
     }
 
@@ -148,6 +148,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
           return {
             ...payment,
             privateKey: wallet.privateKey,
+            blockSending: true,
           };
         });
       }
@@ -183,10 +184,10 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
             ...w,
             lastTxCount: lastItem(transactionsFromThisWallet).memo.split(',')[1],
             lastTxStatus: action.payload.error ? BenchmarksWalletTransactionStatus.ERROR : BenchmarksWalletTransactionStatus.GENERATED,
-            successTx: w.successTx + (!action.payload.error ? transactionsFromThisWallet.length : 0),
-            failedTx: w.failedTx + (action.payload.error ? transactionsFromThisWallet.length : 0),
             lastTxTime: lastItem(transactionsFromThisWallet).dateTime,
             lastTxMemo: lastItem(transactionsFromThisWallet).memo.replace('S.T.', ''),
+            successTx: w.successTx + (!action.payload.error ? transactionsFromThisWallet.length : 0),
+            failedTx: w.failedTx + (action.payload.error ? transactionsFromThisWallet.length : 0),
             errorReason: action.payload.error?.message,
           };
         }),
@@ -197,6 +198,33 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
       };
     }
 
+    case BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS: {
+      return {
+        ...state,
+        zkAppsToSend: [],
+        wallets: state.wallets.map((w: BenchmarksWallet) => {
+          const zkAppsFromThisWallet = action.payload.zkApps.filter(tx => tx.payerPublicKey === w.publicKey);
+          if (!zkAppsFromThisWallet.length) {
+            return w;
+          }
+          return {
+            ...w,
+            lastTxCount: lastItem(zkAppsFromThisWallet).memo.split(',')[1],
+            lastTxStatus: action.payload.error?.name ?? BenchmarksWalletTransactionStatus.GENERATED,
+            lastTxTime: getTimeFromMemo(lastItem(zkAppsFromThisWallet).memo),
+            lastTxMemo: lastItem(zkAppsFromThisWallet).memo,
+            successTx: w.successTx + (!action.payload.error ? zkAppsFromThisWallet.length : 0),
+            failedTx: w.failedTx + (action.payload.error ? zkAppsFromThisWallet.length : 0),
+            errorReason: action.payload.error?.message,
+          };
+        }),
+        sentTransactions: {
+          success: state.sentTransactions.success + (!action.payload.error ? action.payload.zkApps.length : 0),
+          fail: state.sentTransactions.fail + (action.payload.error ? action.payload.zkApps.length : 0),
+        },
+      };
+    }
+
     case BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS: {
       const allTxs = [...action.payload.mempoolTxs, ...action.payload.includedTxs];
       return {
@@ -264,15 +292,6 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
     }
 
     case BENCHMARKS_WALLETS_SEND_ZKAPPS: {
-      //*
-      // export interface BenchmarksZkapp {
-      //   payerPublicKey: string;
-      //   payerPrivateKey: string;
-      //   fee: number;
-      //   nonce: string;
-      //   memo?: string;
-      //   accountUpdates: number;
-      // }*//
       let zkAppsToSend: BenchmarksZkapp[];
       if (state.randomWallet) {
         zkAppsToSend = state.wallets
@@ -287,7 +306,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
               fee: state.sendingFeeZkapps,
               nonce,
               memo,
-              accountUpdates: 1,
+              accountUpdates: 8,
             };
           });
       } else {
@@ -303,7 +322,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
             fee: state.sendingFeeZkapps,
             nonce: nonce.toString(),
             memo,
-            accountUpdates: 1,
+            accountUpdates: 8,
           };
           nonce++;
 
@@ -326,6 +345,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
             lastTxStatus: BenchmarksWalletTransactionStatus.SENDING,
           };
         }),
+        blockSending: true,
       };
     }
 

frontend/src/app/features/mempool/mempool.service.ts

@@ -43,17 +43,18 @@ export class MempoolService {
           } as MempoolTransaction;
         case MempoolTransactionResponseKind.ZkappCommand:
           const zkapp = tx.data[1] as ZkappCommand;
+          const zkMemo = decodeMemo(zkapp.memo);
           return {
             kind: MempoolTransactionKind.ZK_APP,
             txHash: tx.hash.join(''),
             sender: zkapp.fee_payer.body.public_key,
             fee: Number(zkapp.fee_payer.body.fee),
             amount: null,
             nonce: Number(zkapp.fee_payer.body.nonce),
-            memo: zkapp.memo,
+            memo: removeUnicodeEscapes(zkMemo),
             transactionData: tx.data[1],
-            sentFromStressingTool: false,
-            sentByMyBrowser: false,
+            sentFromStressingTool: zkMemo.includes('S.T.'),
+            sentByMyBrowser: zkMemo.includes(localStorage.getItem('browserId')),
           } as MempoolTransaction;
       }
     });

frontend/src/app/shared/types/benchmarks/wallets/benchmarks-wallet.type.ts

@@ -16,5 +16,6 @@ export enum BenchmarksWalletTransactionStatus {
   SENDING = 'sending',
   GENERATED = 'generated',
   ERROR = 'error',
+  REJECTED = 'rejected',
   INCLUDED = 'included',
 }