No wallet connected
; } // signer is a ccc.Signer } ```Connected: {wallet?.name}
) : ( ); } ```Connected: {wallet?.name}
Not connected
; returnBalance: {ccc.fixedPointToString(balance ?? 0n)} CKB
; } ``` Next: use the same `signer` to [compose transactions](/docs/guides/compose-transactions) or [sign messages](/docs/guides/sign-message).
### Bagua — the outer and middle rings [#bagua--the-outer-and-middle-rings]
Each Cell renders two concentric **Bagua** (eight-trigram) rings:
* **Outer ring** — derived from the Cell's **Lock** Script
* **Middle ring** — derived from the Cell's **Type** Script (if any)
The trigram pattern is deterministic: `getScriptBagua(script)` extracts 24 bits from the script hash (`hash & 0xffffff000 >> 12`) and splits them into eight 3-bit trigrams. Each trigram draws three lines — a solid line for bit `0` and a broken line for bit `1` — following the classical trigram encoding (☰ Qian, ☷ Kun, etc.).
The **color** of each ring is also derived from the script hash: `hash & 0xfff % 360` gives the HSL hue. This means:
* Cells with the **same Lock** script share the same outer ring color and pattern
* Cells with the **same Type** script share the same middle ring color and pattern
* You can visually identify which Cells belong to the same owner or token type at a glance
### Taiji — the center circle [#taiji--the-center-circle]
The center of each Cell displays a slowly spinning **Taiji** (yin-yang) symbol:
* The **yang** (dark) side uses the Lock script color
* The **yin** (light) side is translucent white
* A small colored dot inside represents the **free capacity percentage** — how much capacity in this Cell is not occupied by data. Its diameter scales proportionally, and its color matches the Type script color
This tells you at a glance how "full" a Cell is.
### Reading the numbers [#reading-the-numbers]
Below the Taiji symbol you'll see:
* **Capacity** in CKB (large number)
* **DAO profit** (if the Cell is in NervosDAO, shown as `+ X CKB`)
* A shortened **OutPoint** (`txHash:index`) linking to the CKB Explorer
* **Data size** in bytes (if the Cell contains data)
Click on any Cell to expand its full details: OutPoint, capacity, Lock script (address), Type script, and raw output data.
## Sharing code [#sharing-code]
Click **Share** to publish your code to a set of Nostr relays. The Playground generates a `nevent` identifier and redirects to a URL like:
```
https://live.ckbccc.com/?src=nostr:nevent1...
```
Anyone who opens this URL will see your exact code loaded in the editor. Code is stored on decentralized Nostr relays — no centralized server involved.
You can also load code from any URL by passing a `src` query parameter:
```
https://live.ckbccc.com/?src=https://raw.githubusercontent.com/sporeprotocol/dob-cookbook/refs/heads/main/examples/dob0/1.colorful-loot.ts
```
## Tips [#tips]
* **Use `render()` liberally** — it's your primary debugging tool. Pass a transaction at each stage to see how CCC mutates it.
* **Step mode is your friend** — click **Step** to pause at each `render()`, inspect the state, then click **Continue**. Great for understanding the transaction lifecycle.
* **Code persists in localStorage** — if you don't use a `?src=` URL, your code is saved automatically and restored when you return.
* **Get testnet CKB** — click **About** → **CKB Testnet Faucet** to fund your testnet address, or visit [faucet.nervos.org](https://faucet.nervos.org/) directly.
* **Full IntelliSense** — the editor provides autocomplete and type-checking for all CCC types, plus `@noble/curves`, `@noble/hashes`, and `@nervina-labs/dob-render`.
* **Share to collaborate** — after writing a script, click **Share** to generate a link that others can open to reproduce your code environment.
## Important Notes [#important-notes]
{signerInfo && }
);
}
function Address() {
const { signerInfo } = ccc.useCcc();
const [address, setAddress] = React.useState("");
React.useEffect(() => {
signerInfo?.signer.getRecommendedAddress().then(setAddress);
}, [signerInfo]);
return {address}
; } ```