Merge pull request #24 from magiclabs/fix/dependency-issues

More dependency issues

frontend/src/components/MintNFTButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { requestMintNFT } from "@/lib/utils";
 import { AnimatedLoader } from "./AnimatedLoader";
 import { useUser } from "@/context/UserContext";
@@ -13,14 +13,16 @@ export default function MintNFTButton({
   const [loading, setLoading] = useState(false);
 
   // Function to update the user's balance
-  const updateBalance = async () => {
+  const updateBalance = useCallback(async () => {
     // Fetch the user's balance in wei
     const wei = await web3.eth.getBalance(user.address);
     // Convert the balance from wei to Ether
     const balance = web3.utils.fromWei(wei, "ether");
     // Update the user's balance in the state
-    setUser({ ...user, balance });
-  };
+    setUser((prev) => {
+      return { ...prev, balance };
+    });
+  }, [web3]);
 
   const handleMint = async () => {
     // Set loading state to true
@@ -40,10 +42,12 @@ export default function MintNFTButton({
       console.log("Mint complete!");
 
       // Update the user's state to refresh the collectibles and set the new token ID
-      setUser({
-        ...user,
-        refreshCollectibles: true,
-        tokenIdForModal: res.tokenId,
+      setUser((prev) => {
+        return {
+          ...prev,
+          refreshCollectibles: true,
+          tokenIdForModal: res.tokenId,
+        };
       });
 
       // Log balance update

frontend/src/components/Modal.tsx

@@ -19,9 +19,11 @@ export default function Modal() {
       if (!user?.tokenIdForModal) return;
 
       // Reset the tokenIdForModal in the user state to null
-      setUser({
-        ...user,
-        tokenIdForModal: null,
+      setUser((prev) => {
+        return {
+          ...prev,
+          tokenIdForModal: null,
+        };
       });
 
       try {
@@ -79,7 +81,9 @@ export default function Modal() {
               <button
                 className="btn btn-light mx-auto w-full"
                 type="button"
-                onClick={() => setShowModal(false)}
+                onClick={() => {
+                  setShowModal(false);
+                }}
               >
                 Close
               </button>

frontend/src/context/UserContext.tsx

@@ -47,22 +47,22 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
   const fetchAndUpdateNFTs = useCallback(async () => {
     if (!user?.address || !user?.refreshCollectibles) return;
 
-    setUser({ ...user, refreshCollectibles: true });
-
     try {
       const res = await fetchNFTs(user.address, contract);
 
       if (Array.isArray(res)) {
-        setUser({
-          ...user,
-          collectibles: res.reverse(),
-          refreshCollectibles: false,
+        setUser((prev) => {
+          return {
+            ...prev,
+            collectibles: res.reverse(),
+            refreshCollectibles: false,
+          };
         });
       }
     } catch (error) {
       console.error(error);
     }
-  }, [user?.address, user?.refreshCollectibles]);
+  }, [user?.address, user?.refreshCollectibles, setUser]);
 
   // Fetch user data when web3 instance is available
   useEffect(() => {
@@ -88,7 +88,7 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
   // Fetch and update NFTs when address or refreshCollectibles state changes
   useEffect(() => {
     fetchAndUpdateNFTs();
-  }, [user?.address]);
+  }, [user?.address, user?.refreshCollectibles]);
 
   return (
     <UserContext.Provider value={{ user, setUser }}>