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 128cde739..3e34eb243 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 @@ -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); } };