@arcblock/ux 2.10.43 → 2.10.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.43",
+  "version": "2.10.44",
   "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": "35fb53cce48d64d7affbc3023f7d027f0ec93171",
   "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.44",
+    "@arcblock/nft-display": "^2.10.44",
+    "@arcblock/react-hooks": "^2.10.44",
     "@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}

package/src/DID/{index.jsx → index.tsx}

@@ -1,19 +1,19 @@
-import { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { getDIDMotifInfo } from '@arcblock/did-motif';
-import QRCode from 'qrcode.react';
-import { Icon } from '@iconify/react';
 import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { Icon } from '@iconify/react';
 import { Box, Dialog, DialogContent, DialogTitle, 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';
+import Avatar from '../Avatar';
 import { temp as colors } from '../Colors';
 import { DID_PREFIX } from '../Util/constant';
-import Address from '../Address';
-import Avatar from '../Avatar';
 
-import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
+import { HTMLDidAddressElement } from '../Address/did-address';
 import { translate } from '../Locale/util';
+import { getDIDColor, getFontSize, isEthereumDid } from '../Util';
 
 const translations = {
   en: {
@@ -28,32 +28,32 @@ const translations = {
   },
 };
 
-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,
-};
+interface IDIDPropTypes extends IDidAddressWrapper {
+  did: string;
+  size?: number;
+  component?: React.ElementType;
+  copyable?: boolean;
+  responsive?: boolean;
+  showCopyButtonInTooltip?: boolean;
+  showAvatar?: boolean;
+  showQrcode?: boolean;
+  inline?: boolean;
+  append?: any;
+  compact?: boolean;
+  startChars?: number;
+  endChars?: number;
+  locale?: 'en' | 'zh';
+  chainId?: string;
+}
 
 const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
 
-const CHAIN_ID_MAP = {
+const CHAIN_ID_MAP: Record<string, string> = {
   'main.abtnetwork.io': DEFAULT_CHAIN_ID,
   'beta.abtnetwork.io': 'beta',
 };
 
-const getFontColor = (did, didMotifInfo, isEthDid) => {
+const getFontColor = (did: string, didMotifInfo: any, isEthDid: boolean) => {
   if (isEthDid) {
     return getDIDColor(did);
   }
@@ -61,8 +61,8 @@ const getFontColor = (did, didMotifInfo, isEthDid) => {
   return didMotifInfo.color;
 };
 
-const isSquareMotif = (roleType) => {
-  const roles = {
+const isSquareMotif = (roleType: number) => {
+  const roles: Record<number, boolean> = {
     0: true, // ACCOUNT
     6: true, // ASSET
     17: true, // TOKEN
@@ -70,7 +70,7 @@ const isSquareMotif = (roleType) => {
   return !roles[roleType];
 };
 
-const getAvatarSize = (didMotifInfo, isEthDid, size) => {
+const getAvatarSize = (didMotifInfo: any, isEthDid: boolean, size: number) => {
   if (isEthDid) {
     return size * 0.75;
   }
@@ -80,21 +80,55 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
   return size;
 };
 
-/**
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
- */
-const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest }, ref) => {
+export interface HTMLDIDElement extends HTMLDidAddressElement {
+  openQRCode: () => void;
+  closeQRCode: () => void;
+}
+
+const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((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<any>(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 as any).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];
         }
       }
@@ -116,6 +150,7 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
     showAvatar && (
       <Avatar
         key="avatar"
+        src=""
         did={did}
         size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
         style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
@@ -133,8 +168,22 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
     setOpen(true);
   });
 
+  useImperativeHandle(ref, () => {
+    return new Proxy(
+      {
+        openQRCode: () => setOpen(true),
+        closeQRCode: () => setOpen(false),
+      },
+      {
+        get(target: any, key: string) {
+          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';
@@ -165,15 +214,16 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
   return (
     <>
       <Address
-        ref={ref}
         locale={locale}
         content={`${DID_PREFIX}${did}`}
         {...rest}
+        ref={addressRef}
         prepend={prepend}
         append={
           <>
             {showQrcode ? (
               <Box
+                id="did-qrcode-button"
                 component={Icon}
                 icon={IconQrCode}
                 onClick={openQrCode}
@@ -197,7 +247,8 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
             {t('scanQrcode')}
           </Typography>
         </DialogTitle>
-        <DialogContent align="center">
+        {/* @ts-ignore */}
+        <DialogContent align={'center' as any}>
           <QRCode
             // eslint-disable-next-line max-len
             value={`abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${
@@ -208,7 +259,7 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
             level="M"
           />
           <Box sx={{ marginTop: 1, textAlign: 'center' }}>
-            <Address copyable locale={locale} content={`${DID_PREFIX}${did}`} prepend={prepend}>
+            <Address locale={locale} content={`${DID_PREFIX}${did}`} prepend={prepend} {...rest} copyable>
               {did}
             </Address>
           </Box>
@@ -228,22 +279,3 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
 });
 
 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: '',
-};

package/src/type.d.ts

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