@arcblock/ux 2.11.26 → 2.11.27

package/lib/DID/index.d.ts

@@ -1,28 +1,26 @@
-import React from 'react';
+import { ModalProps } from '@mui/material';
 import { IDidAddressWrapper } from '../Address';
 import { HTMLDidAddressElement } from '../Address/did-address';
-import type { Locale } from '../type';
-interface IDIDPropTypes extends IDidAddressWrapper {
+interface DIDOwnProps {
     did: string;
-    size?: number;
-    component?: React.ElementType;
-    copyable?: true | false;
-    responsive?: true | false;
-    showCopyButtonInTooltip?: false | true;
-    showAvatar?: true | false;
-    showQrcode?: false | true;
-    inline?: false | true;
-    append?: any;
-    compact?: false | true;
-    startChars?: number;
-    endChars?: number;
-    locale?: Locale;
     chainId?: string;
     roleType?: number;
+    showAvatar?: true | false;
+    showQrcode?: false | true;
+}
+export interface DIDProps extends DIDOwnProps, Omit<IDidAddressWrapper, 'ref'> {
 }
 export interface HTMLDIDElement extends HTMLDidAddressElement {
     openQRCode: () => void;
     closeQRCode: () => void;
 }
-declare const DID: React.ForwardRefExoticComponent<Omit<IDIDPropTypes, "ref"> & React.RefAttributes<HTMLDIDElement>>;
+export declare const DID: import("react").ForwardRefExoticComponent<DIDProps & import("react").RefAttributes<HTMLDIDElement>>;
+export interface DIDDialogProps extends DIDProps {
+    open: boolean;
+    fullScreen?: false | true;
+    fullWidth?: false | true;
+    scroll?: 'body' | 'paper';
+    onClose?: ModalProps['onClose'];
+}
+export declare function DIDDialog({ did, chainId, roleType, showAvatar, open, fullScreen, fullWidth, scroll, onClose, locale, ...rest }: DIDDialogProps): import("react/jsx-runtime").JSX.Element;
 export default DID;

package/lib/DID/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getDIDMotifInfo } from '@arcblock/did-motif';
 import { types } from '@ocap/mcrypto';
 import QRCode from 'qrcode.react';
@@ -6,7 +6,7 @@ import { Icon } from '@iconify/react';
 import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
 import { Box, Dialog, DialogContent, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import Address from '../Address';
 import Avatar from '../Avatar';
 import { temp as colors } from '../Colors';
@@ -27,6 +27,7 @@ const translations = {
 };
 const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
 const CHAIN_ID_MAP = {
+  main: DEFAULT_CHAIN_ID,
   'main.abtnetwork.io': DEFAULT_CHAIN_ID,
   'beta.abtnetwork.io': 'beta'
 };
@@ -68,9 +69,52 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
   }
   return size;
 };
-const DID = /*#__PURE__*/forwardRef((props, ref) => {
+function useDIDInfo({
+  did,
+  showAvatar
+}) {
+  const isEthDid = isEthereumDid(did);
+  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+  const content = useCreation(() => {
+    if (isEthDid) {
+      return did;
+    }
+    return `${DID_PREFIX}${did}`;
+  }, [did, isEthDid]);
+  const getPrepend = useMemoizedFn((avatarSize, keyPrefix) => [/*#__PURE__*/_jsx("span", {
+    style: {
+      flex: '0 0 auto',
+      color: getFontColor(did, didMotifInfo, isEthDid)
+    },
+    children: "DID:"
+  }, `${keyPrefix}-prefix-did-${avatarSize}`), /*#__PURE__*/_jsxs("span", {
+    className: "did-address-text",
+    children: [isEthDid ? 'ETH' : 'ABT', ":"]
+  }, `${keyPrefix}-prefix-abt-${avatarSize}`), showAvatar && /*#__PURE__*/_jsx(Avatar, {
+    src: "",
+    did: did,
+    size: getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18),
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginLeft: 2,
+      marginRight: 4
+    },
+    blockiesPadding: false,
+    className: "did-address-avatar"
+  }, `${keyPrefix}-avatar-${avatarSize}`)]);
+  return {
+    isEthDid,
+    didMotifInfo,
+    content,
+    getPrepend
+  };
+}
+export const DID = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     did,
+    chainId,
+    roleType,
     showAvatar = true,
     showQrcode = false,
     locale = 'en',
