create-blocklet 0.9.5 → 0.9.7

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

@@ -0,0 +1,26 @@
+import { Footer, Header } from '@blocklet/ui-react';
+import { Box, Container } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export default function Layout({ children }) {
+  return (
+    <Box>
+      <Header maxWidth="unset" />
+      <Container maxWidth="lg" my={3}>
+        {children}
+      </Container>
+      <Box
+        component={Footer}
+        sx={{
+          '&>div>.MuiContainer-root': {
+            maxWidth: 'unset',
+          },
+        }}
+      />
+    </Box>
+  );
+}
+
+Layout.propTypes = {
+  children: PropTypes.any.isRequired,
+};

package/templates/did-connect-dapp/src/index.jsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(<App />);

package/templates/did-connect-dapp/src/libs/session.js

@@ -0,0 +1,11 @@
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+
+function useSessionContext() {
+  const info = useContext(SessionContext);
+  return info;
+}
+
+export { SessionProvider, SessionContext, SessionConsumer, useSessionContext, withSession };

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

@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export const getExplorerUrl = (assetDidOrHash, type = 'txs') => {
+  return `https://explorer.abtnetwork.io/explorer/${type}/${assetDidOrHash}?host=${window.blocklet.CHAIN_HOST}`;
+};

package/templates/did-connect-dapp/src/locales/en.js

@@ -0,0 +1,115 @@
+import { flatten } from 'flat';
+
+export default flatten({
+  result: 'Result',
+  step1: {
+    title: 'Step 1',
+    prepareDIDWallet: 'Prepare DID Wallet',
+    getWalletFromHere: 'Get DID Wallet from here',
+  },
+  step2: {
+    title: 'Step 2',
+    enjoyPlayground: 'Enjoy The DID Connect Playground',
+  },
+  claims: {
+    requestProfile: {
+      title: 'Request Profile',
+      description: 'If the app need user name/email to function properly, you can request a profile from the user.',
+      connect: {
+        title: 'Request Profile',
+        scan: 'Please provide your name and email to continue',
+      },
+      result: {
+        fullName: 'Full Name',
+        email: 'Email Address',
+        phone: 'Phone Number',
+        birthday: 'Birthday',
+      },
+    },
+    requestNFT: {
+      title: 'Request NFT',
+      description: 'Get a badge or Certificate from here',
+      connect: {
+        title: 'Request NFT',
+        scan: 'Please provide a NFT to continue',
+      },
+    },
+    requestTextSig: {
+      title: 'Request Text Signature',
+      description: 'In some cases, app may want user to sign some text to authorize the app to do something.',
+      connect: {
+        title: 'Request Text Signature',
+        scan: 'Please sign some text to continue',
+      },
+      result: {
+        origin: 'Original Text',
+        signature: 'Signature',
+      },
+    },
+    requestDigestSig: {
+      title: 'Request Digest Signature',
+      description:
+        'In some cases, when the data to be signed is too large to display in DID Wallet, the app shall request the Wallet to sign the digest of the data.',
+      connect: {
+        title: 'Request Digest Signature',
+        scan: 'Please sign the digest to continue',
+      },
+      result: {
+        origin: 'Original Text',
+        digest: 'Digest',
+        signature: 'Signature',
+      },
+    },
+    requestTransactionSig: {
+      title: 'Request Transaction Signature',
+      description: 'When the app needs user to sign some transaction that can be broadcast to ArcBlock chain.',
+      connect: {
+        title: 'Request Transaction Signature',
+        scan: 'Please sign a transaction to continue',
+      },
+      result: {
+        hash: 'Transaction Hash',
+        signature: 'Signature',
+      },
+    },
+    requestPayment: {
+      title: 'Request Payment',
+      description: 'When the app needs user to pay some token to get some service.',
+      takeTokenFromHere: 'Please take some TBA from here',
+      connect: {
+        title: 'Request Payment',
+        scan: 'Please sign the transaction to continue',
+      },
+      result: {
+        hash: 'Transaction Hash',
+        signature: 'Signature',
+      },
+    },
+    requestMultipleClaims: {
+      title: 'Request Multiple Claims',
+      description: 'Request text signature and digest signature in a single session.',
+      connect: {
+        title: 'Request Multiple Claims',
+        scan: 'In that session, you will do both text signing and summary signing.',
+      },
+      result: {
+        origin: 'Original Text',
+        digest: 'Digest',
+        signature: 'Signature',
+      },
+    },
+    requestMultipleSteps: {
+      title: 'Request Multiple Steps',
+      description: 'Request text signature and then request digest signature.',
+      connect: {
+        title: 'Request Multiple Steps',
+        scan: 'In that session, you will do a text signature followed by a summary signature.',
+      },
+      result: {
+        origin: 'Original Text',
+        digest: 'Digest',
+        signature: 'Signature',
+      },
+    },
+  },
+});

