feat: merge V0.3.x into master (#236)

* feat(template): add js-script-next-js template (#231)

* feat(template): add js-script-next-js template

* fix add packages/* in pnpm-workspace

* fix(template): name js script to hello-world

* fix js-script tempalte package.json

* fix(template): js-script isScriptDeployed

* fix(template): script info of hello-world.bc

* docs(template): update script descript in js-scrip template

* feat(create): add create dapp only (#232)

* feat(create): add create dapp only

* ask for inject config after create dapp only project

* fix: inject config with file path target

* chore: update readme for create dapp-only

* fix(readme): section link

* update default CKB version and debugger minimal version (#234)

* build(deps-dev): bump the npm_and_yarn group with 1 update (#235)

Author: RetricSu

README.md

@@ -30,6 +30,7 @@ There are BREAKING CHANGES between v0.2.x and v0.3.x, make sure to read the [mig
   - [Tweak Devnet Config](#tweak-devnet-config)
   - [Create a full-stack Project](#create-a-full-stack-project)
   - [Create a script-only Project](#create-a-script-only-project)
+  - [Create a dApp-only Project](#create-a-dapp-only-project)
   - [Build and Deploy a script](#build-and-deploy-a-script)
   - [Start the frontend project](#start-the-frontend-project)
   - [Debug a transaction](#debug-a-transaction)
@@ -208,6 +209,14 @@ offckb create <your-project-name> --script
 
 Note: you need to have rust/cargo/cargo-generate/clang 16+ installed in your environment to use this command. offckb doesn't do anything really, it just call [ckb-script-template](https://github.com/cryptape/ckb-script-templates) to do all the magic.
 
+### Create a dApp-only Project
+
+You can create a new dApp project without the script(CKB Smart Contract). This is useful when you don't need to create your own on-chain script logic.
+
+```sh
+offckb create <your-project-name> --dapp # or -d
+```
+
 ### Build and Deploy a script
 
 The fullstack boilerplate project is a monorepo, which contains a script project and a frontend project.

pnpm-workspace.yaml

@@ -1,3 +1,6 @@
 onlyBuiltDependencies:
   - cpu-features
   - secp256k1
+
+packages:
+  - "packages/*"

src/cfg/setting.ts

@@ -68,6 +68,9 @@ export interface Settings {
       cachePath: string;
       binFolder: string;
     };
+    ckbDebugger: {
+      minVersion: string;
+    };
   };
 }
 
@@ -78,7 +81,7 @@ export const defaultSettings: Settings = {
   },
   bins: {
     rootFolder: path.resolve(dataPath, 'bins'),
-    defaultCKBVersion: '0.113.1',
+    defaultCKBVersion: '0.201.0',
     downloadPath: path.resolve(cachePath, 'download'),
   },
   devnet: {
@@ -118,6 +121,9 @@ export const defaultSettings: Settings = {
       cachePath: path.resolve(cachePath, 'tools', 'moleculec-es'),
       binFolder: path.resolve(dataPath, 'tools', 'moleculec-es'),
     },
+    ckbDebugger: {
+      minVersion: '0.200.0',
+    },
   },
 };
 

src/cli.ts

@@ -11,7 +11,7 @@ import { DeployOptions, deploy } from './cmd/deploy';
 import { syncScripts } from './cmd/sync-scripts';
 import { TransferOptions, transfer } from './cmd/transfer';
 import { BalanceOption, balanceOf } from './cmd/balance';
-import { create, selectBareTemplate, CreateOption, createScriptProject } from './cmd/create';
+import { create, selectBareTemplate, CreateOption, createScriptProject, createDappProject } from './cmd/create';
 import { printMyScripts, DeployedScriptOption } from './cmd/my-scripts';
 import { Config, ConfigItem } from './cmd/config';
 import { debugSingleScript, debugTransaction, parseSingleScriptOption } from './cmd/debug';
@@ -35,12 +35,17 @@ program
   .command('create [your-project-name]')
   .description('Create a new dApp from bare templates')
   .option('-s, --script', 'Only create the script project')
+  .option('-d, --dapp', 'Only create the ccc dapp project')
   .action(async (projectName: string, option: CreateOption) => {
     const name = projectName ?? 'my-first-ckb-project';
     if (option.script) {
       return await createScriptProject(name);
     }
 
+    if (option.dapp) {
+      return await createDappProject(name);
+    }
+
     const template = await selectBareTemplate();
     return create(name, template);
   });

src/cmd/create.ts

@@ -1,17 +1,26 @@
 import path from 'path';
 import { findFileInFolder } from '../util/fs';
 import { gitCloneAndDownloadFolderSync } from '../util/git';
-import { select } from '@inquirer/prompts';
+import { injectConfig } from './inject-config';
+import { select, confirm } from '@inquirer/prompts';
 import { execSync } from 'child_process';
 import { genMyScriptsJsonFile, genSystemScriptsJsonFile } from '../scripts/gen';
 import { readSettings } from '../cfg/setting';
 import { BareTemplateOption, loadBareTemplateOpts } from '../template/option';
 import { OffCKBConfigFile } from '../template/offckb-config';
 const version = require('../../package.json').version;
 
-export interface CreateOption {
-  script: boolean;
-}
+export type ScriptOnly = {
+  script: true;
+  dapp?: false;
+};
+
+export type DappOnly = {
+  dapp: true;
+  script?: false;
+};
+
+export type CreateOption = ScriptOnly | DappOnly;
 
 export function createScriptProject(name: string) {
   const cmd = `cargo generate gh:cryptape/ckb-script-templates workspace --name ${name}`;
@@ -22,6 +31,17 @@ export function createScriptProject(name: string) {
   }
 }
 
+export async function createDappProject(name: string) {
+  const cmd = `npx create-ccc-app@latest ${name} --ts --}`;
+  try {
+    execSync(cmd, { encoding: 'utf-8', stdio: 'inherit' });
+    const dappFolderPath = path.resolve(process.cwd(), name);
+    await askForInjectOffckbConfig(dappFolderPath);
+  } catch (error: unknown) {
+    console.error('create ccc-appp project failed, ', (error as Error).message);
+  }
+}
+
 export async function create(name: string, template: BareTemplateOption) {
   const targetPath = path.resolve(process.cwd(), name);
   const settings = readSettings();
@@ -69,3 +89,13 @@ export async function selectBareTemplate() {
 
   return opts.find((opt) => opt.value === answer)!;
 }
+
+export async function askForInjectOffckbConfig(dappFolderPath: string) {
+  const answer = await confirm({
+    message: 'Do you want to inject offckb configs in your project  so that it can work with local blockchain info?',
+  });
+  if (answer) {
+    const target = path.resolve(dappFolderPath, 'offckb.config.ts');
+    injectConfig({ target });
+  }
+}

src/cmd/debug.ts

@@ -119,7 +119,7 @@ export function buildDebugFullTransactionFilePath(network: Network, txHash: stri
 }
 
 export function debugRaw(options: string) {
-  if (!CKBDebugger.isBinaryInstalled()) {
+  if (!CKBDebugger.isBinaryInstalled() || !CKBDebugger.isBinaryVersionValid()) {
     CKBDebugger.installCKBDebugger();
   }
   return CKBDebugger.runRaw(options);

src/cmd/inject-config.ts

@@ -40,6 +40,7 @@ export function injectConfig({ target }: InjectConfigProp) {
   const myScriptCodeHash = offCKB.myScripts['script-name'].codeHash;
   const omnilockScriptCodeHash = offCKB.systemScripts['omnilock'].codeHash;
 
-Check example at https://github.com/nervosnetwork/docs.nervos.org/tree/develop/examples/simple-transfer
+Check more on how to integrate offckb config to develop your app at https://docs.nervos.org/docs/getting-started/quick-start#different-frontend-framework
+A Full example can also be found at https://github.com/nervosnetwork/docs.nervos.org/tree/develop/examples/simple-transfer
   `);
 }

src/template/option.ts

@@ -8,14 +8,21 @@ export interface BareTemplateOption {
 
 const templates: Array<BareTemplateOption> = [
   {
-    name: 'Remix-Vite Bare Templates',
+    name: 'JS Script with Next.js fullstack template',
+    value: 'js-script-next-js',
+    description: 'A full-stack template with Next-js and ckb-js-vm script',
+    tag: ['next.js', 'tailwindcss', 'ckb-js-vm', 'typescript'],
+    author: 'retric@cryptape.com',
+  },
+  {
+    name: 'Rust Script with Remix-Vite fullstack template',
     value: 'remix-vite-template',
     description: 'A full-stack template with Remix-vite and ckb-script-templates',
     tag: ['remix', 'vite', 'tailwindcss', 'ckb-script-templates', 'typescript', 'rust'],
     author: 'retric@cryptape.com',
   },
   {
-    name: 'Next.js Bare Templates',
+    name: 'Rust Script with Next.js fullstack template',
     value: 'next-js-template',
     description: 'A full-stack template with Next.js framework and ckb-script-templates',
     tag: ['next.js', 'tailwindcss', 'ckb-script-templates', 'typescript', 'rust'],

src/tools/ckb-debugger.ts

@@ -1,4 +1,5 @@
 import { spawnSync, execSync } from 'child_process';
+import { readSettings } from '../cfg/setting';
 
 export interface DebugOption {
   fullTxJsonFilePath: string;
@@ -23,6 +24,21 @@ export class CKBDebugger {
     return result.status === 0;
   }
 
+  static isBinaryVersionValid() {
+    const result = spawnSync('ckb-debugger', ['--version']);
+    if (result.status !== 0) {
+      console.error('ckb-debugger is not installed');
+      return false;
+    }
+    const version = result.stdout.toString().split(' ')[1];
+    const settings = readSettings();
+    if (version < settings.tools.ckbDebugger.minVersion) {
+      console.error(`ckb-debugger version ${version} is less than ${settings.tools.ckbDebugger.minVersion}`);
+      return false;
+    }
+    return true;
+  }
+
   static installCKBDebugger() {
     const command = `cargo install --git https://github.com/nervosnetwork/ckb-standalone-debugger ckb-debugger`;
     try {

templates/v3/js-script-next-js/README.md

@@ -0,0 +1,91 @@
+# offckb-template
+
+This is a Minimal Template for CKB Full-Stack Dapps generated by [offckb](https://github.com/RetricSu/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-js-vm](https://github.com/nervosnetwork/ckb-js-vm) for smart contract development
+- [next-js](https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app) and [ccc](https://github.com/ckb-devrel/ccc) for frontend development
+
+To start the project, install the dependecies:
+
+```bash
+pnpm i
+```
+
+## Script(Smart Contract)
+
+The on-chain script project is powered by [ckb-js-vm](https://github.com/nervosnetwork/ckb-js-vm) bootstrapped with [`create-ckb-js-vm-app`](https://github.com/nervosnetwork/ckb-js-vm).
+
+Build on-chain script:
+
+```bash
+pnpm build
+```
+
+Test on-chain script:
+
+```bash
+pnpm test
+```
+
+## dApp frontend development
+
+first, enter the frontend workspace:
+
+```sh
+cd frontend
+```
+
+start the app:
+
+```sh
+pnpm dev
+```
+
+change the CKB blockchain network:
+
+edit `.env` file:
+
+```bash
+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](https://github.com/nervosnetwork/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:
+
+```sh
+cd frontend
+offckb deploy --network devnet
+```
+
+If successfully deployed, you will see the deploy script info for your smart contract recorded in the path recorded in the `offckb.config.ts` file.
+
+Every time you deploy a new version of your smart contracts, those script infos will be updated by `offckb` in the place recorded in `offckb.config.ts` and work out-of-box in your frontend.
+
+You can also deploy smart contracts to the CKB Testnet like this:
+
+```sh
+cd frontend
+offckb deploy --network testnet
+```
+
+and start your frontend Dapp targeting Testnet:
+
+edit `.env` file:
+
+```bash
+NEXT_PUBLIC_NETWORK=testnet # devnet, testnet or mainnet
+```
+
+```bash
+cd frontend
+pnpm 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](https://github.com/nervosnetwork/ckb-cli) to deploy smart contracts and do transactions for the CKB mainnet.