@arcblock/ux 2.7.15 → 2.7.16

package/lib/SessionManager/add-account-item.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddAccountItem;
+var _react = require("@iconify/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _iosAddCircleOutline = _interopRequireDefault(require("@iconify-icons/ion/ios-add-circle-outline"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _ahooks = require("ahooks");
+var _react2 = require("react");
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AddAccountItem(_ref) {
+  let {
+    onAdd,
+    locale
+  } = _ref;
+  const addRef = (0, _react2.useRef)(null);
+  const state = (0, _ahooks.useReactive)({
+    open: false
+  });
+  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);
+  });
+  const apps = (0, _ahooks.useCreation)(() => {
+    var _window, _blocklet$settings, _blocklet$settings$fe;
+    const appList = [];
+    if (typeof window === 'undefined') {
+      return appList;
+    }
+    const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
+    if (!blocklet) {
+      return appList;
+    }
+    const currentApp = {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      provider: 'wallet'
+    };
+    appList.push(currentApp);
+    const isFederatedMember = !(0, _isEmpty.default)((_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);
+    if (isFederatedMember) {
+      const federatedMaster = blocklet.settings.federated.master;
+      const masterApp = {
+        appId: federatedMaster.appId,
+        appName: federatedMaster.appName,
+        appDescription: federatedMaster.appDescription,
+        appLogo: federatedMaster.appLogo,
+        appPid: federatedMaster.appPid,
+        appUrl: federatedMaster.appUrl,
+        version: federatedMaster.version,
+        provider: 'federated'
+      };
+      return [masterApp, currentApp];
+    }
+    return appList;
+  }, [window.blocklet]);
+  const _onAdd = (0, _ahooks.useMemoizedFn)(() => {
+    if (apps.length <= 1) {
+      onAdd(apps[0]);
+    } else {
+      state.open = true;
+    }
+  });
+  const onClose = (0, _ahooks.useMemoizedFn)(() => {
+    state.open = false;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      ref: addRef,
+      onClick: _onAdd,
+      className: "session-manager-menu-item",
+      sx: {
+        display: 'flex',
+        gap: '8px'
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _iosAddCircleOutline.default,
+        width: 24,
+        height: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t('addAnotherAccount')
+      })]
+    }), addRef.current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+      anchorEl: addRef.current,
+      open: state.open,
+      onClose: onClose,
+      elevation: 0,
+      PaperProps: {
+        variant: 'outlined'
+      },
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: apps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        onClick: () => onAdd(app),
+        children: ["Connect with ", app.appName, " account"]
+      }, app.appId))
+    }) : null]
+  });
+}
+AddAccountItem.propTypes = {
+  onAdd: _propTypes.default.func,
+  locale: _propTypes.default.string
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en'
+};

package/lib/SessionManager/federated-login-detecter.js

@@ -9,8 +9,8 @@ var _react = require("react");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
-var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
+var _react2 = require("@iconify/react");
 var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
@@ -149,11 +149,9 @@ function FederatedLoginDetecter(_ref3) {
                 marginRight: 0,
                 fontSize: 12
               },
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-                component: _ShieldCheck.default,
-                style: {
-                  fontSize: '14px'
-                }
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                icon: _shieldCheck.default,
+                fontSize: 14
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {

package/lib/SessionManager/index.js

@@ -7,26 +7,25 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
-var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
-var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
-var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
 var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
-var _OpenIn = _interopRequireDefault(require("@arcblock/icons/lib/OpenIn"));
 var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect"));
-var _Switch = _interopRequireDefault(require("@arcblock/icons/lib/Switch"));
-var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _ahooks = require("ahooks");
 var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _Address = _interopRequireDefault(require("../Address"));
 var _Util = require("../Util");
 var _federatedLoginDetecter = _interopRequireDefault(require("./federated-login-detecter"));
 var _userPopper = _interopRequireDefault(require("./user-popper"));
+var _userInfo = _interopRequireDefault(require("./user-info"));
+var _util = require("../Locale/util");
+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 _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"],
-  _excluded2 = ["svgIcon"];
-/* eslint-disable react/no-array-index-key  */
+const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size"];
+/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
 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; }
