@arcblock/ux 2.9.61 → 2.9.63

package/es/Address/did-address.js

@@ -111,7 +111,7 @@ const DidAddress = /*#__PURE__*/forwardRef(({
         component: "span",
         className: "did-address-text",
         sx: {
-          cursor: copyable ? 'text' : 'pointer'
+          cursor: copyable ? 'unset' : 'pointer'
         },
         onDoubleClick: copyable ? noop : onCopy,
         children: /*#__PURE__*/_jsx(CompactText, {

package/es/Avatar/index.js

@@ -8,6 +8,7 @@ import Img from '../Img';
 import { mergeProps, isEthereumDid } from '../Util';
 import DIDMotif from './did-motif';
 import blockies from './etherscan-blockies';
+import { DID_PREFIX } from '../Util/constant';
 
 /**
  * Avatar component
@@ -48,7 +49,7 @@ function Avatar(props) {
   const blockyIcon = useMemo(() => {
     if (isEthereumDid(did)) {
       return blockies.createIcon({
-        seed: did.replace('did:abt:', '').toLowerCase(),
+        seed: did.replace(DID_PREFIX, '').toLowerCase(),
         size: 8,
         scale: 16
       }).toDataURL();
@@ -126,7 +127,7 @@ function Avatar(props) {
   if (did) {
     // 渲染 did motif
     return /*#__PURE__*/_jsx(DIDMotif, {
-      did: did.replace('did:abt:', ''),
+      did: did.replace(DID_PREFIX, ''),
       size: size,
       animation: animation,
       shape: Shape[(shape || '').toUpperCase()],

package/es/DID/index.js

@@ -4,20 +4,27 @@ 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 { Box, Dialog, DialogContent, DialogTitle } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
+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 Address from '../Address';
 import Avatar from '../Avatar';
 import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
+import { translate } from '../Locale/util';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to transfer token to here'
+    scanQrcode: 'Scan with DID Wallet to transfer token to here',
+    download: 'Download',
+    downloadTips: "Don't have DID Wallet ?"
   },
   zh: {
-    scanQrcode: '扫描此二维码，用 DID 钱包转账'
+    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
+    download: '下载',
+    downloadTips: '没有 DID Wallet ？'
   }
 };
 const DIDPropTypes = {
@@ -79,10 +86,9 @@ const DID = /*#__PURE__*/forwardRef(({
   locale,
   ...rest
 }, ref) => {
-  if (!translations[locale]) {
-    // eslint-disable-next-line no-param-reassign
-    locale = 'en';
-  }
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   try {
     if (!chainId) {
       const chainHostUrl = window?.blocklet?.CHAIN_HOST;
@@ -129,14 +135,40 @@ const DID = /*#__PURE__*/forwardRef(({
   const closeQrCode = useMemoizedFn(() => {
     setOpen(false);
   });
-  const openQrCode = useMemoizedFn(() => {
+  const openQrCode = useMemoizedFn(e => {
+    e.stopPropagation();
+    e.preventDefault();
     setOpen(true);
   });
+  const downloadUrl = useCreation(() => {
+    if (['zh', 'en'].includes) {
+      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, {
       ref: ref,
       locale: locale,
-      content: `did:abt:${did}`,
+      content: `${DID_PREFIX}${did}`,
       ...rest,
       prepend: prepend,
       append: showQrcode ? /*#__PURE__*/_jsx(Box, {
@@ -156,22 +188,17 @@ const DID = /*#__PURE__*/forwardRef(({
       maxWidth: "sm",
       children: [/*#__PURE__*/_jsx(DialogTitle, {
         align: "center",
-        children: /*#__PURE__*/_jsx(Box, {
-          display: "inline-block",
-          pt: 1.5,
-          fontSize: {
-            xs: 13,
-            sm: 'inherit'
-          },
-          component: "span",
-          children: translations[locale].scanQrcode
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          component: "h3",
+          children: t('scanQrcode')
         })
       }), /*#__PURE__*/_jsxs(DialogContent, {
         align: "center",
         children: [/*#__PURE__*/_jsx(QRCode
         // eslint-disable-next-line max-len
         , {
-          value: `abt://abtwallet.io/i?did=did:abt:${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
+          value: `abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
           size: 256,
           renderAs: "svg",
           level: "M"
@@ -183,9 +210,18 @@ const DID = /*#__PURE__*/forwardRef(({
           children: /*#__PURE__*/_jsx(Address, {
             copyable: true,
             locale: locale,
-            content: `did:abt:${did}`,
+            content: `${DID_PREFIX}${did}`,
+            prepend: prepend,
             children: did
           })
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: colors.textSubtitle,
+            fontSize: '12px',
+            mt: 1
+          },
+          children: downloadTips
         })]
       })]
     })]

package/es/Util/constant.js

@@ -8,6 +8,7 @@ export const API_DID_PREFIX = '/api/did';
 export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
 export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
 export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
+export const DID_PREFIX = 'did:abt:';
 export const PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked'

package/es/Util/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-bitwise */
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
+import { DID_PREFIX } from './constant';
 let dateTool = null;
 export function parseQuery(str) {
   return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter(([key]) => !!key).reduce((memo, x) => {
@@ -251,7 +252,7 @@ export const getFontSize = size => {
 
 // 参考: asset-chain @arcblock/did
 export const isEthereumDid = did => {
-  const address = did.replace('did:abt:', '');
+  const address = did.replace(DID_PREFIX, '');
   // check if it has the basic requirements of an address
   if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
     return false;

package/lib/Address/did-address.js

@@ -130,7 +130,7 @@ const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         component: "span",
         className: "did-address-text",
         sx: {
-          cursor: copyable ? 'text' : 'pointer'
+          cursor: copyable ? 'unset' : 'pointer'
         },
         onDoubleClick: copyable ? _noop.default : onCopy,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactText.default, {

package/lib/Avatar/index.js

@@ -13,6 +13,7 @@ var _Img = _interopRequireDefault(require("../Img"));
 var _Util = require("../Util");
 var _didMotif2 = _interopRequireDefault(require("./did-motif"));
 var _etherscanBlockies = _interopRequireDefault(require("./etherscan-blockies"));
+var _constant = require("../Util/constant");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["did", "size", "src", "variant", "animation", "shape", "blockiesPadding", "responsive"];
 /* eslint-disable react/no-unused-prop-types */
@@ -61,7 +62,7 @@ function Avatar(props) {
   const blockyIcon = (0, _react.useMemo)(() => {
     if ((0, _Util.isEthereumDid)(did)) {
       return _etherscanBlockies.default.createIcon({
-        seed: did.replace('did:abt:', '').toLowerCase(),
+        seed: did.replace(_constant.DID_PREFIX, '').toLowerCase(),
         size: 8,
         scale: 16
       }).toDataURL();
@@ -135,7 +136,7 @@ function Avatar(props) {
   if (did) {
     // 渲染 did motif
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_didMotif2.default, _objectSpread({
-      did: did.replace('did:abt:', ''),
+      did: did.replace(_constant.DID_PREFIX, ''),
       size: size,
       animation: animation,
       shape: _didMotif.Shape[(shape || '').toUpperCase()],

package/lib/DID/index.js

@@ -12,9 +12,12 @@ var _react2 = require("@iconify/react");
 var _qrCodeRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/qr-code-rounded"));
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
+var _Colors = require("../Colors");
+var _constant = require("../Util/constant");
 var _Address = _interopRequireDefault(require("../Address"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Util = require("../Util");
+var _util = require("../Locale/util");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["did", "showAvatar", "showQrcode", "chainId", "locale"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,10 +30,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to transfer token to here'
+    scanQrcode: 'Scan with DID Wallet to transfer token to here',
+    download: 'Download',
+    downloadTips: "Don't have DID Wallet ?"
   },
   zh: {
-    scanQrcode: '扫描此二维码，用 DID 钱包转账'
+    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
+    download: '下载',
+    downloadTips: '没有 DID Wallet ？'
   }
 };
 const DIDPropTypes = {
@@ -93,10 +100,10 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       locale
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  if (!translations[locale]) {
-    // eslint-disable-next-line no-param-reassign
-    locale = 'en';
-  }
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(translations, key, locale, 'en', data);
+  });
   try {
     if (!chainId) {
       var _window, _window$blocklet;
@@ -144,14 +151,40 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const closeQrCode = (0, _ahooks.useMemoizedFn)(() => {
     setOpen(false);
   });
-  const openQrCode = (0, _ahooks.useMemoizedFn)(() => {
+  const openQrCode = (0, _ahooks.useMemoizedFn)(e => {
+    e.stopPropagation();
+    e.preventDefault();
     setOpen(true);
   });
+  const downloadUrl = (0, _ahooks.useCreation)(() => {
+    if (['zh', 'en'].includes) {
+      return "https://www.didwallet.io/".concat(locale);
+    }
+    return 'https://www.didwallet.io/en';
+  }, [locale]);
+  const downloadTips = (0, _ahooks.useCreation)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [t('downloadTips'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "a",
+        href: downloadUrl,
+        target: "_blank",
+        rel: "noreferrer",
+        sx: {
+          color: _Colors.temp.foregroundsFgInteractive,
+          textDecoration: 'none',
+          '&:hover': {
+            textDecoration: 'underline'
+          }
+        },
+        children: t('download')
+      })]
+    });
+  }, [downloadUrl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, _objectSpread(_objectSpread({
       ref: ref,
       locale: locale,
-      content: "did:abt:".concat(did)
+      content: "".concat(_constant.DID_PREFIX).concat(did)
     }, rest), {}, {
       prepend: prepend,
       append: showQrcode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
@@ -171,22 +204,17 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       maxWidth: "sm",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, {
         align: "center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          display: "inline-block",
-          pt: 1.5,
-          fontSize: {
-            xs: 13,
-            sm: 'inherit'
-          },
-          component: "span",
-          children: translations[locale].scanQrcode
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          component: "h3",
+          children: t('scanQrcode')
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
         align: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_qrcode.default
         // eslint-disable-next-line max-len
         , {
-          value: "abt://abtwallet.io/i?did=did:abt:".concat(did, "&action=didRecognize&chainID=").concat(chainId || DEFAULT_CHAIN_ID),
+          value: "abt://abtwallet.io/i?did=".concat(_constant.DID_PREFIX).concat(did, "&action=didRecognize&chainID=").concat(chainId || DEFAULT_CHAIN_ID),
           size: 256,
           renderAs: "svg",
           level: "M"
@@ -198,9 +226,18 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
             copyable: true,
             locale: locale,
-            content: "did:abt:".concat(did),
+            content: "".concat(_constant.DID_PREFIX).concat(did),
+            prepend: prepend,
             children: did
           })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: _Colors.temp.textSubtitle,
+            fontSize: '12px',
+            mt: 1
+          },
+          children: downloadTips
         })]
       })]
     })]

package/lib/Util/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.PASSPORT_STATUS = exports.NAVIGATION_URL = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
+exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.PASSPORT_STATUS = exports.NAVIGATION_URL = exports.DID_PREFIX = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
 const DEFAULT_TIMEOUT = exports.DEFAULT_TIMEOUT = 5 * 60;
 const DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_WINDOW_TIMEOUT = 30 * 60;
 const AUTH_SERVICE_PREFIX = exports.AUTH_SERVICE_PREFIX = '/.well-known/service';
@@ -14,6 +14,7 @@ const API_DID_PREFIX = exports.API_DID_PREFIX = '/api/did';
 const DASHBOARD_URL = exports.DASHBOARD_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin");
 const PROFILE_URL = exports.PROFILE_URL = "".concat(AUTH_SERVICE_PREFIX, "/user");
 const NAVIGATION_URL = exports.NAVIGATION_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin/navigation");
+const DID_PREFIX = exports.DID_PREFIX = 'did:abt:';
 const PASSPORT_STATUS = exports.PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked'

package/lib/Util/index.js

@@ -21,6 +21,7 @@ exports.str2color = exports.sleep = exports.setVisitorId = void 0;
 exports.stringifyQuery = stringifyQuery;
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 var _didMotif = require("@arcblock/did-motif");
+var _constant = require("./constant");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable no-bitwise */
 
@@ -292,7 +293,7 @@ const getFontSize = size => {
 // 参考: asset-chain @arcblock/did
 exports.getFontSize = getFontSize;
 const isEthereumDid = did => {
-  const address = did.replace('did:abt:', '');
+  const address = did.replace(_constant.DID_PREFIX, '');
   // check if it has the basic requirements of an address
   if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.61",
+  "version": "2.9.63",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -358,12 +358,12 @@
     "@mui/material": "^5.15.0",
     "react": ">=18.2.0"
   },
-  "gitHead": "2349446884f18459b909c2dfe32f4411554f83da",
+  "gitHead": "e5e083300891c1ff349c653a70229ea6ba3f8b24",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.61",
-    "@arcblock/nft-display": "^2.9.61",
-    "@arcblock/react-hooks": "^2.9.61",
+    "@arcblock/icons": "^2.9.63",
+    "@arcblock/nft-display": "^2.9.63",
+    "@arcblock/react-hooks": "^2.9.63",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Address/did-address.jsx

@@ -102,7 +102,7 @@ const DidAddress = forwardRef(
               component="span"
               className="did-address-text"
               sx={{
-                cursor: copyable ? 'text' : 'pointer',
+                cursor: copyable ? 'unset' : 'pointer',
               }}
               onDoubleClick={copyable ? noop : onCopy}>
               <CompactText

package/src/Avatar/index.jsx

@@ -8,6 +8,7 @@ import Img from '../Img';
 import { mergeProps, isEthereumDid } from '../Util';
 import DIDMotif from './did-motif';
 import blockies from './etherscan-blockies';
+import { DID_PREFIX } from '../Util/constant';
 
 /**
  * Avatar component
@@ -38,7 +39,7 @@ function Avatar(props) {
     if (isEthereumDid(did)) {
       return blockies
         .createIcon({
-          seed: did.replace('did:abt:', '').toLowerCase(),
+          seed: did.replace(DID_PREFIX, '').toLowerCase(),
           size: 8,
           scale: 16,
         })
@@ -111,7 +112,7 @@ function Avatar(props) {
     // 渲染 did motif
     return (
       <DIDMotif
-        did={did.replace('did:abt:', '')}
+        did={did.replace(DID_PREFIX, '')}
         size={size}
         animation={animation}
         shape={Shape[(shape || '').toUpperCase()]}

package/src/DID/index.jsx

@@ -4,20 +4,27 @@ 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 { Box, Dialog, DialogContent, DialogTitle } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
+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 Address from '../Address';
 import Avatar from '../Avatar';
 
 import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
+import { translate } from '../Locale/util';
 
 const translations = {
   en: {
     scanQrcode: 'Scan with DID Wallet to transfer token to here',
+    download: 'Download',
+    downloadTips: "Don't have DID Wallet ?",
   },
   zh: {
-    scanQrcode: '扫描此二维码，用 DID 钱包转账',
+    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
+    download: '下载',
+    downloadTips: '没有 DID Wallet ？',
   },
 };
 
@@ -77,10 +84,9 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
  * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
  */
 const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest }, ref) => {
-  if (!translations[locale]) {
-    // eslint-disable-next-line no-param-reassign
-    locale = 'en';
-  }
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
 
   try {
     if (!chainId) {
@@ -121,16 +127,47 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
   const closeQrCode = useMemoizedFn(() => {
     setOpen(false);
   });
-  const openQrCode = useMemoizedFn(() => {
+  const openQrCode = useMemoizedFn((e) => {
+    e.stopPropagation();
+    e.preventDefault();
     setOpen(true);
   });
 
+  const downloadUrl = useCreation(() => {
+    if (['zh', 'en'].includes) {
+      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
         ref={ref}
         locale={locale}
-        content={`did:abt:${did}`}
+        content={`${DID_PREFIX}${did}`}
         {...rest}
         prepend={prepend}
         append={
@@ -152,23 +189,34 @@ const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest
 
       <Dialog open={open} onClose={closeQrCode} maxWidth="sm">
         <DialogTitle align="center">
-          <Box display="inline-block" pt={1.5} fontSize={{ xs: 13, sm: 'inherit' }} component="span">
-            {translations[locale].scanQrcode}
-          </Box>
+          <Typography variant="h6" component="h3">
+            {t('scanQrcode')}
+          </Typography>
         </DialogTitle>
         <DialogContent align="center">
           <QRCode
             // eslint-disable-next-line max-len
-            value={`abt://abtwallet.io/i?did=did:abt:${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`}
+            value={`abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${
+              chainId || DEFAULT_CHAIN_ID
+            }`}
             size={256}
             renderAs="svg"
             level="M"
           />
           <Box sx={{ marginTop: 1, textAlign: 'center' }}>
-            <Address copyable locale={locale} content={`did:abt:${did}`}>
+            <Address copyable locale={locale} content={`${DID_PREFIX}${did}`} prepend={prepend}>
               {did}
             </Address>
           </Box>
+          <Typography
+            variant="body2"
+            sx={{
+              color: colors.textSubtitle,
+              fontSize: '12px',
+              mt: 1,
+            }}>
+            {downloadTips}
+          </Typography>
         </DialogContent>
       </Dialog>
     </>

package/src/Util/constant.js

@@ -11,6 +11,8 @@ export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
 export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
 export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
 
+export const DID_PREFIX = 'did:abt:';
+
 export const PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked',

package/src/Util/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-bitwise */
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
+import { DID_PREFIX } from './constant';
 
 let dateTool = null;
 
@@ -276,7 +277,7 @@ export const getFontSize = (size) => {
 
 // 参考: asset-chain @arcblock/did
 export const isEthereumDid = (did) => {
-  const address = did.replace('did:abt:', '');
+  const address = did.replace(DID_PREFIX, '');
   // check if it has the basic requirements of an address
   if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
     return false;