Withdraw button is working with conditional display

luloxi · Jan 13, 2024 · 7ec7c31 · 7ec7c31
1 parent 26c45d1
commit 7ec7c31
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 6 deletions.
diff --git a/packages/hardhat/contracts/TicTacToe.sol b/packages/hardhat/contracts/TicTacToe.sol
@@ -314,4 +314,16 @@ contract TicTacToe {
 	function getBoard(uint256 _gameId) external view returns (uint8[9] memory) {
 		return games[_gameId].board;
 	}
+
+	function getGameState(uint256 _gameId) public view returns (GameState)  {
+		return games[_gameId].state;
+	}
+
+	function hasPlayer1WithdrawnPrize(uint256 _gameId) public view returns(bool) {
+		return games[_gameId].player1Withdrawn;
+	}
+
+	function hasPlayer2WithdrawnPrize(uint256 _gameId) public view returns(bool) {
+		return games[_gameId].player2Withdrawn;
+	}
 }
diff --git a/packages/nextjs/components/tictactoe/TicTacToeBoard.tsx b/packages/nextjs/components/tictactoe/TicTacToeBoard.tsx
@@ -26,6 +26,24 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({
     }
   }, [boardFromContract]);
 
+  const { data: gameState } = useScaffoldContractRead({
+    contractName: "TicTacToe",
+    functionName: "getGameState",
+    args: [BigInt(game.gameId)],
+  });
+
+  const { data: player1WithdrawnPrize } = useScaffoldContractRead({
+    contractName: "TicTacToe",
+    functionName: "hasPlayer1WithdrawnPrize",
+    args: [BigInt(game.gameId)],
+  });
+
+  const { data: player2WithdrawnPrize } = useScaffoldContractRead({
+    contractName: "TicTacToe",
+    functionName: "hasPlayer2WithdrawnPrize",
+    args: [BigInt(game.gameId)],
+  });
+
   const { writeAsync: makeMove } = useScaffoldContractWrite({
     contractName: "TicTacToe",
     functionName: "makeMove",
@@ -39,6 +57,12 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({
     value: BigInt(game.bet),
   });
 
+  const { writeAsync: withdrawPrize } = useScaffoldContractWrite({
+    contractName: "TicTacToe",
+    functionName: "withdrawPrize",
+    args: [BigInt(game.gameId)],
+  });
+
   return (
     <Box key={game.gameId}>
       <Flex fontSize={24} textColor={"red"} alignItems={"center"} justifyContent={"center"} paddingTop={3}>
@@ -50,9 +74,7 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({
       <Flex direction="row" justifyContent={"center"} textAlign={"center"} gap={6} padding={3}>
         <Address address={game.player1} />{" "}
         {isGameAccepted ? (isGameFinished ? "played against" : "is playing against") : "challenged"}
-        <>
-          <Address address={game.player2} />
-        </>
+        <Address address={game.player2} />
       </Flex>
       {isGameAccepted ? (
         ""
@@ -95,8 +117,22 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({
           </Box>
 
           <Box>
-            Game state: <br />
-            {isGameFinished ? <strong>Finished</strong> : <strong>Not finished</strong>}
+            {isGameFinished ? (
+              <strong>
+                Game has finished
+                <br />
+                {(gameState == 2 && currentPlayer == game.player1 && !player1WithdrawnPrize) ||
+                (gameState == 3 && currentPlayer == game.player2 && !player2WithdrawnPrize) ? (
+                  <Button colorScheme={"green"} onClick={() => withdrawPrize()}>
+                    Withdraw Prize
+                  </Button>
+                ) : (
+                  ""
+                )}
+              </strong>
+            ) : (
+              <strong>Game in progress</strong>
+            )}
           </Box>
         </Flex>
       ) : (

diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     TicTacToe: {
-      address: "0xa513E6E4b8f2a923D98304ec87F64353C4D5C853",
+      address: "0x610178dA211FEF7D417bC0e6FeD39F05609AD788",
       abi: [
         {
           anonymous: false,
@@ -241,6 +241,25 @@ const deployedContracts = {
           stateMutability: "view",
           type: "function",
         },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "_gameId",
+              type: "uint256",
+            },
+          ],
+          name: "getGameState",
+          outputs: [
+            {
+              internalType: "enum TicTacToe.GameState",
+              name: "",
+              type: "uint8",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
         {
           inputs: [
             {
@@ -260,6 +279,44 @@ const deployedContracts = {
           stateMutability: "view",
           type: "function",
         },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "_gameId",
+              type: "uint256",
+            },
+          ],
+          name: "hasPlayer1WithdrawnPrize",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "_gameId",
+              type: "uint256",
+            },
+          ],
+          name: "hasPlayer2WithdrawnPrize",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
         {
           inputs: [
             {