diff --git a/templates/readme.md b/templates/readme.md index 64a07ae..7932262 100644 --- a/templates/readme.md +++ b/templates/readme.md @@ -1 +1 @@ -All the templates are located in the `v3` like folder, where `v3` represent your offckb version. +All the templates are located in the `v4` folder, representing the current offckb template version. diff --git a/templates/v3/js-script-next-js/README.md b/templates/v3/js-script-next-js/README.md deleted file mode 100644 index a17be74..0000000 --- a/templates/v3/js-script-next-js/README.md +++ /dev/null @@ -1,91 +0,0 @@ -# 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. diff --git a/templates/v3/js-script-next-js/package.json b/templates/v3/js-script-next-js/package.json deleted file mode 100644 index 57b453a..0000000 --- a/templates/v3/js-script-next-js/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "private": true, - "workspaces": [ - "packages/*" - ], - "scripts": { - "build": "pnpm -r run build", - "clean": "pnpm -r run clean", - "test": "pnpm -r run test", - "format": "pnpm -r run format" - }, - "devDependencies": { - "prettier": "~3.5.3", - "prettier-plugin-organize-imports": "~4.1.0", - "rimraf": "~6.0.1", - "typescript": "~5.8.2" - }, - "pnpm": { - "onlyBuiltDependencies": [ - "esbuild" - ], - "overrides": { - "brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12", - "brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2", - "axios@>=1.0.0 <1.12.0": ">=1.12.0", - "sha.js@<=2.4.11": ">=2.4.12", - "form-data@>=4.0.0 <4.0.4": ">=4.0.4" - } - } -} diff --git a/templates/v3/js-script-next-js/packages/frontend/.env b/templates/v3/js-script-next-js/packages/frontend/.env deleted file mode 100644 index fdea672..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/.env +++ /dev/null @@ -1 +0,0 @@ -NEXT_PUBLIC_NETWORK=devnet diff --git a/templates/v3/js-script-next-js/packages/frontend/.eslintrc.json b/templates/v3/js-script-next-js/packages/frontend/.eslintrc.json deleted file mode 100644 index bffb357..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/templates/v3/js-script-next-js/packages/frontend/.gitignore b/templates/v3/js-script-next-js/packages/frontend/.gitignore deleted file mode 100644 index fd3dbb5..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/.gitignore +++ /dev/null @@ -1,36 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js -.yarn/install-state.gz - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/templates/v3/js-script-next-js/packages/frontend/README.md b/templates/v3/js-script-next-js/packages/frontend/README.md deleted file mode 100644 index 788b31b..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/README.md +++ /dev/null @@ -1,44 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Targeting on Different CKB Networks - -edit `.env` file: - -```bash -NEXT_PUBLIC_NETWORK=devnet # devnet, testnet or mainnet -``` - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/templates/v3/js-script-next-js/packages/frontend/app/favicon.ico b/templates/v3/js-script-next-js/packages/frontend/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/templates/v3/js-script-next-js/packages/frontend/app/favicon.ico and /dev/null differ diff --git a/templates/v3/js-script-next-js/packages/frontend/app/globals.css b/templates/v3/js-script-next-js/packages/frontend/app/globals.css deleted file mode 100644 index 2ac8372..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/app/globals.css +++ /dev/null @@ -1,7 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -a { - @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600; -} diff --git a/templates/v3/js-script-next-js/packages/frontend/app/layout.tsx b/templates/v3/js-script-next-js/packages/frontend/app/layout.tsx deleted file mode 100644 index 637a925..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/app/layout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; -import './globals.css'; - -const inter = Inter({ subsets: ['latin'] }); - -export const metadata: Metadata = { - title: 'CKB Next APP', - description: 'Generated by create next app', -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - {children} - - ); -} diff --git a/templates/v3/js-script-next-js/packages/frontend/app/page.tsx b/templates/v3/js-script-next-js/packages/frontend/app/page.tsx deleted file mode 100644 index 97ddece..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/app/page.tsx +++ /dev/null @@ -1,110 +0,0 @@ -'use client'; - -import offckb from '@/offckb.config'; -import { ccc } from '@ckb-ccc/connector-react'; -import Wallet from './wallet'; - -export default function Home() { - const isScriptDeployed = offckb.myScripts['hello-world.bc'] != null; - return ( - -
-
Minimal Template for CKB DApp
-
- - Development docs - -
- -
-
Tech Stack
-
  • - - ckb-js-std & ckb-js-vm - {' '} - for smart contract development in Typescript -
    • -
  • - - Next.js - {' '} - for Javascript frontend framework -
    • -
  • - - CCC - {' '} - for off-chain CKB SDK -
    • -
    - -
    -
    CKB Blockchain
    -
  • - Current Network: {offckb.currentNetwork}, Address Prefix: {offckb.addressPrefix} -
    • -
  • - CKB RPC URL:{' '} - - {offckb.rpcUrl} - -
    • -
  • - Switch different networks with .env{' '} - - NEXT_PUBLIC_NETWORK - -
    • -
    - -
    -
    Smart Contract
    -
    - hello-world Script{' '} - {isScriptDeployed ? ( -
    -
  • code_hash: {offckb.myScripts['hello-world.bc']?.codeHash}
    • -
  • hash_type: {offckb.myScripts['hello-world.bc']?.hashType}
    • -
  • - outpoint: {offckb.myScripts['hello-world.bc']?.cellDeps[0].cellDep.outPoint.txHash}: - {offckb.myScripts['hello-world.bc']?.cellDeps[0].cellDep.outPoint.index} -
    • -
    - ) : ( - - Not Found,{' '} - - deploy - {' '} - it first. - - )} -
    -
    - -
    -
    Wallet Connector
    -
    - -
    -
    - -
    -
    - This template is created by{' '} - - offckb - -
    -
    -     - ); -} diff --git a/templates/v3/js-script-next-js/packages/frontend/app/wallet-client.ts b/templates/v3/js-script-next-js/packages/frontend/app/wallet-client.ts deleted file mode 100644 index c4afd3b..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/app/wallet-client.ts +++ /dev/null @@ -1,23 +0,0 @@ -'use client'; - -import { ccc, CellDepInfoLike, KnownScript, Script } from '@ckb-ccc/connector-react'; -import offCKBConfig, { Network } from '@/offckb.config'; - -export const DEVNET_SCRIPTS: Record & { cellDeps: CellDepInfoLike[] }> = { - [KnownScript.Secp256k1Blake160]: offCKBConfig.systemScripts.secp256k1_blake160_sighash_all!.script, - [KnownScript.Secp256k1Multisig]: offCKBConfig.systemScripts.secp256k1_blake160_multisig_all!.script, - [KnownScript.AnyoneCanPay]: offCKBConfig.systemScripts.anyone_can_pay!.script, - [KnownScript.OmniLock]: offCKBConfig.systemScripts.omnilock!.script, - [KnownScript.XUdt]: offCKBConfig.systemScripts.xudt!.script, -}; - -export function buildCccClient(network: Network) { - const client = - network === 'mainnet' - ? new ccc.ClientPublicMainnet() - : network === 'testnet' - ? new ccc.ClientPublicTestnet() - : new ccc.ClientPublicTestnet({ url: offCKBConfig.rpcUrl, scripts: DEVNET_SCRIPTS }); - - return client; -} diff --git a/templates/v3/js-script-next-js/packages/frontend/app/wallet.tsx b/templates/v3/js-script-next-js/packages/frontend/app/wallet.tsx deleted file mode 100644 index 8155ec4..0000000 --- a/templates/v3/js-script-next-js/packages/frontend/app/wallet.tsx +++ /dev/null @@ -1,181 +0,0 @@ -'use client'; - -import { ccc } from '@ckb-ccc/connector-react'; -import React, { useEffect, useState } from 'react'; -import { readEnvNetwork } from '@/offckb.config'; -import { buildCccClient } from './wallet-client'; - -function WalletIcon({ wallet, className }: { wallet: ccc.Wallet; className?: string }) { - return ( - // eslint-disable-next-line @next/next/no-img-element - {wallet.name} - ); -} - -function Button(props: React.ButtonHTMLAttributes) { - return ( - - - - ); -} - -function Transfer() { - const signer = ccc.useSigner(); - const [transferTo, setTransferTo] = useState(''); - const [amount, setAmount] = useState(''); - const [hash, setHash] = useState(''); - const [data, setData] = useState(''); - - return ( -
    - {hash !== '' ?

    {hash}

    : <>} -
    -
    - setTransferTo(e.currentTarget.value)} - placeholder="Enter address to transfer to" - /> - setAmount(e.currentTarget.value)} - placeholder="Enter amount in CKB to transfer" - /> -