retricsu/ckb-hands-on-example

A simple hash lock example to showcase the development of CKB with scripts and the frontend.

CKB-Hands-On

A simple hash lock example to showcase the development of CKB with scripts and the frontend.

Given a hash, you need to provide its preimage in order to unlock the Lock Script in the transaction

Example: Hash = blake2b_256(preimage)

offckb-template

This is a Minimal Template for CKB Full-Stack Dapps generated by offckb.

Offckb does not do the magic. It just wraps the new CKB smart contract template and the CKB javascript Dapp framework into one mono-repo. Under the hook, it uses:

• ckb-scripts-template for smart contract development
• next-js and Lumos for frontend development

Smart contract development

By default, this template comes with a single simple smart contract hello-world: contracts/hello-world/src/main.rs.

The smart contract is written in Rust lang. In order to develop, the following dependencies are required:

• git, make, sed, bash, sha256sum and others Unix utilities.
• Rust with riscv64 target: rustup target add riscv64imac-unknown-none-elf
• Clang 16+
• cargo-generate

Check out the ckb-script-templates for more detail

Usage

add a new smart-contract:

make generate

build smart-contract:

make build

run test:

make test

For more detail, check out ckb-script-templates

dApp frontend development

first, enter the frontend workspace:

cd frontend

start the app:

npm i && npm run dev

change the CKB blockchain network:

edit .env file:

NEXT_PUBLIC_NETWORK=devnet # devnet, testnet or mainnet

Deploy to devnet/testnet with offckb

Once you build your smart contracts, you can deploy them to CKB blockchain with ckb-cli or any other tools.

If you want to test them in devnet/testnet blockchain, then offckb might be the ideal selection.

offckb will look for the offckb.config.ts file to read config information. so you will need to enter the frontend workspace to do the instruction:

cd frontend
offckb deploy --network devnet

If successfully deployed, you will see the deploy script info for your smart contract recorded in the offckb.config.ts file. You can then directly import and use your smart contract in your frontend Dapp like this:

import offckb from 'offckb.config';
import { CellDep } from '@ckb-lumos/lumos';

const lumosConfig = offckb.lumosConfig;
const myContractDep: CellDep = {
  outPoint: {
    txHash: lumosConfig.SCRIPTS.YOUR_SCRIPT_NAME!.TX_HASH,
    index: lumosConfig.SCRIPTS.YOUR_SCRIPT_NAME!.INDEX,
  },
  depType: lumosConfig.SCRIPTS.YOUR_SCRIPT_NAME!.DEP_TYPE,
};

Every time you deploy a new version of your smart contracts, those script infos will be updated by offckb in the offckb.config.ts and work out-of-box in your frontend.

You can also deploy smart contracts to the CKB Testnet like this:

cd frontend
offckb deploy --network testnet

and start your frontend Dapp targeting Testnet:

edit .env file:

NEXT_PUBLIC_NETWORK=testnet # devnet, testnet or mainnet

cd frontend
npm run dev

Note that the mainnet network is not supported in offckb since offckb is focusing on building a friendly development environment for CKB. To gain better security, it is recommended to use production tools like ckb-cli to deploy smart contracts and do transactions for the CKB mainnet.