The Complete Guide To Full Stack Development On BSV Blockchain with React, sCrypt, Typescript and Panda.
Tags: blockchaindevelopers, bitcoin, bsvblockchain, bsvdevelopers
Published: 2024-06-21 14:56:38



## PROJECT OVERVIEW.
This project utilize the following tools 
**Node JS**: [Node.js](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!
Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.
A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.

**React**: The client FrontEnd Framework

**The sCrypt-CLI Tool**: [The sCrypt CLI tool](https://github.com/sCrypt-Inc/scrypt-cli) is used to easily create, compile and publish sCrypt projects. The CLI provides best practice project scaffolding including dependencies such as sCrypt, a test framework ([Mocha](https://mochajs.org/)), code auto-formatting ([Prettier](https://prettier.io/)), linting ([ES Lint](https://eslint.org/)), & more.

**TypeScript**: We chose [TypeScript](https://www.typescriptlang.org/) as the host language because it provides an easy, familiar language (JavaScript), but with type safety, making it easy to get started writing safe smart contracts. There is no need to learn a new programming language or tools if you are already familiar with TypeScript/JavaScript. If you're new to TypeScript, check out this helpful introductory video.

**Yours Wallet**: **Yours Wallet** formerly called **Panda Wallet** is an open-source digital wallet for BSV and [1Sat Ordinals](https://docs.1satordinals.com/) that enables access to decentralized applications developed on [Bitcoin SV](https://bitcoinsv.com/). 

This guide specifically looks into how to create a Full Stack **Hello World React  dApp** and integrate it with a smart contract **Hello World** as an example. It goes further to describe how to wrap your dApp with Yours Wallet integration in case you want to create a dApp with live Wallet integration. It covers basic installations, setting up of development environment, writing smart contracts with sCrypt, integration with Yours wallet, building FrontEnd with React and TypeScript, integrating smart contract with the FrontEnd and testing the dApp.

The project shows the basics of building a react dApp that integrates with contract writing with sCrypt on BSV blockchain.
##BASIC INSTALLATIONS.
Install Node.js (require version >=16) and NPM on your machine by following the instructions over [here](https://nodejs.org/en/download).
Install [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).
NOTE
On Mac computers with Apple silicon like M1/M2, make sure [Rosetta](https://support.apple.com/en-us/102527) is installed. If not, it can be installed with the following command.
softwareupdate --install-rosetta --agree-to-license
3. Install sCrypt-cli globally to your machine by running the code below:
``npm install -g scrypt-cli``
4. You can start playing with react since Node JS has been installed. The npm has been installed together which is a package manager for react. 
To learn more about react installation, check [here](https://react.dev/learn/installation). 
5. TypeScript comes preconfigured with Create React App, so you don't need to install it separately. In case you need to, TypeScript can be installed through three installation routes depending on how you intend to use it: an npm module, a NuGet package or a Visual Studio Extension.
Since we are using Node.js, we will use npm version. If you are using MSBuild in your project, you want the NuGet package or Visual Studio extension. Run the code below:
``npm install -g typescript``
To learn more about typescript installation, check [here](https://www.typescriptlang.org/download).
6. Create your Yours Wallet formerly called Panda wallet. You can get its chrome extension [here](https://chromewebstore.google.com/detail/yours-wallet/mlbnicldlpdimbjdcncnklfempedeipj).

**SETTING UP DEVELOPMENT ENVIRONMENT**
1. Make sure you have Node.js and npm installed on your system. You can run the code below to check: 

```
node --version
V20.11.0
npm --version
10.4.0 
```


You will get output similar to the above if your Node.js and npm has been installed. Note that you need Node.Js version 16 and above. Check the installation guide links in case your Node.js is not properly installed.

## CREATE YOUR BACKEND.
It is a good practice to always create a backend for a dApp project. The proper build and deployment of a backend gives better functionalities and directions on what the features of the backend that the frontend can better interact with. It can also give a clue on how to design the frontend.
1. Create a new smart contract project “hello world” by running the following command in your visual studio code editor or on linux:

---
``npx scrypt-cli project helloworld``.

This will create the smart contract project “hello world” in HELLOWORLD directory on the local machine. 
``cd helloworld``  
This allowed us to migrate into the project directory hello world where we have the smart contract file.
``npm install``
This command installs the necessary dependencies we need for the smart contract in the project directory.
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.
A smart contract extends `SmartContract` base class, it has `@prop decorator` which marks the `helloworld` contract property and `@method decorator` which marks the contract’s method that can be [public](https://docs.scrypt.io/how-to-write-a-contract/#method-decorator) or [non-public](https://docs.scrypt.io/how-to-write-a-contract/#method-decorator).
2. Compile the smart contract by running the command below:

---
`npx scrypt-cli compile`
This command will generate a contract artifact file at artifacts\helloworld.json.
In order to monitor for real time error detection you can run the following code:
`npx scrypt-cli compile --watch`

```
3:35:32 PM - Starting compilation in watch mode...


3:36:01 PM - Found 0 errors. Watching for file changes.

```
The message above is a similar message you will get in your terminal, meaning that auto compilation is working.
 3. Deploy your contract:
Before deploying your contract, you need to generate a Bitcoin key by running the command below:

---
`npm run genprivkey`
**then follow the [instructions](https://docs.scrypt.io/how-to-deploy-and-call-a-contract/faucet) to fund the key**.
**Next, start deploying and calling the contract:

1. To [deploy a smart contract](https://docs.scrypt.io/how-to-deploy-and-call-a-contract/#contract-deployment), simply call its deploy method.
2. To [call a smart contract](https://docs.scrypt.io/how-to-deploy-and-call-a-contract/#contract-call), call one of its public method.**
We need to overwrite “deploy.ts” in the root of the project with the following code to deploy and call the Helloworld contract as shown below:

```
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 to deploy the smart contract:
`npx ts-node deploy.ts`
You will see an output like this

![helloworld contract successful deployed diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxvwv41zy1j9rzo3kzex.png) 
_You can check this deployed contract on chain at https://test.whatsonchain.com/tx/e39961a0f783cf4da7e24c7b9e0f3490e2444ef87d7c3b96fde6e732392f6184_ 
## CREATE YOUR FRONTEND.
1. Create a react app named hello.
Note that we are creating our frontend as "hello" not "helloworld" to prevent conflict in files like `package.json`, `node_modules` and `src files`.
Run the following code:

---

`npx create-react-app hello --template typescript`
We will do most work under the src directory.
Run the init command of the [CLI](https://docs.scrypt.io/installation#the-scrypt-cli-tool) to add sCrypt support in your project.
`cd hello`
`npx scrypt-cli init`
This will install all the dependencies and configures the contract development environment in our react dApp. But you need to run 
`git add .`
`git commit -m “Your commit message”`
`git push`
To commit your changes to master or main if you are working in git remote repository before you can run `“npx scrypt-cli init”`
A successful initialization will give you “src/contracts/hello.ts” file in your react app as shown below:

![Diagram showing successful initialization of "src/contracts/hello.ts" in React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly590ijbk3rst0gjv1f3.png)
2. Load and Compile the smart contract in the dApp.
Copy and paste “helloworld.ts” from the backend helloworld  into the “src/contracts/hello.ts” in the front end “hello” directory. 
We will now compile the contract by running the following command:
`npx scrypt-cli compile`
A successful compilation will generate “artifacts/hello.json” file as shown below:

![Diagram showing successful generation of artifacts/hello.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4co1770s5d7s9yz0mm1e.png)

We will now load the artifact file directly in the index.tsx file as shown below
```
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Helloworld } from './contracts/helloworld'; //loading artifact //file
import artifact from '../artifacts/helloworld.json';
Helloworld.loadArtifact(artifact);
const message = toByteString('hello world', true)  // creating instance //from contract class.
const instance = new Helloworld(sha256(message))


const root = ReactDOM.createRoot(
 document.getElementById("root") as HTMLElement
);
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


```
Just like that we are done integrating our smart contract with the front end. We can now go further to customize the React dApp e.g by styling.

## INTEGRATE YOURS WALLET
Follow this [link](https://docs.scrypt.io/advanced/how-to-add-a-signer) to integrate Yours Wallet formerly known as Panda Wallet.
Request access to the wallet, by using the requestAuth method below:
```
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 using the code below:
```
await instance.connect(signer);
```

The sample code use in this write up can be found in the [repository](https://github.com/Bravolakmedia/helloworld/tree/master) and the whole write up is a basic guide for creating a complete dApp on BSV blockchain  using sCrypt-cli. 


## REFERENCES.
1. Official sCrypt Documentation https://docs.scrypt.io.
2. Introduction To Node.JS https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

3. sCrypt CLI Tools For Creating and Managing Scrypt Projects https://github.com/sCrypt-Inc/scrypt-cli

4. TypeScript https://www.typescriptlang.org/

5. Getting Started Installing Git, https://git-scm.com/book/en/v2/Getting-Started-Installing-Git