The Complete Guide To Full Stack Bsv Development with sCrypt.

Introducing sCrypt

sCrypt is an embedded domain specific language (eDSL) based on TypeScript for writing Smartcontract on Bitcoin. Scrypt uses and enables us to write an eDSL that abstract away many of the complex low level operations you’d typically need to do if you are building without it, making it easier and appreciable to write Smartcontract on the Bitcoin SV network.

In this guide to full stack BSV development with sCrypt, we’ll walk through the process of writing smartcontract, deploying it to the blockchain, calling it and also integrating a front-end. This will provide a basic introduction to the sCrypt programming language and how it’s used to build decentralized applications on the BSV blockchain.

By the end of this guide, you’ll have a better understanding of fullstack development on Bitcoin SV using sCrypt.

The tools we will be using for this project include;

sCrypt language: a typescript base framework for writing smartcontract on Bitcoin SV with a high-level abstraction. It’s a static –typed language which provides a safety and easy to use.

sCrypt library: a comprehensive library for client-side seamless interaction with the Bsv blockchain

sCrypt Cli: to easily create and compile sCrypt into bitcoin script and provides a best-practice scaffolding to help developers follow the recommended standards and conventions for writing sCrypt code.

React: the client-side framework.

Yours wallet:Yours Wallet is an open-source, non-custodial Bitcoin SV web3 wallet designed for ease of use and everyday transactions. Yours offers a straightforward and secure way to receive, send, and manage your digital assets.

Make sure all prerequisite are install;

1. Install Node.js (require version >=16) and NPM on your machine by following the instructions over here

2. Install Git

3. Next, install the sCrypt Cli: follow this command to install the sCrypt Cli globally to your machine

                npm install -g scrypt-cli
   

Creating a new project

Run the following commands to create a new project:

                 npx scrypt-cli project helloworld
                 cd helloworld

Install all necessary dependencies on your project:

                 npm install

The resulting project will contain a sample smart contract src/contracts/helloworld.ts, along with all the scaffolding. Let's modify it to the following code:

         import { assert, ByteString, method, prop, sha256, Sha256, SmartContract } from 'scrypt-ts'

export class Helloworld extends SmartContract {

    @prop()
    hash: Sha256;

    constructor(hash: Sha256){
        super(...arguments);
        this.hash = hash;
    }

    @method()
    public unlock(message: ByteString) {
        assert(sha256(message) == this.hash, 'Hash does not match')
    }
}

The Helloworld contract stores the sha256 hash of a message in the contract property hash. Only a message which hashes to the value set in this.hash will unlock the contract.

Compile Contract

1. Run following command to compile the Helloworld contract:

                    npx scrypt-cli compile
   

This command will generate a contract artifact file at artifacts\helloworld.json.

1. Then call the loadArtifact() function in the code:

                   await Helloworld.loadArtifact()
   

Compile using the watch option

                    npx scrypt-cli compile --watch

The watch option in the provided command appears to facilitate continuous monitoring of sCrypt level errors during the compilation process. When invoked with the specified command, it utilizes the "npx scrypt-cli compile --watch" syntax to initiate a watch mode. This mode likely allows users to observe real-time updates and notifications regarding any errors specific to sCrypt, which are distinct from TypeScript errors.

Contract Deployment & Call

Before we deploy the contract, you need to generate a Bitcoin key.

                    npm run genprivkey

then follow the instruction to fund the key.After getting your Bitcoin key and funding, you can now proceed into deploying and calling you contract

1. To deploy a smart contract, simply call its deploy method.

2. To call a smart contract, call one of its public method.

Overwrite deploy.ts in the root of the project with the following code to deploy and call the Helloworld contract:

          import { Helloworld } from './src/contracts/helloworld'
import { getDefaultSigner } from './tests/utils/txHelper'
import { toByteString, sha256 } from 'scrypt-ts'

(async () => {

    // set network env
    process.env.NETWORK = 'testnet'

    const message = toByteString('hello world', true)

    await Helloworld.loadArtifact()
    const instance = new Helloworld(sha256(message))

    // connect to a signer
    await instance.connect(getDefaultSigner())

    // deploy the contract and lock up 42 satoshis in it
    const deployTx = await instance.deploy(42)
    console.log('Helloworld contract deployed: ', deployTx.id)

    // contract call
    const { tx: callTx } = await instance.methods.unlock(message)
    console.log('Helloworld contract `unlock` called: ', callTx.id)

})()

Run the following command:

              npx ts-node deploy.ts

You will see some output like:

You can view the deployment transaction using the WhatsOnChain blockchain explorer:

You can also view the calling transaction

Congrats! You have deployed and called your first Bitcoin smart contract, we will proceed on how to integrate a frontend to our smartcontract.

Integrate With a Frontend

This section, you will learn how to integrate your smart contract to a Frontend, so that users can interact with it.

Step 1

Create your frontend project.
React
Run the following command to create a React named helloworld.

           npx create-react-app helloworld --template typescript

Step 2

Run the init command of the CLI to add sCrypt support in your project.

                   cd helloworld
                   npx scrypt-cli init

This installs all the dependencies and configures the contract development environment.

Load Contract

Before interacting with a smart contract at the front end, we need to load the contract class in two steps.

We'll take a look at how to generate the artifact by ourselves first.

1. Compile Contract

Before you start, you need to get the contract source files, as a frontend developer. we will be using the Helloworld contract we wrote in the beginning of this guide as our contract src file,so copy and paste helloworld.ts into the src/contracts directory.

Run the following command to compile the contract.

             npx scrypt-cli compile

After the compilation, you will get an JSON artifact file at artifacts/helloworld.json.

2. Load Artifact

Now with the contract artifact file, you directly load it in the index.tsx file.

          import { Helloworld } from './contracts/helloworld';
          import artifact from '../artifacts/helloworld.json';
          Helloworld.loadArtifact(artifact);

Now you can create an instance from the contract class as before.

           const message = toByteString('hello world', true)
           const instance = new Helloworld(sha256(message))

Integrate Wallet

we will integrate Panda, a browser extension wallet similar to MetaMask, into the project
To request access to the wallet, you can use its requestAuth method.

              const provider = new DefaultProvider({
              network: bsv.Networks.testnet
              });

              const signer = new PandaSigner(provider);

              // request authentication
              const { isAuthenticated, error } = await 
              signer.requestAuth();
              if (!isAuthenticated) {
              // something went wrong, throw an Error with `error` 
               message
              throw new Error(error);
             }

              // authenticated
              // you can show user's default address
             const userAddress = await signer.getDefaultAddress();
              // ...

Now you can connect the wallet to the contract instance as before.

             await instance.connect(signer);

Afterwards, you can interact with the contract from the front end by calling its method

Conclusion

FullStack BSV development with sCrypt is rapidly growing. It offers developers the ability to create decentralized applications that are powerful, secure and scalable. With sCrypt, developers can build a powerful smart contract that runs on the BSV blockchain, providing a fast, secure, and decentralized platform for applications. sCrypt makes it easier for developers to create these applications, with its high-level abstractions and static-typing system.
Access the full comprehensive sCrypt documentation here