@arcblock/ux 2.10.43 → 2.10.45

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

@@ -1,59 +1,60 @@
-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 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, 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,
-};
+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 +62,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 +71,20 @@ const isSquareMotif = (roleType) => {
   return !roles[roleType];
 };
 
-const getAvatarSize = (didMotifInfo, isEthDid, size) => {
+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;
   }
@@ -80,21 +94,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];
         }
       }
@@ -105,19 +153,20 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
   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 && (
       <Avatar
         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"
@@ -133,8 +182,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 +228,16 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
   return (
     <>
       <Address
-        ref={ref}
         locale={locale}
         content={`${DID_PREFIX}${did}`}
         {...rest}
-        prepend={prepend}
+        ref={addressRef}
+        prepend={getPrepend(rest.size)}
         append={
           <>
             {showQrcode ? (
               <Box
+                id="did-qrcode-button"
                 component={Icon}
                 icon={IconQrCode}
                 onClick={openQrCode}
@@ -191,13 +255,21 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
         {did}
       </Address>
 
-      <Dialog open={open} onClose={closeQrCode} maxWidth="sm">
-        <DialogTitle align="center">
-          <Typography variant="h6" component="h3">
-            {t('scanQrcode')}
+      <Dialog
+        open={open}
+        onClose={closeQrCode}
+        maxWidth="sm"
+        PaperProps={{
+          sx: {
+            boxShadow: 'none',
+            borderRadius: '12px',
+          },
+        }}>
+        {/* @ts-ignore */}
+        <DialogContent align="center" sx={{ p: 3 }}>
+          <Typography sx={{ mb: 2, fontWeight: 500, fontSize: 18 }}>
+            {t('scanQrcode', { role: getRoleName(didMotifInfo?.roleType) })}
           </Typography>
-        </DialogTitle>
-        <DialogContent align="center">
           <QRCode
             // eslint-disable-next-line max-len
             value={`abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${
@@ -207,8 +279,14 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
             renderAs="svg"
             level="M"
           />
-          <Box sx={{ marginTop: 1, textAlign: 'center' }}>
-            <Address copyable locale={locale} content={`${DID_PREFIX}${did}`} prepend={prepend}>
+          <Box sx={{ mt: 1.5, textAlign: 'center' }}>
+            <Address
+              locale={locale}
+              content={`${DID_PREFIX}${did}`}
+              prepend={getPrepend(16)}
+              {...rest}
+              size={16}
+              copyable>
               {did}
             </Address>
           </Box>
@@ -228,22 +306,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';

package/src/Address/did-address.jsx

@@ -1,220 +0,0 @@
-import React, { useRef, useState, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import '@fontsource/ubuntu-mono/400.css';
-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 { styled } from '../Theme';
-import { getFontSize } from '../Util';
-import CompactText from './compact-text';
-
-const translations = {
-  en: {
-    copy: 'Click To Copy',
-    copied: 'Copied!',
-  },
-  zh: {
-    copy: '点击复制',
-    copied: '已复制!',
-  },
-};
-
-/**
- * DidAddress 组件 (新版设计)
- *
- * - 样式调整
- * - click-to-copy 调整
- * - 长文本截断处理 (Ellipsis)
- * - 支持 inline 或 block 的显示方式
- * - 支持紧凑模式, 该模式下:
- *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
- *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
- *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
- *   - 可配合 useMediaQuery 使用
- */
-const DidAddress = forwardRef(
-  (
-    {
-      component,
-      size,
-      copyable,
-      content,
-      children,
-      prepend,
-      append,
-      compact,
-      startChars,
-      endChars,
-      locale,
-      showCopyButtonInTooltip,
-      ...rest
-    },
-    ref
-  ) => {
-    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);
-      setCopied(true);
-      // 恢复 copied 状态
-      setTimeout(() => {
-        setCopied(false);
-      }, 1500);
-    };
-
-    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={ref}>
-        {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;
-
-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' })`
-  font-family: 'Ubuntu Mono', monospace;
-  && {
-    display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
-    align-items: center;
-    max-width: 100%;
-    overflow: hidden;
-    color: #ccc;
-    font-size: ${(props) => 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.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import DidAddress from './did-address';
-import ResponsiveDidAddress from './responsive-did-address';
-
-export default function DidAddressWrapper({ responsive, ...rest }) {
-  if (responsive) {
-    return <ResponsiveDidAddress {...rest} />;
-  }
-  return <DidAddress {...rest} />;
-}
-
-DidAddressWrapper.propTypes = {
-  responsive: PropTypes.bool,
-};
-
-DidAddressWrapper.defaultProps = {
-  responsive: true,
-};

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

@@ -1,79 +0,0 @@
-import { useState, createRef, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useSize } from 'ahooks';
-import { styled } from '../Theme';
-
-import DidAddress 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 模式渲染前, 隐藏显示, 避免闪烁问题
- */
-export default function ResponsiveDidAddress({ style, className, component, ...rest }) {
-  const [compact, setCompact] = useState(false);
-  // did address 完整显示时的宽度
-  const [addressFullWidth, setAddressFullWidth] = useState(null);
-  const containerRef = useRef(null);
-  const size = useSize(containerRef);
-  const containerWidth = size?.width || 0;
-  const ref = createRef();
-  // 存储完整显示时 address 组件的宽度
-  useEffect(() => {
-    if (!compact && addressFullWidth === null) {
-      setAddressFullWidth(ref.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={ref} />
-    </Root>
-  );
-}
-
-ResponsiveDidAddress.propTypes = {
-  style: PropTypes.object,
-  className: PropTypes.string,
-  component: PropTypes.string,
-};
-
-ResponsiveDidAddress.defaultProps = {
-  style: {},
-  className: '',
-  component: 'span',
-};
-
-const Root = styled('div')`
-  display: block;
-  overflow: hidden;
-  ${({ inline }) =>
-    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;
-  }
-`;