docs: add docs about CCC Playground

README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,36 +36,35 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
 
 <p align="center">
- <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
 
-## Installing
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/playgroundCell.png" width="40%" />
+ </a>
+</p>
 
-We design CCC for both front-end and back-end developers. You need only one package to fulfil all your needs:
+We represent cells with graphs in the playground. The three layers of cells represent occupancy, type and lock from inside to outside. The filled center circle means that all CKB of this cell is used to store data.
 
-- [NodeJS](https://www.npmjs.com/package/@ckb-ccc/core): `npm install @ckb-ccc/core`
-- [Custom UI](https://www.npmjs.com/package/@ckb-ccc/ccc): `npm install @ckb-ccc/ccc`
-- [Web Component](https://www.npmjs.com/package/@ckb-ccc/connector): `npm install @ckb-ccc/connector`
-- [React](https://www.npmjs.com/package/@ckb-ccc/connector-react) ([Docs](https://docs.ckbccc.com/modules/_ckb_ccc_connector_react.html)): `npm install @ckb-ccc/connector-react`
+When cells share the same color, the same script governs them. They are owned by the same address (the outside ring) or the same type of assets (the inside ring). Check the script details in the "Scripts" tab.
 
-CCC exports everything on the `ccc` object:
+## App
 
-```typescript
-import { ccc } from "@ckb-ccc/<package-name>";
-```
+<p align="center">
+ <a href="https://app.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
+ </a>
+</p>
 
-For advanced developers, we provided the `cccA` object to fulfil all your needs. You should notice that these interfaces are not stable:
-
-```typescript
-import { cccA } from "@ckb-ccc/<package-name>/advanced";
-```
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 ## Transaction Composing
 
@@ -84,6 +86,27 @@ const txHash = await signer.sendTransaction(tx);
 
 We have done everything!
 
+## Installing
+
+We design CCC for both front-end and back-end developers. You need only one package to fulfil all your needs:
+
+- [NodeJS](https://www.npmjs.com/package/@ckb-ccc/core): `npm install @ckb-ccc/core`
+- [Custom UI](https://www.npmjs.com/package/@ckb-ccc/ccc): `npm install @ckb-ccc/ccc`
+- [Web Component](https://www.npmjs.com/package/@ckb-ccc/connector): `npm install @ckb-ccc/connector`
+- [React](https://www.npmjs.com/package/@ckb-ccc/connector-react) ([Docs](https://docs.ckbccc.com/modules/_ckb_ccc_connector_react.html)): `npm install @ckb-ccc/connector-react`
+
+CCC exports everything on the `ccc` object:
+
+```typescript
+import { ccc } from "@ckb-ccc/<package-name>";
+```
+
+For advanced developers, we provided the `cccA` object to fulfil all your needs. You should notice that these interfaces are not stable:
+
+```typescript
+import { cccA } from "@ckb-ccc/<package-name>/advanced";
+```
+
 ## Documents
 
 Check our [full documents for all detailed APIs](https://docs.ckbccc.com).
@@ -169,6 +192,7 @@ registerCustomLockScriptInfos(generateDefaultScriptInfos());
 
 ## Links
 
+- [CCC Playground](https://live.ckbccc.com/) and its [GitHub Repo](https://github.com/ckb-ecofund/ccc-playground) help you experiment with CCC instantly in browsers.
 - [Nervos CKB Docs](https://docs.nervos.org/) is the documentation website of Nervos CKB.
 - [Lumos](https://github.com/ckb-js/lumos) and its [Docs](https://lumos-website.vercel.app/): Lumos provides utils to help compose CKB transactions.
 - [RGB++ SDK](https://github.com/ckb-cell/rgbpp-sdk) and its [Design](https://github.com/ckb-cell/RGBPlusPlus-design): RGB++ is a protocol for issuing assets with Turing-completed VM on BTC L1.

packages/ccc/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.

packages/ckb-ccc/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.

packages/connector-react/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 ## Use the Connector UI
 

packages/connector/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.

packages/core/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.

packages/demo/src/app/layout.tsx

@@ -6,8 +6,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
- title: "CCC Demo",
- description: "A demo for the CCC library",
+ title: "CCC App",
+ description: "An app based on the CCC library",
  icons: "/favicon.svg",
 };
 

packages/demo/src/app/layoutProvider.tsx

@@ -13,6 +13,7 @@ import {
  Pause,
  Play,
  Search,
+ SquareTerminal,
  X,
 } from "lucide-react";
 import Link from "next/link";
@@ -34,6 +35,9 @@ function Links(props: React.ComponentPropsWithoutRef<"div">) {
  alt="CCC"
  />
  </Link>
+ <Link href="https://live.ckbccc.com/" target="_blank">
+ <SquareTerminal className="h-6 w-6" strokeWidth={3} />
+ </Link>
  <Link href="https://github.com/ckb-ecofund/ccc" target="_blank">
  <svg
  className="h-6 w-6"

packages/eip6963/README.md

@@ -15,6 +15,9 @@
  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
  <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" />
+ <a href="https://live.ckbccc.com/"><img
+ alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground"
+ /></a>
  <a href="https://app.ckbccc.com/"><img
  alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App"
  /></a>
@@ -33,15 +36,25 @@
  Fully enabling CKB's Turing completeness and cryptographic freedom power.
 </p>
 
-## Preview
+## Playground
+
+<p align="center">
+ <a href="https://live.ckbccc.com/">
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" />
+ </a>
+</p>
+
+This project is still under active development, and we are looking forward to your feedback. You can [experiment instantly in the playground](https://live.ckbccc.com/). If you are new to the CKB, we recommend checking [Nervos CKB Docs](https://docs.nervos.org/) for basic knowledge.
+
+## App
 
 <p align="center">
  <a href="https://app.ckbccc.com/">
- <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="30%" />
+ <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" />
  </a>
 </p>
 
-This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
+For non-developers, you can also [try CCC's app now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.