Register working

Author: extropyCoder

contracts/deployments.json

@@ -8,7 +8,7 @@
   "11155111": {
     "name": "sepolia",
     "contracts": {
-      "Lottery": "0x783444D9F6bB3b9e34393A401aC8E824E016Ed43"
+      "Lottery": "0x4789F8F8129be6ecc77863AEE18Ba364B3083eE4"
     }
   },
   "31337": {

src/App.tsx

@@ -23,7 +23,7 @@ function App() {
   const { data: teamCount, refetch: refetchTeamCount } = useGetTeamCount();
 
   const fetchAllTeams = useCallback(async () => {
-    // --- FIX: Only fetch if connected and teamCount is a valid number ---
+    // Only fetch if connected and teamCount is a valid number
     if (!isConnected || typeof teamCount !== 'bigint' || !chain) {
       setTeams([]); // Clear teams if not connected or no data
       return;
@@ -68,14 +68,19 @@ function App() {
     }
   }, [teamCount, chain, isConnected, wagmiConfig]);
 
+  // Force refetch function
+  const forceRefetch = useCallback(() => {
+    refetchTeamCount();
+    setRefetchTrigger(prev => prev + 1);
+  }, [refetchTeamCount]);
 
-  // Refetch teams when the dependencies of fetchAllTeams change
+  // Refetch teams when the dependencies change
   useEffect(() => {
     fetchAllTeams();
   }, [fetchAllTeams]);
 
   // Use the event hook to trigger a refetch
-  useLotteryEvents(fetchAllTeams);
+  useLotteryEvents(forceRefetch);
 
   return (
     <div className="app-container">

src/components/MakeGuess.tsx

@@ -14,6 +14,7 @@ export function MakeGuess() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    handleGuessClick();
   };
 
   const handleGuessClick = () => {
@@ -25,9 +26,9 @@ export function MakeGuess() {
     }
 
     if (teamAddress && guess) {
-      makeGuess(teamAddress, parseInt(guess, 10));
+      makeGuess(teamAddress as `0x${string}`, parseInt(guess, 10));
     } else {
-        setFormError('All fields are required.');
+      setFormError('All fields are required.');
     }
   };
 
@@ -57,7 +58,7 @@ export function MakeGuess() {
             required
           />
         </div>
-        <button type="button" onClick={handleGuessClick} disabled={isLoading} className="button">
+        <button type="submit" disabled={isLoading} className="button">
           {isLoading ? 'Submitting...' : 'Make a Guess'}
         </button>
       </form>

src/components/RegisterTeam.tsx

@@ -15,6 +15,7 @@ export function RegisterTeam() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    handleRegisterClick();
   };
 
   const handleRegisterClick = () => {
@@ -26,7 +27,7 @@ export function RegisterTeam() {
     }
 
     if (teamName && walletAddress && password) {
-      registerTeam(walletAddress, teamName, password);
+      registerTeam(walletAddress as `0x${string}`, teamName, password);
     } else {
       setFormError('All fields are required.');
     }
@@ -35,7 +36,7 @@ export function RegisterTeam() {
   return (
     <div className="form-card">
       <h3>Register Team</h3>
-      <p className="small-text">(Requires a 2 ETH deposit)</p>
+      <p className="small-text">(Requires a 0.1 ETH deposit)</p>
       <form onSubmit={handleSubmit}>
         <div className="form-group">
           <label htmlFor="registerNameInput">Team Name</label>
@@ -68,7 +69,7 @@ export function RegisterTeam() {
             required
           />
         </div>
-        <button type="button" onClick={handleRegisterClick} disabled={isLoading} className="button">
+        <button type="submit" disabled={isLoading} className="button">
           {isLoading ? 'Registering...' : 'Register Team'}
         </button>
       </form>

src/hooks/useLottery.ts

@@ -4,9 +4,9 @@
 import {
   useAccount,
   useBalance,
-  useContractRead,
-  useContractWrite,
-  useWaitForTransactionReceipt, // <-- CORRECTED: Changed from useWaitForTransaction
+  useReadContract,
+  useWriteContract,
+  useWaitForTransactionReceipt,
   useWatchContractEvent,
 } from 'wagmi'
 import { lotteryContractConfig } from '../wagmi'
@@ -20,20 +20,17 @@ export type Team = {
   score: number;
 };
 
-
 /**
  * Fetches the total number of registered teams.
  */
 export function useGetTeamCount() {
   const { chain } = useAccount();
   const contractAddress = chain ? lotteryContractConfig.address(chain.id) : undefined;
 
-  return useContractRead({
+  return useReadContract({
     ...lotteryContractConfig,
     address: contractAddress,
     functionName: 'getTeamCount',
-    // Watch for changes to refetch automatically
-    watch: true,
   });
 }
 
@@ -45,12 +42,14 @@ export function useGetTeamDetails(teamIndex: number) {
     const { chain } = useAccount();
     const contractAddress = chain ? lotteryContractConfig.address(chain.id) : undefined;
 
-    return useContractRead({
+    return useReadContract({
         ...lotteryContractConfig,
         address: contractAddress,
         functionName: 'getTeamDetails',
         args: [BigInt(teamIndex)],
-        enabled: teamIndex !== undefined, // Only run if teamIndex is valid
+        query: {
+          enabled: teamIndex !== undefined,
+        }
     });
 }
 
@@ -62,34 +61,43 @@ export function useRegisterTeam() {
   const { chain } = useAccount();
   const contractAddress = chain ? lotteryContractConfig.address(chain.id) : undefined;
 
-  const { data, isLoading, isSuccess, write, error } = useContractWrite({
-    ...lotteryContractConfig,
-    address: contractAddress,
-    functionName: 'registerTeam',
-  });
+  const { data: hash, isPending, isSuccess, writeContract, error } = useWriteContract();
 
   const {
     data: receipt,
-    isLoading: isPending,
-    isSuccess: txIsSuccess,
-  } = useWaitForTransactionReceipt({ hash: data?.hash }); // <-- CORRECTED HOOK
+    isLoading: isConfirming,
+    isSuccess: isConfirmed,
+  } = useWaitForTransactionReceipt({ 
+    hash,
+  });
 
   // Exposing a function to be called from the component
-  const registerTeam = (walletAddress: `0x${string}`, teamName: string, password: string) => {
-    if (write) {
-      write({
+  const registerTeam = async (walletAddress: `0x${string}`, teamName: string, password: string) => {
+    if (!contractAddress) {
+      console.error('No contract address found for chain:', chain?.id);
+      return;
+    }
+
+    try {
+      writeContract({
+        ...lotteryContractConfig,
+        address: contractAddress,
+        functionName: 'registerTeam',
         args: [walletAddress, teamName, password],
-        value: parseEther('2'), // The contract requires a 2 ETH deposit
+        value: parseEther('0.1'), // The contract requires a 0.1 ETH deposit
       });
+    } catch (err) {
+      console.error('Error calling writeContract:', err);
     }
   };
 
   return {
     registerTeam,
-    isLoading: isLoading || isPending,
-    isSuccess: isSuccess && txIsSuccess,
+    isLoading: isPending || isConfirming,
+    isSuccess: isSuccess && isConfirmed,
     error,
     receipt,
+    hash,
   };
 }
 
@@ -100,30 +108,34 @@ export function useMakeGuess() {
     const { chain } = useAccount();
     const contractAddress = chain ? lotteryContractConfig.address(chain.id) : undefined;
 
-    const { data, isLoading, isSuccess, write, error } = useContractWrite({
-        ...lotteryContractConfig,
-        address: contractAddress,
-        functionName: 'makeAGuess',
-    });
+    const { data: hash, isPending, isSuccess, writeContract, error } = useWriteContract();
 
     const {
         data: receipt,
-        isLoading: isPending,
-        isSuccess: txIsSuccess,
-    } = useWaitForTransactionReceipt({ hash: data?.hash }); // <-- CORRECTED HOOK
+        isLoading: isConfirming,
+        isSuccess: isConfirmed,
+    } = useWaitForTransactionReceipt({ 
+        hash,
+    });
 
     const makeGuess = (teamAddress: `0x${string}`, guess: number) => {
-        if(write) {
-            write({
-                args: [teamAddress, BigInt(guess)],
-            });
+        if (!contractAddress) {
+            console.error('No contract address found');
+            return;
         }
+
+        writeContract({
+            ...lotteryContractConfig,
+            address: contractAddress,
+            functionName: 'makeAGuess',
+            args: [teamAddress, BigInt(guess)],
+        });
     };
 
     return {
         makeGuess,
-        isLoading: isLoading || isPending,
-        isSuccess: isSuccess && txIsSuccess,
+        isLoading: isPending || isConfirming,
+        isSuccess: isSuccess && isConfirmed,
         error,
         receipt,
     };
@@ -145,7 +157,6 @@ export function useGetLotteryBalance(refetchTrigger: any) {
         refetch();
     }, [refetchTrigger, refetch]);
 
-
     return data;
 }
 
@@ -169,10 +180,10 @@ export function useLotteryEvents(refetch: () => void) {
     useWatchContractEvent({
         ...lotteryContractConfig,
         address: contractAddress,
-        eventName: 'LogGuessMade', // Ensure this event name matches your contract
+        eventName: 'LogGuessMade',
         onLogs: (logs) => {
             console.log('Guess Made Event:', logs);
             refetch();
         },
     });
-}
+}

src/wagmi.ts

@@ -28,6 +28,14 @@ const getContractAddress = (chainId: number): `0x${string}` | undefined => {
 	return undefined;
 };
 
+// Public RPC URLs for Sepolia
+const SEPOLIA_RPC_URLS = [
+  'https://rpc.sepolia.org',
+  'https://ethereum-sepolia-rpc.publicnode.com',
+  'https://sepolia.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161', // Public Infura endpoint
+  'https://rpc2.sepolia.org',
+  'https://eth-sepolia.g.alchemy.com/v2/demo', // Public Alchemy demo endpoint
+];
 
 export const config = createConfig({
   chains: [mainnet, sepolia, localhost],
@@ -36,9 +44,12 @@ export const config = createConfig({
   ],
   transports: {
     [mainnet.id]: http(),
-    [sepolia.id]: http(),
-    // --- FIX: Corrected the localhost RPC URL ---
-    [localhost.id]: http('[http://127.0.0.1:8545](http://127.0.0.1:8545)'),
+    [sepolia.id]: http(SEPOLIA_RPC_URLS[0], {
+      // Add fallback URLs
+      retryCount: 3,
+      timeout: 10000,
+    }),
+    [localhost.id]: http('http://127.0.0.1:8545'),
   },
 })