create-blocklet 0.9.4 → 0.9.6

package/templates/did-wallet-dapp/src/global.css

@@ -0,0 +1,79 @@
+body {
+  background-color: #fff;
+  width: 100%;
+  height: 100vh;
+}
+
+#app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+import { createAxios } from '@blocklet/js-sdk';
+
+const api = createAxios({
+  baseURL: window?.blocklet?.prefix || '/',
+});
+
+export default api;

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

@@ -0,0 +1,13 @@
+/* eslint-disable object-curly-newline */
+import { useContext } from 'react';
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+
+function useSessionContext() {
+  // get session info, see more: https://www.arcblock.io/docs/blocklet-developer/blocklet-sdk#session
+  const info = useContext(SessionContext);
+  return info;
+}
+
+export { SessionProvider, SessionContext, SessionConsumer, useSessionContext, withSession };

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

@@ -0,0 +1,13 @@
+import { flatten } from 'flat';
+
+export default flatten({
+  name: 'Name',
+  avatar: 'Avatar',
+  did: 'DID',
+  email: 'Email',
+  role: 'Role',
+  lastLogin: 'Last Login',
+  createdAt: 'Created At',
+  passports: 'Passports',
+  profile: 'Profile',
+});

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

@@ -0,0 +1,4 @@
+import en from './en';
+import zh from './zh';
+
+export const translations = { zh, en };

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

@@ -0,0 +1,13 @@
+import { flatten } from 'flat';
+
+export default flatten({
+  name: '姓名',
+  avatar: '头像',
+  did: 'DID',
+  email: '邮箱',
+  role: '角色',
+  lastLogin: '上次登录',
+  createdAt: '创建时间',
+  passports: '通行证',
+  profile: '个人信息',
+});

package/templates/did-wallet-dapp/src/pages/home/index.css