@@ -104,48 +148,14 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
     sx
   };
   const addressRef = useRef(null);
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
+  const {
+    content,
+    getPrepend
+  } = useDIDInfo({
+    did,
+    showAvatar
   });
-  let chainId = props.chainId || '';
-  try {
-    if (!chainId) {
-      const chainHostUrl = window.blocklet?.CHAIN_HOST;
-      if (chainHostUrl) {
-        const chainHost = new URL(chainHostUrl).hostname;
-        if (chainHost) {
-          chainId = CHAIN_ID_MAP[chainHost];
-        }
-      }
-    }
-  } catch {
-    console.warn('Failed to parse chainHost');
-  }
   const [open, setOpen] = useState(false);
-  const isEthDid = isEthereumDid(did);
-  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-  const getPrepend = (avatarSize, keyPrefix) => [/*#__PURE__*/_jsx("span", {
-    style: {
-      flex: '0 0 auto',
-      color: getFontColor(did, didMotifInfo, isEthDid)
-    },
-    children: "DID:"
-  }, `${keyPrefix}-prefix-did-${avatarSize}`), /*#__PURE__*/_jsx("span", {
-    className: "did-address-text",
-    children: "ABT:"
-  }, `${keyPrefix}-prefix-abt-${avatarSize}`), showAvatar && /*#__PURE__*/_jsx(Avatar, {
-    src: "",
-    did: did,
-    size: getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18),
-    style: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      marginLeft: 2,
-      marginRight: 4
-    },
-    blockiesPadding: false,
-    className: "did-address-avatar"
-  }, `${keyPrefix}-avatar-${avatarSize}`)];
   const closeQrCode = useMemoizedFn(() => {
     setOpen(false);
   });
@@ -164,34 +174,10 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
       }
     });
   });
-  const downloadUrl = useCreation(() => {
-    if (['zh', 'en'].includes(locale)) {
-      return `https://www.didwallet.io/${locale}`;
-    }
-    return 'https://www.didwallet.io/en';
-  }, [locale]);
-  const downloadTips = useCreation(() => {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('downloadTips'), ' ', /*#__PURE__*/_jsx(Box, {
-        component: "a",
-        href: downloadUrl,
-        target: "_blank",
-        rel: "noreferrer",
-        sx: {
-          color: colors.foregroundsFgInteractive,
-          textDecoration: 'none',
-          '&:hover': {
-            textDecoration: 'underline'
-          }
-        },
-        children: t('download')
-      })]
-    });
-  }, [downloadUrl]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Address, {
       locale: locale,
-      content: `${DID_PREFIX}${did}`,
+      content: content,
       ...rest,
       ref: addressRef,
       prepend: getPrepend(rest.size, 'address'),
@@ -210,62 +196,152 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
         }) : null, rest.append]
       }),
       children: did
