From 1e5d59ca98e0ddabad526befc5e6115d67ec4c99 Mon Sep 17 00:00:00 2001
From: ymekuria <ymekuria@gmail.com>
Date: Sun, 22 Sep 2024 22:39:49 -0700
Subject: [PATCH] feat(index.page.tsx): remove redundant state variables and
 improve state management by using useState hook for hasBeenSetup

---
 .../ui/src/pages/index.page.tsx                | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 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 2db0c6623..c84122ffa 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
@@ -20,6 +20,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 [displayText, setDisplayText] = useState('');
   const [transactionlink, setTransactionLink] = useState('');
 
@@ -29,7 +30,7 @@ export default function Home() {
   useEffect(() => {
     const setup = async () => {
       try {
-        if (!state.hasBeenSetup) {
+        if (!hasBeenSetup) {
           setDisplayText('Loading web worker...');
           console.log('Loading web worker...');
           const zkappWorkerClient = new ZkappWorkerClient();
@@ -83,12 +84,13 @@ export default function Home() {
           await zkappWorkerClient.fetchAccount(ZKAPP_ADDRESS);
           const currentNum = await zkappWorkerClient.getNum();
           console.log(`Current state in zkApp: ${currentNum.toString()}`);
-          setDisplayText('');
           
+          setHasBeenSetup(true);
           setHasWallet(true);
+          setDisplayText('');
+          
           setState({
             ...state,
-            hasBeenSetup: true,
             publicKeyBase58,
             zkappPublicKeyBase58: ZKAPP_ADDRESS,
             accountExists,
@@ -109,10 +111,10 @@ export default function Home() {
 
   useEffect(() => {
     const checkAccountExists = async () => {
-      console.log('inside', state.hasBeenSetup)
+      console.log('inside', hasBeenSetup)
       console.log('inside ae', state.accountExists)
     
-      if (state.hasBeenSetup && !state.accountExists) {
+      if (hasBeenSetup && !state.accountExists) {
         for (;;) {
           setDisplayText('Checking if fee payer account exists...');
           console.log('Checking if fee payer account exists...');
@@ -129,7 +131,7 @@ export default function Home() {
     };
 
     checkAccountExists();
-  }, [state.hasBeenSetup]);
+  }, [hasBeenSetup]);
 
   // -------------------------------------------------------
   // Send a transaction
@@ -223,7 +225,7 @@ export default function Home() {
   );
 
   let accountDoesNotExist;
-  if (state.hasBeenSetup && !state.accountExists) {
+  if (hasBeenSetup && !state.accountExists) {
     const faucetLink =
       'https://faucet.minaprotocol.com/?address=' + state.publicKey!.toBase58();
     accountDoesNotExist = (
@@ -237,7 +239,7 @@ export default function Home() {
   }
 
   let mainContent;
-  if (state.hasBeenSetup && state.accountExists) {
+  if (hasBeenSetup && state.accountExists) {
     mainContent = (
       <div style={{ justifyContent: 'center', alignItems: 'center' }}>
         <div className={styles.center} style={{ padding: 0 }}>