create-blocklet 0.9.5 → 0.9.7

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

@@ -0,0 +1,86 @@
+{
+  "name": "did-connect-dapp",
+  "version": "0.1.0",
+  "private": "true",
+  "scripts": {
+    "dev": "blocklet dev",
+    "lint": "eslint src api --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "start": "cross-env NODE_ENV=development nodemon api/dev.js -w api",
+    "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",
+    "prepare": "npx simple-git-hooks",
+    "bump-version": "zx --quiet scripts/bump-version.mjs"
+  },
+  "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"
+    ]
+  },
+  "dependencies": {
+    "@arcblock/did": "^1.18.135",
+    "@arcblock/did-auth": "^1.18.135",
+    "@arcblock/did-auth-storage-nedb": "^1.7.1",
+    "@blocklet/sdk": "^1.16.31",
+    "@ocap/client": "^1.18.135",
+    "@ocap/mcrypto": "^1.18.135",
+    "@ocap/util": "^1.18.135",
+    "@ocap/wallet": "^1.18.135",
+    "cookie-parser": "^1.4.6",
+    "dotenv-flow": "^4.1.0",
+    "express": "^4.21.0",
+    "express-async-errors": "^3.1.1",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@arcblock/did-connect": "^2.10.37",
+    "@arcblock/eslint-config": "^0.3.2",
+    "@arcblock/ux": "^2.10.37",
+    "@blocklet/ui-react": "^2.10.37",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify/react": "^5.0.2",
+    "@mui/material": "^5.16.7",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "bumpp": "^9.5.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.1",
+    "flat": "^6.0.1",
+    "lint-staged": "^15.2.10",
+    "nodemon": "^3.1.7",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "rimraf": "^5.0.10",
+    "vite": "^5.4.8",
+    "vite-plugin-blocklet": "^0.9.7",
+    "vite-plugin-svgr": "^4.2.0",
+    "zx": "^8.1.8"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  }
+}

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

@@ -0,0 +1,20 @@
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+import { ThemeProvider } from '@arcblock/ux/lib/Theme';
+
+import { SessionProvider } from './libs/session';
+import { translations } from './locales';
+import Main from './pages/main';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <LocaleProvider translations={translations}>
+        <SessionProvider>
+          <Main />
+        </SessionProvider>
+      </LocaleProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,39 @@
+/* eslint-disable react/require-default-props */
+import ConnectButton from '@arcblock/did-connect/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export default function ConnectItem({ title, description = null, result = null, onClick = () => {} }) {
+  const { t } = useLocaleContext();
+  return (
+    <Box>
+      <Typography variant="h6" component="h5" color="textPrimary">
+        {title}
+      </Typography>
+      {description ? (
+        <Typography variant="body1" color="text.secondary" gutterBottom>
+          {description}
+        </Typography>
+      ) : null}
+      <ConnectButton onClick={onClick} />
+      {result ? (
+        <Card sx={{ mt: 2 }} variant="outlined">
+          <CardContent>
+            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+              {t('result')}
+            </Typography>
+            {result}
+          </CardContent>
+        </Card>
+      ) : null}
+    </Box>
+  );
+}
+
+ConnectItem.propTypes = {
+  title: PropTypes.any.isRequired,
+  description: PropTypes.any,
+  result: PropTypes.any,
+  onClick: PropTypes.func,
+};

package/templates/did-connect-dapp/src/components/connects/request-digest-signature.jsx

