@arcblock/ux 2.10.42 → 2.10.44

package/lib/Address/compact-text.d.ts

@@ -11,7 +11,7 @@ declare namespace CompactText {
     namespace propTypes {
         let startChars: PropTypes.Requireable<number>;
         let endChars: PropTypes.Requireable<number>;
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let showCopyButtonInTooltip: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
@@ -19,6 +19,8 @@ declare namespace CompactText {
         export { startChars_1 as startChars };
         let endChars_1: number;
         export { endChars_1 as endChars };
+        let children_1: null;
+        export { children_1 as children };
         let showCopyButtonInTooltip_1: boolean;
         export { showCopyButtonInTooltip_1 as showCopyButtonInTooltip };
     }

package/lib/Address/compact-text.js

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

package/lib/Address/did-address.d.ts

@@ -1,4 +1,23 @@
-export default DidAddress;
+import '@fontsource/ubuntu-mono/400.css';
+import { BoxProps } from '@mui/material';
+import React, { ReactNode } from 'react';
+export interface HTMLDidAddressElement extends HTMLDivElement {
+    copy: () => void;
+}
+export interface IDidAddressProps extends BoxProps {
+    component?: React.ElementType;
+    size?: number;
+    copyable?: boolean;
+    showCopyButtonInTooltip?: boolean;
+    content?: string;
+    inline?: boolean;
+    prepend?: ReactNode;
+    append?: ReactNode;
+    compact?: boolean;
+    startChars?: number;
+    endChars?: number;
+    locale?: 'en' | 'zh';
+}
 /**
  * DidAddress 组件 (新版设计)
  *
@@ -12,5 +31,5 @@ export default DidAddress;
  *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
  *   - 可配合 useMediaQuery 使用
  */
-declare const DidAddress: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const DidAddress: React.ForwardRefExoticComponent<Omit<IDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
+export default DidAddress;

package/lib/Address/did-address.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import '@fontsource/ubuntu-mono/400.css';
+import { Check as CheckIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
+import { Box, Tooltip } from '@mui/material';
 import { green } from '@mui/material/colors';
-import { Tooltip, Box } from '@mui/material';
 import copy from 'copy-to-clipboard';
-import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
 import noop from 'lodash/noop';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
 import CompactText from './compact-text';
@@ -20,7 +19,6 @@ const translations = {
     copied: '已复制!'
   }
 };
-
 /**
  * DidAddress 组件 (新版设计)
  *
@@ -34,37 +32,49 @@ const translations = {
  *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
  *   - 可配合 useMediaQuery 使用
  */
-const DidAddress = /*#__PURE__*/forwardRef(({
-  component,
-  size,
-  copyable,
-  content,
-  children,
-  prepend,
-  append,
-  compact,
-  startChars,
-  endChars,
-  locale,
-  showCopyButtonInTooltip,
-  ...rest
-}, ref) => {
+const DidAddress = /*#__PURE__*/forwardRef((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]) {
-    // eslint-disable-next-line no-param-reassign
     locale = 'en';
   }
   const [copied, setCopied] = useState(false);
-  const textRef = useRef();
-  const onCopy = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    copy(content || textRef.current.textContent);
+  const textRef = useRef(null);
+  const rootRef = useRef(null);
+  const handleCopy = () => {
+    copy(content || textRef.current?.textContent || '');
     setCopied(true);
     // 恢复 copied 状态
     setTimeout(() => {
       setCopied(false);
     }, 1500);
   };
+  const onCopy = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    handleCopy();
+  };
+  useImperativeHandle(ref, () => new Proxy({
+    copy: handleCopy
+  }, {
+    get(target, key) {
+      return target[key] || rootRef.current?.[key];
+    }
+  }));
   let copyElement = null;
   if (copyable) {
     copyElement = /*#__PURE__*/_jsx("span", {
@@ -94,7 +104,7 @@ const DidAddress = /*#__PURE__*/forwardRef(({
     as: component,
     size: size,
     ...rest,
-    ref: ref,
+    ref: rootRef,
     children: [prepend, /*#__PURE__*/_jsx(Box, {
       sx: {
         display: 'none'
@@ -133,38 +143,6 @@ const DidAddress = /*#__PURE__*/forwardRef(({
   });
 });
 export default DidAddress;
-DidAddress.propTypes = {
-  component: PropTypes.string,
-  size: PropTypes.number,
-  copyable: PropTypes.bool,
-  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
-  showCopyButtonInTooltip: PropTypes.bool,
-  children: PropTypes.any,
-  content: PropTypes.string,
-  inline: PropTypes.bool,
-  prepend: PropTypes.any,
-  append: PropTypes.any,
-  // 紧凑模式
-  compact: PropTypes.bool,
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  locale: PropTypes.oneOf(['en', 'zh'])
-};
-DidAddress.defaultProps = {
-  component: 'span',
-  size: 0,
-  copyable: true,
-  showCopyButtonInTooltip: false,
-  children: null,
-  content: '',
-  inline: false,
-  prepend: null,
-  append: null,
-  compact: false,
-  startChars: 6,
-  endChars: 6,
-  locale: 'en'
-};
 const Root = styled(Box, {
   shouldForwardProp: prop => prop !== 'inline'
 })`

package/lib/Address/index.d.ts

@@ -1,15 +1,6 @@
-declare function DidAddressWrapper({ responsive, ...rest }: {
-    [x: string]: any;
-    responsive: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace DidAddressWrapper {
-    namespace propTypes {
-        let responsive: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        let responsive_1: boolean;
-        export { responsive_1 as responsive };
-    }
+import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+export interface IDidAddressWrapper extends IDidAddressProps {
+    responsive?: boolean;
 }
+declare const DidAddressWrapper: import("react").ForwardRefExoticComponent<Omit<IDidAddressWrapper, "ref"> & import("react").RefAttributes<HTMLDidAddressElement>>;
 export default DidAddressWrapper;
-import PropTypes from 'prop-types';

package/lib/Address/index.js

@@ -1,23 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 import DidAddress from './did-address';
 import ResponsiveDidAddress from './responsive-did-address';
-export default function DidAddressWrapper({
-  responsive,
+const DidAddressWrapper = /*#__PURE__*/forwardRef(({
+  responsive = true,
   ...rest
-}) {
+}, ref) => {
   if (responsive) {
     return /*#__PURE__*/_jsx(ResponsiveDidAddress, {
-      ...rest
+      ...rest,
+      ref: ref
     });
   }
   return /*#__PURE__*/_jsx(DidAddress, {
-    ...rest
+    ...rest,
+    ref: ref
   });
-}
-DidAddressWrapper.propTypes = {
-  responsive: PropTypes.bool
-};
-DidAddressWrapper.defaultProps = {
-  responsive: true
-};
+});
+export default DidAddressWrapper;

package/lib/Address/responsive-did-address.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
 /**
  * 根据父容器宽度自动切换 compact 模式
  *
@@ -8,26 +10,10 @@
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
-declare function ResponsiveDidAddress({ style, className, component, ...rest }: {
-    [x: string]: any;
-    style: any;
-    className: any;
-    component: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ResponsiveDidAddress {
-    namespace propTypes {
-        let style: PropTypes.Requireable<object>;
-        let className: PropTypes.Requireable<string>;
-        let component: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let style_1: {};
-        export { style_1 as style };
-        let className_1: string;
-        export { className_1 as className };
-        let component_1: string;
-        export { component_1 as component };
-    }
-}
+declare const ResponsiveDidAddress: React.ForwardRefExoticComponent<Omit<IResponsiveDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
 export default ResponsiveDidAddress;
-import PropTypes from 'prop-types';
+export interface IResponsiveDidAddressProps extends IDidAddressProps {
+    style?: React.CSSProperties;
+    className?: string;
+    component?: React.ElementType;
+}

package/lib/Address/responsive-did-address.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, createRef, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useSize } from 'ahooks';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
 
@@ -15,23 +14,29 @@ import DidAddress from './did-address';
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
-export default function ResponsiveDidAddress({
+const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   style,
   className,
-  component,
+  component = 'span',
   ...rest
-}) {
+}, ref) => {
   const [compact, setCompact] = useState(false);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
   const containerRef = useRef(null);
+  const innerRef = useRef(null);
   const size = useSize(containerRef);
   const containerWidth = size?.width || 0;
-  const ref = /*#__PURE__*/createRef();
+  useImperativeHandle(ref, () => new Proxy({}, {
+    get(target, key) {
+      return innerRef.current?.[key];
+    }
+  }));
+
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {
     if (!compact && addressFullWidth === null) {
-      setAddressFullWidth(ref.current.offsetWidth);
+      setAddressFullWidth(innerRef.current?.offsetWidth);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -50,20 +55,11 @@ export default function ResponsiveDidAddress({
       component: component,
       inline: true,
       compact: compact,
-      ref: ref
+      ref: innerRef
     })
   });
-}
-ResponsiveDidAddress.propTypes = {
-  style: PropTypes.object,
-  className: PropTypes.string,
-  component: PropTypes.string
-};
-ResponsiveDidAddress.defaultProps = {
-  style: {},
-  className: '',
-  component: 'span'
-};
+});
+export default ResponsiveDidAddress;
 const Root = styled('div')`
   display: block;
   overflow: hidden;

package/lib/BlockletV2/blocklet.js

@@ -139,6 +139,7 @@ export default function BlockletStore(props) {
           size: 20,
           variant: "circle"
         }),
+        maxWidth: 200,
         children: author
       }), /*#__PURE__*/_jsx(IconText, {
         icon: /*#__PURE__*/_jsx(Icon, {

package/lib/BlockletV2/components/icon-text.d.ts

@@ -1,7 +1,9 @@
+import { StackProps } from '@mui/material';
 import React from 'react';
-export default function IconText({ icon, children, maxWidth, title, }: {
+export default function IconText({ icon, children, maxWidth, title, sx, }: {
     icon?: React.ReactNode;
     children?: React.ReactNode;
     maxWidth?: number;
     title?: string;
+    sx?: StackProps['sx'];
 }): false | "" | 0 | import("react/jsx-runtime").JSX.Element | null | undefined;

package/lib/BlockletV2/components/icon-text.js

@@ -5,16 +5,17 @@ export default function IconText({
   icon,
   children,
   maxWidth = 100,
-  title
+  title,
+  sx
 }) {
   return (children === 0 || children) && /*#__PURE__*/_jsxs(Stack, {
     direction: "row",
     alignItems: "center",
     gap: 1,
-    sx: {
+    sx: [{
       maxWidth,
       overflow: 'hidden'
-    },
+    }, ...(Array.isArray(sx) ? sx : [sx])],
     children: [icon, /*#__PURE__*/_jsx(Typography, {
       flex: 1,
       variant: "body2",

package/lib/DID/index.d.ts

@@ -1,23 +1,26 @@
-export default DID;
-/**
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
- */
-declare const DID: React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>;
-declare namespace DIDPropTypes {
-    let did: PropTypes.Validator<string>;
-    let size: PropTypes.Requireable<number>;
-    let component: PropTypes.Requireable<string>;
-    let copyable: PropTypes.Requireable<boolean>;
-    let responsive: PropTypes.Requireable<boolean>;
-    let showCopyButtonInTooltip: PropTypes.Requireable<boolean>;
-    let showAvatar: PropTypes.Requireable<boolean>;
-    let showQrcode: PropTypes.Requireable<boolean>;
-    let inline: PropTypes.Requireable<boolean>;
-    let append: PropTypes.Requireable<any>;
-    let compact: PropTypes.Requireable<boolean>;
-    let startChars: PropTypes.Requireable<number>;
-    let endChars: PropTypes.Requireable<number>;
-    let locale: PropTypes.Requireable<string>;
-    let chainId: PropTypes.Requireable<string>;
+import React from 'react';
+import { IDidAddressWrapper } from '../Address';
+import { HTMLDidAddressElement } from '../Address/did-address';
+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;
+}
+export interface HTMLDIDElement extends HTMLDidAddressElement {
+    openQRCode: () => void;
+    closeQRCode: () => void;
 }
-import PropTypes from 'prop-types';
+declare const DID: React.ForwardRefExoticComponent<Omit<IDIDPropTypes, "ref"> & React.RefAttributes<HTMLDIDElement>>;
+export default DID;

package/lib/DID/index.js

@@ -1,18 +1,17 @@
 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 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 { temp as colors } from '../Colors';
-import { DID_PREFIX } from '../Util/constant';
+import QRCode from 'qrcode.react';
+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, getFontSize, isEthereumDid } from '../Util';
 const translations = {
   en: {
     scanQrcode: 'Scan with DID Wallet to transfer token to here',
@@ -25,23 +24,6 @@ const translations = {
     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,
@@ -72,28 +54,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];
         }
       }
@@ -119,6 +119,7 @@ const DID = /*#__PURE__*/forwardRef(({
     },
     children: "ABT:"
   }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
+    src: "",
     did: did,
     size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
     style: {
@@ -138,8 +139,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 +175,14 @@ const DID = /*#__PURE__*/forwardRef(({
   }, [downloadUrl]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Address, {
-      ref: ref,
       locale: locale,
       content: `${DID_PREFIX}${did}`,
       ...rest,
+      ref: addressRef,
       prepend: prepend,
       append: /*#__PURE__*/_jsxs(_Fragment, {
         children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
+          id: "did-qrcode-button",
           component: Icon,
           icon: IconQrCode,
           onClick: openQrCode,
@@ -195,7 +207,7 @@ const DID = /*#__PURE__*/forwardRef(({
           children: t('scanQrcode')
         })
       }), /*#__PURE__*/_jsxs(DialogContent, {
-        align: "center",
+        align: 'center',
         children: [/*#__PURE__*/_jsx(QRCode
         // eslint-disable-next-line max-len
         , {
@@ -209,10 +221,11 @@ const DID = /*#__PURE__*/forwardRef(({
             textAlign: 'center'
           },
           children: /*#__PURE__*/_jsx(Address, {
-            copyable: true,
             locale: locale,
             content: `${DID_PREFIX}${did}`,
             prepend: prepend,
+            ...rest,
+            copyable: true,
             children: did
           })
         }), /*#__PURE__*/_jsx(Typography, {
@@ -228,21 +241,4 @@ const DID = /*#__PURE__*/forwardRef(({
     })]
   });
 });
-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';