create-blocklet 0.9.6 → 0.9.8

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

@@ -0,0 +1,82 @@
+const { fromPublicKey } = require('@ocap/wallet');
+const { toAddress, fromBase58, toBuffer } = require('@ocap/util');
+const { toTypeInfo } = require('@arcblock/did');
+
+const { verifyAssetClaim } = require('../../libs/utils');
+const { wallet } = require('../../libs/auth');
+const logger = require('../../libs/logger');
+
+const validateAgentProof = (claim) => {
+  const ownerDid = toAddress(claim.ownerDid);
+  const ownerPk = fromBase58(claim.ownerPk);
+  if (!claim.agentProof) {
+    throw new Error('agent proof is empty');
+  }
+
+  if (typeof claim.agentProof === 'string') {
+    claim.agentProof = JSON.parse(claim.agentProof);
+  }
+
+  logger.info('claim.agentProof.nonce', claim.agentProof.nonce);
+  logger.info('claim.agentProof.signature', claim.agentProof.signature);
+
+  const { nonce } = claim.agentProof;
+  if (nonce < Math.ceil(Date.now() / 1000) - 5 * 60) {
+    throw new Error('agent proof is expired: ttl is 5 minutes');
+  }
+
+  const message = Buffer.concat([toBuffer(nonce.toString()), toBuffer(wallet.address)]);
+  const signer = fromPublicKey(ownerPk, toTypeInfo(ownerDid));
+  const signature = fromBase58(claim.agentProof.signature);
+
+  if (claim.type === 'asset') {
+    if (!signer.verify(message, signature)) {
+      throw new Error('agent proof is invalid for asset');
+    }
+  }
+
+  if (claim.type === 'verifiableCredential') {
+    if (!signer.verify(message, signature)) {
+      throw new Error('agent proof is invalid for vc');
+    }
+  }
+};
+
+const action = 'request-nft';
+
+module.exports = {
+  action,
+  claims: {
+    assetOrVC: () => {
+      return {
+        description: 'Please provide NFT or VC to continue',
+        filters: [
+          {
+            type: ['NFTBadge', 'NFTCertificate'],
+            trustedIssuers: [
+              // wallet.address,
+              'zNKXAEjKYXEnf2hf18NjTQsa1JajA9gJ3haY',
+            ],
+          },
+        ],
+      };
+    },
+  },
+  onAuth: async ({ claims, challenge, updateSession }) => {
+    const asset = claims.find((x) => x.type === 'asset');
+
+    if (!asset) {
+      throw new Error('Neither NFT nor VC is provided');
+    }
+
+    logger.info(`${action}.onAuth.asset`, asset);
+
+    validateAgentProof(asset, challenge);
+
+    const assetState = await verifyAssetClaim({ claim: asset, challenge });
+    updateSession({
+      result: asset,
+    });
+    return { successMessage: `You provided asset: ${assetState.address}` };
+  },
+};

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

@@ -0,0 +1,72 @@
+/* eslint-disable no-console */
+const { fromTokenToUnit } = require('@ocap/util');
+const { fromAddress } = require('@ocap/wallet');
+
+const { wallet, client } = require('../../libs/auth');
+const { getTokenInfo, pickGasPayerHeaders } = require('../../libs/utils');
+const env = require('../../libs/env');
+const logger = require('../../libs/logger');
+
+const action = 'request-payment';
+module.exports = {
+  action,
+  claims: {
+    signature: async ({ userDid, userPk }) => {
+      const amount = 1;
+      const token = await getTokenInfo();
+
+      return {
+        type: 'TransferV2Tx',
+        data: {
+          from: userDid,
+          pk: userPk,
+          itx: {
+            to: wallet.address,
+            tokens: [
+              {
+                address: env.localTokenId,
+                value: fromTokenToUnit(amount, token.decimal).toString(),
+              },
+            ],
+          },
+        },
+        description: `Please pay ${amount} ${token.symbol} to application`,
+      };
+    },
+  },
+  onAuth: async ({ req, claims, userDid, updateSession }) => {
+    try {
+      const claim = claims.find((x) => x.type === 'signature');
+      const tx = client.decodeTx(claim.origin);
+      const user = fromAddress(userDid);
+      if (claim.from) {
+        tx.from = claim.from;
+      }
+      if (claim.delegator) {
+        tx.delegator = claim.delegator;
+      }
+      const hash = await client.sendTransferV2Tx(
+        {
+          tx,
+          wallet: user,
+          signature: claim.sig,
+        },
+        pickGasPayerHeaders(req),
+      );
+
+      logger.info(`${action}.onAuth`, { claims, userDid, hash });
+      updateSession({
+        result: {
+          hash,
+          tx,
+          origin: claim.origin,
+          sig: claim.sig,
+        },
+      });
+      return { hash, tx: claim.origin };
+    } catch (err) {
+      logger.info(`${action}.onAuth.error`, err);
+      throw new Error('Send token failed!');
+    }
+  },
+};

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

