@arcblock/ux 2.10.43 → 2.10.45

package/lib/DID/index.js

@@ -1,47 +1,30 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { getDIDMotifInfo } from '@arcblock/did-motif';
+import { types } from '@ocap/mcrypto';
 import QRCode from 'qrcode.react';
 import { Icon } from '@iconify/react';
 import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
-import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
+import { Box, Dialog, DialogContent, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { temp as colors } from '../Colors';
-import { DID_PREFIX } from '../Util/constant';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import Address from '../Address';
 import Avatar from '../Avatar';
-import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
+import { temp as colors } from '../Colors';
+import { DID_PREFIX } from '../Util/constant';
 import { translate } from '../Locale/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 ？'
   }
 };
-const DIDPropTypes = {
-  did: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  component: PropTypes.string,
-  copyable: PropTypes.bool,
-  responsive: PropTypes.bool,
-  showCopyButtonInTooltip: PropTypes.bool,
-  showAvatar: PropTypes.bool,
-  showQrcode: PropTypes.bool,
-  inline: PropTypes.bool,
-  append: PropTypes.any,
-  compact: PropTypes.bool,
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  locale: PropTypes.oneOf(['en', 'zh']),
-  chainId: PropTypes.string
-};
 const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
 const CHAIN_ID_MAP = {
   'main.abtnetwork.io': DEFAULT_CHAIN_ID,
@@ -63,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;
@@ -72,28 +65,46 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
   }
   return size;
 };
