create-blocklet 0.9.6 → 0.9.7

package/common/.prettierrc

@@ -6,5 +6,15 @@
   "bracketSameLine": true,
   "semi": true,
   "singleQuote": true,
-  "plugins": ["prettier-plugin-import-sort"]
+  "importOrder": [
+    "^@core/(.*)$",
+    "^@server/(.*)$",
+    "^@ui/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
 }

package/common/scripts/build-clean.mjs

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-
 import { rimrafSync } from 'rimraf';
 
 console.log('clean .blocklet folder');

package/common/scripts/bump-version.mjs

@@ -2,34 +2,38 @@
 import { execSync } from 'child_process';
 import { $, chalk, fs } from 'zx';
 
-execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
-
-const { version } = await fs.readJSON('package.json');
-await fs.writeFileSync('version', version);
-
-console.log(chalk.greenBright(`[info]: start to modify blocklet version to ${version}`));
-await $`blocklet version ${version}`;
-console.log(chalk.greenBright('[info]: blocklet version modified.'));
-
-let newChangelog = '';
-try {
-  const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
-  newChangelog = gitRes.stdout.trim();
-} catch {
-  console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+async function main() {
+  execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
+
+  const { version } = await fs.readJSON('package.json');
+  await fs.writeFileSync('version', version);
+
+  console.log(chalk.greenBright(`[info]: start to modify blocklet version to ${version}`));
+  await $`blocklet version ${version}`;
+  console.log(chalk.greenBright('[info]: blocklet version modified.'));
+
+  let newChangelog = '';
+  try {
+    const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
+    newChangelog = gitRes.stdout.trim();
+  } catch {
+    console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+  }
+
+  const now = new Date();
+  const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+  const title = `## ${version} (${currentDate})`;
+
+  await fs.ensureFile('CHANGELOG.md');
+  const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
+  const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
+  await fs.writeFile('CHANGELOG.md', changelog);
+
+  console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
+
+  process.stdin.setRawMode(true);
+  process.stdin.resume();
+  process.stdin.on('data', process.exit.bind(process, 0));
 }
 
-const now = new Date();
-const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
-const title = `## ${version} (${currentDate})`;
-
-await fs.ensureFile('CHANGELOG.md');
-const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
-const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
-await fs.writeFile('CHANGELOG.md', changelog);
-
-console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
-
-process.stdin.setRawMode(true);
-process.stdin.resume();
-process.stdin.on('data', process.exit.bind(process, 0));
+main();

package/index.js

@@ -26,7 +26,7 @@ import {
   checkYarn,
 } from './lib/utils.js';
 
-const { yellow, red, green, cyan, blue, bold, magenta } = chalk;
+const { yellow, red, green, cyan, blue, bold } = chalk;
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -54,6 +54,11 @@ const templates = [
     display: '[dapp: todo-list] react + express + typescript + DID Spaces',
     color: yellow,
   },
+  {
+    name: 'did-connect-dapp',
+    display: '[dapp: did-connect] Full stack app (react.js + express.js) with DID Connect integration',
+    color: yellow,
+  },
   {
     name: 'solidjs-dapp',
     display: '[dapp] solid + express.js',
@@ -62,7 +67,7 @@ const templates = [
   {
     name: 'vue-dapp',
     display: '[dapp] vue3 + express.js',
-    color: green,
+    color: yellow,
   },
   // {
   //   name: 'vue2-dapp',
@@ -72,7 +77,7 @@ const templates = [
   {
     name: 'svelte-dapp',
     display: '[dapp] svelte + express.js',
-    color: magenta,
+    color: yellow,
   },
   // FIXME: @zhanghan add this template in the future
   // {
@@ -89,12 +94,12 @@ const templates = [
   {
     name: 'react-static',
     display: '[static] react',
-    color: yellow,
+    color: green,
   },
   {
     name: 'solidjs-static',
     display: '[static] solidjs',
-    color: yellow,
+    color: green,
   },
   {
     name: 'vue-static',
@@ -114,23 +119,23 @@ const templates = [
   {
     name: 'svelte-static',
     display: '[static] svelte',
-    color: magenta,
+    color: green,
   },
   {
     name: 'html-static',
     display: '[static] html',
-    color: blue,
+    color: green,
   },
   // api
   {
     name: 'express-api',
     display: '[api] express.js',
-    color: yellow,
+    color: blue,
   },
   {
     name: 'nestjs-api',
     display: '[api] nestjs',
-    color: yellow,
+    color: blue,
   },
 ];
 
@@ -461,7 +466,8 @@ async function init() {
     );
     modifyBlockletYaml(
       (yamlConfig) => {
-        yamlConfig.name = mainBlocklet ? finalTemplateName : name;
+        // NOTICE: don't need set name anymore
+        // yamlConfig.name = mainBlocklet ? finalTemplateName : name;
         yamlConfig.title = mainBlocklet ? templateName : name;
       },
       templateDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",

package/templates/did-connect-dapp/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@arcblock/eslint-config',
+};

package/templates/did-connect-dapp/README.md

@@ -0,0 +1,143 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+  - index.html - main html file, template for react
+- screenshots/ - Screenshots
+- api/ - Api side code
+  - hooks/ - blocklet lifecycle hooks
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - routes/auth - DID Connect backend registration
+  - dev.js - Api side dev mode entry point
+  - index.js - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.development.local - Local development environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.
+   `npm install -g @blocklet/cli`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.
+   `blocklet server init --mode=debug`
+   `blocklet server start`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/getting-started](https://www.arcblock.io/docs/blocklet-developer/getting-started)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn` or `pnpm install`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment).
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/did-connect-dapp/api/dev.js

@@ -0,0 +1,5 @@
+const { app } = require('./index');
+
+import('vite-plugin-blocklet').then(({ setupClient }) => {
+  setupClient(app);
+});

package/templates/did-connect-dapp/api/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('@blocklet/sdk/lib/error-handler');
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const logger = require('../libs/logger');
+const { wallet } = require('../libs/auth');
+const { name } = require('../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  const { state } = await client.getAccountState({ address: wallet.toAddress() }, { ignoreFields: ['context'] });
+  if (!state) {
+    const hash = await client.declare({ moniker: name, wallet });
+    logger.log(`app account declared on chain ${env.chainHost}`, hash);
+  } else {
+    logger.log(`app account already declared on chain ${env.chainHost}`);
+  }
+};
+
+(async () => {
+  try {
+    await ensureAccountDeclared();
+    process.exit(0);
+  } catch (err) {
+    logger.error(`${name} pre-start error`, err.message);
+    process.exit(1);
+  }
+})();

package/templates/did-connect-dapp/api/index.js

@@ -0,0 +1,48 @@
+require('dotenv-flow').config();
+require('express-async-errors');
+const path = require('path');
+const express = require('express');
+const cookieParser = require('cookie-parser');
+const fallback = require('@blocklet/sdk/lib/middlewares/fallback');
+
+const authRoutes = require('./routes/auth');
+const { name, version } = require('../package.json');
+const logger = require('./libs/logger');
+
+const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+
+const router = express.Router();
+
+authRoutes.init(router);
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(__dirname, '../dist');
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  // eslint-disable-next-line no-unused-vars
+  app.use((err, req, res, next) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  });
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT, 10);
+
+const server = app.listen(port, (err) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});
+
+module.exports = {
+  app,
+  server,
+};

package/templates/did-connect-dapp/api/libs/auth.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const getWallet = require('@blocklet/sdk/lib/wallet');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
+const Client = require('@ocap/client');
+
+const env = require('./env');
+
+const client = new Client(env.chainHost);
+const wallet = getWallet();
+const authenticator = new WalletAuthenticator();
+const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+  client,
+};

package/templates/did-connect-dapp/api/libs/env.js

@@ -0,0 +1,9 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+  chainId: 'playground',
+  localTokenId: process.env.LOCAL_TOKEN_ID || 'z35n6UoHSi9MED4uaQy6ozFgKPaZj2UKrurBG',
+  apiPrefix: process.env.API_PREFIX || '',
+};

package/templates/did-connect-dapp/api/libs/logger.js

@@ -0,0 +1,3 @@
+const logger = console;
+
+module.exports = logger;

package/templates/did-connect-dapp/api/libs/utils.js

@@ -0,0 +1,70 @@
+const { getRandomBytes } = require('@ocap/mcrypto');
+const pick = require('lodash/pick');
+const { toAddress, fromBase58 } = require('@ocap/util');
+const { isFromPublicKey, toTypeInfo } = require('@arcblock/did');
+const { fromPublicKey } = require('@ocap/wallet');
+
+const { client } = require('./auth');
+const env = require('./env');
+
+const getRandomMessage = (len = 16) => {
+  const hex = getRandomBytes(len);
+  return hex.replace(/^0x/, '').toUpperCase();
+};
+
+const getTokenInfo = async () => {
+  const [{ state }] = await Promise.all([client.getTokenState({ address: env.localTokenId })]);
+
+  const result = {
+    symbol: state.symbol,
+    decimal: state.decimal,
+  };
+
+  return result;
+};
+const pickGasPayerHeaders = ({ headers }) => ({ headers: pick(headers, ['x-gas-payer-sig', 'x-gas-payer-pk']) });
+
+const verifyAssetClaim = async ({ claim, challenge, trustedIssuers = [], trustedParents = [] }) => {
+  const fields = ['asset', 'ownerProof', 'ownerPk', 'ownerDid'];
+  for (const field of fields) {
+    if (!claim[field]) {
+      throw new Error(`Invalid asset claim: ${field} is missing`);
+    }
+  }
+
+  const address = claim.asset;
+  const ownerDid = toAddress(claim.ownerDid);
+  const ownerPk = fromBase58(claim.ownerPk);
+  const ownerProof = fromBase58(claim.ownerProof);
+  if (isFromPublicKey(ownerDid, ownerPk) === false) {
+    throw new Error('Invalid asset claim: owner did and pk mismatch');
+  }
+
+  const owner = fromPublicKey(ownerPk, toTypeInfo(ownerDid));
+  if (owner.verify(challenge, ownerProof) === false) {
+    throw new Error('Invalid asset claim: owner proof invalid');
+  }
+
+  const { state } = await client.getAssetState({ address }, { ignoreFields: ['context'] });
+  if (!state) {
+    throw new Error('Invalid asset claim: asset not found on chain');
+  }
+  if (state.owner !== ownerDid) {
+    throw new Error('Invalid asset claim: owner does not match with on chain state');
+  }
+  if (trustedIssuers.length && trustedIssuers.includes(state.issuer) === false) {
+    throw new Error('Invalid asset claim: asset issuer not in whitelist');
+  }
+  if (trustedParents.length && trustedParents.includes(state.parent) === false) {
+    throw new Error('Invalid asset claim: asset parent not in whitelist');
+  }
+
+  return state;
+};
+
+module.exports = {
+  getRandomMessage,
+  getTokenInfo,
+  pickGasPayerHeaders,
+  verifyAssetClaim,
+};

package/templates/did-connect-dapp/api/routes/auth/index.js

@@ -0,0 +1,15 @@
+/* eslint-disable global-require */
+const { handlers } = require('../../libs/auth');
+
+module.exports = {
+  init(app) {
+    handlers.attach({ app, ...require('./request-profile') });
+    handlers.attach({ app, ...require('./request-text-signature') });
+    handlers.attach({ app, ...require('./request-digest-signature') });
+    handlers.attach({ app, ...require('./request-transaction-signature') });
+    handlers.attach({ app, ...require('./request-payment') });
+    handlers.attach({ app, ...require('./request-nft') });
+    handlers.attach({ app, ...require('./request-multiple-claims') });
+    handlers.attach({ app, ...require('./request-multiple-steps') });
+  },
+};

package/templates/did-connect-dapp/api/routes/auth/request-digest-signature.js

@@ -0,0 +1,51 @@
+const { toTypeInfo } = require('@arcblock/did');
+const { fromPublicKey } = require('@ocap/wallet');
+const { types, getHasher } = require('@ocap/mcrypto');
+const { toBase58 } = require('@ocap/util');
+
+const logger = require('../../libs/logger');
+
+const hasher = getHasher(types.HashType.SHA3);
+const data = 'abcdefghijklmnopqrstuvwxyz'.repeat(32);
+
+const action = 'request-digest-signature';
+
+module.exports = {
+  action,
+  claims: {
+    signature: () => {
+      return {
+        description: 'Please sign the digest',
+        digest: toBase58(hasher(data, 1)),
+      };
+    },
+  },
+
+  onAuth: ({ userDid, userPk, claims, updateSession }) => {
+    const type = toTypeInfo(userDid);
+    const user = fromPublicKey(userPk, type);
+    const claim = claims.find((x) => x.type === 'signature');
+
+    logger.info(`${action}.onAuth`, { userPk, userDid, claim });
+
+    if (claim.origin) {
+      if (user.verify(claim.origin, claim.sig, claim.method !== 'none') === false) {
+        throw new Error('Invalid origin signature');
+      }
+    }
+
+    // We do not need to hash the data when verifying
+    if (claim.digest) {
+      if (user.verify(claim.digest, claim.sig, false) === false) {
+        throw new Error('Invalid digest signature');
+      }
+    }
+    updateSession({
+      result: {
+        origin: data,
+        digest: claim.digest,
+        sig: claim.sig,
+      },
+    });
+  },
+};

package/templates/did-connect-dapp/api/routes/auth/request-multiple-claims.js

@@ -0,0 +1,52 @@
+const { fromBase58, toBase58 } = require('@ocap/util');
+const { getHasher, types } = require('@ocap/mcrypto');
+
+const { getRandomMessage } = require('../../libs/utils');
+const logger = require('../../libs/logger');
+
+const hasher = getHasher(types.HashType.SHA3);
+const data = 'abcdefghijklmnopqrstuvwxyz'.repeat(32);
+
+const action = 'request-multiple-claims';
+
+module.exports = {
+  action,
+  claims: {
+    signText: [
+      'signature',
+      () => {
+        return {
+          type: 'mime:text/plain',
+          data: getRandomMessage(),
+          description: 'Please sign the text',
+        };
+      },
+    ],
+    signDigest: [
+      'signature',
+      () => {
+        return {
+          description: 'Please sign the digest',
+          digest: toBase58(hasher(data, 1)),
+        };
+      },
+    ],
+  },
+
+  onAuth: ({ userDid, userPk, claims, updateSession }) => {
+    logger.info(`${action}.onAuth`, { userPk, userDid, claims });
+    updateSession({
+      result: [
+        {
+          origin: fromBase58(claims[0].origin).toString(),
+          sig: claims[0].sig,
+        },
+        {
+          origin: data,
+          digest: claims[1].digest,
+          sig: claims[1].sig,
+        },
+      ],
+    });
+  },
+};