Exercise #3: CCIP Tic Tac Toe

Let's play a cross-chain game

Getting started

For the final example of this Masterclass, we are going to deploy and play the CCIP Tic Tac Toe game.

To play the game, we will need to deploy the TicTacToe smart contract on two different blockchains. By sending a transaction on the source chain, which can be either "start" or "move," the state of the game board will be modified, and these states will be "synchronized" by Chainlink CCIP on the other chain.

It is developed using Hardhat, so you will need to prepare the environment by cloning the repository from GitHub by running the following command:

git clone https://github.com/smartcontractkit/ccip-tic-tac-toe

Then install packages:

npm install

And finally, compile smart contracts:

npx hardhat compile

Set environment variables

We are going to use the @chainlink/env-enc package for extra security. It encrypts sensitive data instead of storing them as plain text in the .env file by creating a new .env.enc file. Although pushing this file online is not recommended, if that accidentally happens, your secrets will still be encrypted.

Set a password for encrypting and decrypting the environment variable file. You can change it later by typing the same command.

npx env-enc set-pw

Now set the following environment variables:

PRIVATE_KEY=""
ETHEREUM_SEPOLIA_RPC_URL=""
OPTIMISM_GOERLI_RPC_URL=""
ARBITRUM_TESTNET_RPC_URL=""
AVALANCHE_FUJI_RPC_URL=""
POLYGON_MUMBAI_RPC_URL=""

To set these variables, type the following command and follow the instructions in the terminal:

After you are done, the .env.enc file will be automatically generated.

If you want to validate your inputs, you can always run the next command:

Deploy TicTacToe smart contract

Where the list of supported chains consists of (case sensitive):

  • ethereumSepolia

  • optimismGoerli

  • arbitrumTestnet

  • avalancheFuji

  • polygonMumbai

For example, if you want to deploy contracts to Ethereum Sepolia and Avalanche Fuji, run the following commands:

Transfer native tokens to the TicTacToe smart contract

After the deployment of the contract, you must transfer native tokens to these two contracts, respectively.

For example, if you deployed contracts to Avalanche Fuji and Ethereum Sepolia, please transfer 2 AVAX and 0.01 ETH to contracts on Avalanche Fuji and Ethereum Sepolia, respectively.

Update router

Please use the commands below to update the Router address for ccipSend.

Router addresses are listed below:

  • Ethereum Sepolia: 0xd0daae2231e9cb96b94c8512223533293c3693bf

  • Polygon Mumbai: 0x70499c328e1e2a3c41108bd3730f6670a44595d1

  • Optimism Goerli: 0xeb52e9ae4a9fb37172978642d4c141ef53876f26

  • Avalanche Fuji: 0x554472a2720e5e7d5d3c817529aba05eed5f82d8

  • Arbitrum Goerli: 0x88e492127709447a5abefdab8788a15b4567589e

Player 1 starts a game

You can start a new game through a TicTacToe contract on any chain. The player who starts a game is player 1. Player 1 needs to send a transaction to create a session, allowing the other player on the other chain to join that session and make a move.

Start a game with the command below:

You will see the message below in the terminal, and that means the message is sent by CCIP.

While the message is sent to CCIP, the status will not be synced until the message is finalized on the source chain and written into the contract on the other chain. Check the information in CCIP Explorer and find the message below to make sure the message is sent to the dest chain.

Get session ID by index

In order to join a game, a player needs to know the session ID of the game.

Get the session ID of the game by index with the command below:

Player 2 makes a move in Blockchain 2

Player 2, on the other chain, can make a move within the game session. The player needs to select a position with x and y coordinates(the range of x and y are from 0 to 2) with the command below:

The x and y are coordinates on the board. eg:

Player 1 makes a move in Blockchain 1

After player 2 made the move, player 1 can make the move with x and y coordinates. Please note that transaction will fail if the position represented by x and y coordinates is occupied.

Player 1 makes a move with the command below:

Repeat the previous two steps until the game is over

Repeat the previous two steps until either combination of player 1 or player 2 matches a winning combination.

Check the winner

Check the winner by command:

You can also check the winner from the contract on the other blockchain with the command:

Front-end of Tic-Tac-Toe

This project has a frontend implementation of a decentralized, multiplayer Tic-Tac-Toe game built with React, Wagmi, and Alchemy SDK.

Features

  • The game state is stored in the blockchain, enabling transparent and trustless gameplay.

  • Real-time interaction between two players from different blockchain networks.

  • Responsive design for a comfortable gaming experience on various devices.

  • An integrated game log to inform users about the game's progress.

Run

Change the directory by running the following command:

Install the dependencies:

Start the local server:

You can now access the application at the http://localhost:3000 in your browser.

Tic Tac Toe UI
PreviousExercise #2: Transfer Tokens & DataNextCCIP Architecture in Depth

Last updated