package/templates/did-connect-dapp/src/locales/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+import en from './en';
+import zh from './zh';
+
+export const translations = { zh, en };

package/templates/did-connect-dapp/src/locales/zh.js

@@ -0,0 +1,115 @@
+import { flatten } from 'flat';
+
+export default flatten({
+  result: '操作结果',
+  step1: {
+    title: '第一步',
+    prepareDIDWallet: '准备 DID Wallet',
+    getWalletFromHere: '从这里获取 DID Wallet',
+  },
+  step2: {
+    title: '第二步',
+    enjoyPlayground: '享受 DID Connect 游乐场',
+  },
+  claims: {
+    requestProfile: {
+      title: '获取用户信息',
+      description: '当应用需要用户名称/邮件地址来正常使用时，可以请求用户提供相关信息。',
+      connect: {
+        title: '获取用户信息',
+        scan: '请提供您的个人信息，以便我们可以为您提供更好的服务。',
+      },
+      result: {
+        fullName: '用户名',
+        email: '邮箱地址',
+        phone: '电话号码',
+        birthday: '生日',
+      },
+    },
+    requestNFT: {
+      title: '请求 NFT',
+      description: '从这里获取徽章或证书',
+      connect: {
+        title: '请出示一个 NFT',
+        scan: '请出示一个 NFT，以便验证您是否有抽奖的机会',
+      },
+    },
+    requestTextSig: {
+      title: '请求文本签名',
+      description: '在某些情况下，应用可能需要用户签名一段文本来授权应用做一些事情。',
+      connect: {
+        title: '请求文本签名',
+        scan: '请签名一段文本，以便验证您的安全。',
+      },
+      result: {
+        origin: '签名数据',
+        signature: '签名结果',
+      },
+    },
+    requestDigestSig: {
+      title: '请求摘要签名',
+      description:
+        '在某些情况下，当需要签名的数据太大，不适合在 DID Wallet 中显示时，应用可以请求 Wallet 签名数据的摘要。',
+      connect: {
+        title: '请求摘要签名',
+        scan: '请签名一段摘要，以便验证您的安全。',
+      },
+      result: {
+        origin: '签名数据',
+        digest: '摘要数据',
+        signature: '签名结果',
+      },
+    },
+    requestTransactionSig: {
+      title: '请求交易签名',
+      description: '当应用需要用户签名一个可以广播到 ArcBlock 链的交易时。',
+      connect: {
+        title: '请求交易签名',
+        scan: '请签名一个交易，以便验证交易的安全性。',
+      },
+      result: {
+        hash: '交易 hash',
+        signature: '签名结果',
+      },
+    },
+    requestPayment: {
+      title: '请求付款',
+      description: '当应用需要用户支付一些代币来获取某种服务时。',
+      takeTokenFromHere: '请从这里获取一些代币',
+      connect: {
+        title: '请求付款',
+        scan: '该笔订单需要您确认，才能完成付款。',
+      },
+      result: {
+        hash: '交易 hash',
+        signature: '签名结果',
+      },
+    },
+    requestMultipleClaims: {
+      title: '多个操作',
+      description: '在同一个会话中请求文本签名和摘要签名。',
+      connect: {
+        title: '请求多个操作',
+        scan: '在该会话中，您将同时进行文本签名和摘要签名。',
+      },
+      result: {
+        origin: '签名数据',
+        digest: '摘要数据',
+        signature: '签名结果',
+      },
+    },
+    requestMultipleSteps: {
+      title: '多个步骤',
+      description: '先请求文本签名，然后再请求摘要签名。',
+      connect: {
+        title: '请求多步操作',
+        scan: '在该会话中，您将先进行文本签名，然后进行摘要签名。',
+      },
+      result: {
+        origin: '签名数据',
+        digest: '摘要数据',
+        signature: '签名结果',
+      },
+    },
+  },
+});