-    }, "address"), /*#__PURE__*/_jsx(Dialog, {
+    }, "address"), /*#__PURE__*/_jsx(DIDDialog, {
+      did: did,
+      chainId: chainId,
+      roleType: roleType,
+      showAvatar: showAvatar,
       open: open,
       onClose: closeQrCode,
-      maxWidth: "sm",
-      PaperProps: {
+      ...rest
+    })]
+  });
+});
+export function DIDDialog({
+  did,
+  chainId,
+  roleType,
+  showAvatar = true,
+  // DialogProps
+  open,
+  fullScreen = false,
+  fullWidth = false,
+  scroll = 'paper',
+  onClose,
+  // AddressProps
+  locale = 'en',
+  ...rest
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const {
+    isEthDid,
+    content,
+    didMotifInfo,
+    getPrepend
+  } = useDIDInfo({
+    did,
+    showAvatar
+  });
+  const downloadUrl = useCreation(() => {
+    if (['zh', 'en'].includes(locale)) {
+      return `https://www.didwallet.io/${locale}`;
+    }
+    return 'https://www.didwallet.io/en';
+  }, [locale]);
+  const downloadTips = useCreation(() => {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t('downloadTips'), ' ', /*#__PURE__*/_jsx(Box, {
+        component: "a",
+        href: downloadUrl,
+        target: "_blank",
+        rel: "noreferrer",
         sx: {
-          boxShadow: 'none',
-          borderRadius: '12px'
-        }
+          color: colors.foregroundsFgInteractive,
+          textDecoration: 'none',
+          '&:hover': {
+            textDecoration: 'underline'
+          }
+        },
+        children: t('download')
+      })]
+    });
+  }, [downloadUrl]);
+  const _chainId = useCreation(() => {
+    if (chainId) {
+      return CHAIN_ID_MAP[chainId] || chainId;
+    }
+
+    // 以太坊 DID 使用默认chainId '1'
+    if (isEthDid) return '1';
+
+    // 解析 chainHost 并获取对应的chainId
+    try {
+      const chainHostUrl = window.blocklet?.CHAIN_HOST;
+      const chainHost = new URL(chainHostUrl).hostname;
+      if (chainHost) {
+        return CHAIN_ID_MAP[chainHost] || DEFAULT_CHAIN_ID;
+      }
+    } catch (error) {
+      console.warn('Failed to parse chainHost:', error);
+    }
+    return DEFAULT_CHAIN_ID;
+  }, [isEthDid, chainId]);
+  const qrCodeLink = useCreation(() => {
+    if (isEthDid) {
+      return `ethereum:abtwallet.io/i?address=${content}&action=didRecognize&chainID=${_chainId}`;
+    }
+    return `abt://abtwallet.io/i?did=${content}&action=didRecognize&chainID=${_chainId}`;
+  }, [content, isEthDid, _chainId]);
+  return /*#__PURE__*/_jsx(Dialog, {
+    open: open,
+    onClose: onClose,
+    fullScreen: fullScreen,
+    fullWidth: fullWidth,
+    scroll: scroll,
+    maxWidth: "sm",
+    PaperProps: {
+      sx: {
+        boxShadow: 'none',
+        borderRadius: '12px'
+      }
+    },
+    children: /*#__PURE__*/_jsxs(DialogContent, {
+      align: "center",
+      sx: {
+        p: 3
       },
-      children: /*#__PURE__*/_jsxs(DialogContent, {
-        align: "center",
+      children: [/*#__PURE__*/_jsx(Typography, {
         sx: {
-          p: 3
+          mb: 2,
+          fontWeight: 500,
+          fontSize: 18
         },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            mb: 2,
-            fontWeight: 500,
-            fontSize: 18
-          },
-          children: t('scanQrcode', {
-            role: getRoleName(props.roleType || 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}`,
-          size: 256,
-          renderAs: "svg",
-          level: "M"
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            mt: 1.5,
-            textAlign: 'center'
-          },
-          children: /*#__PURE__*/_jsx(Address, {
-            locale: locale,
-            content: `${DID_PREFIX}${did}`,
-            prepend: getPrepend(16, 'dialog'),
-            ...rest,
-            size: 16,
-            copyable: true,
-            children: did
-          }, "dialog-address")
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "body2",
-          sx: {
-            color: colors.textSubtitle,
-            fontSize: '12px',
-            mt: 1
-          },
-          children: downloadTips
-        })]
-      })
-    })]
+        children: t('scanQrcode', {
+          role: getRoleName(roleType || didMotifInfo?.roleType)
+        })
+      }), /*#__PURE__*/_jsx(QRCode
+      // eslint-disable-next-line max-len
+      , {
+        value: qrCodeLink,
+        size: 256,
+        renderAs: "svg",
+        level: "M"
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          mt: 1.5,
+          textAlign: 'center'
+        },
+        children: /*#__PURE__*/_jsx(Address, {
+          locale: locale,
+          content: content,
+          prepend: getPrepend(16, 'dialog'),
+          ...rest,
+          size: 16,
+          copyable: true,
+          children: did
+        }, "dialog-address")
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        sx: {
+          color: colors.textSubtitle,
+          fontSize: '12px',
+          mt: 1
+        },
+        children: downloadTips
+      })]
+    })
   });
-});
+}
 export default DID;

package/lib/Header/header.d.ts

@@ -14,7 +14,7 @@ export interface HeaderProps extends Omit<BoxProps, 'maxWidth'> {
     prepend?: React.ReactNode;
     align?: 'left' | 'right';
     maxWidth?: Breakpoint | false;
-    homeLink?: string | ((brandContent: React.ReactNode) => React.ReactNode);
+    homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
 }
 /**
  * Header 组件

package/lib/Util/constant.d.ts

@@ -7,7 +7,7 @@ export declare const RELAY_SOCKET_PREFIX = "/.well-known/service";
 export declare const API_DID_PREFIX = "/api/did";
 export declare const DASHBOARD_URL = "/.well-known/service/admin";
 export declare const PROFILE_URL = "/.well-known/service/user";
-export declare const DID_SPACE_URL = "/.well-known/service/user/settings#storage";
+export declare const DID_SPACE_URL = "/.well-known/service/user/did-spaces";
 export declare const NAVIGATION_URL = "/.well-known/service/admin/navigation";
 export declare const DID_PREFIX = "did:abt:";
 export declare const PASSPORT_STATUS: {

package/lib/Util/constant.js

@@ -7,7 +7,7 @@ export const RELAY_SOCKET_PREFIX = '/.well-known/service';
 export const API_DID_PREFIX = '/api/did';
 export const DASHBOARD_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin`;
 export const PROFILE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user`;
-export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/settings#storage`;
+export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/did-spaces`;
 export const NAVIGATION_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin/navigation`;
 export const DID_PREFIX = 'did:abt:';
 export const PASSPORT_STATUS = {

package/package.json

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

package/src/DID/index.tsx

@@ -3,9 +3,9 @@ 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, Typography } from '@mui/material';
+import { Box, Dialog, DialogContent, ModalProps, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 import Address, { IDidAddressWrapper } from '../Address';
 import Avatar from '../Avatar';
@@ -15,7 +15,6 @@ import { DID_PREFIX } from '../Util/constant';
 import { HTMLDidAddressElement } from '../Address/did-address';
 import { translate } from '../Locale/util';
 import { getDIDColor, isEthereumDid } from '../Util';
-import type { Locale } from '../type';
 
 const translations = {
   en: {
@@ -30,28 +29,10 @@ const translations = {
   },
 };
 
-interface IDIDPropTypes extends IDidAddressWrapper {
-  did: string;
-  size?: number;
-  component?: React.ElementType;
-  copyable?: true | false;
-  responsive?: true | false;
-  showCopyButtonInTooltip?: false | true;
-  showAvatar?: true | false;
-  showQrcode?: false | true;
-  inline?: false | true;
-  append?: any;
-  compact?: false | true;
-  startChars?: number;
-  endChars?: number;
-  locale?: Locale;
-  chainId?: string;
-  roleType?: number;
-}
-
 const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
 
 const CHAIN_ID_MAP: Record<string, string> = {
+  main: DEFAULT_CHAIN_ID,
   'main.abtnetwork.io': DEFAULT_CHAIN_ID,
   'beta.abtnetwork.io': 'beta',
 };
@@ -99,14 +80,66 @@ const getAvatarSize = (didMotifInfo: any, isEthDid: boolean, size: number) => {
   return size;
 };
 
+function useDIDInfo({ did, showAvatar }: { did: string; showAvatar?: boolean }) {
+  const isEthDid = isEthereumDid(did);
+  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+  const content = useCreation(() => {
+    if (isEthDid) {
+      return did;
+    }
+    return `${DID_PREFIX}${did}`;
+  }, [did, isEthDid]);
+
+  const getPrepend = useMemoizedFn((avatarSize: number, keyPrefix: string) => [
+    <span
+      key={`${keyPrefix}-prefix-did-${avatarSize}`}
+      style={{ flex: '0 0 auto', color: getFontColor(did, didMotifInfo, isEthDid) }}>
+      DID:
+    </span>,
+    <span key={`${keyPrefix}-prefix-abt-${avatarSize}`} className="did-address-text">
+      {isEthDid ? 'ETH' : 'ABT'}:
+    </span>,
+    showAvatar && (
+      <Avatar
+        key={`${keyPrefix}-avatar-${avatarSize}`}
+        src=""
+        did={did}
+        size={getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18)}
+        style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
+        blockiesPadding={false}
+        className="did-address-avatar"
+      />
+    ),
+  ]);
+
+  return {
+    isEthDid,
+    didMotifInfo,
+    content,
+    getPrepend,
+  };
+}
+
+interface DIDOwnProps {
+  did: string;
+  chainId?: string;
+  roleType?: number;
+  showAvatar?: true | false;
+  showQrcode?: false | true;
+}
+
+export interface DIDProps extends DIDOwnProps, Omit<IDidAddressWrapper, 'ref'> {}
+
 export interface HTMLDIDElement extends HTMLDidAddressElement {
   openQRCode: () => void;
   closeQRCode: () => void;
 }
 
-const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
+export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
   const {
     did,
+    chainId,
+    roleType,
     showAvatar = true,
     showQrcode = false,
     locale = 'en',
@@ -142,50 +175,9 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
   };
 
   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 as any).blocklet?.CHAIN_HOST;
-      if (chainHostUrl) {
-        const chainHost = new URL(chainHostUrl).hostname;
-        if (chainHost) {
-          chainId = CHAIN_ID_MAP[chainHost];
-        }
-      }
-    }
-  } catch {
-    console.warn('Failed to parse chainHost');
-  }
+  const { content, getPrepend } = useDIDInfo({ did, showAvatar });
   const [open, setOpen] = useState(false);
-  const isEthDid = isEthereumDid(did);
-  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
 
-  const getPrepend = (avatarSize: number, keyPrefix: string) => [
-    <span
-      key={`${keyPrefix}-prefix-did-${avatarSize}`}
-      style={{ flex: '0 0 auto', color: getFontColor(did, didMotifInfo, isEthDid) }}>
-      DID:
-    </span>,
-    <span key={`${keyPrefix}-prefix-abt-${avatarSize}`} className="did-address-text">
-      ABT:
-    </span>,
-    showAvatar && (
-      <Avatar
-        key={`${keyPrefix}-avatar-${avatarSize}`}
-        src=""
-        did={did}
-        size={getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18)}
-        style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
-        blockiesPadding={false}
-        className="did-address-avatar"
-      />
-    ),
-  ];
   const closeQrCode = useMemoizedFn(() => {
     setOpen(false);
   });
@@ -209,41 +201,12 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
     );
   });
 
-  const downloadUrl = useCreation(() => {
-    if (['zh', 'en'].includes(locale)) {
-      return `https://www.didwallet.io/${locale}`;
-    }
-    return 'https://www.didwallet.io/en';
-  }, [locale]);
-
-  const downloadTips = useCreation(() => {
-    return (
-      <>
-        {t('downloadTips')}{' '}
-        <Box
-          component="a"
-          href={downloadUrl}
-          target="_blank"
-          rel="noreferrer"
-          sx={{
-            color: colors.foregroundsFgInteractive,
-            textDecoration: 'none',
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          }}>
-          {t('download')}
-        </Box>
-      </>
-    );
-  }, [downloadUrl]);
-
   return (
     <>
       <Address
         key="address"
         locale={locale}
-        content={`${DID_PREFIX}${did}`}
+        content={content}
         {...rest}
         ref={addressRef}
         prepend={getPrepend(rest.size, 'address')}
@@ -268,56 +231,155 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
         }>
         {did}
       </Address>
-
-      <Dialog
+      <DIDDialog
+        did={did}
+        chainId={chainId}
+        roleType={roleType}
+        showAvatar={showAvatar}
         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(props.roleType || didMotifInfo?.roleType) })}
-          </Typography>
-          <QRCode
-            // eslint-disable-next-line max-len
-            value={`abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${
-              chainId || DEFAULT_CHAIN_ID
-            }`}
-            size={256}
-            renderAs="svg"
-            level="M"
-          />
-          <Box sx={{ mt: 1.5, textAlign: 'center' }}>
-            <Address
-              key="dialog-address"
-              locale={locale}
-              content={`${DID_PREFIX}${did}`}
-              prepend={getPrepend(16, 'dialog')}
-              {...rest}
-              size={16}
-              copyable>
-              {did}
-            </Address>
-          </Box>
-          <Typography
-            variant="body2"
-            sx={{
-              color: colors.textSubtitle,
-              fontSize: '12px',
-              mt: 1,
-            }}>
-            {downloadTips}
-          </Typography>
-        </DialogContent>
-      </Dialog>
+        {...rest}
+      />
     </>
   );
 });
 