-
-/**
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
- */
-const DID = /*#__PURE__*/forwardRef(({
-  did,
-  showAvatar,
-  showQrcode,
-  chainId,
-  locale,
-  ...rest
-}, ref) => {
+const DID = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    did,
+    showAvatar = true,
+    showQrcode = false,
+    locale = 'en',
+    size = 0,
+    component = 'span',
+    copyable = true,
+    responsive = true,
+    showCopyButtonInTooltip = false,
+    inline = false,
+    append = null,
+    compact = false,
+    startChars = 6,
+    endChars = 6
+  } = props;
+  const rest = {
+    size,
+    component,
+    copyable,
+    responsive,
+    showCopyButtonInTooltip,
+    inline,
+    append,
+    compact,
+    startChars,
+    endChars
+  };
+  const addressRef = useRef(null);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  let chainId = props.chainId || '';
   try {
     if (!chainId) {
-      const chainHostUrl = window?.blocklet?.CHAIN_HOST;
+      const chainHostUrl = window.blocklet?.CHAIN_HOST;
       if (chainHostUrl) {
         const chainHost = new URL(chainHostUrl).hostname;
         if (chainHost) {
-          // eslint-disable-next-line no-param-reassign
           chainId = CHAIN_ID_MAP[chainHost];
         }
       }
@@ -104,23 +115,19 @@ const DID = /*#__PURE__*/forwardRef(({
   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',
@@ -138,8 +145,18 @@ const DID = /*#__PURE__*/forwardRef(({
     e.preventDefault();
     setOpen(true);
   });
+  useImperativeHandle(ref, () => {
+    return new Proxy({
+      openQRCode: () => setOpen(true),
+      closeQRCode: () => setOpen(false)
+    }, {
+      get(target, key) {
+        return target[key] || addressRef?.current?.[key];
+      }
+    });
+  });
   const downloadUrl = useCreation(() => {
-    if (['zh', 'en'].includes) {
+    if (['zh', 'en'].includes(locale)) {
       return `https://www.didwallet.io/${locale}`;
     }
     return 'https://www.didwallet.io/en';
@@ -164,13 +181,14 @@ const DID = /*#__PURE__*/forwardRef(({
   }, [downloadUrl]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Address, {
-      ref: ref,
       locale: locale,
       content: `${DID_PREFIX}${did}`,
       ...rest,
-      prepend: prepend,
+      ref: addressRef,
+      prepend: getPrepend(rest.size),
       append: /*#__PURE__*/_jsxs(_Fragment, {
         children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
+          id: "did-qrcode-button",
           component: Icon,
           icon: IconQrCode,
           onClick: openQrCode,
@@ -183,20 +201,31 @@ const DID = /*#__PURE__*/forwardRef(({
         }) : null, rest.append]
       }),
       children: did
-    }), /*#__PURE__*/_jsxs(Dialog, {
+    }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       onClose: closeQrCode,
       maxWidth: "sm",
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        align: "center",
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h3",
-          children: t('scanQrcode')
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
+      PaperProps: {
+        sx: {
+          boxShadow: 'none',
+          borderRadius: '12px'
+        }
+      },
+      children: /*#__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}`,
@@ -205,14 +234,16 @@ const DID = /*#__PURE__*/forwardRef(({
           level: "M"
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
-            marginTop: 1,
+            mt: 1.5,
             textAlign: 'center'
           },
           children: /*#__PURE__*/_jsx(Address, {
-            copyable: true,
             locale: locale,
             content: `${DID_PREFIX}${did}`,
-            prepend: prepend,
+            prepend: getPrepend(16),
+            ...rest,
+            size: 16,
+            copyable: true,
             children: did
           })
         }), /*#__PURE__*/_jsx(Typography, {
@@ -224,25 +255,8 @@ const DID = /*#__PURE__*/forwardRef(({
           },
           children: downloadTips
         })]
-      })]
+      })
     })]
   });
 });
-export default DID;
-DID.propTypes = DIDPropTypes;
-DID.defaultProps = {
-  size: 0,
-  component: 'span',
-  copyable: true,
-  responsive: true,
-  showCopyButtonInTooltip: false,
-  showAvatar: true,
-  showQrcode: false,
-  inline: false,
-  append: null,
-  compact: false,
-  startChars: 6,
-  endChars: 6,
-  locale: 'en',
-  chainId: ''
-};
+export default DID;

package/lib/type.d.ts

@@ -0,0 +1 @@
+declare module '@arcblock/did-motif';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.43",
+  "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": "efd3c4cefb4772be2e53ab7ae509e3ed4540f49a",
+  "gitHead": "f4387cd434dcdf0bab88973b014575613dcb3611",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.43",
-    "@arcblock/nft-display": "^2.10.43",
-    "@arcblock/react-hooks": "^2.10.43",
+    "@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/Address/compact-text.jsx

@@ -65,7 +65,7 @@ export default function CompactText({ startChars, endChars, children, showCopyBu
 CompactText.propTypes = {
   startChars: PropTypes.number,
   endChars: PropTypes.number,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   // 在 tooltip 中完整地址后显示复制按钮
   showCopyButtonInTooltip: PropTypes.bool,
 };
@@ -73,5 +73,6 @@ CompactText.propTypes = {
 CompactText.defaultProps = {
   startChars: 6,
   endChars: 6,
+  children: null,
   showCopyButtonInTooltip: false,
 };

package/src/Address/did-address.tsx

@@ -0,0 +1,215 @@
+import '@fontsource/ubuntu-mono/400.css';
+import { Check as CheckIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
+import { Box, BoxProps, Tooltip } from '@mui/material';
+import { green } from '@mui/material/colors';
+import copy from 'copy-to-clipboard';
+import noop from 'lodash/noop';
+import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } from 'react';
+import { styled } from '../Theme';
+import { getFontSize } from '../Util';
+import CompactText from './compact-text';
+
+const translations = {
+  en: {
+    copy: 'Click To Copy',
+    copied: 'Copied!',
+  },
+  zh: {
+    copy: '点击复制',
+    copied: '已复制!',
+  },
+};
+
+export interface HTMLDidAddressElement extends HTMLDivElement {
+  copy: () => void;
+}
+export interface IDidAddressProps extends BoxProps {
+  component?: React.ElementType;
+  size?: number;
+  copyable?: boolean;
+  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
+  showCopyButtonInTooltip?: boolean;
+  content?: string;
+  inline?: boolean;
+  prepend?: ReactNode;
+  append?: ReactNode;
+  // 紧凑模式
+  compact?: boolean;
+  startChars?: number;
+  endChars?: number;
+  locale?: 'en' | 'zh';
+}
+
+/**
+ * DidAddress 组件 (新版设计)
+ *
+ * - 样式调整
+ * - click-to-copy 调整
+ * - 长文本截断处理 (Ellipsis)
+ * - 支持 inline 或 block 的显示方式
+ * - 支持紧凑模式, 该模式下:
+ *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
+ *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
+ *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
+ *   - 可配合 useMediaQuery 使用
+ */
+const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, ref) => {
+  const {
+    component = 'span',
+    size = 0,
+    copyable = true,
+    showCopyButtonInTooltip = false,
+    children = null,
+    content = '',
+    prepend = null,
+    append = null,
+    compact = false,
+    startChars = 6,
+    endChars = 6,
+    locale: originalLocale = 'en',
+    ...rest
+  } = props;
+  let locale = originalLocale;
+  if (!translations[locale]) {
+    locale = 'en';
+  }
+
+  const [copied, setCopied] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<any>(null);
+
+  const handleCopy = () => {
+    copy(content || textRef.current?.textContent || '');
+    setCopied(true);
+    // 恢复 copied 状态
+    setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+  const onCopy = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    handleCopy();
+  };
+  useImperativeHandle(
+    ref,
+    () =>
+      new Proxy(
+        {
+          copy: handleCopy,
+        },
+        {
+          get(target: any, key: string) {
+            return target[key] || rootRef.current?.[key];
+          },
+        }
+      )
+  );
+
+  let copyElement = null;
+  if (copyable) {
+    copyElement = (
+      <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
+        {copied ? (
+          <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
+            <CheckIcon className="did-address-copy" style={{ color: green[500] }} />
+          </Tooltip>
+        ) : (
+          /* title prop 直接加在 icon 上不生效 */
+          <CopyIcon className="did-address-copy" onClick={onCopy} />
+        )}
+      </span>
+    );
+  }
+
+  return (
+    <Root as={component} size={size} {...rest} ref={rootRef}>
+      {prepend}
+      <Box sx={{ display: 'none' }} ref={textRef}>
+        {children}
+      </Box>
+      {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
+      <Tooltip title={copyable ? '' : translations[locale].copied} placement="bottom" arrow open={copied}>
+        {compact ? (
+          <Box
+            component="span"
+            className="did-address-text"
+            sx={{
+              cursor: copyable ? 'unset' : 'pointer',
+            }}
+            onDoubleClick={copyable ? noop : onCopy}>
+            <CompactText startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
+              {children}
+            </CompactText>
+          </Box>
+        ) : (
+          <Box
+            component="span"
+            className="did-address-text did-address-truncate"
+            sx={{
+              display: compact ? 'none' : 'inline',
+              cursor: copyable ? 'unset' : 'pointer',
+            }}
+            onDoubleClick={copyable ? noop : onCopy}>
+            {children}
+          </Box>
+        )}
+      </Tooltip>
+      {copyElement}
+      {append}
+    </Root>
+  );
+});
+
+export default DidAddress;
+
+const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' })`
+  font-family: 'Ubuntu Mono', monospace;
+  && {
+    display: ${({ inline }: any) => (inline ? 'inline-flex' : 'flex')};
+    align-items: center;
+    max-width: 100%;
+    overflow: hidden;
+    color: #ccc;
+    font-size: ${(props: any) => getFontSize(props.size)};
+    font-weight: 400;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .did-address-text {
+    color: #666;
+  }
+  /* truncate string with ellipsis */
+  .did-address-truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .did-address-copy-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    margin-left: 8px;
+  }
+  .did-address-copy {
+    flex: 0 0 auto;
+    font-size: 1em;
+    color: #999;
+    cursor: pointer;
+  }
+
+  /* link */
+  a {
+    color: #666;
+  }
+  &:hover a {
+    color: #222;
+    text-decoration: underline;
+  }
+`;

package/src/Address/index.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import ResponsiveDidAddress from './responsive-did-address';
+
+export interface IDidAddressWrapper extends IDidAddressProps {
+  responsive?: boolean;
+}
+
+const DidAddressWrapper = forwardRef<HTMLDidAddressElement, IDidAddressWrapper>(
+  ({ responsive = true, ...rest }, ref) => {
+    if (responsive) {
+      return <ResponsiveDidAddress {...rest} ref={ref} />;
+    }
+    return <DidAddress {...rest} ref={ref} />;
+  }
+);
+
+export default DidAddressWrapper;

package/src/Address/responsive-did-address.tsx

@@ -0,0 +1,90 @@
+import { useSize } from 'ahooks';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { styled } from '../Theme';
+
+import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+
+/**
+ * 根据父容器宽度自动切换 compact 模式
+ *
+ * 实现逻辑:
+ * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
+ * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
+ * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
+ * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
+ * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
+ */
+const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
+  ({ style, className, component = 'span', ...rest }, ref) => {
+    const [compact, setCompact] = useState(false);
+    // did address 完整显示时的宽度
+    const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const innerRef = useRef<HTMLDidAddressElement>(null);
+    const size = useSize(containerRef);
+    const containerWidth = size?.width || 0;
+
+    useImperativeHandle(
+      ref,
+      () =>
+        new Proxy(
+          {},
+          {
+            get(target: any, key: keyof HTMLDidAddressElement) {
+              return innerRef.current?.[key];
+            },
+          }
+        )
+    );
+
+    // 存储完整显示时 address 组件的宽度
+    useEffect(() => {
+      if (!compact && addressFullWidth === null) {
+        setAddressFullWidth(innerRef.current?.offsetWidth);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      if (containerWidth && addressFullWidth) {
+        setCompact(containerWidth < addressFullWidth);
+      }
+    }, [containerWidth, addressFullWidth]);
+    return (
+      <Root as={component} ref={containerRef} style={style} className={className}>
+        <StyledDidAddress {...rest} component={component} inline compact={compact} ref={innerRef} />
+      </Root>
+    );
+  }
+);
+
+export default ResponsiveDidAddress;
+
+export interface IResponsiveDidAddressProps extends IDidAddressProps {
+  style?: React.CSSProperties;
+  className?: string;
+  component?: React.ElementType;
+}
+
+const Root = styled('div')`
+  display: block;
+  overflow: hidden;
+  ${({ inline }: any) =>
+    inline &&
+    `
+    display: inline-block;
+    width: 100%;
+  `}
+`;
+
+const StyledDidAddress = styled(DidAddress)`
+  && {
+    max-width: none;
+  }
+  .did-address-text {
+    /* 禁止文本 Ellipsis/截断, 以便测量真实的宽度 */
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: unset;
+  }
+`;

package/src/BlockletV2/blocklet.tsx

@@ -124,7 +124,9 @@ export default function BlockletStore(props: IBlockletStore) {
         />
       </Stack>
       <Stack direction="row" alignItems="center" gap={2} color="text.secondary">
-        <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />}>{author}</IconText>
+        <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />} maxWidth={200}>
+          {author}
+        </IconText>
         <IconText icon={<Icon icon={Download} />} title={download}>
           {formatDownloadCount(download)}
         </IconText>

package/src/BlockletV2/components/icon-text.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Stack, StackProps, Typography } from '@mui/material';
 import React from 'react';
 
 export default function IconText({
@@ -6,15 +6,21 @@ export default function IconText({
   children,
   maxWidth = 100,
   title,
+  sx,
 }: {
   icon?: React.ReactNode;
   children?: React.ReactNode;
   maxWidth?: number;
   title?: string;
+  sx?: StackProps['sx'];
 }) {
   return (
     (children === 0 || children) && (
-      <Stack direction="row" alignItems="center" gap={1} sx={{ maxWidth, overflow: 'hidden' }}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={1}
+        sx={[{ maxWidth, overflow: 'hidden' }, ...(Array.isArray(sx) ? sx : [sx])]}>
         {icon}
         <Typography
           flex={1}