@arcblock/ux 2.7.16 → 2.7.18

package/lib/SessionManager/index.js

@@ -8,9 +8,8 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
-var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ahooks = require("ahooks");
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Util = require("../Util");
@@ -22,9 +21,10 @@ var _manageAccounts = _interopRequireDefault(require("./manage-accounts"));
 var _manageBlocklet = _interopRequireDefault(require("./manage-blocklet"));
 var _translation = require("./translation");
 var _utils = require("./utils");
-var _useAccounts = _interopRequireDefault(require("./use-accounts"));
+var _useConfig = _interopRequireDefault(require("./use-config"));
+var _federated = require("../Util/federated");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size"];
+const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size", "showManageBlocklet"];
 /* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,13 +55,16 @@ function SessionManager(_ref) {
       menu,
       menuRender,
       dark,
-      size
+      size,
+      showManageBlocklet
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const latestSession = (0, _ahooks.useLatest)(session);
   const {
-    connectAccount
-  } = (0, _useAccounts.default)();
+    connectAccount,
+    config,
+    setConfig
+  } = (0, _useConfig.default)();
   const t = (0, _ahooks.useMemoizedFn)(function (key) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
@@ -80,8 +83,6 @@ function SessionManager(_ref) {
   const isFirstLoading = (0, _react.useMemo)(() => {
     return (session === null || session === void 0 ? void 0 : session.initialized) === false && (session === null || session === void 0 ? void 0 : session.loading) === true;
   }, [session === null || session === void 0 ? void 0 : session.initialized, session === null || session === void 0 ? void 0 : session.loading]);
-
-  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -94,7 +95,7 @@ function SessionManager(_ref) {
     hasBindWallet = true;
   }
   const _connectAccount = (0, _ahooks.useMemoizedFn)(async () => {
-    var _latestSession$curren, _window, _blocklet$settings, _blocklet$settings$fe;
+    var _latestSession$curren, _window;
     // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
     await (0, _Util.sleep)();
     if (!((_latestSession$curren = latestSession.current) !== null && _latestSession$curren !== void 0 && _latestSession$curren.user)) {
@@ -104,36 +105,17 @@ function SessionManager(_ref) {
       return;
     }
     const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
-    if (!blocklet) {
-      return;
+    const currentApp = (0, _federated.getCurrentApp)(blocklet);
+    const masterApp = (0, _federated.getFederatedApp)(blocklet);
+    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
+    if (targetApp) {
+      const loginAccount = _objectSpread({
+        did: latestSession.current.user.did,
+        avatar: latestSession.current.user.avatar,
+        provider: latestSession.current.provider
+      }, targetApp);
+      connectAccount(loginAccount);
     }
-    const currentApp = {
-      appId: blocklet.appId,
-      appPid: blocklet.appPid,
-      appName: blocklet.appName,
-      appDescription: blocklet.appDescription,
-      appLogo: blocklet.appLogo,
-      appUrl: blocklet.appUrl,
-      version: blocklet.version,
-      provider: 'wallet'
-    };
-    const federatedMaster = (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : (_blocklet$settings$fe = _blocklet$settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.master;
-    const masterApp = (0, _isEmpty.default)(federatedMaster) ? null : {
-      appId: federatedMaster.appId,
-      appName: federatedMaster.appName,
-      appDescription: federatedMaster.appDescription,
-      appLogo: federatedMaster.appLogo,
-      appPid: federatedMaster.appPid,
-      appUrl: federatedMaster.appUrl,
-      version: federatedMaster.version,
-      provider: 'federated'
-    };
-    const loginAccount = _objectSpread({
-      did: latestSession.current.user.did,
-      avatar: latestSession.current.user.avatar,
-      provider: latestSession.current.provider
-    }, latestSession.current.provider === 'federated' ? masterApp : currentApp);
-    connectAccount(loginAccount);
   });
 
   // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
@@ -255,7 +237,7 @@ function SessionManager(_ref) {
       user,
       provider
     } = session;
-    if (!isRawWalletAccount && provider !== 'federated') {
+    if (['auth0'].includes(provider)) {
       switchOAuthPassport(user);
     } else {
       close();
@@ -297,7 +279,7 @@ function SessionManager(_ref) {
           session: session,
           size: size,
           locale: locale,
-          onEditUser: () => {
+          onSwitchProfile: () => {
             close();
             _onSwitchProfile();
           },
@@ -315,22 +297,25 @@ function SessionManager(_ref) {
           onSwitchDid: onSwitchDid,
           connectAccount: _connectAccount,
           close: close,
-          hasBindAccount: hasBindAccount
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageBlocklet.default, {
+          hasBindAccount: hasBindAccount,
+          onLogout: _onLogout,
+          expanded: config.expandAccount,
+          onExpand: value => {
+            const cloneConfig = (0, _cloneDeep.default)(config);
+            cloneConfig.expandAccount = value;
+            setConfig(cloneConfig);
+          }
+        }), showManageBlocklet ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}, "divider"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageBlocklet.default, {
           menu: menu,
           menuRender: menuRender,
-          locale: locale
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onLogout,
-          disabled: disableLogout,
-          "aria-label": "Logout account",
-          "data-cy": "sessionManager-logout-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _Disconnect.default,
-            className: "session-manager-menu-icon"
-          }), t('disconnect')]
-        })]
+          locale: locale,
+          expanded: config.expandBlocklet,
+          onExpand: value => {
+            const cloneConfig = (0, _cloneDeep.default)(config);
+            cloneConfig.expandBlocklet = value;
+            setConfig(cloneConfig);
+          }
+        }, "manageBlocklet")] : null]
       })
     })]
   });
@@ -338,7 +323,7 @@ function SessionManager(_ref) {
 SessionManager.propTypes = {
   session: _propTypes.default.shape({
     federatedMaster: _propTypes.default.object,
-    provider: _propTypes.default.oneOf(['wallet', 'federated', 'auth0', '']),
+    provider: _propTypes.default.oneOf(['wallet', 'auth0', '']),
     user: _propTypes.default.shape({
       did: _propTypes.default.string.isRequired,
       role: _propTypes.default.string.isRequired,
@@ -382,7 +367,8 @@ SessionManager.propTypes = {
   menu: _propTypes.default.array,
   menuRender: _propTypes.default.func,
   dark: _propTypes.default.bool,
-  size: _propTypes.default.number
+  size: _propTypes.default.number,
+  showManageBlocklet: _propTypes.default.bool
 };
 SessionManager.defaultProps = {
   locale: 'en',
@@ -401,7 +387,8 @@ SessionManager.defaultProps = {
   onSwitchPassport: _noop.default,
   onBindWallet: _noop.default,
   dark: false,
-  size: 24
+  size: 24,
+  showManageBlocklet: true
 };
 var _default = SessionManager;
 exports.default = _default;

package/lib/SessionManager/manage-accounts.js

@@ -9,6 +9,7 @@ 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 _accountItem = _interopRequireDefault(require("./account-item"));
 var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
 var _translation = require("./translation");
@@ -16,7 +17,7 @@ var _util = require("../Locale/util");
 var _confirm = require("../Dialog/confirm");
 var _utils = require("./utils");
 var _addAccountItem = _interopRequireDefault(require("./add-account-item"));
-var _useAccounts = _interopRequireDefault(require("./use-accounts"));
+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; }
@@ -32,7 +33,11 @@ function ManageAccounts(_ref) {
     onSwitchDid,
     connectAccount,
     close,
-    hasBindAccount
+    hasBindAccount,
+    disableLogout,
+    onLogout,
+    expanded,
+    onExpand
   } = _ref;
   const {
     bindOAuth,
@@ -47,9 +52,9 @@ function ManageAccounts(_ref) {
     confirmHolder
   } = (0, _confirm.useConfirm)();
   const {
-    accounts,
-    setAccounts
-  } = (0, _useAccounts.default)();
+    deleteAccount,
+    config
+  } = (0, _useConfig.default)();
   const update = (0, _ahooks.useUpdate)();
   const onChoose = (0, _ahooks.useMemoizedFn)((account, _ref2) => {
     let {
@@ -64,7 +69,7 @@ function ManageAccounts(_ref) {
       onSwitchDid(...arguments);
     }, {
       provider: account.provider,
-      providerMode: 'paramsFirst'
+      sourceAppPid: account.sourceAppPid
     });
   });
   const oauthConfigList = Object.entries(oauthConfigs).map(_ref3 => {
@@ -87,11 +92,7 @@ function ManageAccounts(_ref) {
       confirmButtonText: t('confirm'),
       cancelButtonText: t('cancel'),
       onConfirm(done) {
-        const findIndex = accounts.findIndex(item => item.did === account.did);
-        if (findIndex >= 0) {
-          accounts.splice(findIndex, 1);
-        }
-        setAccounts(accounts);
+        deleteAccount(account);
         update();
         done();
       }
@@ -104,8 +105,8 @@ function ManageAccounts(_ref) {
       update();
       onSwitchDid(...arguments);
     }, {
-      provider: app.provider,
-      providerMode: 'paramsFirst'
+      sourceAppPid: app.sourceAppPid,
+      provider: app.provider
     });
   });
   function _onBindWallet() {
@@ -119,6 +120,8 @@ function ManageAccounts(_ref) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_menuAccordion.default, {
+      expanded: expanded,
+      onChange: onExpand,
       locale: locale,
       title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
@@ -127,9 +130,9 @@ function ManageAccounts(_ref) {
             width: 24,
             height: 24
           }
-        }), t('manageAccounts')]
+        }), t('accounts')]
       }),
-      children: [accounts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountItem.default, {
+      children: [config.accounts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountItem.default, {
         account: item,
         locale: locale,
         active: session.user.did === item.did,
@@ -138,7 +141,7 @@ function ManageAccounts(_ref) {
       }, item.did)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_addAccountItem.default, {
         locale: locale,
         onAdd: onAdd
-      }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      }), oauthConfigList.length > 0 && !hasBindAccount && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
         className: "session-manager-menu-item",
         onClick: _onBindWallet,
         "aria-label": !isRawWalletAccount ? "".concat(t('bind'), "DID Wallet") : "".concat(t('bind')).concat(t('thirdParty')),
@@ -149,6 +152,16 @@ function ManageAccounts(_ref) {
           height: 24,
           className: "session-manager-menu-icon"
         }), !isRawWalletAccount ? "".concat(t('bind'), "DID Wallet") : "".concat(t('bind')).concat(t('thirdParty'))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        className: "session-manager-menu-item",
+        onClick: onLogout,
+        disabled: disableLogout,
+        "aria-label": "Logout account",
+        "data-cy": "sessionManager-logout-trigger",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          component: _Disconnect.default,
+          className: "session-manager-menu-icon"
+        }), t('disconnect')]
       })]
     }), confirmHolder]
   });

package/lib/SessionManager/manage-blocklet.js

@@ -27,21 +27,25 @@ function ManageBlocklet(_ref) {
   let {
     menu,
     menuRender,
-    locale
+    locale,
+    expanded,
+    onExpand
   } = _ref;
   const t = (0, _ahooks.useMemoizedFn)(function (key) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_menuAccordion.default, {
+    expanded: expanded,
     locale: locale,
+    onChange: onExpand,
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
         icon: _apps.default,
         width: 24,
         height: 24,
         className: "session-manager-menu-icon"
-      }), t('manageBlocklet')]
+      }), t('blocklet')]
     }),
     children: [Array.isArray(menu) && menu.map((menuItem, index) => {
       const {
@@ -70,9 +74,13 @@ function ManageBlocklet(_ref) {
 ManageBlocklet.propTypes = {
   menu: _propTypes.default.array,
   menuRender: _propTypes.default.func,
-  locale: _propTypes.default.string.isRequired
+  locale: _propTypes.default.string.isRequired,
+  expanded: _propTypes.default.bool,
+  onExpand: _propTypes.default.func
 };
 ManageBlocklet.defaultProps = {
   menu: [],
-  menuRender: () => {}
+  menuRender: () => {},
+  expanded: true,
+  onExpand: () => {}
 };

package/lib/SessionManager/menu-accordion.js

@@ -31,7 +31,9 @@ function MenuAccordion(_ref) {
   let {
     title,
     children,
-    locale
+    locale,
+    expanded,
+    onChange: _onChange
   } = _ref;
   const isEmptyChildren = (0, _ahooks.useCreation)(() => isEmptyNode(children), [children]);
   const t = (0, _ahooks.useMemoizedFn)(function (key) {
@@ -39,9 +41,12 @@ function MenuAccordion(_ref) {
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
-    defaultExpanded: true,
+    expanded: expanded,
     disableGutters: true,
     elevation: 0,
+    onChange: (e, value) => {
+      _onChange(value);
+    },
     sx: {
       '&.MuiAccordion-root:before': {
         content: 'unset'
@@ -58,7 +63,7 @@ function MenuAccordion(_ref) {
         paddingLeft: '30px',
         '.session-manager-menu-item': {
           fontSize: '15px',
-          padding: '12px 20px',
+          padding: '12px 15px',
           whiteSpace: 'normal'
         },
         '.session-manager-menu-icon': {
@@ -96,8 +101,12 @@ function MenuAccordion(_ref) {
 MenuAccordion.propTypes = {
   title: _propTypes.default.any.isRequired,
   children: _propTypes.default.any.isRequired,
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+  expanded: _propTypes.default.bool,
+  onChange: _propTypes.default.func
 };
 MenuAccordion.defaultProps = {
-  locale: 'en'
+  locale: 'en',
+  expanded: true,
+  onChange: () => {}
 };

package/lib/SessionManager/translation.js

@@ -7,7 +7,7 @@ exports.translations = void 0;
 /* eslint-disable import/prefer-default-export */
 const translations = {
   en: {
-    edit: 'Edit',
+    switch: 'Switch',
     account: 'account',
     switchDid: 'Switch DID',
     switchTo: 'Switch to',
@@ -19,9 +19,9 @@ const translations = {
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
     thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with',
-    manageAccounts: 'Manage Accounts',
-    manageBlocklet: 'Manage Blocklet',
+    addAppAccount: 'Add {appName} account',
+    accounts: 'Accounts',
+    blocklet: 'Blocklet',
     from: 'From',
     addAnotherAccount: 'Add another account',
     deleteAccountTitle: 'Remove this account ?',
@@ -31,24 +31,24 @@ const translations = {
     noneMenu: 'Empty menu, maybe you should switch to another role'
   },
   zh: {
-    edit: '编辑',
+    switch: '切换',
     account: '账号',
     switchDid: '切换账户',
     switchTo: '切换至',
     switchProfile: '切换用户信息',
     switchPassport: '切换通行证',
-    disconnect: '退出',
+    disconnect: '退出登录',
     connect: '登录',
     openInWallet: '打开 DID 钱包',
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
     thirdParty: '第三方登录',
-    connectedWith: '连接至',
-    manageAccounts: '管理账户',
-    manageBlocklet: '管理应用',
+    addAppAccount: '添加 {appName} 账户',
+    accounts: '账户',
+    blocklet: '应用',
     from: '连接至',
-    addAnotherAccount: '添加一个账号',
+    addAnotherAccount: '添加账号',
     deleteAccountTitle: '是否删除账户？',
     deleteAccountContent: '账户删除后，可再次添加',
     confirm: '确认',

package/lib/SessionManager/use-config.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useConfig;
+var _ahooks = require("ahooks");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useConfig() {
+  const [config, setConfig] = (0, _ahooks.useLocalStorageState)('blocklet:sessionManager:config', {
+    defaultValue: {
+      accounts: [],
+      expandAccount: true,
+      expandBlocklet: true
+    }
+  });
+  const connectAccount = (0, _ahooks.useMemoizedFn)(account => {
+    const cloneConfig = (0, _cloneDeep.default)(config);
+    const accountIndex = cloneConfig.accounts.findIndex(x => x.did === account.did);
+    if (accountIndex >= 0) {
+      cloneConfig.accounts.splice(accountIndex, 1);
+    }
+    cloneConfig.accounts.unshift(account);
+    setConfig(cloneConfig);
+  });
+  const deleteAccount = (0, _ahooks.useMemoizedFn)(account => {
+    const cloneConfig = (0, _cloneDeep.default)(config);
+    const findIndex = cloneConfig.accounts.findIndex(item => item.did === account.did);
+    if (findIndex >= 0) {
+      cloneConfig.accounts.splice(findIndex, 1);
+    }
+    setConfig(cloneConfig);
+  });
+  return {
+    config,
+    setConfig,
+    connectAccount,
+    deleteAccount
+  };
+}

package/lib/SessionManager/user-info.js

@@ -15,6 +15,7 @@ var _DID = _interopRequireDefault(require("../DID"));
 var _Util = require("../Util");
 var _util = require("../Locale/util");
 var _translation = require("./translation");
+var _Typography = _interopRequireDefault(require("../Typography"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable react/jsx-no-bind */
@@ -25,7 +26,7 @@ function UserInfo(_ref) {
   let {
     session,
     locale,
-    onEditUser,
+    onSwitchProfile,
     onSwitchPassport,
     switchProfile,
     hasBindWallet
@@ -49,27 +50,27 @@ function UserInfo(_ref) {
     return ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) || 'lancelot_lewis@163.com';
   }, [session === null || session === void 0 ? void 0 : session.user]);
   const canEdit = (0, _ahooks.useCreation)(() => {
-    if (onEditUser instanceof Function) {
-      if (switchProfile && hasBindWallet && session.provider !== 'federated') {
+    if (onSwitchProfile instanceof Function) {
+      if (switchProfile && hasBindWallet) {
         return true;
       }
     }
     return false;
-  }, [onEditUser, switchProfile, hasBindWallet, session.provider]);
-  const _onEditUser = (0, _ahooks.useMemoizedFn)(() => {
+  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
+  const _onSwitchProfile = (0, _ahooks.useMemoizedFn)(() => {
     if (canEdit) {
-      onEditUser();
+      onSwitchProfile();
     }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       display: 'flex',
       alignItems: 'center',
-      gap: '16px',
-      padding: '15px 20px'
+      gap: '12px',
+      padding: '15px'
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      onClick: _onEditUser,
+      onClick: _onSwitchProfile,
       "data-cy": "sessionManager-switch-profile-trigger",
       sx: {
         cursor: canEdit ? 'pointer' : 'default',
@@ -79,7 +80,7 @@ function UserInfo(_ref) {
         fontSize: 0,
         '&:hover': canEdit ? {
           '&::after': {
-            content: "\"".concat(t('edit'), "\""),
+            content: "\"".concat(t('switch'), "\""),
             position: 'absolute',
             bottom: 0,
             background: 'rgba(0, 0, 0, 0.2)',
@@ -107,11 +108,44 @@ function UserInfo(_ref) {
         overflow: 'hidden',
         fontSize: '14px'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: "h5",
-        fontWeight: "bold",
-        mb: 1,
-        children: session.user.fullName
+      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",
+          fontSize: "auto",
+          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"
+        })]
       }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
         responsive: false,
         compact: true,
@@ -123,33 +157,7 @@ function UserInfo(_ref) {
       }), userEmail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
         responsive: false,
         children: userEmail
-      }) : null, /*#__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,
-          position: 'absolute',
-          top: 20,
-          right: 15,
-          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"
-      })]
+      }) : null]
     })]
   });
 }

package/lib/SessionManager/user-popper.js

@@ -92,14 +92,9 @@ UserPopper.defaultProps = {
   onClose: () => {},
   autoClose: true
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 320px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-menu-item {\n    padding: 18px 20px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 8px;\n  }\n"])), _ref2 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 320px;\n  }\n  .session-manager-menu-item {\n    padding: 15px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 8px;\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;
   return theme.zIndex.tooltip;
-}, _ref3 => {
-  let {
-    $dark
-  } = _ref3;
-  return $dark ? '#aaa' : '#222';
 });