Mediaboss Marketing

This post was first published onMedium.

In this guide, youll learn a Web3 tech stack that will allow you to build full stack decentralized apps on the Bitcoin SV blockchain. We will walk through the entire process of building a full stack decentralized Tic-Tac-Toe, including:

By the end, you will have a fully functionalTic-Tac-Toe Apprunning on Bitcoin.

What we will use

Lets go over the main pieces we will be using and how they fit into the stack.

1. sCrypt Framework

sCrypt is a TypeScript framework to develop smart contracts on Bitcoin. It offers a complete tech stack:

2. Yours Wallet

Yours Walletis an open-source digital wallet for BSV and1Sat Ordinalsthat enables access to decentralized applications developed onBitcoin SV. Yours Wallet generates and manages private keys for its users in a non-custodial manner, ensuring that the users have full control over their funds and transactions. These keys can be utilized within the wallet to securely store funds and authorize transactions.

3. React

React.js, often simply referred to as React, is a JavaScript library developed by Facebook. Its primarily used for building user interfaces (UIs) for web applications. It simplifies the process of building dynamic and interactive web applications and continues to be seemingly dominating the front-end space.

What we will Build

We will build a very simple Tic-Tac-Toe game on chain. It uses the Bitcoin addresses of two players (Alice and Bob respectively) to initialize a smart contract. They each bet the same amount and lock it into the contract. The winner takes all bitcoins locked in the contract. If no one wins and there is a draw, the two players can each withdraw half of the money. Tic-Tac-Toe, the age-old game of strategy and skill, has now found its way onto the blockchain thanks to the power of sCrypt.

Prerequisites

Getting Started

Lets simply create a new React project.

Firstly lets create a new React project with TypeScript template.

Then, change the directory to the tic-tac-toe project directory and also run theinitcommand of theCLIto addsCryptsupport in your project.

Tic-tac-toe Contract

Next, lets create a contract atsrc/contracts/tictactoe.ts:

Properties

The Tic-Tac-Toe contract features several essential properties that define its functionality:

Constructor

Upon deployment, the constructor initializes the contract with the public keys of Alice and Bob. Additionally, it sets up an empty game board to kickstart the game play.

Public methods

Each contract must have at least one public@method. It is denoted with thepublicmodifier and does not return any value. It is visible outside the contract and acts as the main method into the contract (likemainin C and Java).

The public method in the contract ismove(), which allows players to make their moves on the board. This method validates the moves, checks the players signature, updates the game state, and determines the outcome of the game.

Signature verification

Once the game contract is deployed, anyone can view and potentially interact with it. We need an authentication mechanism to ensure only the desired player can update the contract if its their turn. This is achieved using digital signatures.

Only the authorized player can make a move during their turn, validated through their respective public key stored in the contract.

Non-Public methods

The contract includes two non-public methods,won()andfull(), responsible for determining whether a player has won the game and if the board is full, leading to a draw.

Tx Builder: buildTxForMove

Bitcoin transaction can have multiple inputs and outputs. We need to build a transaction when calling a contract.

Here, we have implement acustomize transactionbuilder for themove()method as below:

Integrate Front-end (React)

After we have written/tested our contract, we can integrate it with front-end so that users can play our game.

First, lets compile the contract and get the contract artifact json file by running the command below:

You should see an artifact filetictactoe.jsonin theartifactsdirectory. It can be used to initialize a contract at the front end.

Install and Fund Wallet

Before deploying a contract, we need to connect a wallet first. We useYours Wallet, a MetaMask-like wallet.

After installing the wallet, click thesettingsbutton in the upper right corner to switch to testnet. Then copy your wallet address and go to ourfaucetto fund it.

Connect to wallet

We callrequestAuth()to request to connect to the wallet. If the request is approved by the user, we now have full access to the wallet. We can, for example, callgetDefaultPubKey()to get its public key.

Initialize the contract

We have obtained the contract classTictactoe by loading the contract artifact file. When a user clicks thestartbutton, the contract is initialized with the public keys of two playersaliceandbob. The public key can be obtained through callingetDefaultPubKey()ofSigner.

The following code initializes the contract.

Call the contract

Now we can start playing the game. Every move is a call to the contract and triggers a change in the state of the contract.

After finishing with the front-end you can simply run :

You can now view it at `http://localhost:3000/` in your browser.

Conclusion

Congratulations! You have just built your first full stack dApp on Bitcoin. Now you can playtic-tac-toeor build your favorite game on Bitcoin. Now would be a good time to pop some champagne if you havent already :).

One session of play can be viewed here:

All the code can be found atthis github repo.

By default, we deploy the contract on testnet. You can easily change it to mainnet.

Watch: sCrypt Hackathon 2024 (17th March 2024, PM)

New to blockchain? Check out CoinGeeks Blockchain for Beginners section, the ultimate resource guide to learn more about blockchain technology.

More:

The complete guide to full stack BSV blockchain development - CoinGeek