@arcblock/ux 2.10.44 → 2.10.45

package/lib/DID/index.js

@@ -1,25 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDIDMotifInfo } from '@arcblock/did-motif';
-import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { types } from '@ocap/mcrypto';
+import QRCode from 'qrcode.react';
 import { Icon } from '@iconify/react';
-import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
+import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { Box, Dialog, DialogContent, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import QRCode from 'qrcode.react';
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import Address from '../Address';
 import Avatar from '../Avatar';
 import { temp as colors } from '../Colors';
 import { DID_PREFIX } from '../Util/constant';
 import { translate } from '../Locale/util';
-import { getDIDColor, getFontSize, isEthereumDid } from '../Util';
+import { getDIDColor, isEthereumDid } from '../Util';
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to transfer token to here',
+    scanQrcode: 'Scan with DID Wallet to view this {role}',
     download: 'Download',
     downloadTips: "Don't have DID Wallet ?"
   },
   zh: {
-    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
+    scanQrcode: '使用 DID Wallet 扫码查看该 {role}',
     download: '下载',
     downloadTips: '没有 DID Wallet ？'
   }
@@ -45,6 +46,16 @@ const isSquareMotif = roleType => {
   };
   return !roles[roleType];
 };
+const getRoleName = roleType => {
+  const [roleName] = Object.entries(types.RoleType).find(item => item[1] === roleType) || [];
+  if (roleName) {
+    // UpperCase first word, example:
+    // ROLE_ACCOUNT -> Account
+    // ROLE_APPLICATION -> Application
+    return roleName.toLowerCase().replace(/role_(\S)/g, (_, $1) => $1.toUpperCase());
+  }
+  return 'Address';
+};
 const getAvatarSize = (didMotifInfo, isEthDid, size) => {
   if (isEthDid) {
     return size * 0.75;
@@ -104,24 +115,19 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
   const [open, setOpen] = useState(false);
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-  const fontSize = getFontSize(rest.size);
-  const prepend = [/*#__PURE__*/_jsx("span", {
+  const getPrepend = avatarSize => [/*#__PURE__*/_jsx("span", {
     style: {
       flex: '0 0 auto',
-      fontSize,
       color: getFontColor(did, didMotifInfo, isEthDid)
     },
     children: "DID:"
   }, "prefix-did"), /*#__PURE__*/_jsx("span", {
     className: "did-address-text",
-    style: {
-      fontSize
-    },
     children: "ABT:"
   }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
     src: "",
     did: did,
-    size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
+    size: getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18),
     style: {
       display: 'inline-flex',
       alignItems: 'center',
@@ -179,7 +185,7 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
       content: `${DID_PREFIX}${did}`,
       ...rest,
       ref: addressRef,
-      prepend: prepend,
+      prepend: getPrepend(rest.size),
       append: /*#__PURE__*/_jsxs(_Fragment, {
         children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
           id: "did-qrcode-button",
@@ -195,20 +201,31 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
         }) : null, rest.append]
       }),
       children: did
-    }), /*#__PURE__*/_jsxs(Dialog, {
+    }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       onClose: closeQrCode,
       maxWidth: "sm",
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
+      PaperProps: {
+        sx: {
+          boxShadow: 'none',
+          borderRadius: '12px'
+        }
+      },
+      children: /*#__PURE__*/_jsxs(DialogContent, {
         align: "center",
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h3",
-          children: t('scanQrcode')
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
-        align: 'center',
-        children: [/*#__PURE__*/_jsx(QRCode
+        sx: {
+          p: 3
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            mb: 2,
+            fontWeight: 500,
+            fontSize: 18
+          },
+          children: t('scanQrcode', {
+            role: getRoleName(didMotifInfo?.roleType)
+          })
+        }), /*#__PURE__*/_jsx(QRCode
         // eslint-disable-next-line max-len
         , {
           value: `abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
@@ -217,14 +234,15 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
           level: "M"
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
-            marginTop: 1,
+            mt: 1.5,
             textAlign: 'center'
           },
           children: /*#__PURE__*/_jsx(Address, {
             locale: locale,
             content: `${DID_PREFIX}${did}`,
-            prepend: prepend,
+            prepend: getPrepend(16),
             ...rest,
+            size: 16,
             copyable: true,
             children: did
           })
@@ -237,7 +255,7 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
           },
           children: downloadTips
         })]
-      })]
+      })
     })]
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.44",
+  "version": "2.10.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "35fb53cce48d64d7affbc3023f7d027f0ec93171",
+  "gitHead": "f4387cd434dcdf0bab88973b014575613dcb3611",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.44",
-    "@arcblock/nft-display": "^2.10.44",
-    "@arcblock/react-hooks": "^2.10.44",
+    "@arcblock/icons": "^2.10.45",
+    "@arcblock/nft-display": "^2.10.45",
+    "@arcblock/react-hooks": "^2.10.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/DID/index.tsx

@@ -1,9 +1,10 @@
 import { getDIDMotifInfo } from '@arcblock/did-motif';
-import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { types } from '@ocap/mcrypto';
+import QRCode from 'qrcode.react';
 import { Icon } from '@iconify/react';
-import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
+import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { Box, Dialog, DialogContent, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import QRCode from 'qrcode.react';
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 import Address, { IDidAddressWrapper } from '../Address';
@@ -13,16 +14,16 @@ import { DID_PREFIX } from '../Util/constant';
 
 import { HTMLDidAddressElement } from '../Address/did-address';
 import { translate } from '../Locale/util';
-import { getDIDColor, getFontSize, isEthereumDid } from '../Util';
+import { getDIDColor, isEthereumDid } from '../Util';
 
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to transfer token to here',
+    scanQrcode: 'Scan with DID Wallet to view this {role}',
     download: 'Download',
     downloadTips: "Don't have DID Wallet ?",
   },
   zh: {
-    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
+    scanQrcode: '使用 DID Wallet 扫码查看该 {role}',
     download: '下载',
     downloadTips: '没有 DID Wallet ？',
   },
@@ -70,6 +71,19 @@ const isSquareMotif = (roleType: number) => {
   return !roles[roleType];
 };
 
+const getRoleName = (roleType: number) => {
+  const [roleName] = Object.entries(types.RoleType).find((item) => item[1] === roleType) || [];
+
+  if (roleName) {
+    // UpperCase first word, example:
+    // ROLE_ACCOUNT -> Account
+    // ROLE_APPLICATION -> Application
+    return roleName.toLowerCase().replace(/role_(\S)/g, (_, $1) => $1.toUpperCase());
+  }
+
+  return 'Address';
+};
+
 const getAvatarSize = (didMotifInfo: any, isEthDid: boolean, size: number) => {
   if (isEthDid) {
     return size * 0.75;
@@ -139,12 +153,12 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
   const [open, setOpen] = useState(false);
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-  const fontSize = getFontSize(rest.size);
-  const prepend = [
-    <span key="prefix-did" style={{ flex: '0 0 auto', fontSize, color: getFontColor(did, didMotifInfo, isEthDid) }}>
+
+  const getPrepend = (avatarSize: number) => [
+    <span key="prefix-did" style={{ flex: '0 0 auto', color: getFontColor(did, didMotifInfo, isEthDid) }}>
       DID:
     </span>,
-    <span key="prefix-abt" className="did-address-text" style={{ fontSize }}>
+    <span key="prefix-abt" className="did-address-text">
       ABT:
     </span>,
     showAvatar && (
@@ -152,7 +166,7 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
         key="avatar"
         src=""
         did={did}
-        size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
+        size={getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18)}
         style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
         blockiesPadding={false}
         className="did-address-avatar"
@@ -218,7 +232,7 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
         content={`${DID_PREFIX}${did}`}
         {...rest}
         ref={addressRef}
-        prepend={prepend}
+        prepend={getPrepend(rest.size)}
         append={
           <>
             {showQrcode ? (
@@ -241,14 +255,21 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
         {did}
       </Address>
 
-      <Dialog open={open} onClose={closeQrCode} maxWidth="sm">
-        <DialogTitle align="center">
-          <Typography variant="h6" component="h3">
-            {t('scanQrcode')}
-          </Typography>
-        </DialogTitle>
+      <Dialog
+        open={open}
+        onClose={closeQrCode}
+        maxWidth="sm"
+        PaperProps={{
+          sx: {
+            boxShadow: 'none',
+            borderRadius: '12px',
+          },
+        }}>
         {/* @ts-ignore */}
-        <DialogContent align={'center' as any}>
+        <DialogContent align="center" sx={{ p: 3 }}>
+          <Typography sx={{ mb: 2, fontWeight: 500, fontSize: 18 }}>
+            {t('scanQrcode', { role: getRoleName(didMotifInfo?.roleType) })}
+          </Typography>
           <QRCode
             // eslint-disable-next-line max-len
             value={`abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${
@@ -258,8 +279,14 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
             renderAs="svg"
             level="M"
           />
-          <Box sx={{ marginTop: 1, textAlign: 'center' }}>
-            <Address locale={locale} content={`${DID_PREFIX}${did}`} prepend={prepend} {...rest} copyable>
+          <Box sx={{ mt: 1.5, textAlign: 'center' }}>
+            <Address
+              locale={locale}
+              content={`${DID_PREFIX}${did}`}
+              prepend={getPrepend(16)}
+              {...rest}
+              size={16}
+              copyable>
               {did}
             </Address>
           </Box>