Skip to main content

Build a Simple Lock

⏰ Estimated Time: 10 - 15 min
🔧 What You Will Need:
For detailed installation steps, refer to our Installation Guide

Tutorial Overview​

In this tutorial, you will learn how to create a full-stack dApp, including both the frontend and the Script, to deepen your understanding of CKB blockchain development.

Our example dApp will use a simple toy lock. You will create a Lock Script

A Script that enforces access and ownership of a Cell.
named hash_lock to secure some CKB tokens and build a web interface for users to transfer tokens from this hash_lock.

The hash_lock project involves specifying a hash in the Script's script_args

script_args refers to the arguments imported into the CKB-VM instance as input for the Scripts.
. To unlock it, users must provide the preimage that matches this hash.

note

This toy lock example isn't intended for production. Use it ONLY n Testnet as an starting point for learning the basics.

Setup Devnet & Run Example​

Step 1: Clone the Repository​

To get started with the tutorial dApp, clone the repository and navigate to the appropriate directory using the following commands:

git clone https://github.com/nervosnetwork/docs.nervos.org.git
cd docs.nervos.org/examples/simple-lock

Step 2: Start the Devnet​

To interact with the dApp, ensure that your Devnet is up and running. After installing @offckb/cli, open a terminal and start the Devnet with the following command:

offckb node

You might want to check pre-funded accounts and copy private keys for later use. Open another terminal and execute:

offckb accounts

Step 3: Build and Deploy the Script​

Navigate to your project, compile and deploy the Script to Devnet.

Compile the Script:

make build

Deploy the Script binary to the Devnet:

cd frontend && offckb deploy --network devnet

Step 4: Run the DApp​

Navigate to your project's frontend folder, install the node dependencies, and start running the example:

cd frontend && npm i && npm run dev

Now, the app is running in http://localhost:3000

Step 5: Deposit Some CKB​

With our dApp up and running, you can now input a hash value to construct a hash_lock Script. To utilize this hash_lock Script, we need to prepare some Live Cells

A Cell that has not been consumed and is available for use.
that use this Script as their Lock Script. This preparation process is known as deposit. We can use offckb to quickly deposit to any CKB address. Here's an example of how to deposit 100 CKB into a specific address:

offckb deposit --network devnet ckt1qry2mh3j5cylve2tl2sjpg3zhp9wjeq2l92rvxtd2scsx4jks500xpqrnm4k4g7j8nlnyc0j3y3z5q6s5ns29k8wx9prkn8ff09mhepmagkhur6h 10000000000

Once you've deposited some CKB into the hash_lock CKB address, you can attempt to transfer some balance from this address to another. This will allow you to test the hash_lock Script and see if it functions as expected.

You can try clicking the "Transfer" button. The website will prompt you to enter the preimage value. If the preimage is correct, the transaction will be accepted on-chain. If not, the transaction will fail because our hash_lock Script rejects the incorrect preimage and works as expected.

Behind the Scene​

Script Logic​

The concept behind hash_lock is to specify a hash in a particular Script. To unlock this Script, you must provide the preimage to reveal the hash. More specifically, the hash_lock Script will execute the following validations on-chain:

  • First, the Script will read the preimage value from the transaction witness field.
  • Second, the Script will take the preimage and hash it using ckb-default-hash based on blake-2b-256.
  • Lastly, the Script will compare the hash generated from the preimage with the hash value from the script_args. If the two match, it returns 0 as success; otherwise, it fails.

To gain a better understanding, let's examine the full Script code. Open the main.rs file in the contracts folder:

simple-lock/contracts/hash-lock/src/main.rs
#![no_std]
#![cfg_attr(not(test), no_main)]

#[cfg(test)]
extern crate alloc;

use ckb_hash::blake2b_256;
use ckb_std::ckb_constants::Source;

#[cfg(not(test))]
use ckb_std::default_alloc;
use ckb_std::error::SysError;
#[cfg(not(test))]
ckb_std::entry!(program_entry);
#[cfg(not(test))]
default_alloc!();

