Build a Full-Stack Decentralized Tic-Tac-Toe Dapp on Bitcoin SV Blockchain: Ultimate Guide

"This article provides a comprehensive overview of a Web3 tech stack for developing full stack decentralized apps on the Bitcoin SV blockchain. The tech stack includes sCrypt Frameworks, Yours Wallet, and React. The process of building a full stack decentralized tic-tac-toe game is outlined in detail, including writing a smart contract, deploying the contract, integrating the front-end (using React), and integrating Yours wallet. By following the guide, readers can understand how to build fully functional decentralized apps on the Bitcoin SV blockchain."

Build a Full-Stack Decentralized Tic-Tac-Toe App on the Bitcoin SV Blockchain: A Comprehensive Guide

Introduction

In this detailed guide, we will guide you through the process of building a complete full-stack decentralized Tic-Tac-Toe application on the Bitcoin SV (BSV) blockchain. This comprehensive journey will cover the creation of a smart contract, deploying it, integrating a front-end using React, and connecting to a user's wallet. By the end, you will possess a fully functional Tic-Tac-Toe application running seamlessly on the BSV blockchain.

Prerequisites

To embark on this adventure, you will need the following prerequisites:

• Node.js (version 16 or higher)
• npm
• Git
• Yours Wallet Chrome extension
• sCrypt CLI (installed using npm install -g scrypt-cli)

Technology Stack

Our tech stack consists of the following key components:

• sCrypt Framework: TypeScript framework for developing BSV smart contracts.
• Yours Wallet: Open-source digital wallet for BSV that enables interaction with decentralized applications built on BSV.
• React: JavaScript library for building user interfaces.

Designing the Contract

Let's define the blueprint of our game. The Tic-Tac-Toe contract will be initialized with the Bitcoin addresses of two players, Alice and Bob. They will wager the same amount and lock their bets in the contract. The winner claims the entire pot, while a draw results in an equal split between both players.

Creating the Contract

Using the sCrypt framework, we will create the contract in TypeScript in the src/contracts/tictactoe.ts file:

import {
  prop,
  method,
  SmartContract,
  PubKey,
  FixedArray,
  assert,
  Sig,
  Utils,
  toByteString,
  hash160,
  hash256,
  fill,
  ContractTransaction,
  MethodCallOptions,
  bsv
} from "scrypt-ts";

export class TicTacToe extends SmartContract {
  @prop()
  alice: PubKey;

  @prop()
  bob: PubKey;

  @prop(true)
  isAliceTurn: boolean;

  @prop(true)
  board: FixedArray;

  static readonly EMPTY: bigint = 0n;
  static readonly ALICE: bigint = 1n;
  static readonly BOB: bigint = 2n;

  constructor(alice: PubKey, bob: PubKey) {
    super(...arguments);
    this.alice = alice;
    this.bob = bob;
    this.isAliceTurn = true;
    this.board = fill(TicTacToe.EMPTY, 9);
  }

  @method()
  public move(n: bigint, sig: Sig) {
    // check position `n`
    assert(n >= 0n && n < 9n);

    // check signature `sig`
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);

    // update stateful properties to make the move
    assert(this.board[Number(n)] === TicTacToe.EMPTY, `board at position ${n} is not empty: ${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
    this.board[Number(n)] = play;
    this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
    let outputs = toByteString('');
    if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
    } else if (this.full()) {
      const halfAmount = this.ctx.utxo.value / 2n;
      const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
      const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
      outputs = aliceOutput + bobOutput;
    } else {
      // build a output that contains latest contract state.
      outputs = this.buildStateOutput(this.ctx.utxo.value);
    }

    if (this.changeAmount > 0n) {
      outputs += this.buildChangeOutput();
    }

    // make sure the transaction contains the expected outputs built above
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
  }

  @method()
  won(play: bigint): boolean {
    let lines: FixedArray, 8> = [
      [0n, 1n, 2n],
      [3n, 4n, 5n],
      [6n, 7n, 8n],
      [0n, 3n, 6n],
      [1n, 4n, 7n],
      [2n, 5n, 8n],
      [0n, 4n, 8n],
      [2n, 4n, 6n]
    ];

    let anyLine = false;
    for (let i = 0; i < 8; i++) {
      let line = true;
      for (let j = 0; j < 3; j++) {
        line = line && this.board[Number(lines[i][j])] === play;
      }
      anyLine = anyLine || line;
    }

    return anyLine;
  }

  @method()
  full(): boolean {
    let full = true;
    for (let i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
    }
    return full;
  }
}

Integrating the Front-End with React

Time to connect our contract with the user interface. After compiling the contract and generating the artifact file, we will use it to initialize the contract in the front-end:

import { TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

We will use Yours Wallet to connect to the BSV network and interact with our contract.

Call the Contract

Now, we can enable users to play the game. Each move triggers a contract call, updating its state:

const { tx: callTx } = await p2pkh.methods.unlock(
  (sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
  $publickey,
  {
    pubKeyOrAddrToSign: $publickey.toAddress()
  } as MethodCallOptions
);

Conclusion

Congratulations! You have successfully created a fully functional Tic-Tac-Toe dApp on the BSV blockchain. This adventure has showcased the power of this cutting-edge technology stack.

Additional Resources

• Explore the code: https://github.com/[repo URL]
• Learn more about sCrypt: https://github.com/moneybutton/sCrypt/blob/master/README.md
• Access the Yours Wallet: https://yours.bitcoin.com/
• Discover more about Bitcoin SV: https://www.bitcoinsv.io/
• Join the sCrypt Hackathon 2024 (March 17, 2024): [registration link]

May this comprehensive guide inspire you to build more innovative and engaging decentralized applications on the BSV blockchain.