@@ -36,47 +35,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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: {
-    account: 'account',
-    switchDid: 'Switch DID',
-    switchTo: 'Switch to',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with'
-  },
-  zh: {
-    account: '账号',
-    switchDid: '切换账户',
-    switchTo: '切换至',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    connectedWith: '连接至'
-  }
-};
-const getConnectedAccounts = user => {
-  var _user$extraConfigs;
-  return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.connectedAccounts) || [];
-};
-const getSourceProvider = user => {
-  var _user$extraConfigs2;
-  return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.sourceProvider) || 'wallet';
-};
 function SessionManager(_ref) {
-  var _session$user, _session$user$avatar, _window$blocklet, _window$blocklet$sett, _window$blocklet$sett2, _session$user3, _session$user4, _session$user5;
+  var _session$user, _session$user$avatar;
   let {
       session,
       locale,
@@ -98,33 +58,30 @@ function SessionManager(_ref) {
       size
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const translation = translations[locale] || translations.en;
+  const latestSession = (0, _ahooks.useLatest)(session);
+  const {
+    connectAccount
+  } = (0, _useAccounts.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);
+  });
   const userAnchorRef = (0, _react.useRef)(null);
-  // eslint-disable-next-line react/prop-types
   const {
     logoutOAuth,
-    bindOAuth,
-    configs: oauthConfigs,
     switchOAuthPassport
   } = session.useOAuth();
   const [userOpen, setUserOpen] = (0, _react.useState)(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = (0, _Util.getUserAvatar)((_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' ')));
-  const currentRole = (0, _react.useMemo)(() => {
-    var _session$user2, _session$user2$passpo;
-    return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
-  }, [session.user]);
-  const browser = (0, _useBrowser.default)();
-  // eslint-disable-next-line react/prop-types
-  const {
-    walletDid
-  } = session.useDid({
-    session
-  });
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
-  const connectedAccounts = getConnectedAccounts(session.user);
-  const federatedAccount = connectedAccounts.find(item => item.provider === 'federated');
+  const isRawWalletAccount = (0, _utils.getSourceProvider)(session.user) === 'wallet';
+  const connectedAccounts = (0, _utils.getConnectedAccounts)(session.user);
+  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) {
@@ -136,19 +93,57 @@ function SessionManager(_ref) {
     hasBindAccount = true;
     hasBindWallet = true;
   }
-  const oauthConfigList = Object.entries(oauthConfigs).map(_ref2 => {
-    let [key, value] = _ref2;
-    return _objectSpread(_objectSpread({}, value), {}, {
-      provider: key
-    });
-  }).filter(item => item.enabled);
-  const isFirstLoading = (0, _react.useMemo)(() => {
-    // eslint-disable-next-line react/prop-types
-    return (session === null || session === void 0 ? void 0 : session.initialized) === false && (session === null || session === void 0 ? void 0 : session.loading) === true;
-    // eslint-disable-next-line react/prop-types
-  }, [session === null || session === void 0 ? void 0 : session.initialized, session === null || session === void 0 ? void 0 : session.loading]);
-  const masterSiteInfo = (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : (_window$blocklet$sett = _window$blocklet.settings) === null || _window$blocklet$sett === void 0 ? void 0 : (_window$blocklet$sett2 = _window$blocklet$sett.federated) === null || _window$blocklet$sett2 === void 0 ? void 0 : _window$blocklet$sett2.master;
-  const currentSiteInfo = window.blocklet;
+  const _connectAccount = (0, _ahooks.useMemoizedFn)(async () => {
+    var _latestSession$curren, _window, _blocklet$settings, _blocklet$settings$fe;
+    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
+    await (0, _Util.sleep)();
+    if (!((_latestSession$curren = latestSession.current) !== null && _latestSession$curren !== void 0 && _latestSession$curren.user)) {
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
+    if (!blocklet) {
+      return;
+    }
+    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: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
+  // 同时可用于以前的站点，会自动生成一个已连接的账号
+  (0, _react.useEffect)(() => {
+    if (session.user) {
+      _connectAccount();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user]);
   if (!session.user) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
@@ -169,7 +164,7 @@ function SessionManager(_ref) {
           style: {
             lineHeight: '25px'
           },
-          children: translation.connect
+          children: t('connect')
         })]
       })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
         ref: userAnchorRef
@@ -210,15 +205,21 @@ function SessionManager(_ref) {
   function onToggleUser() {
     setUserOpen(prevOpen => !prevOpen);
   }
+  function close() {
+    setUserOpen(false);
+  }
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-    setUserOpen(false);
+    close();
   }
   function _onLogin() {
     if (!isFirstLoading) {
-      session.login(onLogin);
+      session.login(function () {
+        _connectAccount();
+        onLogin(...arguments);
+      });
     }
   }
   function _onLogout() {
@@ -234,7 +235,7 @@ function SessionManager(_ref) {
       }).catch(err => {
         console.error(err);
       }).finally(() => {
-        setUserOpen(false);
+        close();
       });
     });
   }
