create-blocklet 0.9.5 → 0.9.6

package/index.js

@@ -44,6 +44,11 @@ const templates = [
     display: '[dapp] react + express + typescript',
     color: yellow,
   },
+  {
+    name: 'did-wallet-dapp',
+    display: '[dapp: did-wallet] Full stack app (react.js + express.js) with DID Wallet integration',
+    color: yellow,
+  },
   {
     name: 'todo-list-example',
     display: '[dapp: todo-list] react + express + typescript + DID Spaces',
@@ -148,6 +153,68 @@ function checkDid(did = '') {
   return true;
 }
 
+function extractContent(content, section) {
+  const regex = new RegExp(`## ${section}\\s*([\\s\\S]*?)(?=\\n## |$)`, 'i');
+  const match = content.match(regex);
+  return match ? match[1].trim() : '';
+}
+
+function mergeReadme(templateName, targetDir, isMonorepo = false) {
+  const ignoreTemplates = ['todo-list-example'];
+  if (ignoreTemplates.includes(templateName)) {
+    return;
+  }
+  const commonReadmePath = path.join(__dirname, 'templates', 'base-readme.md');
+  const templateReadmePath = path.join(__dirname, 'templates', templateName, 'README.md');
+  const targetReadmePath = isMonorepo
+    ? path.join(targetDir, 'blocklets', templateName, 'README.md')
+    : path.join(targetDir, 'README.md');
+
+  let commonContent = fs.readFileSync(commonReadmePath, 'utf8');
+  const templateContent = fs.existsSync(templateReadmePath) ? fs.readFileSync(templateReadmePath, 'utf8') : '';
+
+  const templateSections = templateContent.match(/^## .+$/gm) || [];
+
+  templateSections.forEach((section) => {
+    const sectionName = section.replace('## ', '');
+    const templateSection = extractContent(templateContent, sectionName);
+
+    if (commonContent.includes(`## ${sectionName}`)) {
+      // If the section exists in the base readme
+      if (templateSection.trim()) {
+        // If the template section is not empty, replace the entire section
+        const sectionRegex = new RegExp(`## ${sectionName}[\\s\\S]*?(?=\\n## |$)`, 'g');
+        commonContent = commonContent.replace(sectionRegex, `\n\n## ${sectionName}\n\n${templateSection}`);
+      } else {
+        // If the template section is empty, remove the entire section including the title
+        const sectionRegex = new RegExp(`\n*## ${sectionName}[\\s\\S]*?(?=\n## |$)`, 'g');
+        commonContent = commonContent.replace(sectionRegex, '');
+      }
+    } else {
+      // If the section doesn't exist in the base readme, replace the corresponding variable
+      const variableRegex = new RegExp(`\\{${sectionName}\\}`, 'g');
+      commonContent = commonContent.replace(variableRegex, templateSection);
+    }
+  });
+
+  // Remove remaining unreplaced variables
+  commonContent = commonContent.replace(/\{[A-Z_]+\}\n*/g, '');
+
+  // Remove empty sections (sections with only title and no content)
+  commonContent = commonContent.replace(/\n*## [^\n]+\n+(?=## |$)/g, '');
+
+  // Ensure two newlines before each section
+  commonContent = commonContent.replace(/\n*(## [^\n]+)/g, '\n\n$1');
+
+  // Remove leading newlines
+  commonContent = commonContent.replace(/^\n+/, '');
+
+  // Remove multiple consecutive newlines, keeping at most two
+  commonContent = commonContent.replace(/\n{3,}/g, '\n\n');
+
+  // Write the merged README file
+  fs.writeFileSync(targetReadmePath, commonContent.trim());
+}
 async function init() {
   const { version } = await fs.readJSONSync(path.resolve(__dirname, 'package.json'));
   await echoBrand({ version });
@@ -382,6 +449,9 @@ async function init() {
       }
     })();
 
+    // merge readme
+    mergeReadme(templateName, root, !!mainBlocklet);
+
     modifyPackage(
       (pkg) => {
         pkg.name = mainBlocklet ? finalTemplateName : name;

package/package.json

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

package/templates/base-readme.md

@@ -0,0 +1,103 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+{PROJECT_DESCRIPTION}
+
+## File Structure
+
+{FILE_STRUCTURE}
+
+## 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#start-blocklet-server]( https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.
+   `blocklet server init`
+   `blocklet server start`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+   
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+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 --app-id {appId}` command(Make sure the blocklet is bundled before deployment).
+  - appId is the id of the container you want to run on your server, you can see it in your server's dashboard
+- 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}
+  ```
+
+## 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
+  ```
+
+  Connect to a store, You may need some testnet tokens to deploy your blocklet, you can get some from https://faucet.abtnetwork.io/
+
+  ```shell
+  blocklet connect https://test.store.blocklet.dev/
+  ```
+
+  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.
+
+{QA_SECTION}
+
+## 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-wallet-dapp/.eslintrc.js

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

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

@@ -0,0 +1,32 @@
+## PROJECT_DESCRIPTION
+
+ This is a full stack app (react.js + express.js) with DID Wallet integration. That means you can use your DID wallet to login and get a user session.
+
+## 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
+  - index.js - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.local - Local 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
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+

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

@@ -0,0 +1,8 @@
+const { app, server } = require('./index');
+
+import('vite-plugin-blocklet').then(({ setupClient }) => {
+  setupClient(app, {
+    server,
+    importMetaHot: import.meta.hot,
+  });
+});

package/templates/did-wallet-dapp/api/functions/app.js

@@ -0,0 +1,65 @@
+/* eslint-disable no-console */
+const path = require('path');
+const cors = require('cors');
+const morgan = require('morgan');
+const express = require('express');
+const cookieParser = require('cookie-parser');
+const bodyParser = require('body-parser');
+const fallback = require('@blocklet/sdk/lib/middlewares/fallback');
+
+const userRoutes = require('../routes/user');
+
+const isProduction = process.env.NODE_ENV !== 'development';
+
+// Create and config express application
+const server = express();
+server.use(cookieParser());
+server.use(bodyParser.json());
+server.use(bodyParser.urlencoded({ extended: true }));
+server.use(cors());
+
+const router = express.Router();
+
+userRoutes.init(router);
+
+if (isProduction) {
+  server.use(
+    morgan((tokens, req, res) => {
+      const log = [
+        tokens.method(req, res),
+        tokens.url(req, res),
+        tokens.status(req, res),
+        tokens.res(req, res, 'content-length'),
+        '-',
+        tokens['response-time'](req, res),
+        'ms',
+      ].join(' ');
+
+      if (isProduction) {
+        // Log only in AWS context to get back function logs
+        console.log(log);
+      }
+
+      return log;
+    }),
+  );
+  server.use(router);
+
+  const staticDir = path.resolve(__dirname, '../../', 'dist');
+  server.use(express.static(staticDir, { maxAge: '365d', index: false }));
+  server.use(fallback('index.html', { root: staticDir }));
+
+  server.use((req, res) => {
+    res.status(404).send('404 NOT FOUND');
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  server.use((err, req, res, next) => {
+    console.error(err.stack);
+    res.status(500).send('Something broke!');
+  });
+} else {
+  server.use(router);
+}
+
+module.exports = { server };

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

@@ -0,0 +1,13 @@
+/* eslint-disable no-console */
+const dotenv = require('dotenv-flow');
+dotenv.config();
+
+const { server: app } = require('./functions/app');
+
+const port = parseInt(process.env.BLOCKLET_PORT, 10) || 3030;
+const server = app.listen(port, (err) => {
+  if (err) throw err;
+  console.log(`> app ready on ${port}`);
+});
+
+module.exports = { app, server };

package/templates/did-wallet-dapp/api/libs/constant.js

@@ -0,0 +1 @@
+module.exports = {};

package/templates/did-wallet-dapp/api/routes/user.js

@@ -0,0 +1,30 @@
+const AuthService = require('@blocklet/sdk/service/auth');
+const middlewares = require('@blocklet/sdk/lib/middlewares');
+
+const authClient = new AuthService();
+
+module.exports = {
+  init(app) {
+    // middleware.user() is used to get the user info from the session, see more: https://www.arcblock.io/docs/blocklet-developer/blocklet-sdk#session
+    app.get('/api/user', middlewares.user(), async (req, res) => {
+      if (!req.user) {
+        res.json({ user: null });
+        return;
+      }
+      try {
+        // get user info from auth service
+        const { user } = await authClient.getUser(req.user.did);
+        user.role = user.role || req.user.role;
+        res.json({ user });
+      } catch (err) {
+        console.error(err);
+        res.json({ user: null });
+      }
+    });
+    app.get('/api/data', (req, res) => {
+      res.json({
+        message: 'Hello Blocklet!',
+      });
+    });
+  },
+};

package/templates/did-wallet-dapp/blocklet.md

@@ -0,0 +1,3 @@
+# Please update here
+
+A did wallet dapp template.

package/templates/did-wallet-dapp/blocklet.yml

@@ -0,0 +1,59 @@
+name: template-did-wallet-dapp
+title: Blocklet Template DID Wallet Dapp
+description: A Blocklet DAPP blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.2.8
+version: 0.1.0
+logo: logo.png
+files:
+  - dist
+  - logo.png
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.16.28'
+  os: '*'
+  cpu: '*'
+scripts:
+  dev: npm run start
+environments: []
+capabilities: {}
+screenshots: []
+components: []
+navigation:
+  - id: home
+    title:
+      en: Home page
+      zh: 首页
+    link: /home
+  - id: profile
+    title:
+      en: Profile page
+      zh: Profile 页面
+    link: /profile

package/templates/did-wallet-dapp/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0" />
+  <meta name="theme-color" content="#000000" />
+</head>
+
+<body>
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/index.jsx"></script>
+</body>
+
+</html>

package/templates/did-wallet-dapp/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "did-wallet-dapp",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "blocklet dev",
+    "lint": "eslint src api --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "start": "vite-node -c vite.config.server.js -w api/dev.js",
+    "clean": "node scripts/build-clean.mjs",
+    "bundle": "npm run bundle:client && npm run bundle:api",
+    "bundle:client": "vite build",
+    "bundle:api": "npm run clean && blocklet bundle --compact --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "deploy:child": "npm run bundle && blocklet deploy .blocklet/bundle --app-did=<%= did %>",
+    "dev:child": "blocklet dev --component --app-did=<%= did %>",
+    "prepare": "npx simple-git-hooks",
+    "bump-version": "zx --quiet scripts/bump-version.mjs"
+  },
+  "dependencies": {
+    "@blocklet/sdk": "^1.16.31",
+    "@ocap/mcrypto": "^1.18.135",
+    "@ocap/util": "^1.18.135",
+    "@ocap/wallet": "^1.18.135",
+    "body-parser": "^1.20.2",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
+    "express-async-errors": "^3.1.1",
+    "morgan": "^1.10.0"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config": "^0.3.2",
+    "@arcblock/did-connect": "^2.10.32",
+    "@arcblock/ux": "^2.10.32",
+    "@blocklet/js-sdk": "^1.16.31",
+    "@blocklet/ui-react": "^2.10.32",
+    "bumpp": "^9.4.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "dayjs": "^1.11.11",
+    "dotenv-flow": "^4.1.0",
+    "flat": "^6.0.1",
+    "nodemon": "^3.1.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^6.24.1",
+    "rimraf": "^5.0.7",
+    "simple-git-hooks": "^2.11.1",
+    "vite": "^5.3.3",
+    "vite-node": "^2.0.2",
+    "vite-plugin-blocklet": "^0.9.6",
+    "vite-plugin-require": "^1.2.14",
+    "vite-plugin-svgr": "^4.2.0",
+    "zx": "^8.1.4"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  }
+}

package/templates/did-wallet-dapp/src/app.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+
+import { SessionProvider } from './libs/session';
+import { translations } from './locales';
+import Layout from './components/layout';
+import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import './global.css';
+
+const Home = React.lazy(() => import('./pages/home'));
+const Profile = React.lazy(() => import('./pages/profile'));
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route path="/" element={<Navigate to="/home" />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/profile" element={<Profile />} />
+      </Route>
+    </Routes>
+  );
+}
+
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
+
+  return (
+    <SessionProvider>
+      <LocaleProvider translations={translations} fallbackLocale="en">
+        <Router basename={basename}>
+          <App />
+        </Router>
+      </LocaleProvider>
+    </SessionProvider>
+  );
+}

package/templates/did-wallet-dapp/src/assets/blocklet.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.152 10.6417L31.72 0L13.288 10.6417V24.7942L1 31.8887V53.1722L19.432 63.8139L31.6902 56.7366L31.72 56.7538L31.7498 56.7366L44.008 63.8139L62.44 53.1722V31.8887L50.152 24.7942V10.6417ZM60.52 32.9972L48.232 25.9027V11.7502L31.72 2.21703L15.208 11.7502V25.9028L2.92 32.9972V52.0636L19.432 61.5968L31.6902 54.5196L31.72 54.5368L31.7498 54.5196L44.008 61.5968L60.52 52.0636V32.9972Z" fill="url(#paint0_linear_2412_13557)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.1521 24.8307L31.7201 14.189L13.2881 24.8307V46.1141L31.7201 56.7558L50.1521 46.1141V24.8307ZM15.2081 25.9392L31.7201 16.406L48.2321 25.9392V45.0056L31.7201 54.5388L15.2081 45.0056V25.9392ZM28.5464 23.0464C28.6641 22.6342 29.0408 22.3501 29.4695 22.3501H33.9707C34.3993 22.3501 34.776 22.6342 34.8938 23.0464L35.7504 26.0447L37.8696 27.2681L40.8945 26.5109C41.3103 26.4068 41.7447 26.591 41.959 26.9622L44.2096 30.8604C44.424 31.2316 44.3662 31.6998 44.0682 32.0079L41.8999 34.2489V36.6959L44.0682 38.9369C44.3662 39.245 44.424 39.7133 44.2096 40.0845L41.959 43.9827C41.7447 44.3539 41.3103 44.538 40.8945 44.4339L37.8696 43.6767L35.7504 44.9002L34.8938 47.8984C34.776 48.3106 34.3993 48.5947 33.9707 48.5947H29.4695C29.0408 48.5947 28.6641 48.3106 28.5464 47.8984L27.6897 44.9002L25.5706 43.6767L22.5457 44.4339C22.1299 44.538 21.6955 44.3539 21.4812 43.9827L19.2305 40.0845C19.0162 39.7133 19.0739 39.245 19.372 38.9369L21.5402 36.6959V34.2489L19.372 32.0079C19.0739 31.6998 19.0162 31.2316 19.2305 30.8604L21.4812 26.9622C21.6955 26.591 22.1299 26.4068 22.5457 26.5109L25.5706 27.2681L27.6897 26.0447L28.5464 23.0464ZM28.9861 27.5132C29.2018 27.3887 29.3607 27.1851 29.4292 26.9456L30.1936 24.2701H33.2466L34.011 26.9456C34.0794 27.1851 34.2383 27.3887 34.4541 27.5132L37.2459 29.1251C37.4617 29.2497 37.7174 29.2855 37.9591 29.225L40.6583 28.5493L42.1848 31.1932L40.25 33.193C40.0768 33.372 39.9799 33.6114 39.9799 33.8605V37.0843C39.9799 37.3334 40.0768 37.5728 40.25 37.7518L42.1848 39.7516L40.6583 42.3955L37.9591 41.7198C37.7174 41.6593 37.4617 41.6951 37.2459 41.8197L34.4541 43.4316C34.2383 43.5561 34.0794 43.7597 34.011 43.9992L33.2466 46.6747H30.1936L29.4292 43.9992C29.3607 43.7597 29.2018 43.5561 28.9861 43.4316L26.1942 41.8197C25.9785 41.6951 25.7228 41.6593 25.4811 41.7198L22.7819 42.3955L21.2554 39.7516L23.1902 37.7518C23.3634 37.5728 23.4602 37.3334 23.4602 37.0843V33.8605C23.4602 33.6114 23.3634 33.372 23.1902 33.193L21.2554 31.1932L22.7819 28.5493L25.4811 29.225C25.7228 29.2855 25.9785 29.2497 26.1942 29.1251L28.9861 27.5132ZM31.7201 41.6407C28.3134 41.6407 25.5517 38.8791 25.5517 35.4724C25.5517 32.0657 28.3134 29.3041 31.7201 29.3041C35.1268 29.3041 37.8884 32.0657 37.8884 35.4724C37.8884 38.8791 35.1268 41.6407 31.7201 41.6407ZM35.9684 35.4724C35.9684 37.8187 34.0664 39.7207 31.7201 39.7207C29.3738 39.7207 27.4717 37.8187 27.4717 35.4724C27.4717 33.1261 29.3738 31.2241 31.7201 31.2241C34.0664 31.2241 35.9684 33.1261 35.9684 35.4724Z" fill="url(#paint1_linear_2412_13557)"/>
+<defs>
+<linearGradient id="paint0_linear_2412_13557" x1="31.72" y1="95.7208" x2="95.488" y2="34.3249" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2412_13557" x1="28.4374" y1="99.2464" x2="98.7613" y2="44.9372" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+</defs>
+<div xmlns="" mx-name="view-image-info"/></svg>

package/templates/did-wallet-dapp/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/templates/did-wallet-dapp/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/did-wallet-dapp/src/components/layout.jsx

@@ -0,0 +1,28 @@
+import { Header } from '@blocklet/ui-react';
+import { useEffect } from 'react';
+import { Outlet } from 'react-router-dom';
+import { useSessionContext } from '../libs/session';
+
+export default function Layout() {
+  const { session, events } = useSessionContext();
+
+  useEffect(() => {
+    events.once('logout', () => {
+      window.location.href = '/';
+    });
+  }, []);
+
+  // support login redirect
+  // useEffect(() => {
+  //   if (session.initialized && !session.user) {
+  //     session.login(() => {}, { openMode: 'redirect', redirect: window.location.href });
+  //   }
+  // }, [session.initialized]);
+  
+  return (
+    <>
+      <Header brand={null} description={null} maxWidth={false} />
+      <Outlet />
+    </>
+  );
+}