feat(index.page.tsx):use try/catch block in setup function tofor erro…

…r handling and improve readability and maintainability of the code
o1-labs · Sep 22, 2024 · cb33127 · cb33127
1 parent 0a5ca19
commit cb33127
Showing 1 changed file with 58 additions and 53 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
@@ -29,69 +29,74 @@ export default function Home() {
   useEffect(() => {
 
     async function setup() {
-      if (!state.hasBeenSetup) {
-        setDisplayText('Loading web worker...');
-        console.log('Loading web worker...');
-        const zkappWorkerClient = new ZkappWorkerClient();
-        await new Promise((resolve) => setTimeout(resolve, 5000));
-
-        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()}`);
+      try {
+        if (!state.hasBeenSetup) {
+          setDisplayText('Loading web worker...');
+          console.log('Loading web worker...');
+          const zkappWorkerClient = new ZkappWorkerClient();
+          await new Promise((resolve) => setTimeout(resolve, 5000));
 
-        setDisplayText('Checking if fee payer account exists...');
-        console.log('Checking if fee payer account exists...');
+          setDisplayText('Done loading web worker');
+          console.log('Done loading web worker');
 
-        console.log(`Public key to load: ${publicKeyBase58}`);
+          await zkappWorkerClient.setActiveInstanceToDevnet();
 
-        const res = await zkappWorkerClient.fetchAccount(
-         publicKeyBase58,
-        );
-        const accountExists = res.error == null;
+          const mina = (window as any).mina;
 
-        await zkappWorkerClient.loadContract();
+          if (mina == null) {
+            setState({ ...state, hasWallet: false });
+            return;
+          }
 
-        console.log('Compiling zkApp...');
-        setDisplayText('Compiling zkApp...');
-        await zkappWorkerClient.compileContract();
-        console.log('zkApp compiled');
-        setDisplayText('zkApp compiled...');
+          const publicKeyBase58: string = (await mina.requestAccounts())[0];
+          const publicKey = PublicKey.fromBase58(publicKeyBase58);
 
-        const zkappPublicKey = PublicKey.fromBase58(ZKAPP_ADDRESS);
+          console.log(`Using key:${publicKey.toBase58()}`);
+          setDisplayText(`Using key:${publicKey.toBase58()}`);
 
-        await zkappWorkerClient.initZkappInstance(ZKAPP_ADDRESS);
+          setDisplayText('Checking if fee payer account exists...');
+          console.log('Checking if fee payer account exists...');
 
-        console.log('Getting zkApp state...');
-        setDisplayText('Getting zkApp state...');
-        await zkappWorkerClient.fetchAccount(ZKAPP_ADDRESS);
-        const currentNum = await zkappWorkerClient.getNum();
-        console.log(`Current state in zkApp: ${currentNum.toString()}`);
-        setDisplayText('');
+          console.log(`Public key to load: ${publicKeyBase58}`);
 
-        setState({
-          ...state,
-          zkappWorkerClient,
-          hasWallet: true,
-          hasBeenSetup: true,
+          const res = await zkappWorkerClient.fetchAccount(
           publicKeyBase58,
-          zkappPublicKeyBase58: ZKAPP_ADDRESS,
-          accountExists,
-          currentNum,
-        });
+          );
+          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(ZKAPP_ADDRESS);
+
+          console.log('Getting zkApp state...');
+          setDisplayText('Getting zkApp state...');
+          await zkappWorkerClient.fetchAccount(ZKAPP_ADDRESS);
+          const currentNum = await zkappWorkerClient.getNum();
+          console.log(`Current state in zkApp: ${currentNum.toString()}`);
+          setDisplayText('');
+
+          setState({
+            ...state,
+            zkappWorkerClient,
+            hasWallet: true,
+            hasBeenSetup: true,
+            publicKeyBase58,
+            zkappPublicKeyBase58: ZKAPP_ADDRESS,
+            accountExists,
+            currentNum,
+          });
+        }
+      } catch (error: any) {
+        setDisplayText(`Error during setup: ${error.message}`);
+        console.error('Error during setup:', error);
       }
     };