#[repr(i8)]
pub enum Error {
    IndexOutOfBound = 1,
    ItemMissing,
    LengthNotEnough,
    Encoding,
    // Add customized errors here...
    CheckError,
    UnMatch,
}

impl From<SysError> for Error {
    fn from(err: SysError) -> Self {
        match err {
            SysError::IndexOutOfBound => Self::IndexOutOfBound,
            SysError::ItemMissing => Self::ItemMissing,
            SysError::LengthNotEnough(_) => Self::LengthNotEnough,
            SysError::Encoding => Self::Encoding,
            SysError::Unknown(err_code) => panic!("unexpected sys error {}", err_code),
        }
    }
}

pub fn program_entry() -> i8 {
    ckb_std::debug!("This is a sample contract!");

    match check_hash() {
        Ok(_) => 0,
        Err(err) => err as i8,
    }
}

pub fn check_hash() -> Result<(), Error> {
    let script = ckb_std::high_level::load_script()?;
    let expect_hash = script.args().raw_data().to_vec();

    let witness_args = ckb_std::high_level::load_witness_args(0, Source::GroupInput)?;
    let preimage = witness_args
        .lock()
        .to_opt()
        .ok_or(Error::CheckError)?
        .raw_data();

    let hash = blake2b_256(preimage.as_ref());

    if hash.eq(&expect_hash.as_ref()) {
        Ok(())
    } else {
        Err(Error::UnMatch)
    }
}

Here are a few things to note:

  • In the check_hash() function, we use ckb_std::high_level::load_witness_args syscalls to read the preimage value from the witness fieled in the CKB transaction. The structure used in the witness fieled here is the witnessArgs.
  • We then use the CKB default hash function blake2b_256 from the use ckb_hash::blake2b_256 library to hash the preimage and get its hash value.
  • Next, we compare the two hash values to see if they match (hash.eq(&expect_hash.as_ref())). If they do not match, we return a custom error code Error::UnMatch (which is 6).

The whole logic is quite simple and straightforward. How do we use such a Script in our dApp? Let's check the frontend code.

Use the Hash_Lock Script in Your DApp​

Let's take a look at the generateAccount function: It accepts a hash string parameter. This hash string is used as script_args to build a hash_lock Script. This Script can then be used as the lock to secure CKB tokens.

Note that we can directly use offCKB.myScripts["hash-lock"] to get the code_hash and hash_type information, thanks to the offckb templates.

simple-lock/frontend/app/hash-lock.ts
// ...
export function generateAccount(hash: string) {
  const lockArgs = "0x" + hash;
  const lockScript = {
    codeHash: offCKB.myScripts["hash-lock"]!.codeHash,
    hashType: offCKB.myScripts["hash-lock"]!.hashType,
    args: lockArgs,
  };
  const address = ccc.Address.fromScript(lockScript, cccClient).toString();
  return {
    address,
    lockScript: ccc.Script.from(lockScript),
  };
}
// ...

Another important aspect of the generateAccount function is that it also returns a CKB address. This address is computed from the Lock Script using CCC utils ccc.Address.fromScript. Essentially, the CKB address is just the encoded version of the Lock Script.

Think of it like a safe deposit box. The address is like the serial number of the lock (used to identify the lock) on top of the safe box. When you deposit CKB tokens into a CKB address, it's like depositing money into a specific safe box with a specific lock.

When we talk about how much balance a CKB address holds, we're simply referring to how much value a specific lock secures. The balance (capacities) calculation function in our frontend code works by collecting the Live Cells that use a specific Lock Script and summing their capacities.

simple-lock/frontend/app/hash-lock.ts
// ...
export async function capacityOf(address: string): Promise<bigint> {
  const addr = await ccc.Address.fromString(address, cccClient);
  let balance = await cccClient.getBalance([addr.script]);
  return balance;
}
// ...

