chore: frontend linter errors

Author: colll78

frontend/src/app/[username]/index.tsx

@@ -12,15 +12,15 @@ import type { SelectChangeEvent } from '@mui/material/Select';
 //Local components
 import useStore from '../store/store'; 
 import { Accounts } from '../store/types';
-import { getWalletBalance, signAndSentTx, getProgrammableTokenAddress, areStakeScriptsRegistered, getFreezePolicyId, fetchPolicyHolders, deriveProgrammableAddress, getUserTotalProgrammableValue, PolicyTokenBalance, getPolicyIssuer } from '../utils/walletUtils';
+import { getWalletBalance, signAndSentTx, getProgrammableTokenAddress, areStakeScriptsRegistered, getFreezePolicyId, fetchPolicyHolders, getUserTotalProgrammableValue, PolicyTokenBalance, getPolicyIssuer } from '../utils/walletUtils';
 import WalletCard from '../components/Card';
 import WSTTextField from '../components/WSTTextField';
 import CopyTextField from '../components/CopyTextField';
 import WSTTable, { WSTTableRow } from '../components/WSTTable';
 import DemoEnvironmentContext from '../context/demoEnvironmentContext';
 
 export default function Profile() {
-  const { lucid, currentUser, mintAccount, changeAlertInfo, changeWalletAccountDetails, selectedTab } = useStore();
+  const { lucid, currentUser, changeAlertInfo, changeWalletAccountDetails, selectedTab } = useStore();
   const accounts = useStore((state) => state.accounts);
   const [overrideTx, setOverrideTx] = useState<boolean>(false);
   const [isRegistering, setIsRegistering] = useState<boolean>(false);
@@ -74,7 +74,7 @@ export default function Profile() {
     return () => {
       cancelled = true;
     };
-  }, [accounts.walletUser.hasRegisteredScripts, accounts.walletUser.regular_address, changeWalletAccountDetails, demoEnv, lucid]);
+  }, [accounts.walletUser, accounts.walletUser.hasRegisteredScripts, accounts.walletUser.regular_address, changeWalletAccountDetails, demoEnv, lucid]);
 
   const getUserAccountDetails = () => {
     switch (currentUser) {
@@ -212,7 +212,6 @@ export default function Profile() {
         const holders = await fetchPolicyHolders(demoEnv, selectedPolicy);
         const rows = await Promise.all(
           holders.map(async (holder) => {
-            let programmableAddress = '';
             return {
               regularAddress: '',
               programmableAddress: holder.address,

frontend/src/app/clientLayout.tsx

@@ -28,7 +28,7 @@ async function loadDemoEnvironment(): Promise<DemoEnvironment> {
 }
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
-    const { mintAccount, accounts, changeMintAccountDetails, changeWalletAccountDetails, setLucidInstance } = useStore();
+    const { accounts, changeMintAccountDetails, changeWalletAccountDetails, setLucidInstance } = useStore();
     const [demoEnv, setDemoEnv] = useState<DemoEnvironment>(previewEnv);
 
     useEffect(() => {
@@ -45,11 +45,12 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
             const walletATokenAddr = await getProgrammableTokenAddress(walletA.address);
             const walletBTokenAddr = await getProgrammableTokenAddress(walletB.address);
             const mintAuthorityTokenAddr = await getProgrammableTokenAddress(mintAuthorityWallet.address);
-    
+            const { mintAccount: currentMintAccount, accounts: currentAccounts } = useStore.getState();
+
             // Update Zustand store with the initialized wallet information
-            changeMintAccountDetails({ ...mintAccount, regular_address: mintAuthorityWallet.address, programmable_token_address: mintAuthorityTokenAddr});
-            changeWalletAccountDetails('alice', { ...accounts.alice, regular_address: walletA.address, programmable_token_address: walletATokenAddr},);
-            changeWalletAccountDetails('bob', { ...accounts.bob, regular_address: walletB.address, programmable_token_address: walletBTokenAddr});
+            changeMintAccountDetails({ ...currentMintAccount, regular_address: mintAuthorityWallet.address, programmable_token_address: mintAuthorityTokenAddr});
+            changeWalletAccountDetails('alice', { ...currentAccounts.alice, regular_address: walletA.address, programmable_token_address: walletATokenAddr},);
+            changeWalletAccountDetails('bob', { ...currentAccounts.bob, regular_address: walletB.address, programmable_token_address: walletBTokenAddr});
 
             const initialLucid = await makeLucid(demoEnv);
             setLucidInstance(initialLucid);
@@ -60,7 +61,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
         };
 
         fetchUserWallets();
-      },[]);
+      },[changeMintAccountDetails, changeWalletAccountDetails, setLucidInstance]);
 
   if(accounts.bob.regular_address === '') {
     return <div className="mainLoadingContainer">

frontend/src/app/components/ProfileSwitcher.tsx

@@ -1,20 +1,19 @@
-
-'use client'
-//React Imports
-import * as React from 'react';
-
-//Next.js Imports
-import { useRouter } from 'next/navigation';
-
-//MUI Imports
+
+'use client'
+//React Imports
+import * as React from 'react';
+
+//Next.js Imports
+import { useRouter } from 'next/navigation';
+
+//MUI Imports
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 //Local Imports
 import useStore from '../store/store'; 
-import { UserName } from '../store/types';
 import { selectLucidWallet, getWalletBalance, getProgrammableTokenAddress, areStakeScriptsRegistered, WalletType } from '../utils/walletUtils';
 import DemoEnvironmentContext from '../context/demoEnvironmentContext';
 
@@ -35,16 +34,16 @@ export default function ProfileSwitcher() {
       currentUser === 'Mint Authority'
         ? '/mint-authority'
         : `/${currentUser.toLowerCase().replace(/\s+/g, '-')}`;
-    const currentPath = window.location.pathname;
-
-    if (currentPath !== expectedPath) {
-      router.push(expectedPath);
-    }
-  }, [currentUser, router]);
-
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    setAnchorEl(event.currentTarget as HTMLElement);
-  };
+    const currentPath = window.location.pathname;
+
+    if (currentPath !== expectedPath) {
+      router.push(expectedPath);
+    }
+  }, [currentUser, router]);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget as HTMLElement);
+  };
 
   const handleClose = () => {
     setAnchorEl(null);

frontend/src/app/mint-authority/page.tsx

@@ -1,6 +1,6 @@
-'use client';
-//React imports
-import React, { useContext, useEffect, useState } from 'react';
+'use client';
+//React imports
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 //Axios imports
 import axios from 'axios';
@@ -46,24 +46,24 @@ export default function Home() {
     changeUserAccount('Mint Authority');
   }, [changeUserAccount]);
 
