Skip to content

feat: add metamask support to tictactoe #795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion TicTacToe/package.json
Original file line number Diff line number Diff line change
@@ -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",
4 changes: 2 additions & 2 deletions TicTacToe/src/components/ConnectButton.tsx
Original file line number Diff line number Diff line change
@@ -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();

60 changes: 58 additions & 2 deletions TicTacToe/src/components/Providers.tsx
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion TicTacToe/src/contract-types/contract-ids.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"tictactoeContract": "0xcfdf5a3b9bd11eb889539b7195c5d255e645b6e29f0878b31319ad09024a5704"
"tictactoeContract": "0x0abdb058c37b0de631fa81930c25722bff8bc078c70af3251a82822a11a39a81"
}

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -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"
}
];
5 changes: 3 additions & 2 deletions TicTacToe/src/hooks/useGetCurrentPlayer.ts
Original file line number Diff line number Diff line change
@@ -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],
1 change: 1 addition & 0 deletions TicTacToe/tictactoe-contract/src/data_structures.sw
Original file line number Diff line number Diff line change
@@ -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 {
4 changes: 4 additions & 0 deletions TicTacToe/tictactoe-contract/src/errors.sw
Original file line number Diff line number Diff line change
@@ -21,3 +21,7 @@ pub enum PositionError {
/// The cell is out of bounds.
InvalidPosition: (),
}

pub enum GameIDError {
InvalidGameID: (),
}
16 changes: 8 additions & 8 deletions TicTacToe/tictactoe-contract/src/interface.sw
Original file line number Diff line number Diff line change
@@ -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;
}
Loading