From e883abe419128372cb4af7b0dbda1a65c9dc1eda Mon Sep 17 00:00:00 2001
From: ymekuria <ymekuria@gmail.com>
Date: Thu, 19 Sep 2024 15:25:32 -0700
Subject: [PATCH] feat(index.page.tsx): instantiate ZkappWorkerClient

---
 .../ui/src/pages/index.page.tsx               | 151 +++++++++---------
 1 file changed, 77 insertions(+), 74 deletions(-)

diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx b/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx
index 64a4a9da6..66360901e 100644
--- a/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx
+++ b/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx
@@ -27,81 +27,84 @@ export default function Home() {
   // Do Setup
 
   useEffect(() => {
-    async function timeout(seconds: number): Promise<void> {
-      return new Promise<void>((resolve) => {
-        setTimeout(() => {
-          resolve();
-        }, seconds * 1000);
-      });
-    }
-
-        const zkappWorkerClient = new ZkappWorkerClient();
+    // async function timeout(seconds: number): Promise<void> {
+    //   return new Promise<void>((resolve) => {
+    //     setTimeout(() => {
+    //       resolve();
+    //     }, seconds * 1000);
+    //   });
+    // }
+
+    const zkappWorkerClient = new ZkappWorkerClient();
     setState(prev => ({ ...prev, zkappWorkerClient }));
-
-    (async () => {
-      if (!state.hasBeenSetup) {
-        setDisplayText('Loading web worker...');
-        console.log('Loading web worker...');
-        const zkappWorkerClient = new ZkappWorkerClient();
-        await timeout(5);
-
-        setDisplayText('Done loading web worker');
-        console.log('Done loading web worker');
-
-        await zkappWorkerClient.setActiveInstanceToDevnet();
-
-        const mina = (window as any).mina;
-
-        if (mina == null) {
-          setState({ ...state, hasWallet: false });
-          return;
-        }
-
-        const publicKeyBase58: string = (await mina.requestAccounts())[0];
-        const publicKey = PublicKey.fromBase58(publicKeyBase58);
-
-        console.log(`Using key:${publicKey.toBase58()}`);
-        setDisplayText(`Using key:${publicKey.toBase58()}`);
-
-        setDisplayText('Checking if fee payer account exists...');
-        console.log('Checking if fee payer account exists...');
-
-        const res = await zkappWorkerClient.fetchAccount({
-          publicKey: publicKey!,
-        });
-        const accountExists = res.error == null;
-
-        await zkappWorkerClient.loadContract();
-
-        console.log('Compiling zkApp...');
-        setDisplayText('Compiling zkApp...');
-        await zkappWorkerClient.compileContract();
-        console.log('zkApp compiled');
-        setDisplayText('zkApp compiled...');
-
-        const zkappPublicKey = PublicKey.fromBase58(ZKAPP_ADDRESS);
-
-        await zkappWorkerClient.initZkappInstance(zkappPublicKey);
-
-        console.log('Getting zkApp state...');
-        setDisplayText('Getting zkApp state...');
-        await zkappWorkerClient.fetchAccount({ publicKey: zkappPublicKey });
-        const currentNum = await zkappWorkerClient.getNum();
-        console.log(`Current state in zkApp: ${currentNum.toString()}`);
-        setDisplayText('');
-
-        setState({
-          ...state,
-          zkappWorkerClient,
-          hasWallet: true,
-          hasBeenSetup: true,
-          publicKey,
-          zkappPublicKey,
-          accountExists,
-          currentNum,
-        });
-      }
-    })();
+        
+    const setup = async () => {
+      
+    };
+    // (async () => {
+    //   if (!state.hasBeenSetup) {
+    //     setDisplayText('Loading web worker...');
+    //     console.log('Loading web worker...');
+    //     const zkappWorkerClient = new ZkappWorkerClient();
+    //     await timeout(5);
+
+    //     setDisplayText('Done loading web worker');
+    //     console.log('Done loading web worker');
+
+    //     await zkappWorkerClient.setActiveInstanceToDevnet();
+
+    //     const mina = (window as any).mina;
+
+    //     if (mina == null) {
+    //       setState({ ...state, hasWallet: false });
+    //       return;
+    //     }
+
+    //     const publicKeyBase58: string = (await mina.requestAccounts())[0];
+    //     const publicKey = PublicKey.fromBase58(publicKeyBase58);
+
+    //     console.log(`Using key:${publicKey.toBase58()}`);
+    //     setDisplayText(`Using key:${publicKey.toBase58()}`);
+
+    //     setDisplayText('Checking if fee payer account exists...');
+    //     console.log('Checking if fee payer account exists...');
+
+    //     const res = await zkappWorkerClient.fetchAccount({
+    //       publicKey: publicKey!,
+    //     });
+    //     const accountExists = res.error == null;
+
+    //     await zkappWorkerClient.loadContract();
+
+    //     console.log('Compiling zkApp...');
+    //     setDisplayText('Compiling zkApp...');
+    //     await zkappWorkerClient.compileContract();
+    //     console.log('zkApp compiled');
+    //     setDisplayText('zkApp compiled...');
+
+    //     const zkappPublicKey = PublicKey.fromBase58(ZKAPP_ADDRESS);
+
+    //     await zkappWorkerClient.initZkappInstance(zkappPublicKey);
+
+    //     console.log('Getting zkApp state...');
+    //     setDisplayText('Getting zkApp state...');
+    //     await zkappWorkerClient.fetchAccount({ publicKey: zkappPublicKey });
+    //     const currentNum = await zkappWorkerClient.getNum();
+    //     console.log(`Current state in zkApp: ${currentNum.toString()}`);
+    //     setDisplayText('');
+
+    //     setState({
+    //       ...state,
+    //       zkappWorkerClient,
+    //       hasWallet: true,
+    //       hasBeenSetup: true,
+    //       publicKey,
+    //       zkappPublicKey,
+    //       accountExists,
+    //       currentNum,
+    //     });
+    //   }
+    // })();
   }, []);
 
   // -------------------------------------------------------