move state and functions to commit component

2026-03-12 19:08:11 +01:00 · 2025-11-18 18:55:38 +01:00
parent 4ec03d7cdb
commit 04f8e66204
3 changed files with 100 additions and 132 deletions
--- a/crypto_clash_frontend/app/clash/Commit.tsx
+++ b/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;
-  handleBothPlayed: () => void;
-  revealTimeLeft: string;
-  handleRevealTimeLeft: () => void;
+  config: Config | null;
+  web3: Web3 | null;
+  setStatus: (status: string) => void;
 }

 export default function Commit({
-  playMove,
-  setPlayMove,
-  handlePlay,
-  loading,
  account,
  contract,
-  bothPlayed,
-  handleBothPlayed,
-  revealTimeLeft,
-  handleRevealTimeLeft,
+  config,
+  web3,
+  setStatus,
 }: 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>
  );
--- a/crypto_clash_frontend/app/clash/Reveal.tsx
+++ b/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>
--- a/crypto_clash_frontend/app/clash/page.tsx
+++ b/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}
-                handleBothPlayed={handleBothPlayed}
-                revealTimeLeft={revealTimeLeft}
-                handleRevealTimeLeft={handleRevealTimeLeft}
+                config={config}
+                web3={web3}
+                setStatus={setStatus}
              />
            )}
            {phase === "reveal" && (
@@ -484,8 +384,6 @@ export default function Clash() {
                handlePlayerARevealed={handlePlayerARevealed}
                playerBRevealed={playerBRevealed}
                handlePlayerBRevealed={handlePlayerBRevealed}
-                revealTimeLeft={revealTimeLeft}
-                handleRevealTimeLeft={handleRevealTimeLeft}
              />
            )}
          </div>