@@ -0,0 +1,45 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestDigestSignature() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-digest-signature';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestDigestSig.connect.title'),
+        scan: t('claims.requestDigestSig.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestDigestSig.title')}
+      description={t('claims.requestDigestSig.description')}
+      onClick={requestFn}
+      result={
+        result ? (
+          <>
+            <InfoRow name={t('claims.requestDigestSig.result.origin')} value={result.origin} />
+            <InfoRow name={t('claims.requestDigestSig.result.digest')} value={result.digest} />
+            <InfoRow name={t('claims.requestDigestSig.result.signature')} value={result.sig} />
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-multiple-claims.jsx

@@ -0,0 +1,55 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Typography } from '@mui/material';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestMultipleClaims() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-multiple-claims';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestMultipleClaims.connect.title'),
+        scan: t('claims.requestMultipleClaims.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestMultipleClaims.title')}
+      description={t('claims.requestMultipleClaims.description')}
+      onClick={requestFn}
+      result={
+        result ? (
+          <>
+            <Typography variant="h6">{t('step1.title')}</Typography>
+            <Box sx={{ pl: 1 }}>
+              <InfoRow name={t('claims.requestMultipleClaims.result.origin')} value={result[0].origin} />
+              <InfoRow name={t('claims.requestMultipleClaims.result.signature')} value={result[0].sig} />
+            </Box>
+
+            <Typography variant="h6">{t('step2.title')}</Typography>
+            <Box sx={{ pl: 1 }}>
+              <InfoRow name={t('claims.requestMultipleClaims.result.origin')} value={result[1].origin} />
+              <InfoRow name={t('claims.requestMultipleClaims.result.digest')} value={result[1].digest} />
+              <InfoRow name={t('claims.requestMultipleClaims.result.signature')} value={result[1].sig} />
+            </Box>
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-multiple-steps.jsx

@@ -0,0 +1,54 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Typography } from '@mui/material';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestMultipleSteps() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-multiple-steps';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestMultipleSteps.connect.title'),
+        scan: t('claims.requestMultipleSteps.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestMultipleSteps.title')}
+      description={t('claims.requestMultipleSteps.description')}
+      onClick={requestFn}
+      result={
+        result ? (
+          <>
+            <Typography variant="h6">Step 1</Typography>
+            <Box sx={{ pl: 1 }}>
+              <InfoRow name={t('claims.requestMultipleSteps.result.origin')} value={result[0].origin} />
+              <InfoRow name={t('claims.requestMultipleSteps.result.signature')} value={result[0].sig} />
+            </Box>
+            <Typography variant="h6">Step 2</Typography>
+            <Box sx={{ pl: 1 }}>
+              <InfoRow name={t('claims.requestMultipleSteps.result.origin')} value={result[1].origin} />
+              <InfoRow name={t('claims.requestMultipleSteps.result.digest')} value={result[1].digest} />
+              <InfoRow name={t('claims.requestMultipleSteps.result.signature')} value={result[1].sig} />
+            </Box>
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-nft.jsx

@@ -0,0 +1,75 @@
+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 { Link } from '@mui/material';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import { getExplorerUrl } from '../../libs/utils';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestNFT() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-nft';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestNFT.connect.title'),
+        scan: t('claims.requestNFT.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestNFT.title')}
+      description={
+        <>
+          {t('claims.requestNFT.description')}{' '}
+          <Link
+            href="https://playground.staging.arcblock.io"
+            target="_blank"
+            underline="hover"
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}>
+            https://playground.staging.arcblock.io <Icon icon={iconOpenInNewRounded} />
+          </Link>
+        </>
+      }
+      onClick={requestFn}
+      result={
+        result ? (
+          <InfoRow
+            name="NFT"
+            value={
+              <Link
+                href={getExplorerUrl(result.asset, 'assets')}
+                target="_blank"
+                underline="hover"
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 0.5,
+                }}>
+                {result.asset} <Icon icon={iconOpenInNewRounded} />
+              </Link>
+            }
+          />
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-payment.jsx