@@ -0,0 +1,39 @@
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.blocklet:hover {
+  filter: drop-shadow(0 0 2em #22cdcdaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/templates/did-wallet-dapp/src/pages/home/index.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Stack } from '@mui/material';
+import reactLogo from '../../assets/react.svg';
+import blockletLogo from '../../assets/blocklet.svg';
+import viteLogo from '../../assets/vite.svg';
+import walletLogo from '../../assets/wallet.png';
+import api from '../../libs/api';
+import './index.css';
+
+function Home() {
+  const [count, setCount] = useState(0);
+
+  async function getApiData() {
+    const { data } = await api.get('/api/data');
+    const { message } = data;
+    alert(`Message from api: ${message}`);
+  }
+
+  return (
+    <Stack sx={{ textAlign: 'center', mt: '10%'}}>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+        <a href="https://www.arcblock.io/docs/blocklet-developer/getting-started" target="_blank" rel="noreferrer">
+          <img src={blockletLogo} className="logo blocklet" alt="Blocklet logo" />
+        </a>
+        <a href="https://www.didwallet.io/en" target="_blank" rel="noreferrer">
+          <img src={walletLogo} className="logo wallet" alt="Wallet logo" />
+        </a>
+      </div>
+      <h1>Vite + React + Blocklet + DID Wallet</h1>
+      <p>
+        This is a demo app for DID Wallet.You can use DID Wallet to sign in and get API data.
+      </p>
+      <div className="card">
+        <button type="button" onClick={() => setCount((currentCount) => currentCount + 1)}>
+          count is {count}
+        </button>
+        <br />
+        <br />
+        <button type="button" onClick={getApiData}>
+          Get API Data
+        </button>
+        <p>
+          Edit <code>src/app.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">Click on the logo to learn more details</p>
+    </Stack>
+  );
+}
+
+export default Home;

package/templates/did-wallet-dapp/src/pages/profile.jsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import { Avatar, Box, Button, Stack, Typography } from '@mui/material';
+
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tag from '@arcblock/ux/lib/Tag';
+import DID from '@arcblock/ux/lib/DID';
+import uniqBy from 'lodash/uniqBy';
+
+import { useSessionContext } from '../libs/session';
+
+const formatToDatetime = (date) => {
+  if (!date) {
+    return '-';
+  }
+
+  return dayjs(date).format('YYYY-MM-DD hh:mm:ss');
+};
+
+export default function Main() {
+  const { session, api } = useSessionContext();
+  const [user, setUser] = useState();
+  // function t to translate the text
+  const { t } = useLocaleContext();
+  const { preferences } = window.blocklet;
+
+  useEffect(() => {
+    getData();
+  }, [session.user]); //eslint-disable-line
+
+  const getData = () => {
+    api
+      .get('/api/user')
+      .then((res) => {
+        setUser(res.data.user);
+      })
+      .catch(() => {
+        window.location.reload();
+      });
+  };
+
+  const rows = !!user
+    ? [
+        { name: t('name'), value: <Box display="flex" alignItems="center" gap={2}><Avatar src={user.avatar}/>{user.fullName}</Box> },
+        preferences.displayAvatar ? { name: t('avatar'), value: <Avatar alt="" src={user.avatar}></Avatar> } : null,
+        { name: t('did'), value: <DID did={user.did} showQrcode locale="zh" /> },
+        { name: t('email'), value: user.email },
+        {
+          name: t('passports'),
+          value: user.passports ? (
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              {uniqBy(user.passports, 'name').map((passport) => (
+                <Tag key={passport.name} type={passport.name === 'owner' ? 'success' : 'primary'}>
+                  {passport.title}
+                </Tag>
+              ))}
+            </Box>
+          ) : (
+            '--'
+          ),
+        },
+        {
+          name: t('role'),
+          value: <Tag type={user.role === 'owner' ? 'success' : 'primary'}>{user.role}</Tag>,
+        },
+        { name: t('lastLogin'), value: formatToDatetime(user.updatedAt) },
+        { name: t('createdAt'), value: formatToDatetime(user.createdAt) },
+      ].filter(Boolean)
+    : [];
+
+  return (
+    <Stack className="container" sx={{ maxWidth: 500, mt: 8 }}>
+      {/* Current Page: {pathname} */}
+      {!user && (
+          <Box
+            sx={{
+              textAlign: 'center',
+              fontSize: '18px',
+              color: '#888',
+              py: 5,
+            }}>
+              <Typography>
+              You are not logged in yet! {preferences.welcome}
+              </Typography>
+            <Button
+              onClick={() => session.login()}
+              style={{ marginTop: 16, textTransform: 'none' }}
+              variant="contained"
+              color="primary">
+              Login
+            </Button>
+          </Box>
+        )}
+        {!!user && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              '&>div': {
+                mb: 0,
+              },
+              '.info-row__name': {
+                fontWeight: 'bold',
+                color: 'grey.800',
+              },
+            }}>
+            <Typography variant="h3" mb={3}>
+              {t('profile')}
+            </Typography>
+            {rows.map((row) => {
+              if (row.name === t('did')) {
+                return (
+                  <InfoRow
+                    valueComponent="div"
+                    key={row.name}
+                    nameWidth={120}
+                    name={row.name}
+                    nameFormatter={() => t('did')}>
+                    {row.value}
+                  </InfoRow>
+                );
+              }
+
+              return (
+                <InfoRow valueComponent="div" key={row.name} nameWidth={120} name={row.name}>
+                  {row.value}
+                </InfoRow>
+              );
+            })}
+          </Box>
+        )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,12 @@
+{
+  "name": "did-wallet-dapp",
+  "desc": {
+    "en": "A simple DID wallet dapp",
+    "zh": "一个简单的 DID 钱包 Dapp"
+  },
+  "blockletType": "dapp",
+  "composable": true,
+  "languages": "JavaScript",
+  "useCase": "Starter",
+  "author": "Blocklet"
+}

package/templates/did-wallet-dapp/vite.config.js

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

package/templates/did-wallet-dapp/vite.config.server.js

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

package/templates/express-api/README.md

@@ -1,10 +1,8 @@
-# Getting Started with Create Blocklet
-
-This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+## PROJECT_DESCRIPTION
 
 This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
 
-## File Structure
+## FILE_STRUCTURE
 
 - screenshots/ - Screenshots
 - api/ - Api side code
@@ -24,123 +22,3 @@ This blocklet is a dapp project, which means this is a full-stack application. I
 - 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`
-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
-  make 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
-  make 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 name?
-
-   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
-
-   You can also change the `title` field and `description` field in the `blocklet.yml` file.
-
-   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
-
-   Replace this command `"bundle:client": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
-
-   Replace `did` field in the `blocklet.yml`
-
-2. 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/html-static/README.md

@@ -1,10 +1,8 @@
-# Getting Started with Create Blocklet
-
-This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+## PROJECT_DESCRIPTION
 
 This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
 
-## File Structure
+## FILE_STRUCTURE
 
 - app/ - Client side code (A static html project structure)
 - .env - Environment variables
@@ -19,124 +17,4 @@ This blocklet is a static project, which means this is a frontend application. I
 - 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`
-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
-  make 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` from blocklet store.
-
-  > 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 blocklet store by Github CI.
-  Bump version at first.
-
-  ```shell
-  make 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 name?
-
-   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
-
-   You can also change the `title` field and `description` field in the `blocklet.yml` file.
-
-   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
-
-   Replace this command `"bundle": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
-
-   Replace `did` field in the `blocklet.yml`
-
-2. 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.
+- version - Version file