+  const fetchUserDetails = useCallback(async () => {
+    const mintBalance = await getWalletBalance(demoEnv, mintAccount.regular_address);
+    const userABalance = await getWalletBalance(demoEnv, accounts.alice.regular_address);
+    const userBBalance = await getWalletBalance(demoEnv, accounts.bob.regular_address);
+
+    // Update Zustand store with the initialized wallet information
+    await changeMintAccountDetails({ ...mintAccount, balance: mintBalance});
+    await changeWalletAccountDetails('alice', { ...accounts.alice, balance: userABalance});
+    await changeWalletAccountDetails('bob', { ...accounts.bob, balance: userBBalance});
+  }, [accounts.alice, accounts.bob, changeMintAccountDetails, changeWalletAccountDetails, demoEnv, mintAccount]);
+
   useEffect(() => {
     const initialize = async () => {
       await fetchUserDetails();
       await fetchBlacklistStatus();
     };
     initialize();
-  }, [demoEnv]);
-
-  const fetchUserDetails = async () => {
-    const mintBalance = await getWalletBalance(demoEnv, mintAccount.regular_address);
-    const userABalance = await getWalletBalance(demoEnv, accounts.alice.regular_address);
-    const userBBalance = await getWalletBalance(demoEnv, accounts.bob.regular_address);
-
-    // Update Zustand store with the initialized wallet information
-    await changeMintAccountDetails({ ...mintAccount, balance: mintBalance});
-    await changeWalletAccountDetails('alice', { ...accounts.alice, balance: userABalance});
-    await changeWalletAccountDetails('bob', { ...accounts.bob, balance: userBBalance});
-  };
+  }, [demoEnv, fetchUserDetails]);
 
   const fetchBlacklistStatus = async () => {
     const { accounts, changeWalletAccountDetails, currentUser, mintAccount } = useStore.getState();