To transfer (or unlock) CKB from this hash_lock Script address, we need to build a CKB transaction that consumes some Live Cells which use the hash_lock Script and generates new Live Cells which use the receiver's Lock Script. Additionally, in the witness field of the transaction, we need to provide the preimage for the hash value in the hash_lock Script args to prove that we are indeed the owner of the hash_lock Script (since only the owner knows the preimage).

We use CCC to build such a transaction.

simple-lock/frontend/app/hash-lock.ts
// ...
export async function unlock(
  fromAddr: string,
  toAddr: string,
  amountInCKB: string
): Promise<string> {
  const fromScript = (await ccc.Address.fromString(fromAddr, cccClient)).script;
  const toScript = (await ccc.Address.fromString(toAddr, cccClient)).script;
  const readSigner = new ccc.SignerCkbScriptReadonly(cccClient, fromScript);

  // Build the full transaction
  const tx = ccc.Transaction.from({
    outputs: [{ lock: toScript }],
    outputsData: [],
  });

  // CCC transactions are easy to be edited
  tx.outputs.forEach((output, i) => {
    if (output.capacity > ccc.fixedPointFrom(amountInCKB)) {
      alert(`Insufficient capacity at output ${i} to store data`);
      return;
    }
    output.capacity = ccc.fixedPointFrom(amountInCKB);
  });

  // fill the witness with preimage
  const preimageAnswer = window.prompt("please enter the preimage: ");
  if (preimageAnswer == null) {
    throw new Error("user abort input!");
  }
  const newWitnessArgs = new ccc.WitnessArgs(
    stringToBytesHex(preimageAnswer) as `0x${string}`
  );
  console.log("newWitnessArgs: ", newWitnessArgs);
  tx.setWitnessArgsAt(0, newWitnessArgs);

  // Complete missing parts for transaction
  await tx.addCellDeps(offCKB.myScripts["hash-lock"]!.cellDeps[0].cellDep);
  await tx.completeInputsByCapacity(
    readSigner,
    ccc.fixedPointFrom(amountInCKB)
  );
  const balanceDiff =
    (await tx.getInputsCapacity(cccClient)) - tx.getOutputsCapacity();
  console.log("balanceDiff: ", balanceDiff);
  if (balanceDiff > ccc.Zero) {
    tx.addOutput({
      lock: fromScript,
    });
  }
  //await tx.completeFeeBy(readSigner, 1000);

  const txHash = await cccClient.sendTransaction(tx);
  console.log("Full transaction: ", tx.stringify());
  return txHash;
}

Is the Hash_Lock Safe to Use?​

The short answer is no. The hash_lock is not very secure for guarding your CKB tokens. Some of you might already know the reason, but here are some points to consider:

  • Miner Front-running: Since the preimage value is revealed in the witness, once you submit the transaction to the blockchain, miners can see this preimage and construct a new transaction to transfer the tokens to their addresses before you do.
  • Balance Vulnerability: Once you transfer part of the balance from the hash_lock address, the preimage value is revealed on-chain. This makes the remaining tokens locked in the hash_lock vulnerable since anyone who sees the preimage can steal them.

Even though using a hash and preimage is too simple to be a secure Lock Script, it’s a great starting point for learning. The goal is to understand how CKB Scripts work and gain experience with CKB development.

Congratulations!​

By following this tutorial, you've mastered the basics of building a custom lock and a full-stack dApp on CKB. Here's a quick recap:

  • We built a custom Lock Script to guard CKB tokens.
  • We built a dApp frontend to transfer/unlock tokens from this Lock Script.
  • We explored the limitations and vulnerabilities of our naive Lock Script design.

Next Step​

So now your dApp works great on the local blockchain, you might want to switch it to different environments like Testnet and Mainnet.

To do that, just change the environment variable NETWORK to testnet in the .env file:

NEXT_PUBLIC_NETWORK=testnet # devnet, testnet or mainnet

For more details, check out the README.md.

Additional Resources​