@arcblock/ux 2.7.20 → 2.7.22

package/es/SessionManager/index.js

@@ -48,7 +48,8 @@ function SessionManager({
   const {
     connectAccount,
     config,
-    setConfig
+    setConfig,
+    deleteAccount
   } = useConfig();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -286,7 +287,9 @@ function SessionManager({
             const cloneConfig = cloneDeep(config);
             cloneConfig.expandAccount = value;
             setConfig(cloneConfig);
-          }
+          },
+          deleteAccount: deleteAccount,
+          accounts: config.accounts
         }), showManageBlocklet ? [/*#__PURE__*/_jsx(Divider, {}, "divider"), /*#__PURE__*/_jsx(ManageBlocklet, {
           menu: menu,
           menuRender: menuRender,

package/es/SessionManager/manage-accounts.js

@@ -1,11 +1,12 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
+import PropTypes from 'prop-types';
 import { useMemoizedFn, useUpdate } from 'ahooks';
 import { MenuItem, SvgIcon } from '@mui/material';
 import { Icon } from '@iconify/react';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import LinkIcon from '@iconify-icons/mdi/link';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
+import noop from 'lodash/noop';
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
 import { translations } from './translation';
@@ -13,7 +14,6 @@ import { translate } from '../Locale/util';
 import { useConfirm } from '../Dialog/confirm';
 import { getSourceProvider } from './utils';
 import AddAccountItem from './add-account-item';
-import useConfig from './use-config';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,9 @@ export default function ManageAccounts({
   disableLogout,
   onLogout,
   expanded,
-  onExpand
+  onExpand,
+  accounts,
+  deleteAccount
 }) {
   const {
     bindOAuth,
@@ -41,10 +43,6 @@ export default function ManageAccounts({
     confirmApi,
     confirmHolder
   } = useConfirm();
-  const {
-    deleteAccount,
-    config
-  } = useConfig();
   const update = useUpdate();
   const onChoose = useMemoizedFn((account, {
     active
@@ -137,7 +135,7 @@ export default function ManageAccounts({
           }
         }), t('accounts')]
       }),
-      children: [config.accounts.map(item => /*#__PURE__*/_jsx(AccountItem, {
+      children: [accounts.map(item => /*#__PURE__*/_jsx(AccountItem, {
         account: item,
         locale: locale,
         active: session.user.did === item.did,
@@ -170,4 +168,26 @@ export default function ManageAccounts({
       })]
     }), confirmHolder]
   });
-}
+}
+ManageAccounts.propTypes = {
+  session: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  onBindWallet: PropTypes.func.isRequired,
+  onSwitchDid: PropTypes.func.isRequired,
+  connectAccount: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  hasBindAccount: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogout: PropTypes.func.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func,
+  accounts: PropTypes.array.isRequired,
+  deleteAccount: PropTypes.func.isRequired
+};
+ManageAccounts.defaultProps = {
+  locale: 'en',
+  hasBindAccount: false,
+  disableLogout: false,
+  expanded: true,
+  onExpand: noop
+};

package/es/SessionManager/translation.js

@@ -19,7 +19,7 @@ export const translations = {
     from: 'From',
     addAnotherAccount: 'Add another account',
     deleteAccountTitle: 'Remove this account ?',
-    deleteAccountContent: 'After delete account, you can add it agian',
+    deleteAccountContent: 'After delete account, you can add it again',
     confirm: 'Confirm',
     cancel: 'Cancel',
     noneMenu: 'Empty menu, maybe you should switch to another role'

package/es/SessionManager/user-info.js

@@ -32,7 +32,7 @@ export default function UserInfo({
     session
   });
   const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
-  const userEmail = useCreation(() => session.user?.email || 'lancelot_lewis@163.com', [session?.user]);
+  const userEmail = useCreation(() => session.user?.email, [session?.user]);
   const canEdit = useCreation(() => {
     if (onSwitchProfile instanceof Function) {
       if (switchProfile && hasBindWallet) {
@@ -92,43 +92,38 @@ export default function UserInfo({
         overflow: 'hidden',
         fontSize: '14px'
       },
-      children: [/*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        mb: 0.5,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h5",
-          fontWeight: "bold",
-          sx: {
-            flex: 1,
-            wordBreak: 'break-all'
-          },
-          children: session.user.fullName
-        }), /*#__PURE__*/_jsx(Chip, {
-          label: currentRole?.title || session.user?.role.toUpperCase(),
-          size: "small",
-          variant: "outlined",
-          sx: {
-            height: 'auto',
-            marginRight: 0,
-            fontWeight: 'bold',
-            fontSize: '12px'
-          },
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: ShieldCheckIcon,
-            height: "0.8em"
-          }),
-          deleteIcon: /*#__PURE__*/_jsx(Icon, {
-            icon: ExpandMoreIcon,
-            height: "1em"
-          })
-          // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-          ,
-          onDelete: onSwitchPassport,
-          onClick: onSwitchPassport,
-          "data-cy": "sessionManager-switch-passport-trigger"
-        })]
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        fontWeight: "bold",
+        sx: {
+          wordBreak: 'break-all',
+          lineHeight: 1
+        },
+        children: session.user.fullName
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: currentRole?.title || session.user?.role.toUpperCase(),
+        size: "small",
+        variant: "outlined",
+        sx: {
+          height: 'auto',
+          marginRight: 0,
+          fontWeight: 'bold',
+          fontSize: '12px',
+          margin: '6px 0 4px 0'
+        },
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: ShieldCheckIcon,
+          height: "0.8em"
+        }),
+        deleteIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: ExpandMoreIcon,
+          height: "1em"
+        })
+        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+        ,
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
       }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/_jsx(DID, {
         responsive: false,
         compact: true,

package/es/Util/index.js

@@ -130,7 +130,7 @@ export function setDateTool(tool) {
 export function getDateTool() {
   return dateTool;
 }
-const createDateFormater = format => (date, {
+const createDateFormatter = format => (date, {
   locale,
   tz
 }) => {
@@ -157,13 +157,13 @@ const createDateFormater = format => (date, {
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 export function formatToDate(date, {
   locale,
   tz
 } = {}) {
-  return createDateFormater('ll')(date, {
+  return createDateFormatter('ll')(date, {
     locale,
     tz
   });
@@ -176,13 +176,13 @@ export function formatToDate(date, {
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 export function formatToDatetime(date, {
   locale,
   tz
 } = {}) {
-  return createDateFormater('lll')(date, {
+  return createDateFormatter('lll')(date, {
     locale,
     tz
   });

package/lib/SessionManager/index.js

@@ -63,7 +63,8 @@ function SessionManager(_ref) {
   const {
     connectAccount,
     config,
-    setConfig
+    setConfig,
+    deleteAccount
   } = (0, _useConfig.default)();
   const t = (0, _ahooks.useMemoizedFn)(function (key) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -305,7 +306,9 @@ function SessionManager(_ref) {
             const cloneConfig = (0, _cloneDeep.default)(config);
             cloneConfig.expandAccount = value;
             setConfig(cloneConfig);
-          }
+          },
+          deleteAccount: deleteAccount,
+          accounts: config.accounts
         }), showManageBlocklet ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}, "divider"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageBlocklet.default, {
           menu: menu,
           menuRender: menuRender,

package/lib/SessionManager/manage-accounts.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ManageAccounts;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ahooks = require("ahooks");
 var _material = require("@mui/material");
 var _react = require("@iconify/react");
 var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
 var _link = _interopRequireDefault(require("@iconify-icons/mdi/link"));
 var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _accountItem = _interopRequireDefault(require("./account-item"));
 var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
 var _translation = require("./translation");
@@ -17,14 +19,13 @@ var _util = require("../Locale/util");
 var _confirm = require("../Dialog/confirm");
 var _utils = require("./utils");
 var _addAccountItem = _interopRequireDefault(require("./add-account-item"));
-var _useConfig = _interopRequireDefault(require("./use-config"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable react/prop-types */ /* eslint-disable react/jsx-no-bind */
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable react/jsx-no-bind */
 function ManageAccounts(_ref) {
   let {
     session,
@@ -37,7 +38,9 @@ function ManageAccounts(_ref) {
     disableLogout,
     onLogout,
     expanded,
-    onExpand
+    onExpand,
+    accounts,
+    deleteAccount
   } = _ref;
   const {
     bindOAuth,
@@ -51,10 +54,6 @@ function ManageAccounts(_ref) {
     confirmApi,
     confirmHolder
   } = (0, _confirm.useConfirm)();
-  const {
-    deleteAccount,
-    config
-  } = (0, _useConfig.default)();
   const update = (0, _ahooks.useUpdate)();
   const onChoose = (0, _ahooks.useMemoizedFn)((account, _ref2) => {
     let {
@@ -149,7 +148,7 @@ function ManageAccounts(_ref) {
           }
         }), t('accounts')]
       }),
-      children: [config.accounts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountItem.default, {
+      children: [accounts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountItem.default, {
         account: item,
         locale: locale,
         active: session.user.did === item.did,
@@ -182,4 +181,26 @@ function ManageAccounts(_ref) {
       })]
     }), confirmHolder]
   });
-}
+}
+ManageAccounts.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  locale: _propTypes.default.string,
+  onBindWallet: _propTypes.default.func.isRequired,
+  onSwitchDid: _propTypes.default.func.isRequired,
+  connectAccount: _propTypes.default.func.isRequired,
+  close: _propTypes.default.func.isRequired,
+  hasBindAccount: _propTypes.default.bool,
+  disableLogout: _propTypes.default.bool,
+  onLogout: _propTypes.default.func.isRequired,
+  expanded: _propTypes.default.bool,
+  onExpand: _propTypes.default.func,
+  accounts: _propTypes.default.array.isRequired,
+  deleteAccount: _propTypes.default.func.isRequired
+};
+ManageAccounts.defaultProps = {
+  locale: 'en',
+  hasBindAccount: false,
+  disableLogout: false,
+  expanded: true,
+  onExpand: _noop.default
+};

package/lib/SessionManager/translation.js

@@ -25,7 +25,7 @@ const translations = {
     from: 'From',
     addAnotherAccount: 'Add another account',
     deleteAccountTitle: 'Remove this account ?',
-    deleteAccountContent: 'After delete account, you can add it agian',
+    deleteAccountContent: 'After delete account, you can add it again',
     confirm: 'Confirm',
     cancel: 'Cancel',
     noneMenu: 'Empty menu, maybe you should switch to another role'

package/lib/SessionManager/user-info.js

@@ -47,7 +47,7 @@ function UserInfo(_ref) {
   }, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
   const userEmail = (0, _ahooks.useCreation)(() => {
     var _session$user5;
-    return ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) || 'lancelot_lewis@163.com';
+    return (_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email;
   }, [session === null || session === void 0 ? void 0 : session.user]);
   const canEdit = (0, _ahooks.useCreation)(() => {
     if (onSwitchProfile instanceof Function) {
@@ -108,43 +108,38 @@ function UserInfo(_ref) {
         overflow: 'hidden',
         fontSize: '14px'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        mb: 0.5,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          variant: "h5",
-          fontWeight: "bold",
-          sx: {
-            flex: 1,
-            wordBreak: 'break-all'
-          },
-          children: session.user.fullName
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-          label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user6 = session.user) === null || _session$user6 === void 0 ? void 0 : _session$user6.role.toUpperCase()),
-          size: "small",
-          variant: "outlined",
-          sx: {
-            height: 'auto',
-            marginRight: 0,
-            fontWeight: 'bold',
-            fontSize: '12px'
-          },
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-            icon: _shieldCheck.default,
-            height: "0.8em"
-          }),
-          deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-            icon: _expandMore.default,
-            height: "1em"
-          })
-          // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-          ,
-          onDelete: onSwitchPassport,
-          onClick: onSwitchPassport,
-          "data-cy": "sessionManager-switch-passport-trigger"
-        })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "h5",
+        fontWeight: "bold",
+        sx: {
+          wordBreak: 'break-all',
+          lineHeight: 1
+        },
+        children: session.user.fullName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user6 = session.user) === null || _session$user6 === void 0 ? void 0 : _session$user6.role.toUpperCase()),
+        size: "small",
+        variant: "outlined",
+        sx: {
+          height: 'auto',
+          marginRight: 0,
+          fontWeight: 'bold',
+          fontSize: '12px',
+          margin: '6px 0 4px 0'
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _shieldCheck.default,
+          height: "0.8em"
+        }),
+        deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _expandMore.default,
+          height: "1em"
+        })
+        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+        ,
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
       }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
         responsive: false,
         compact: true,

package/lib/Util/index.js

@@ -164,7 +164,7 @@ function setDateTool(tool) {
 function getDateTool() {
   return dateTool;
 }
-const createDateFormater = format => (date, _ref2) => {
+const createDateFormatter = format => (date, _ref2) => {
   let {
     locale,
     tz
@@ -192,14 +192,14 @@ const createDateFormater = format => (date, _ref2) => {
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 function formatToDate(date) {
   let {
     locale,
     tz
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return createDateFormater('ll')(date, {
+  return createDateFormatter('ll')(date, {
     locale,
     tz
   });
@@ -212,14 +212,14 @@ function formatToDate(date) {
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 function formatToDatetime(date) {
   let {
     locale,
     tz
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return createDateFormater('lll')(date, {
+  return createDateFormatter('lll')(date, {
     locale,
     tz
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.20",
+  "version": "2.7.22",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -322,11 +322,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "59c5b3d8110ed96d045b6ffdb70ab84910d37422",
+  "gitHead": "09ea2ed5bc7fdbe617078b82f6c940d0e6507500",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.20",
-    "@arcblock/react-hooks": "^2.7.20",
+    "@arcblock/icons": "^2.7.22",
+    "@arcblock/react-hooks": "^2.7.22",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/index.jsx

@@ -44,7 +44,7 @@ function SessionManager({
   ...rest
 }) {
   const latestSession = useLatest(session);
-  const { connectAccount, config, setConfig } = useConfig();
+  const { connectAccount, config, setConfig, deleteAccount } = useConfig();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -260,6 +260,8 @@ function SessionManager({
               cloneConfig.expandAccount = value;
               setConfig(cloneConfig);
             }}
+            deleteAccount={deleteAccount}
+            accounts={config.accounts}
           />
 
           {/* 为了避免控制台出现警告，采用数组的方式 */}

package/src/SessionManager/manage-accounts.jsx

@@ -1,11 +1,12 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
+import PropTypes from 'prop-types';
 import { useMemoizedFn, useUpdate } from 'ahooks';
 import { MenuItem, SvgIcon } from '@mui/material';
 import { Icon } from '@iconify/react';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import LinkIcon from '@iconify-icons/mdi/link';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
+import noop from 'lodash/noop';
 
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
@@ -14,7 +15,6 @@ import { translate } from '../Locale/util';
 import { useConfirm } from '../Dialog/confirm';
 import { getSourceProvider } from './utils';
 import AddAccountItem from './add-account-item';
-import useConfig from './use-config';
 
 export default function ManageAccounts({
   session,
@@ -28,6 +28,8 @@ export default function ManageAccounts({
   onLogout,
   expanded,
   onExpand,
+  accounts,
+  deleteAccount,
 }) {
   const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
   const t = useMemoizedFn((key, data = {}) => {
@@ -35,7 +37,6 @@ export default function ManageAccounts({
   });
 
   const { confirmApi, confirmHolder } = useConfirm();
-  const { deleteAccount, config } = useConfig();
   const update = useUpdate();
 
   const onChoose = useMemoizedFn((account, { active }) => {
@@ -133,7 +134,7 @@ export default function ManageAccounts({
             {t('accounts')}
           </>
         }>
-        {config.accounts.map((item) => (
+        {accounts.map((item) => (
           <AccountItem
             key={item.did}
             account={item}
@@ -170,3 +171,27 @@ export default function ManageAccounts({
     </>
   );
 }
+
+ManageAccounts.propTypes = {
+  session: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  onBindWallet: PropTypes.func.isRequired,
+  onSwitchDid: PropTypes.func.isRequired,
+  connectAccount: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  hasBindAccount: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogout: PropTypes.func.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func,
+  accounts: PropTypes.array.isRequired,
+  deleteAccount: PropTypes.func.isRequired,
+};
+
+ManageAccounts.defaultProps = {
+  locale: 'en',
+  hasBindAccount: false,
+  disableLogout: false,
+  expanded: true,
+  onExpand: noop,
+};

package/src/SessionManager/translation.js

@@ -19,7 +19,7 @@ export const translations = {
     from: 'From',
     addAnotherAccount: 'Add another account',
     deleteAccountTitle: 'Remove this account ?',
-    deleteAccountContent: 'After delete account, you can add it agian',
+    deleteAccountContent: 'After delete account, you can add it again',
     confirm: 'Confirm',
     cancel: 'Cancel',
     noneMenu: 'Empty menu, maybe you should switch to another role',

package/src/SessionManager/user-info.jsx

@@ -24,7 +24,7 @@ export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPas
     () => session.user?.passports?.find((item) => item.name === session.user.role),
     [session?.user?.passports, session?.user?.role]
   );
-  const userEmail = useCreation(() => session.user?.email || 'lancelot_lewis@163.com', [session?.user]);
+  const userEmail = useCreation(() => session.user?.email, [session?.user]);
 
   const canEdit = useCreation(() => {
     if (onSwitchProfile instanceof Function) {
@@ -79,28 +79,27 @@ export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPas
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={64} shape="circle" />
       </Box>
       <Box sx={{ flex: 1, position: 'static', overflow: 'hidden', fontSize: '14px' }}>
-        <Box display="flex" alignItems="center" gap="4px" mb={0.5}>
-          <Typography variant="h5" fontWeight="bold" sx={{ flex: 1, wordBreak: 'break-all' }}>
-            {session.user.fullName}
-          </Typography>
-          <Chip
-            label={currentRole?.title || session.user?.role.toUpperCase()}
-            size="small"
-            variant="outlined"
-            sx={{
-              height: 'auto',
-              marginRight: 0,
-              fontWeight: 'bold',
-              fontSize: '12px',
-            }}
-            icon={<Icon icon={ShieldCheckIcon} height="0.8em" />}
-            deleteIcon={<Icon icon={ExpandMoreIcon} height="1em" />}
-            // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-            onDelete={onSwitchPassport}
-            onClick={onSwitchPassport}
-            data-cy="sessionManager-switch-passport-trigger"
-          />
-        </Box>
+        <Typography variant="h5" fontWeight="bold" sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
+          {session.user.fullName}
+        </Typography>
+        <Chip
+          label={currentRole?.title || session.user?.role.toUpperCase()}
+          size="small"
+          variant="outlined"
+          sx={{
+            height: 'auto',
+            marginRight: 0,
+            fontWeight: 'bold',
+            fontSize: '12px',
+            margin: '6px 0 4px 0',
+          }}
+          icon={<Icon icon={ShieldCheckIcon} height="0.8em" />}
+          deleteIcon={<Icon icon={ExpandMoreIcon} height="1em" />}
+          // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+          onDelete={onSwitchPassport}
+          onClick={onSwitchPassport}
+          data-cy="sessionManager-switch-passport-trigger"
+        />
         {/* eslint-disable-next-line no-nested-ternary */}
         {session.provider === 'auth0' ? (
           walletDid ? (

package/src/Util/index.js

@@ -161,7 +161,7 @@ export function getDateTool() {
   return dateTool;
 }
 
-const createDateFormater =
+const createDateFormatter =
   (format) =>
   (date, { locale, tz }) => {
     if (dateTool === null) {
@@ -192,10 +192,10 @@ const createDateFormater =
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 export function formatToDate(date, { locale, tz } = {}) {
-  return createDateFormater('ll')(date, { locale, tz });
+  return createDateFormatter('ll')(date, { locale, tz });
 }
 
 /**
@@ -205,10 +205,10 @@ export function formatToDate(date, { locale, tz } = {}) {
  * @param {object} option
  * @param {string} option.locale, default: en
  * @param {string} option.tz, default: timzone
- * @returns formated date string
+ * @returns formatted date string
  */
 export function formatToDatetime(date, { locale, tz } = {}) {
-  return createDateFormater('lll')(date, { locale, tz });
+  return createDateFormatter('lll')(date, { locale, tz });
 }
 
 export function detectWalletExtension() {