@arcblock/ux 2.9.21 → 2.9.22

package/es/DID/index.js

@@ -12,6 +12,7 @@ const DIDPropTypes = {
   copyable: PropTypes.bool,
   responsive: PropTypes.bool,
   showCopyButtonInTooltip: PropTypes.bool,
+  showAvatar: PropTypes.bool,
   inline: PropTypes.bool,
   append: PropTypes.any,
   compact: PropTypes.bool,
@@ -50,6 +51,7 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
  */
 const DID = /*#__PURE__*/forwardRef(({
   did,
+  showAvatar,
   ...rest
 }, ref) => {
   const isEthDid = isEthereumDid(did);
@@ -68,7 +70,7 @@ const DID = /*#__PURE__*/forwardRef(({
       fontSize
     },
     children: "ABT:"
-  }, "prefix-abt"), /*#__PURE__*/_jsx(Avatar, {
+  }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
     did: did,
     size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
     style: {
@@ -95,6 +97,7 @@ DID.defaultProps = {
   copyable: true,
   responsive: true,
   showCopyButtonInTooltip: false,
+  showAvatar: true,
   inline: false,
   append: null,
   compact: false,

package/es/Dialog/confirm.js

@@ -44,6 +44,20 @@ export default function Confirm({
     PaperProps: PaperProps,
     ...rest,
     onClose: () => onCancel(),
+    slotProps: {
+      header: {
+        sx: {
+          '.ux-dialog_title': {
+            lineHeight: 1
+          }
+        }
+      },
+      content: {
+        sx: {
+          paddingTop: '0!important'
+        }
+      }
+    },
     actions: /*#__PURE__*/_jsxs(_Fragment, {
       children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
         onClick: () => onCancel(),

package/es/Dialog/dialog.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import CloseIcon from '@mui/icons-material/Close';
-import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery } from '@mui/material';
+import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery, Box } from '@mui/material';
 import { styled, useTheme } from '../Theme';
 
 /**
@@ -46,6 +46,7 @@ function Dialog({
   showCloseButton,
   actionsPosition,
   PaperProps,
+  slotProps,
   ...rest
 }) {
   const theme = useTheme();
@@ -69,7 +70,6 @@ function Dialog({
   const closeButton = /*#__PURE__*/_jsx(IconButton, {
     className: "ux-dialog_closeButton",
     onClick: e => handleOnClose(e, 'closeButton'),
-    size: "large",
     children: /*#__PURE__*/_jsx(CloseIcon, {})
   });
   return /*#__PURE__*/_jsxs(StyledMuiDialog, {
@@ -78,6 +78,7 @@ function Dialog({
     PaperProps: PaperProps,
     ...rest,
     children: [showHeader && /*#__PURE__*/_jsxs(Header, {
+      ...slotProps.header,
       className: "ux-dialog_header",
       isMobile: isMobile,
       children: [/*#__PURE__*/_jsxs("div", {
@@ -98,6 +99,7 @@ function Dialog({
         }), showCloseButton && !isMobile && closeButton]
       })]
     }), /*#__PURE__*/_jsx(MuiDialogContent, {
+      ...slotProps.content,
       children: children
     }), actions && /*#__PURE__*/_jsx(DialogActions, {
       className: `ux-dialog_actions--${actionsPosition}`,
@@ -115,7 +117,11 @@ Dialog.propTypes = {
   actions: PropTypes.node,
   showCloseButton: PropTypes.bool,
   actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
-  PaperProps: PropTypes.object
+  PaperProps: PropTypes.object,
+  slotProps: PropTypes.shape({
+    content: PropTypes.object,
+    header: PropTypes.object
+  })
 };
 Dialog.defaultProps = {
   showCloseButton: true,
@@ -124,7 +130,8 @@ Dialog.defaultProps = {
   toolbar: null,
   actions: null,
   actionsPosition: 'right',
-  PaperProps: {}
+  PaperProps: {},
+  slotProps: {}
 };
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -151,7 +158,7 @@ const StyledMuiDialog = styled(MuiDialog)`
 `;
 
 /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Header = styled('div', {
+const Header = styled(Box, {
   shouldForwardProp: prop => prop !== 'isMobile'
 })`
   display: flex;
@@ -184,6 +191,11 @@ const Header = styled('div', {
   .ux-dialog_closeButton {
     /* 使 closeButton 与 content 左/右对齐 */
     ${props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;'}
+    transition: transform 0.3s;
+    transform: rotate(0deg);
+    &:hover {
+      transform: rotate(90deg);
+    }
   }
 `;
 export default Dialog;

package/es/Dialog/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export type OpenConfirmProps = {
+  title: ReactNode;
+  content: ReactNode;
+  onConfirm: (close: () => void) => void;
+  onCancel: () => void;
+  showCancelButton: boolean;
+  confirmButtonText: string;
+  cancelButtonText: string;
+};
+
+export type OpenConfirm = (params: OpenConfirmProps) => void;
+export type CloseConfirm = () => void;

package/es/Dialog/use-confirm.js

@@ -5,6 +5,7 @@ import Confirm from './confirm';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
   // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  // HACK: useReactive 无法存储 react-node，所以只能使用 useState
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
   const state = useReactive({
@@ -85,9 +86,18 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
 });
 export default function useConfirm(props = {}) {
   const confirmRef = useRef(null);
+
+  /**
+   * 打开一个弹窗
+   * @type {import('./types').OpenConfirm}
+   */
   const open = useMemoizedFn((...args) => {
     confirmRef.current?.open(...args);
   });
+  /**
+   * 挂你不一个弹窗
+   * @type {import('./types').CloseConfirm}
+   */
   const close = useMemoizedFn((...args) => {
     confirmRef.current?.close(...args);
   });

package/es/SessionUser/libs/translation.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 export const translations = {
   en: {
-    connectDIDWallet: 'Connect your DID Wallet for full functionality',
+    connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',
     profile: 'Profile',
     dashboard: 'Dashboard',
@@ -9,7 +9,7 @@ export const translations = {
     addAnotherAccount: 'Add another account'
   },
   zh: {
-    connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
+    connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
     switch: '切换',
     profile: '个人中心',
     dashboard: '控制台',

package/lib/DID/index.js

@@ -11,7 +11,7 @@ var _Address = _interopRequireDefault(require("../Address"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Util = require("../Util");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["did"];
+const _excluded = ["did", "showAvatar"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,6 +29,7 @@ const DIDPropTypes = {
   copyable: _propTypes.default.bool,
   responsive: _propTypes.default.bool,
   showCopyButtonInTooltip: _propTypes.default.bool,
+  showAvatar: _propTypes.default.bool,
   inline: _propTypes.default.bool,
   append: _propTypes.default.any,
   compact: _propTypes.default.bool,
@@ -67,7 +68,8 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
  */
 const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-      did
+      did,
+      showAvatar
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const isEthDid = (0, _Util.isEthereumDid)(did);
@@ -86,7 +88,7 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       fontSize
     },
     children: "ABT:"
-  }, "prefix-abt"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  }, "prefix-abt"), showAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
     did: did,
     size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
     style: {
@@ -113,6 +115,7 @@ DID.defaultProps = {
   copyable: true,
   responsive: true,
   showCopyButtonInTooltip: false,
+  showAvatar: true,
   inline: false,
   append: null,
   compact: false,

package/lib/Dialog/confirm.js

@@ -56,6 +56,20 @@ function Confirm(_ref) {
     PaperProps: PaperProps
   }, rest), {}, {
     onClose: () => onCancel(),
+    slotProps: {
+      header: {
+        sx: {
+          '.ux-dialog_title': {
+            lineHeight: 1
+          }
+        }
+      },
+      content: {
+        sx: {
+          paddingTop: '0!important'
+        }
+      }
+    },
     actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [showCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({
         onClick: () => onCancel(),

package/lib/Dialog/dialog.js

@@ -10,7 +10,7 @@ var _material = require("@mui/material");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps"];
+const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps", "slotProps"];
 /**
   @typedef {import('@mui/material').PaperProps & {
     minWidth: number | string,
@@ -59,7 +59,8 @@ function Dialog(_ref) {
       actions,
       showCloseButton,
       actionsPosition,
-      PaperProps
+      PaperProps,
+      slotProps
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const theme = (0, _Theme.useTheme)();
@@ -83,7 +84,6 @@ function Dialog(_ref) {
   const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
     className: "ux-dialog_closeButton",
     onClick: e => handleOnClose(e, 'closeButton'),
-    size: "large",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiDialog, _objectSpread(_objectSpread({
@@ -91,7 +91,7 @@ function Dialog(_ref) {
     onClose: handleOnClose,
     PaperProps: PaperProps
   }, rest), {}, {
-    children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+    children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, _objectSpread(_objectSpread({}, slotProps.header), {}, {
       className: "ux-dialog_header",
       isMobile: isMobile,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -111,9 +111,9 @@ function Dialog(_ref) {
           children: toolbar
         }), showCloseButton && !isMobile && closeButton]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, _objectSpread(_objectSpread({}, slotProps.content), {}, {
       children: children
-    }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
+    })), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
       className: "ux-dialog_actions--".concat(actionsPosition),
       children: actions
     })]
@@ -129,7 +129,11 @@ Dialog.propTypes = {
   actions: _propTypes.default.node,
   showCloseButton: _propTypes.default.bool,
   actionsPosition: _propTypes.default.oneOf(['left', 'center', 'right']),
-  PaperProps: _propTypes.default.object
+  PaperProps: _propTypes.default.object,
+  slotProps: _propTypes.default.shape({
+    content: _propTypes.default.object,
+    header: _propTypes.default.object
+  })
 };
 Dialog.defaultProps = {
   showCloseButton: true,
@@ -138,7 +142,8 @@ Dialog.defaultProps = {
   toolbar: null,
   actions: null,
   actionsPosition: 'right',
-  PaperProps: {}
+  PaperProps: {},
+  slotProps: {}
 };
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -146,7 +151,7 @@ Dialog.defaultProps = {
 const StyledMuiDialog = (0, _Theme.styled)(_material.Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paper {\n    ", ";\n  }\n  .MuiDialogContent-root {\n    padding: 16px 24px;\n  }\n  .MuiDialogActions-root {\n    padding: 8px 24px 16px 24px;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--left {\n    justify-content: flex-start;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--right {\n    justify-content: flex-end;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--center {\n    justify-content: center;\n  }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
 
 /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Header = (0, _Theme.styled)('div', {
+const Header = (0, _Theme.styled)(_material.Box, {
   shouldForwardProp: prop => prop !== 'isMobile'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n    transition: transform 0.3s;\n    transform: rotate(0deg);\n    &:hover {\n      transform: rotate(90deg);\n    }\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
 var _default = exports.default = Dialog;

package/lib/Dialog/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export type OpenConfirmProps = {
+  title: ReactNode;
+  content: ReactNode;
+  onConfirm: (close: () => void) => void;
+  onCancel: () => void;
+  showCancelButton: boolean;
+  confirmButtonText: string;
+  cancelButtonText: string;
+};
+
+export type OpenConfirm = (params: OpenConfirmProps) => void;
+export type CloseConfirm = () => void;

package/lib/Dialog/use-confirm.js

@@ -17,6 +17,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  // HACK: useReactive 无法存储 react-node，所以只能使用 useState
   const [title, setTitle] = (0, _react.useState)('');
   const [content, setContent] = (0, _react.useState)('');
   const state = (0, _ahooks.useReactive)({
@@ -99,6 +100,11 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
 function useConfirm() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const confirmRef = (0, _react.useRef)(null);
+
+  /**
+   * 打开一个弹窗
+   * @type {import('./types').OpenConfirm}
+   */
   const open = (0, _ahooks.useMemoizedFn)(function () {
     var _confirmRef$current;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -106,6 +112,10 @@ function useConfirm() {
     }
     (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
   });
+  /**
+   * 挂你不一个弹窗
+   * @type {import('./types').CloseConfirm}
+   */
   const close = (0, _ahooks.useMemoizedFn)(function () {
     var _confirmRef$current2;
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {

package/lib/SessionUser/libs/translation.js

@@ -7,7 +7,7 @@ exports.translations = void 0;
 /* eslint-disable import/prefer-default-export */
 const translations = exports.translations = {
   en: {
-    connectDIDWallet: 'Connect your DID Wallet for full functionality',
+    connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',
     profile: 'Profile',
     dashboard: 'Dashboard',
@@ -15,7 +15,7 @@ const translations = exports.translations = {
     addAnotherAccount: 'Add another account'
   },
   zh: {
-    connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
+    connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
     switch: '切换',
     profile: '个人中心',
     dashboard: '控制台',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.21",
+  "version": "2.9.22",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -348,12 +348,12 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "800e32d5197a96b1b0a7dcf08f0bf11132c301e9",
+  "gitHead": "c0d8c18928702f304f394df6f14a103136cb6efa",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.21",
-    "@arcblock/nft-display": "^2.9.21",
-    "@arcblock/react-hooks": "^2.9.21",
+    "@arcblock/icons": "^2.9.22",
+    "@arcblock/nft-display": "^2.9.22",
+    "@arcblock/react-hooks": "^2.9.22",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/DID/index.jsx

@@ -14,6 +14,7 @@ const DIDPropTypes = {
   copyable: PropTypes.bool,
   responsive: PropTypes.bool,
   showCopyButtonInTooltip: PropTypes.bool,
+  showAvatar: PropTypes.bool,
   inline: PropTypes.bool,
   append: PropTypes.any,
   compact: PropTypes.bool,
@@ -52,7 +53,7 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
 /**
  * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
  */
-const DID = forwardRef(({ did, ...rest }, ref) => {
+const DID = forwardRef(({ did, showAvatar, ...rest }, ref) => {
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
   const fontSize = getFontSize(rest.size);
@@ -63,14 +64,16 @@ const DID = forwardRef(({ did, ...rest }, ref) => {
     <span key="prefix-abt" className="did-address-text" style={{ fontSize }}>
       ABT:
     </span>,
-    <Avatar
-      key="avatar"
-      did={did}
-      size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
-      style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
-      blockiesPadding={false}
-      className="did-address-avatar"
-    />,
+    showAvatar && (
+      <Avatar
+        key="avatar"
+        did={did}
+        size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
+        style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
+        blockiesPadding={false}
+        className="did-address-avatar"
+      />
+    ),
   ];
 
   return (
@@ -90,6 +93,7 @@ DID.defaultProps = {
   copyable: true,
   responsive: true,
   showCopyButtonInTooltip: false,
+  showAvatar: true,
   inline: false,
   append: null,
   compact: false,

package/src/Dialog/confirm.jsx

@@ -47,6 +47,18 @@ export default function Confirm({
       PaperProps={PaperProps}
       {...rest}
       onClose={() => onCancel()}
+      slotProps={{
+        header: {
+          sx: {
+            '.ux-dialog_title': {
+              lineHeight: 1,
+            },
+          },
+        },
+        content: {
+          sx: { paddingTop: '0!important' },
+        },
+      }}
       actions={
         <>
           {showCancelButton && (

package/src/Dialog/dialog.jsx

@@ -7,6 +7,7 @@ import {
   DialogActions,
   IconButton,
   useMediaQuery,
+  Box,
 } from '@mui/material';
 
 import { styled, useTheme } from '../Theme';
@@ -43,7 +44,18 @@ import { styled, useTheme } from '../Theme';
  * @param {DialogProps} props
  * @return {React.ReactComponentElement<any, DialogProps>}
  */
-function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, actionsPosition, PaperProps, ...rest }) {
+function Dialog({
+  children,
+  title,
+  prepend,
+  toolbar,
+  actions,
+  showCloseButton,
+  actionsPosition,
+  PaperProps,
+  slotProps,
+  ...rest
+}) {
   const theme = useTheme();
   // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -65,7 +77,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
   );
 
   const closeButton = (
-    <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')} size="large">
+    <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')}>
       <CloseIcon />
     </IconButton>
   );
@@ -73,7 +85,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
   return (
     <StyledMuiDialog fullScreen={isMobile} onClose={handleOnClose} PaperProps={PaperProps} {...rest}>
       {showHeader && (
-        <Header className="ux-dialog_header" isMobile={isMobile}>
+        <Header {...slotProps.header} className="ux-dialog_header" isMobile={isMobile}>
           <div className="ux-dialog_left">
             {showCloseButton && isMobile && closeButton}
             {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
@@ -90,7 +102,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
           </div>
         </Header>
       )}
-      <MuiDialogContent>{children}</MuiDialogContent>
+      <MuiDialogContent {...slotProps.content}>{children}</MuiDialogContent>
       {actions && <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>}
     </StyledMuiDialog>
   );
@@ -107,6 +119,10 @@ Dialog.propTypes = {
   showCloseButton: PropTypes.bool,
   actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
   PaperProps: PropTypes.object,
+  slotProps: PropTypes.shape({
+    content: PropTypes.object,
+    header: PropTypes.object,
+  }),
 };
 
 Dialog.defaultProps = {
@@ -117,6 +133,7 @@ Dialog.defaultProps = {
   actions: null,
   actionsPosition: 'right',
   PaperProps: {},
+  slotProps: {},
 };
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -143,7 +160,7 @@ const StyledMuiDialog = styled(MuiDialog)`
 `;
 
 /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Header = styled('div', { shouldForwardProp: (prop) => prop !== 'isMobile' })`
+const Header = styled(Box, { shouldForwardProp: (prop) => prop !== 'isMobile' })`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -174,6 +191,11 @@ const Header = styled('div', { shouldForwardProp: (prop) => prop !== 'isMobile'
   .ux-dialog_closeButton {
     /* 使 closeButton 与 content 左/右对齐 */
     ${(props) => (props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;')}
+    transition: transform 0.3s;
+    transform: rotate(0deg);
+    &:hover {
+      transform: rotate(90deg);
+    }
   }
 `;
 

package/src/Dialog/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export type OpenConfirmProps = {
+  title: ReactNode;
+  content: ReactNode;
+  onConfirm: (close: () => void) => void;
+  onCancel: () => void;
+  showCancelButton: boolean;
+  confirmButtonText: string;
+  cancelButtonText: string;
+};
+
+export type OpenConfirm = (params: OpenConfirmProps) => void;
+export type CloseConfirm = () => void;

package/src/Dialog/use-confirm.jsx

@@ -6,6 +6,7 @@ import Confirm from './confirm';
 
 const ConfirmHolder = forwardRef((props, ref) => {
   // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  // HACK: useReactive 无法存储 react-node，所以只能使用 useState
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
   const state = useReactive({
@@ -96,9 +97,17 @@ const ConfirmHolder = forwardRef((props, ref) => {
 export default function useConfirm(props = {}) {
   const confirmRef = useRef(null);
 
+  /**
+   * 打开一个弹窗
+   * @type {import('./types').OpenConfirm}
+   */
   const open = useMemoizedFn((...args) => {
     confirmRef.current?.open(...args);
   });
+  /**
+   * 挂你不一个弹窗
+   * @type {import('./types').CloseConfirm}
+   */
   const close = useMemoizedFn((...args) => {
     confirmRef.current?.close(...args);
   });

package/src/SessionUser/libs/translation.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 export const translations = {
   en: {
-    connectDIDWallet: 'Connect your DID Wallet for full functionality',
+    connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',
     profile: 'Profile',
     dashboard: 'Dashboard',
@@ -9,7 +9,7 @@ export const translations = {
     addAnotherAccount: 'Add another account',
   },
   zh: {
-    connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
+    connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
     switch: '切换',
     profile: '个人中心',
     dashboard: '控制台',