+export interface DIDDialogProps extends DIDProps {
+  // DialogProps
+  open: boolean;
+  fullScreen?: false | true;
+  fullWidth?: false | true;
+  scroll?: 'body' | 'paper';
+  onClose?: ModalProps['onClose'];
+}
+export function DIDDialog({
+  did,
+  chainId,
+  roleType,
+  showAvatar = true,
+  // DialogProps
+  open,
+  fullScreen = false,
+  fullWidth = false,
+  scroll = 'paper',
+  onClose,
+  // AddressProps
+  locale = 'en',
+  ...rest
+}: DIDDialogProps) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const { isEthDid, content, didMotifInfo, getPrepend } = useDIDInfo({ did, showAvatar });
+
+  const downloadUrl = useCreation(() => {
+    if (['zh', 'en'].includes(locale)) {
+      return `https://www.didwallet.io/${locale}`;
+    }
+    return 'https://www.didwallet.io/en';
+  }, [locale]);
+
+  const downloadTips = useCreation(() => {
+    return (
+      <>
+        {t('downloadTips')}{' '}
+        <Box
+          component="a"
+          href={downloadUrl}
+          target="_blank"
+          rel="noreferrer"
+          sx={{
+            color: colors.foregroundsFgInteractive,
+            textDecoration: 'none',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}>
+          {t('download')}
+        </Box>
+      </>
+    );
+  }, [downloadUrl]);
+
+  const _chainId = useCreation(() => {
+    if (chainId) {
+      return CHAIN_ID_MAP[chainId] || chainId;
+    }
+
+    // 以太坊 DID 使用默认chainId '1'
+    if (isEthDid) return '1';
+
+    // 解析 chainHost 并获取对应的chainId
+    try {
+      const chainHostUrl = (window as any).blocklet?.CHAIN_HOST;
+      const chainHost = new URL(chainHostUrl).hostname;
+      if (chainHost) {
+        return CHAIN_ID_MAP[chainHost] || DEFAULT_CHAIN_ID;
+      }
+    } catch (error) {
+      console.warn('Failed to parse chainHost:', error);
+    }
+    return DEFAULT_CHAIN_ID;
+  }, [isEthDid, chainId]);
+
+  const qrCodeLink = useCreation(() => {
+    if (isEthDid) {
+      return `ethereum:abtwallet.io/i?address=${content}&action=didRecognize&chainID=${_chainId}`;
+    }
+    return `abt://abtwallet.io/i?did=${content}&action=didRecognize&chainID=${_chainId}`;
+  }, [content, isEthDid, _chainId]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullScreen={fullScreen}
+      fullWidth={fullWidth}
+      scroll={scroll}
+      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(roleType || didMotifInfo?.roleType) })}
+        </Typography>
+        <QRCode
+          // eslint-disable-next-line max-len
+          value={qrCodeLink}
+          size={256}
+          renderAs="svg"
+          level="M"
+        />
+        <Box sx={{ mt: 1.5, textAlign: 'center' }}>
+          <Address
+            key="dialog-address"
+            locale={locale}
+            content={content}
+            prepend={getPrepend(16, 'dialog')}
+            {...rest}
+            size={16}
+            copyable>
+            {did}
+          </Address>
+        </Box>
+        <Typography
+          variant="body2"
+          sx={{
+            color: colors.textSubtitle,
+            fontSize: '12px',
+            mt: 1,
+          }}>
+          {downloadTips}
+        </Typography>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export default DID;

package/src/Header/header.tsx

@@ -18,7 +18,7 @@ export interface HeaderProps extends Omit<BoxProps, 'maxWidth'> {
   prepend?: React.ReactNode;
   align?: 'left' | 'right';
   maxWidth?: Breakpoint | false;
-  homeLink?: string | ((brandContent: React.ReactNode) => React.ReactNode);
+  homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
 }
 
 /**

package/src/Util/constant.ts

@@ -9,7 +9,7 @@ export const API_DID_PREFIX = '/api/did';
 
 export const DASHBOARD_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin`;
 export const PROFILE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user`;
-export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/settings#storage`;
+export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/did-spaces`;
 export const NAVIGATION_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin/navigation`;
 
 export const DID_PREFIX = 'did:abt:';