@@ -0,0 +1,25 @@
+const omit = require('lodash/omit');
+const logger = require('../../libs/logger');
+
+const action = 'request-profile';
+module.exports = {
+  action,
+  claims: {
+    profile: () => ({
+      description: 'Please provide your full profile',
+      fields: ['fullName', 'email', 'phone', 'signature', 'avatar', 'birthday'],
+    }),
+  },
+
+  onAuth: ({ userDid, userPk, claims, updateSession }) => {
+    const claim = claims.find((x) => x.type === 'profile');
+    logger.log(`${action}.onAuth`, { userDid, userPk, claim });
+    updateSession({
+      result: {
+        ...omit(claim, ['type', 'signature']),
+        did: userDid,
+        pk: userPk,
+      },
+    });
+  },
+};

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

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+const { toTypeInfo } = require('@arcblock/did');
+const { fromPublicKey } = require('@ocap/wallet');
+const { fromBase58 } = require('@ocap/util');
+
+const logger = require('../../libs/logger');
+const { getRandomMessage } = require('../../libs/utils');
+
+const action = 'request-text-signature';
+module.exports = {
+  action,
+  claims: {
+    signature: () => {
+      const data = getRandomMessage();
+
+      return {
+        description: 'Please sign the text',
+        type: 'mime:text/plain',
+        data,
+      };
+    },
+  },
+
+  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');
+      }
+    }
+
+    updateSession({
+      result: {
+        origin: fromBase58(claim.origin).toString(),
+        sig: claim.sig,
+      },
+    });
+  },
+};

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

@@ -0,0 +1,62 @@
+/* eslint-disable no-console */
+const { toTypeInfo } = require('@arcblock/did');
+const { fromPublicKey } = require('@ocap/wallet');
+const { toTxHash } = require('@ocap/mcrypto');
+const { toBase58 } = require('@ocap/util');
+
+const logger = require('../../libs/logger');
+const env = require('../../libs/env');
+const { wallet, client } = require('../../libs/auth');
+
+const action = 'request-transaction-signature';
+
+module.exports = {
+  action,
+  claims: {
+    signature: async ({ userPk, userDid }) => {
+      const value = await client.fromTokenToUnit(1);
+      const type = toTypeInfo(userDid);
+
+      const encoded = await client.encodeTransferV2Tx({
+        tx: {
+          itx: {
+            to: wallet.address,
+            tokens: [
+              {
+                address: env.localTokenId,
+                value: value.toString(),
+              },
+            ],
+          },
+        },
+        wallet: fromPublicKey(userPk, type),
+      });
+
+      const origin = toBase58(encoded.buffer);
+
+      return {
+        description: 'Please sign the transaction',
+        type: 'fg:t:transaction',
+        data: origin,
+      };
+    },
+  },
+
+  onAuth: ({ userDid, userPk, claims, updateSession }) => {
+    const claim = claims.find((x) => x.type === 'signature');
+    const tx = client.decodeTx(claim.origin);
+
+    logger.info(`${action}.onAuth`, { userPk, userDid, claim });
+    const buffer = Buffer.from(claim.origin);
+    const hash = toTxHash(buffer);
+
+    updateSession({
+      result: {
+        hash,
+        tx,
+        origin: claim.origin,
+        sig: claim.sig,
+      },
+    });
+  },
+};

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

@@ -0,0 +1,5 @@
+# DID Connect Playground
+
+A Playground shows Simple DID Connect workflow
+
+> Please update this

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

@@ -0,0 +1,57 @@
+title: DID Connect Playground
+description: A Blocklet show DID Connect Playground
+keywords:
+  - blocklet
+  - react
+  - did-connect
+group: dapp
+did: ''
+main: api/index.js
+author:
+  name: ArcBlock
+  email: blocklet@arcblock.io
+  url: https://github.com/blocklet
+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
+  - api/hooks/pre-start.js
+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.31'
+  os: '*'
+  cpu: '*'
+scripts:
+  preStart: node api/hooks/pre-start.js
+  dev: npm run start
+environments:
+  - name: CHAIN_HOST
+    description: What's endpoint of the chain?
+    required: true
+    default: https://beta.abtnetwork.io/api/
+    secure: false
+capabilities:
+  navigation: true
+screenshots: []
+components: []

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

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+  <meta name="theme-color" content="#4F6AF5" />
+</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-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.38",
+    "@arcblock/eslint-config": "^0.3.2",
+    "@arcblock/ux": "^2.10.38",
+    "@blocklet/ui-react": "^2.10.38",
+    "@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.8",
+    "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
+      }
+    />
+  );
+}