feat: add metamask support to tictactoe

TicTacToe/package.json

@@ -20,14 +20,20 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.12",
     "@fuel-wallet/sdk": "^0.15.2",
+    "@fuels/connectors": "^0.2.2",
     "@fuels/react": "^0.15.3",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@tanstack/react-query": "^5.25.0",
+    "@wagmi/connectors": "^4.3.9",
+    "@wagmi/core": "^2.9.7",
+    "@web3modal/wagmi": "^4.2.0",
     "fuels": "^0.76.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1"
+    "react-hot-toast": "^2.4.1",
+    "viem": "^2.10.5",
+    "wagmi": "^2.8.7"
   },
   "devDependencies": {
     "@fuels/eslint-plugin": "^0.16.0",

TicTacToe/src/components/ConnectButton.tsx

@@ -1,11 +1,11 @@
-import { useIsConnected, useConnect, useDisconnect } from '@fuels/react';
+import { useIsConnected, useConnectUI, useDisconnect } from '@fuels/react';
 import { Button } from '@mui/material';
 
 import { useAppContext } from '.';
 
 export const ConnectButton = () => {
   const { isConnected } = useIsConnected();
-  const { connect, isLoading: isConnectLoading } = useConnect();
+  const { connect, isLoading: isConnectLoading } = useConnectUI();
   const { disconnect, isLoading: isDisconnectLoading } = useDisconnect();
   const appContext = useAppContext();
 

TicTacToe/src/components/Providers.tsx

@@ -1,8 +1,20 @@
-import { FuelWalletConnector } from '@fuel-wallet/sdk';
+import {
+  //BurnerWalletConnector,
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  EVMWalletConnector
+  //WalletConnectConnector
+} from "@fuels/connectors";
+//import { WalletConnectConnector } from "@fuels/connectors/walletconnect";
 import { FuelProvider } from '@fuels/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+// import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
+// import { http, createConfig, injected } from "@wagmi/core";
+// import { mainnet, sepolia } from "@wagmi/core/chains";
 import type { ReactNode } from 'react';
 
+
 import { AppContextProvider } from '.';
 
 type ProvidersProps = {
@@ -12,9 +24,53 @@ type ProvidersProps = {
 // TODO add toast for errors?
 export const queryClient = new QueryClient();
 
+// ============================================================
+// WalletConnect Connector configurations
+// https://docs.walletconnect.com/web3modal/javascript/about
+// ============================================================
+// const WC_PROJECT_ID = import.meta.env.VITE_WC_PROJECT_ID;
+// const METADATA = {
+//   name: "TicTacToe",
+//   description: "TicTacToe on Fuel network",
+//   url: location.href,
+//   icons: ['https://connectors.fuel.network/logo_white.png'], // TODO replace
+// }
+// const wagmiConfig = createConfig({
+//   chains: [mainnet, sepolia],
+//   transports: {
+//     [mainnet.id]: http(),
+//     [sepolia.id]: http(),
+//   },
+//   connectors: [
+//     injected({ shimDisconnected: true }),
+//     walletConnect({
+//       projectId: WC_PROJECT_ID,
+//       metadata: METADATA,
+//       showQRModal: false,
+//     }),
+//     coinbaseWallet({
+//       appName: METADATA.name,
+//       appLogoUrl: METADATA.icons[0],
+//       darkMode: false,
+//       reloadOnDisconnect: true,
+//     }),
+//   ],
+// });
+
 export const Providers = ({ children }: ProvidersProps) => {
   return (
-    <FuelProvider fuelConfig={{ connectors: [new FuelWalletConnector()] }}>
+    <FuelProvider fuelConfig={{ connectors: [
+        new FuelWalletConnector(),
+        new FueletWalletConnector(),
+        new EVMWalletConnector(),
+        // new WalletConnectConnector({
+        //   wagmiConfig,
+        //   projectId: WC_PROJECT_ID,
+        // }),
+        new FuelWalletDevelopmentConnector(),
+        //new BurnerWalletConnector(),
+      ]
+    }}>
       <QueryClientProvider client={queryClient}>
         <AppContextProvider>{children}</AppContextProvider>
       </QueryClientProvider>

TicTacToe/src/contract-types/contract-ids.json

@@ -1,3 +1,3 @@
 {
-  "tictactoeContract": "0xcfdf5a3b9bd11eb889539b7195c5d255e645b6e29f0878b31319ad09024a5704"
+  "tictactoeContract": "0x0abdb058c37b0de631fa81930c25722bff8bc078c70af3251a82822a11a39a81"
 }

TicTacToe/src/contract-types/contracts/factories/TictactoeContractAbi__factory.ts

@@ -497,14 +497,6 @@ const _abi = {
     },
     {
       "logId": 6,
-      "loggedType": {
-        "name": "",
-        "type": 4,
-        "typeArguments": []
-      }
-    },
-    {
-      "logId": 7,
       "loggedType": {
         "name": "",
         "type": 16,
@@ -521,10 +513,6 @@ const _storageSlots: StorageSlot[] = [
     "key": "02dac99c283f16bc91b74f6942db7f012699a2ad51272b15207b9cc14a70dbae",
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
   },
-  {
-    "key": "02dac99c283f16bc91b74f6942db7f012699a2ad51272b15207b9cc14a70dbaf",
-    "value": "0000000000000000000000000000000000000000000000000000000000000000"
-  },
   {
     "key": "6294951dcb0a9111a517be5cf4785670ff4e166fb5ab9c33b17e6881b48e964f",
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
@@ -534,19 +522,23 @@ const _storageSlots: StorageSlot[] = [
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
   },
   {
-    "key": "94b2b70d20da552763c7614981b2a4d984380d7ed4e54c01b28c914e79e44bd5",
-    "value": "0000000000000001000000000000000000000000000000000000000000000000"
+    "key": "7f91d1a929dce734e7f930bbb279ccfccdb5474227502ea8845815c74bd930a7",
+    "value": "0000000000000000000000000000000000000000000000000000000000000000"
   },
   {
-    "key": "b48b753af346966d0d169c0b2e3234611f65d5cfdb57c7b6e7cd6ca93707bee0",
+    "key": "7f91d1a929dce734e7f930bbb279ccfccdb5474227502ea8845815c74bd930a8",
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
   },
   {
-    "key": "b48b753af346966d0d169c0b2e3234611f65d5cfdb57c7b6e7cd6ca93707bee1",
+    "key": "8a89a0cce819e0426e565819a9a98711329087da5a802fb16edd223c47fa44ef",
+    "value": "0000000000000001000000000000000000000000000000000000000000000000"
+  },
+  {
+    "key": "94b2b70d20da552763c7614981b2a4d984380d7ed4e54c01b28c914e79e44bd5",
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
   },
   {
-    "key": "de9090cb50e71c2588c773487d1da7066d0c719849a7e58dc8b6397a25c567c0",
+    "key": "94b2b70d20da552763c7614981b2a4d984380d7ed4e54c01b28c914e79e44bd6",
     "value": "0000000000000000000000000000000000000000000000000000000000000000"
   }
 ];

TicTacToe/src/hooks/useGetCurrentPlayer.ts

@@ -1,12 +1,13 @@
-import { useWallet } from '@fuels/react';
+import { useAccount, useWallet } from '@fuels/react';
 import { useQuery } from '@tanstack/react-query';
 
 import { CONTRACT_ID } from '../config';
 import { TictactoeContractAbi__factory } from '../contract-types';
 import { TicTacToeQueryKeys } from '../queryKeys';
 
 export const useGetCurrentPlayer = () => {
-  const { wallet, isError, isLoading } = useWallet();
+  const { account  } = useAccount();
+  const { wallet, isError, isLoading } = useWallet(account);
 
   const query = useQuery({
     queryKey: [TicTacToeQueryKeys.currentPlayer, wallet?.provider.url],

TicTacToe/tictactoe-contract/src/data_structures.sw

@@ -1,6 +1,7 @@
 library;
 
 use core::ops::Eq;
+use std::{storage::storage_vec::*, vec::Vec};
 
 /// Represents the state of a game.
 pub enum State {

TicTacToe/tictactoe-contract/src/errors.sw

@@ -21,3 +21,7 @@ pub enum PositionError {
     /// The cell is out of bounds.
     InvalidPosition: (),
 }
+
+pub enum GameIDError {
+    InvalidGameID: (),
+}

TicTacToe/tictactoe-contract/src/interface.sw

@@ -3,7 +3,7 @@ library;
 use ::data_structures::State;
 
 abi Game {
-    /// Starts a new game.
+    /// Starts a new game and returns the game id.
     ///
     /// # Arguments
     ///
@@ -19,7 +19,7 @@ abi Game {
     /// * Reads - `1`
     /// * Writes - `6`
     #[storage(read, write)]
-    fn new_game(player_one: Identity, player_two: Identity);
+    fn new_game(player_one: Identity, player_two: Identity) -> u64;
 
     /// Allows a player to make a move at a `position`.
     ///
@@ -43,7 +43,7 @@ abi Game {
     /// * Reads - `8`
     /// * Writes - `3`
     #[storage(read, write)]
-    fn make_move(position: u64);
+    fn make_move(position: u64, game_id: u64);
 
     /// Returns the player positions of the current game as a vector.
     ///
@@ -55,7 +55,7 @@ abi Game {
     ///
     /// * Reads - `1`
     #[storage(read)]
-    fn get_board() -> Vec<Option<bool>>;
+    fn get_board(game_id: u64) -> Vec<Option<bool>>;
 
     /// Returns the current state of the game.
     ///
@@ -67,7 +67,7 @@ abi Game {
     ///
     /// * Reads - `1`
     #[storage(read)]
-    fn get_game_state() -> State;
+    fn get_game_state(game_id: u64) -> State;
 
     /// Returns the player who's turn it is to make a move.
     ///
@@ -79,7 +79,7 @@ abi Game {
     ///
     /// * Reads - `2`
     #[storage(read)]
-    fn get_current_player() -> Option<Identity>;
+    fn get_current_player(game_id: u64) -> Option<Identity>;
 
     /// Returns the players of the current game.
     ///
@@ -91,7 +91,7 @@ abi Game {
     ///
     /// * Reads - `3`
     #[storage(read)]
-    fn get_players() -> Option<(Identity, Identity)>;
+    fn get_players(game_id: u64) -> Option<(Identity, Identity)>;
 
     /// Returns the number of moves made in the current game.
     ///
@@ -103,5 +103,5 @@ abi Game {
     ///
     /// * Reads - `1`
     #[storage(read)]
-    fn get_move_counter() -> u64;
+    fn get_move_counter(game_id: u64) -> u64;
 }