move state and functions to commit component

crypto_clash_frontend/app/clash/Commit.tsx

@@ -1,28 +1,66 @@
+import { useState } from "react";
+import Web3 from "web3";
+
 interface CommitProps {
-  playMove: string;
-  setPlayMove: (v: string) => void;
-  handlePlay: () => void;
-  loading: boolean;
   account: string;
   contract: any;
-  bothPlayed: string;
+  config: Config | null;
-  handleBothPlayed: () => void;
+  web3: Web3 | null;
-  revealTimeLeft: string;
+  setStatus: (status: string) => void;
-  handleRevealTimeLeft: () => void;
 }
 
 export default function Commit({
-  playMove,
-  setPlayMove,
-  handlePlay,
-  loading,
   account,
   contract,
-  bothPlayed,
+  config,
-  handleBothPlayed,
+  web3,
-  revealTimeLeft,
+  setStatus,
-  handleRevealTimeLeft,
 }: Readonly<CommitProps>) {
+  const [loading, setLoading] = useState(false);
+  const [playMove, setPlayMove] = useState<string>("");
+  const [bothPlayed, setBothPlayed] = useState<string>("");
+
+  // Commit phase read-only handlers
+  const handleBothPlayed = async () => {
+    if (!contract) return;
+    setLoading(true);
+    try {
+      const res = await contract.methods.bothPlayed().call();
+      setBothPlayed(res ? "true" : "false");
+    } catch (err: any) {
+      setStatus("Failed to fetch bothPlayed: " + err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePlay = async () => {
+    if (!contract || !web3 || !account) return;
+    setLoading(true);
+    setStatus("");
+    try {
+      // playMove should be a hex string (bytes32)
+      const tx = contract.methods.play(playMove);
+      const gas = await tx.estimateGas({ from: account });
+      const result = await (globalThis as any).ethereum.request({
+        method: "eth_sendTransaction",
+        params: [
+          {
+            from: account,
+            to: config?.GAME_CONTRACT_ADDRESS,
+            data: tx.encodeABI(),
+            gas: web3.utils.toHex(gas),
+            chainId: web3.utils.toHex(await web3.eth.net.getId()),
+          },
+        ],
+      });
+      setStatus("Play tx sent: " + result);
+    } catch (err: any) {
+      setStatus("Play failed: " + err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
   return (
     <div className="border p-4 rounded-lg">
       <h2 className="font-semibold mb-2">play(bytes32 encrMove)</h2>
@@ -42,11 +80,14 @@ export default function Commit({
       </button>
 
       <div className="mt-4 space-y-2">
-        <button onClick={handleBothPlayed} className="bg-gray-200 px-2 py-1 rounded">bothPlayed</button>
+        <button
+          onClick={handleBothPlayed}
+          className="bg-gray-200 px-2 py-1 rounded"
+        >
+          bothPlayed
+        </button>
         <span className="ml-2 text-xs">{bothPlayed}</span>
         <br />
-        <button onClick={handleRevealTimeLeft} className="bg-gray-200 px-2 py-1 rounded">revealTimeLeft</button>
-        <span className="ml-2 text-xs">{revealTimeLeft}</span>
       </div>
     </div>
   );

crypto_clash_frontend/app/clash/Reveal.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 interface RevealProps {
   revealMove: string;
   setRevealMove: (v: string) => void;
@@ -11,8 +13,6 @@ interface RevealProps {
   handlePlayerARevealed: () => void;
   playerBRevealed: string;
   handlePlayerBRevealed: () => void;
-  revealTimeLeft: string;
-  handleRevealTimeLeft: () => void;
 }
 
 export default function Reveal({
@@ -28,9 +28,18 @@ export default function Reveal({
   handlePlayerARevealed,
   playerBRevealed,
   handlePlayerBRevealed,
-  revealTimeLeft,
-  handleRevealTimeLeft,
 }: Readonly<RevealProps>) {
+  const [revealTimeLeft, setRevealTimeLeft] = useState<string>("");
+
+  const handleRevealTimeLeft = async () => {
+    if (!contract) return;
+    try {
+      const res = await contract.methods.revealTimeLeft().call();
+      setRevealTimeLeft(res.toString());
+    } catch (err: any) {
+      console.error("Failed to fetch revealTimeLeft: " + err.message);
+    }
+  };
   return (
     <div className="border p-4 rounded-lg">
       <h2 className="font-semibold mb-2">reveal(string clearMove)</h2>
@@ -50,16 +59,36 @@ export default function Reveal({
       </button>
 
       <div className="mt-4 space-y-2">
-        <button onClick={handleBothRevealed} className="bg-gray-200 px-2 py-1 rounded">bothRevealed</button>
+        <button
+          onClick={handleBothRevealed}
+          className="bg-gray-200 px-2 py-1 rounded"
+        >
+          bothRevealed
+        </button>
         <span className="ml-2 text-xs">{bothRevealed}</span>
         <br />
-        <button onClick={handlePlayerARevealed} className="bg-gray-200 px-2 py-1 rounded">playerARevealed</button>
+        <button
+          onClick={handlePlayerARevealed}
+          className="bg-gray-200 px-2 py-1 rounded"
+        >
+          playerARevealed
+        </button>
         <span className="ml-2 text-xs">{playerARevealed}</span>
         <br />
-        <button onClick={handlePlayerBRevealed} className="bg-gray-200 px-2 py-1 rounded">playerBRevealed</button>
+        <button
+          onClick={handlePlayerBRevealed}
+          className="bg-gray-200 px-2 py-1 rounded"
+        >
+          playerBRevealed
+        </button>
         <span className="ml-2 text-xs">{playerBRevealed}</span>
         <br />
-        <button onClick={handleRevealTimeLeft} className="bg-gray-200 px-2 py-1 rounded">revealTimeLeft</button>
+        <button
+          onClick={handleRevealTimeLeft}
+          className="bg-gray-200 px-2 py-1 rounded"
+        >
+          revealTimeLeft
+        </button>
         <span className="ml-2 text-xs">{revealTimeLeft}</span>
       </div>
     </div>

crypto_clash_frontend/app/clash/page.tsx

@@ -19,7 +19,6 @@ export default function Clash() {
 
   const [registerGameId, setRegisterGameId] = useState<string>("0");
   const [registerBet, setRegisterBet] = useState<string>("");
-  const [playMove, setPlayMove] = useState<string>("");
   const [revealMove, setRevealMove] = useState<string>("");
   // State for read-only contract calls
   const [betMin, setBetMin] = useState<string>("");
@@ -32,8 +31,6 @@ export default function Clash() {
   const [pastGame, setPastGame] = useState<any>(null);
   const [pastGamesCount, setPastGamesCount] = useState<string>("");
   const [whoAmI, setWhoAmI] = useState<string>("");
-  const [bothPlayed, setBothPlayed] = useState<string>("");
-  const [revealTimeLeft, setRevealTimeLeft] = useState<string>("");
   const [bothRevealed, setBothRevealed] = useState<string>("");
   const [playerARevealed, setPlayerARevealed] = useState<string>("");
   const [playerBRevealed, setPlayerBRevealed] = useState<string>("");
@@ -70,33 +67,6 @@ export default function Clash() {
       setPlayerBRevealed(res ? "true" : "false");
     } catch (err: any) {
       setStatus("Failed to fetch playerBRevealed: " + err.message);
-      const [bothRevealed, setBothRevealed] = useState<string>("");
-      const [playerARevealed, setPlayerARevealed] = useState<string>("");
-      const [playerBRevealed, setPlayerBRevealed] = useState<string>("");
-      setLoading(false);
-    }
-  };
-  // Commit phase read-only handlers
-  const handleBothPlayed = async () => {
-    if (!contract) return;
-    setLoading(true);
-    try {
-      const res = await contract.methods.bothPlayed().call();
-      setBothPlayed(res ? "true" : "false");
-    } catch (err: any) {
-      setStatus("Failed to fetch bothPlayed: " + err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleRevealTimeLeft = async () => {
-    if (!contract) return;
-    setLoading(true);
-    try {
-      const res = await contract.methods.revealTimeLeft().call();
-      setRevealTimeLeft(res.toString());
-    } catch (err: any) {
-      setStatus("Failed to fetch revealTimeLeft: " + err.message);
     } finally {
       setLoading(false);
     }
@@ -167,43 +137,6 @@ export default function Clash() {
     }
   };
   const handleGetPastGame = async () => {
-    // Reveal phase read-only handlers
-    const handleBothRevealed = async () => {
-      if (!contract) return;
-      setLoading(true);
-      try {
-        const res = await contract.methods.bothRevealed().call();
-        setBothRevealed(res ? "true" : "false");
-      } catch (err: any) {
-        setStatus("Failed to fetch bothRevealed: " + err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    const handlePlayerARevealed = async () => {
-      if (!contract) return;
-      setLoading(true);
-      try {
-        const res = await contract.methods.playerARevealed().call();
-        setPlayerARevealed(res ? "true" : "false");
-      } catch (err: any) {
-        setStatus("Failed to fetch playerARevealed: " + err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    const handlePlayerBRevealed = async () => {
-      if (!contract) return;
-      setLoading(true);
-      try {
-        const res = await contract.methods.playerBRevealed().call();
-        setPlayerBRevealed(res ? "true" : "false");
-      } catch (err: any) {
-        setStatus("Failed to fetch playerBRevealed: " + err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
     if (!contract) return;
     setLoading(true);
     try {
@@ -312,34 +245,6 @@ export default function Clash() {
     }
   };
 
-  const handlePlay = async () => {
-    if (!contract || !web3 || !account) return;
-    setLoading(true);
-    setStatus("");
-    try {
-      // playMove should be a hex string (bytes32)
-      const tx = contract.methods.play(playMove);
-      const gas = await tx.estimateGas({ from: account });
-      const result = await (globalThis as any).ethereum.request({
-        method: "eth_sendTransaction",
-        params: [
-          {
-            from: account,
-            to: config?.GAME_CONTRACT_ADDRESS,
-            data: tx.encodeABI(),
-            gas: web3.utils.toHex(gas),
-            chainId: web3.utils.toHex(await web3.eth.net.getId()),
-          },
-        ],
-      });
-      setStatus("Play tx sent: " + result);
-    } catch (err: any) {
-      setStatus("Play failed: " + err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const handleReveal = async () => {
     if (!contract || !web3 || !account) return;
     setLoading(true);
@@ -458,16 +363,11 @@ export default function Clash() {
             )}
             {phase === "commit" && (
               <Commit
-                playMove={playMove}
-                setPlayMove={setPlayMove}
-                handlePlay={handlePlay}
-                loading={loading}
                 account={account}
                 contract={contract}
-                bothPlayed={bothPlayed}
+                config={config}
-                handleBothPlayed={handleBothPlayed}
+                web3={web3}
-                revealTimeLeft={revealTimeLeft}
+                setStatus={setStatus}
-                handleRevealTimeLeft={handleRevealTimeLeft}
               />
             )}
             {phase === "reveal" && (
@@ -484,8 +384,6 @@ export default function Clash() {
                 handlePlayerARevealed={handlePlayerARevealed}
                 playerBRevealed={playerBRevealed}
                 handlePlayerBRevealed={handlePlayerBRevealed}
-                revealTimeLeft={revealTimeLeft}
-                handleRevealTimeLeft={handleRevealTimeLeft}
               />
             )}
           </div>