@@ -242,29 +243,10 @@ function SessionManager(_ref) {
    * @name 切换账户
    * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
    */
-  function _onSwitchDid() {
-    const {
-      provider,
-      user
-    } = session;
-    if (!user) return;
-    let targetProvider = provider;
-    if (provider === 'federated') {
-      targetProvider = 'wallet';
-    } else if (['auth0', 'wallet'].includes(provider)) {
-      targetProvider = 'federated';
-    }
-    session.switchDid(function () {
-      setUserOpen(false);
-      onSwitchDid(...arguments);
-    }, {
-      provider: targetProvider,
-      providerMode: 'paramsFirst'
-    });
-  }
+
   function _onSwitchProfile() {
     session.switchProfile(function () {
-      setUserOpen(false);
+      close();
       onSwitchProfile(...arguments);
     });
   }
@@ -276,25 +258,13 @@ function SessionManager(_ref) {
     if (!isRawWalletAccount && provider !== 'federated') {
       switchOAuthPassport(user);
     } else {
-      setUserOpen(false);
+      close();
       session.switchPassport(function () {
-        setUserOpen(false);
+        close();
         onSwitchPassport(...arguments);
       });
     }
   }
-  function _onBindWallet() {
-    setUserOpen(false);
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet(function () {
-        setUserOpen(false);
-        onBindWallet(...arguments);
-      });
-    } else {
-      bindOAuth();
-    }
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
       ref: userAnchorRef,
@@ -323,141 +293,34 @@ function SessionManager(_ref) {
         sx: {
           p: 0
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "session-manager-user",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "session-manager-user-name",
-            role: "button",
-            "aria-label": "User info panel",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: session.user.fullName
-            }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-              label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role.toUpperCase()),
-              size: "small",
-              variant: "outlined",
-              sx: {
-                height: 'auto',
-                marginRight: 0
-              },
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                component: _ShieldCheck.default,
-                size: "small"
-              })
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "session-manager-id-list",
-            "aria-label": "User DID list",
-            children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: walletDid
-              })
-            }), federatedAccount && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: federatedAccount.did
-              })
-            }), (session === null || session === void 0 ? void 0 : (_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: session.user.email
-              })
-            })]
-          })]
-        }), Array.isArray(menu) && menu.map((menuItem, index) => {
-          const {
-              svgIcon
-            } = menuItem,
-            menuProps = _objectWithoutProperties(menuItem, _excluded2);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
-            className: "session-manager-menu-item"
-          }, _objectSpread(_objectSpread({}, menuProps), {}, {
-            icon: undefined,
-            label: undefined
-          })), {}, {
-            children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-              component: svgIcon,
-              className: "session-manager-menu-icon"
-            }) : menuItem.icon, menuItem.label]
-          }), index);
-        }), menuRender({
-          classes: {
-            menuItem: 'session-manager-menu-item',
-            menuIcon: 'session-manager-menu-icon'
-          }
-        }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          component: "a",
-          className: "session-manager-menu-item",
-          "data-cy": "sessionManager-openInWallet",
-          href: "https://www.abtwallet.io/",
-          "aria-label": translation.openInWallet,
-          target: "_blank",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _OpenIn.default,
-            className: "session-manager-menu-icon"
-          }), translation.openInWallet]
-        }), !(0, _isEmpty.default)(masterSiteInfo) && !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchDid,
-          "aria-label": translation.switchDid,
-          "data-cy": "sessionManager-switch-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _Switch.default,
-            className: "session-manager-menu-icon"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              whiteSpace: 'normal',
-              wordBreak: 'break-all'
-            },
-            children: [translation.switchTo, session.provider === 'federated' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-              mx: 1,
-              href: currentSiteInfo.appUrl,
-              underline: "hover",
-              target: "_blank",
-              title: currentSiteInfo.appName,
-              "aria-label": "Open current site url",
-              children: currentSiteInfo.appName
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-              mx: 1,
-              href: masterSiteInfo.appUrl,
-              underline: "hover",
-              target: "_blank",
-              title: masterSiteInfo.appName,
-              "aria-label": "Open federated master site url",
-              children: masterSiteInfo.appName
-            }), translation.account]
-          })]
-        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchProfile,
-          "aria-label": translation.switchProfile,
-          "data-cy": "sessionManager-switch-profile-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _PersonOutline.default,
-            className: "session-manager-menu-icon"
-          }), translation.switchProfile]
-        }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onSwitchPassport,
-          "aria-label": translation.switchPassport,
-          "data-cy": "sessionManager-switch-passport-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _VpnKeyOutlined.default,
-            className: "session-manager-menu-icon"
-          }), translation.switchPassport]
-        }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onBindWallet,
-          "aria-label": !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty),
-          "data-cy": "sessionManager-bind-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _Link.default,
-            className: "session-manager-menu-icon"
-          }), !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.default, {
+          session: session,
+          size: size,
+          locale: locale,
+          onEditUser: () => {
+            close();
+            _onSwitchProfile();
+          },
+          onSwitchPassport: () => {
+            close();
+            _onSwitchPassport();
+          },
+          close: close,
+          switchProfile: switchProfile,
+          hasBindWallet: hasBindWallet
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageAccounts.default, {
+          session: session,
+          locale: locale,
+          onBindWallet: onBindWallet,
+          onSwitchDid: onSwitchDid,
+          connectAccount: _connectAccount,
+          close: close,
+          hasBindAccount: hasBindAccount
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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,
@@ -466,7 +329,7 @@ function SessionManager(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
             component: _Disconnect.default,
             className: "session-manager-menu-icon"
-          }), translation.disconnect]
+          }), t('disconnect')]
         })]
       })
     })]