package/templates/did-connect-dapp/src/pages/main.jsx

@@ -0,0 +1,95 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import iconOpenInNewRounded from '@iconify-icons/material-symbols/open-in-new-rounded';
+import { Icon } from '@iconify/react';
+import { Box, Link, Typography } from '@mui/material';
+
+import getWalletEnImg from '../assets/get_wallet_en.png';
+import getWalletZhImg from '../assets/get_wallet_zh.png';
+import RequestDigestSignature from '../components/connects/request-digest-signature';
+import RequestMultipleClaims from '../components/connects/request-multiple-claims';
+import RequestMultipleSteps from '../components/connects/request-multiple-steps';
+import RequestNFT from '../components/connects/request-nft';
+import RequestPayment from '../components/connects/request-payment';
+import RequestProfile from '../components/connects/request-profile';
+import RequestTextSignature from '../components/connects/request-text-signature';
+import RequestTransactionSignature from '../components/connects/request-transaction-signature';
+import Layout from '../components/layout';
+
+function Main() {
+  const { locale, t } = useLocaleContext();
+  const getWalletImgUrl = locale === 'zh' ? getWalletZhImg : getWalletEnImg;
+  const getWalletUrl = `https://www.didwallet.io/${locale === 'zh' ? 'zh' : 'en'}`;
+
+  return (
+    <Layout>
+      <Typography component="h3" variant="h4" color="textPrimary" gutterBottom>
+        {t('step1.title')}{' '}
+        <Typography component="small" color="text.secondary">
+          {t('step1.prepareDIDWallet')}
+        </Typography>
+      </Typography>
+      <Typography variant="body1">
+        {t('step1.getWalletFromHere')}{' '}
+        <Link
+          href={getWalletUrl}
+          target="_blank"
+          underline="hover"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 0.5,
+          }}>
+          DID Wallet <Icon icon={iconOpenInNewRounded} />
+        </Link>
+      </Typography>
+      <Box
+        component="a"
+        href={getWalletUrl}
+        target="_blank"
+        rel="noreferrer"
+        sx={{
+          display: 'block',
+          px: {
+            sm: 0,
+            md: 8,
+            lg: 16,
+          },
+        }}>
+        <Box
+          component="img"
+          src={getWalletImgUrl}
+          alt="Prepare DID Wallet"
+          sx={{
+            width: '100%',
+          }}
+        />
+      </Box>
+
+      <Typography component="h3" variant="h4" color="text.primary" gutterBottom sx={{ mt: 2 }}>
+        {t('step2.title')}{' '}
+        <Typography component="small" color="text.secondary">
+          {t('step2.enjoyPlayground')}
+        </Typography>
+      </Typography>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 5,
+          mb: 10,
+        }}>
+        <RequestProfile />
+        <RequestNFT />
+        <RequestTextSignature />
+        <RequestDigestSignature />
+        <RequestTransactionSignature />
+        <RequestPayment />
+        <RequestMultipleClaims />
+        <RequestMultipleSteps />
+      </Box>
+    </Layout>
+  );
+}
+
+export default Main;

package/templates/did-connect-dapp/template-info.json

@@ -0,0 +1,12 @@
+{
+  "name": "did-connect-dapp",
+  "desc": {
+    "en": "Showcase various use cases of DID Connect, help you get started with DID Connect quickly",
+    "zh": "展示 DID Connect 各种用法， 帮助你快速上手 DID Connect"
+  },
+  "blockletType": "dapp",
+  "composable": true,
+  "languages": "JavaScript",
+  "useCase": "Starter",
+  "author": "Blocklet"
+}

package/templates/did-connect-dapp/vite.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    plugins: [react(), createBlockletPlugin(), svgr()],
+  };
+});

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,58 @@
+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>