From 600cbe724e73ffecd88f356c0c351a6f5e725c19 Mon Sep 17 00:00:00 2001
From: ymekuria <ymekuria@gmail.com>
Date: Sun, 22 Sep 2024 23:01:37 -0700
Subject: [PATCH] feat(index.page.tsx): remove redundant state variables and
 improve state management by using useState hook for accountExists

---
 .../ui/src/pages/index.page.tsx                  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 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 c84122ffa..b9559063c 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
@@ -21,6 +21,7 @@ export default function Home() {
   const [zkappWorkerClient, setZkappWorkerClient] = useState<null | ZkappWorkerClient>(null);
   const [hasWallet, setHasWallet] = useState<null | boolean>(null);
   const [hasBeenSetup, setHasBeenSetup] = useState(false);
+  const [accountExists, setAccountExists] = useState(false);
   const [displayText, setDisplayText] = useState('');
   const [transactionlink, setTransactionLink] = useState('');
 
@@ -65,7 +66,8 @@ export default function Home() {
           const res = await zkappWorkerClient.fetchAccount(
           publicKeyBase58,
           );
-          const accountExists = res.error == null;
+          const accountExists = res.error === null;
+          setAccountExists(accountExists);
 
           await zkappWorkerClient.loadContract();
 
@@ -93,7 +95,6 @@ export default function Home() {
             ...state,
             publicKeyBase58,
             zkappPublicKeyBase58: ZKAPP_ADDRESS,
-            accountExists,
             currentNum,
           });
         }
@@ -112,9 +113,9 @@ export default function Home() {
   useEffect(() => {
     const checkAccountExists = async () => {
       console.log('inside', hasBeenSetup)
-      console.log('inside ae', state.accountExists)
+      console.log('inside ae', accountExists)
     
-      if (hasBeenSetup && !state.accountExists) {
+      if (hasBeenSetup && !accountExists) {
         for (;;) {
           setDisplayText('Checking if fee payer account exists...');
           console.log('Checking if fee payer account exists...');
@@ -122,11 +123,12 @@ export default function Home() {
           console.log('response', res)
           const accountExists = res.error == null;
           if (accountExists) {
+            setAccountExists(true);
             break;
           }
           await new Promise((resolve) => setTimeout(resolve, 5000));
         }
-        setState({ ...state, accountExists: true });
+        
       }
     };
 
@@ -225,7 +227,7 @@ export default function Home() {
   );
 
   let accountDoesNotExist;
-  if (hasBeenSetup && !state.accountExists) {
+  if (hasBeenSetup && !accountExists) {
     const faucetLink =
       'https://faucet.minaprotocol.com/?address=' + state.publicKey!.toBase58();
     accountDoesNotExist = (
@@ -239,7 +241,7 @@ export default function Home() {
   }
 
   let mainContent;
-  if (hasBeenSetup && state.accountExists) {
+  if (hasBeenSetup && accountExists) {
     mainContent = (
       <div style={{ justifyContent: 'center', alignItems: 'center' }}>
         <div className={styles.center} style={{ padding: 0 }}>