create-blocklet 0.9.6 → 0.9.8

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,
+};

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: '签名结果',
+      },
+    },
+  },
+});