@@ -0,0 +1,82 @@
+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 } from '@mui/material';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import { getExplorerUrl } from '../../libs/utils';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestPayment() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestPayment = () => {
+    const action = 'request-payment';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestPayment.connect.title'),
+        scan: t('claims.requestPayment.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestPayment.title')}
+      description={
+        <>
+          {t('claims.requestPayment.description')}
+
+          <Box>
+            {t('claims.requestPayment.takeTokenFromHere')}{' '}
+            <Link
+              href="https://faucet.abtnetwork.io"
+              target="_blank"
+              underline="hover"
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}>
+              https://faucet.abtnetwork.io <Icon icon={iconOpenInNewRounded} />
+            </Link>
+          </Box>
+        </>
+      }
+      onClick={requestPayment}
+      result={
+        result ? (
+          <>
+            <InfoRow
+              name={t('claims.requestPayment.result.hash')}
+              value={
+                <Link
+                  href={getExplorerUrl(result.hash)}
+                  target="_blank"
+                  underline="hover"
+                  sx={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                  }}>
+                  {result.hash} <Icon icon={iconOpenInNewRounded} />
+                </Link>
+              }
+            />
+            <InfoRow name={t('claims.requestPayment.result.signature')} value={result.sig} />
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-profile.jsx

@@ -0,0 +1,72 @@
+import Avatar from '@arcblock/ux/lib/Avatar';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import AccountBoxOutline from '@iconify-icons/material-symbols/account-box-outline';
+import CakeOutlineRoundedIcon from '@iconify-icons/material-symbols/cake-outline-rounded';
+import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import PhoneOutlineRoundedIcon from '@iconify-icons/material-symbols/phone-android-outline-rounded';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestProfile() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestProfile = () => {
+    const action = 'request-profile';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        if (res.result.avatar) {
+          res.result.avatar = res.result.avatar.replace(/[\r\n\s]/g, '');
+        }
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestProfile.connect.title'),
+        scan: t('claims.requestProfile.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestProfile.title')}
+      description={t('claims.requestProfile.description')}
+      onClick={requestProfile}
+      result={
+        result ? (
+          <>
+            <Avatar variant="circle" src={result.avatar} did={result.did} size={60} />
+            <InfoRow
+              icon={<Icon fontSize={18} icon={AccountBoxOutline} />}
+              name={t('claims.requestProfile.result.fullName')}
+              value={result.fullName}
+            />
+            <InfoRow
+              icon={<Icon fontSize={18} icon={MailOutlineRoundedIcon} />}
+              name={t('claims.requestProfile.result.email')}
+              value={result.email}
+            />
+            <InfoRow
+              icon={<Icon fontSize={18} icon={PhoneOutlineRoundedIcon} />}
+              name={t('claims.requestProfile.result.phone')}
+              value={result.phone}
+            />
+            <InfoRow
+              icon={<Icon fontSize={18} icon={CakeOutlineRoundedIcon} />}
+              name={t('claims.requestProfile.result.birthday')}
+              value={result.birthday}
+            />
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-text-signature.jsx

@@ -0,0 +1,44 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestTextSignature() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-text-signature';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestTextSig.connect.title'),
+        scan: t('claims.requestTextSig.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestTextSig.title')}
+      description={t('claims.requestTextSig.description')}
+      onClick={requestFn}
+      result={
+        result ? (
+          <>
+            <InfoRow name={t('claims.requestTextSig.result.origin')} value={result.origin} />
+            <InfoRow name={t('claims.requestTextSig.result.signature')} value={result.sig} />
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/connects/request-transaction-signature.jsx

@@ -0,0 +1,44 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useState } from 'react';
+
+import { useSessionContext } from '../../libs/session';
+import ConnectItem from '../connect-item';
+import InfoRow from '../info-row';
+
+export default function RequestTransactionSignature() {
+  const [result, setResult] = useState(null);
+  const { locale, t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+
+  const requestFn = () => {
+    const action = 'request-transaction-signature';
+    setResult(null);
+    connectApi.open({
+      locale,
+      action,
+      onSuccess(res) {
+        setResult(res.result);
+      },
+      messages: {
+        title: t('claims.requestTransactionSig.connect.title'),
+        scan: t('claims.requestTransactionSig.connect.scan'),
+      },
+    });
+  };
+
+  return (
+    <ConnectItem
+      title={t('claims.requestTransactionSig.title')}
+      description={t('claims.requestTransactionSig.description')}
+      onClick={requestFn}
+      result={
+        result ? (
+          <>
+            <InfoRow name={t('claims.requestTransactionSig.result.hash')} value={result.hash} />
+            <InfoRow name={t('claims.requestTransactionSig.result.signature')} value={result.sig} />
+          </>
+        ) : null
+      }
+    />
+  );
+}

package/templates/did-connect-dapp/src/components/info-row.jsx

@@ -0,0 +1,39 @@
+/* eslint-disable react/require-default-props */
+import { Box, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export default function InfoRow({ icon = null, name, value }) {
+  return (
+    <Typography variant="body1" color="text.primary" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.5,
+          mr: 0.75,
+          flexShrink: 0,
+          '&:after': {
+            content: '":"',
+            ml: -0.25,
+          },
+        }}>
+        {icon}
+        {name}
+      </Box>
+      <Typography
+        component="span"
+        color="text.secondary"
+        sx={{
+          wordBreak: 'break-word',
+        }}>
+        {value}
+      </Typography>
+    </Typography>
+  );
+}
+
+InfoRow.propTypes = {
+  icon: PropTypes.any,
+  name: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+};