@arcblock/ux 2.7.16 → 2.7.17

package/lib/Typography/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Typography;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["minFontSize", "fontSize", "children", "sx"];
+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); }
+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; }
+function Typography(_ref) {
+  let {
+      minFontSize,
+      fontSize,
+      children,
+      sx
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const refMock = (0, _react.useRef)(null);
+  const refContainer = (0, _react.useRef)(null);
+  const state = (0, _ahooks.useReactive)({
+    fontSize,
+    loading: true,
+    initialSize: undefined
+  });
+  const mockSize = (0, _ahooks.useSize)(refMock.current);
+  const containerSize = (0, _ahooks.useSize)(refContainer.current);
+  (0, _react.useEffect)(() => {
+    if (state.loading) {
+      if (fontSize === 'auto') {
+        if (mockSize && !state.initialSize) {
+          const styleSize = getComputedStyle(refMock.current).fontSize;
+          state.initialSize = Number(styleSize.replace('px', ''));
+          state.fontSize = state.initialSize;
+        }
+        if (containerSize && mockSize) {
+          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
+            state.fontSize--;
+          } else {
+            state.loading = false;
+          }
+        }
+      } else {
+        state.loading = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSize, mockSize === null || mockSize === void 0 ? void 0 : mockSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
+  return state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref: refContainer,
+    flex: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
+      sx: sx,
+      noWrap: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: '1rem'
+        }
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({
+      ref: refMock
+    }, rest), {}, {
+      sx: _objectSpread(_objectSpread({}, sx), {}, {
+        fontSize: "".concat(state.fontSize, "px !important"),
+        position: 'fixed',
+        top: -1000,
+        left: -1000
+      }),
+      noWrap: true,
+      children: children
+    }))]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
+    sx: _objectSpread(_objectSpread({}, sx), {}, {
+      fontSize: "".concat(state.fontSize, "px !important")
+    }),
+    children: children
+  }));
+}
+Typography.propTypes = {
+  fontSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  children: _propTypes.default.any.isRequired,
+  minFontSize: _propTypes.default.number,
+  sx: _propTypes.default.object
+};
+Typography.defaultProps = {
+  fontSize: undefined,
+  minFontSize: 12,
+  sx: {}
+};

package/lib/Util/federated.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAutoLoginFederated = getAutoLoginFederated;
+exports.getConfig = getConfig;
+exports.getCurrentApp = getCurrentApp;
+exports.getFederatedApp = getFederatedApp;
+exports.getMaster = getMaster;
+exports.getSourceAppPid = getSourceAppPid;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getMaster() {
+  var _blocklet$settings;
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const federated = (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.federated) || {};
+  return federated.master;
+}
+function getConfig() {
+  var _blocklet$settings2;
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const federated = (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings2 = blocklet.settings) === null || _blocklet$settings2 === void 0 ? void 0 : _blocklet$settings2.federated) || {};
+  return federated.config;
+}
+function getAutoLoginFederated() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const config = getConfig(blocklet);
+  return Boolean(config === null || config === void 0 ? void 0 : config.autoLogin) && (config === null || config === void 0 ? void 0 : config.status) === 'approved';
+}
+function getSourceAppPid() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const master = getMaster(blocklet);
+  return master === null || master === void 0 ? void 0 : master.appPid;
+}
+function getFederatedApp() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const master = getMaster(blocklet);
+  const isFederatedMode = !(0, _isEmpty.default)(master);
+  return isFederatedMode ? {
+    appId: master.appId,
+    appName: master.appName,
+    appDescription: master.appDescription,
+    appLogo: master.appLogo,
+    appPid: master.appPid,
+    appUrl: master.appUrl,
+    version: master.version,
+    sourceAppPid: master.appPid,
+    provider: 'wallet'
+  } : null;
+}
+function getCurrentApp() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  // 适用于 blocklet 项目
+  if (blocklet) {
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet'
+    };
+  }
+  // HACK: 适用于 blockelt-server
+  if (window.env) {
+    // eslint-disable-next-line no-param-reassign
+    blocklet = window.env;
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appUrl: blocklet.baseUrl,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet',
+      type: 'server'
+    };
+  }
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.16",
+  "version": "2.7.17",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -277,6 +277,10 @@
       "import": "./es/Toast/index.js",
       "require": "./lib/Toast/index.js"
     },
+    "./lib/Typography": {
+      "import": "./es/Typography/index.js",
+      "require": "./lib/Typography/index.js"
+    },
     "./lib/Util": {
       "import": "./es/Util/index.js",
       "require": "./lib/Util/index.js"
@@ -318,11 +322,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "8adb844a1067ecca748cd70c5978c9f7497e3658",
+  "gitHead": "3a169b96cef38680f727a9d0aa0dc4588eaf85fd",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.16",
-    "@arcblock/react-hooks": "^2.7.16",
+    "@arcblock/icons": "^2.7.17",
+    "@arcblock/react-hooks": "^2.7.17",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/account-item.jsx

@@ -54,7 +54,7 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
         },
       }}
       className="session-manager-menu-item">
-      <Avatar did={account.did} />
+      <Avatar did={account.did} size={42} />
       <Box
         sx={{
           flex: 1,
@@ -65,16 +65,14 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
           },
         }}>
         <DID did={account.did} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
-        <Typography variant="caption">
-          {t('from')}{' '}
-          {account.provider === 'federated' ? (
+        {account.sourceAppPid && (
+          <Typography variant="caption">
+            {t('from')}{' '}
             <Link href={account.appUrl} target="_blank" underline="none">
               {account.appName}
             </Link>
-          ) : (
-            account.appName
-          )}
-        </Typography>
+          </Typography>
+        )}
       </Box>
       <Box className="account-item-actions">
         {active ? (

package/src/SessionManager/add-account-item.jsx

@@ -2,11 +2,11 @@ import { Icon } from '@iconify/react';
 import PropTypes from 'prop-types';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
-import isEmpty from 'lodash/isEmpty';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useRef } from 'react';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 export default function AddAccountItem({ onAdd, locale }) {
   const addRef = useRef(null);
@@ -23,36 +23,18 @@ export default function AddAccountItem({ onAdd, locale }) {
       return appList;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return appList;
+
+    const masterApp = getFederatedApp(blocklet);
+    const currentApp = getCurrentApp(blocklet);
+
+    if (currentApp) {
+      appList.push(currentApp);
     }
-    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 = !isEmpty(blocklet.settings?.federated?.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];
+    if (masterApp && masterApp?.appId !== currentApp?.appId) {
+      appList.push(masterApp);
     }
-    return appList;
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
   }, [window.blocklet]);
 
   const _onAdd = useMemoizedFn(() => {
@@ -96,7 +78,7 @@ export default function AddAccountItem({ onAdd, locale }) {
           }}>
           {apps.map((app) => (
             <MenuItem key={app.appId} onClick={() => onAdd(app)}>
-              Connect with {app.appName} account
+              {t('connectWithAccount', { name: app.appName })}
             </MenuItem>
           ))}
         </Menu>

package/src/SessionManager/federated-login-detecter.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import { Icon } from '@iconify/react';
+import { useCreation, useReactive } from 'ahooks';
 
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
@@ -39,10 +40,13 @@ const translations = {
 };
 
 export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
-  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+  const state = useReactive({
+    open: true,
+  });
 
-  const siteInfo = session.federatedMaster?.site;
-  const userInfo = session.federatedMaster?.user;
+  const federatedMaster = useCreation(() => {
+    return session.federatedMaster;
+  }, [session?.federatedMaster]);
 
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
@@ -53,19 +57,19 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
         if (err) {
           Toast.error(err || translations[_locale].loginFederatedFailed);
         } else {
-          setFederatedLoginOpen(false);
+          state.open = false;
         }
       },
       {
-        provider: 'federated',
-        mode: userInfo ? 'auto' : 'manual',
+        sourceAppPid: federatedMaster?.site?.appPid,
+        mode: federatedMaster?.user ? 'auto' : 'manual',
       }
     );
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
 
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster?.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
@@ -73,26 +77,35 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
   }
 
   return (
-    siteInfo && (
+    federatedMaster?.site && (
       <UserPopper
-        open={federatedLoginOpen}
+        open={state.open}
         anchorEl={anchorEl}
         dark={dark}
         autoClose={false}
-        onClose={() => setFederatedLoginOpen(false)}>
+        onClose={() => {
+          state.open = false;
+        }}>
         <Box p={2}>
-          {siteInfo && (
+          {federatedMaster.site && (
             <Box display="flex" alignItems="center">
-              <Box component="img" mr={2} src={appLogoUrl.href} alt={siteInfo.appName} width="30px" height="30px" />
+              <Box
+                component="img"
+                mr={2}
+                src={appLogoUrl.href}
+                alt={federatedMaster.site.appName}
+                width="30px"
+                height="30px"
+              />
               <Box sx={{ maxWidth: '260px' }}>
                 {translations[locale].useToConnect({
                   master: (
                     <Box
                       component="a"
-                      href={siteInfo.appUrl}
+                      href={federatedMaster.site.appUrl}
                       target="_blank"
                       sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
-                      {siteInfo.appName}
+                      {federatedMaster.site.appName}
                     </Box>
                   ),
                   member: window.blocklet.appName,
@@ -100,22 +113,22 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
               </Box>
             </Box>
           )}
-          {siteInfo && userInfo && <Divider style={{ margin: '15px 0 10px 0' }} />}
-          {userInfo && (
+          {federatedMaster?.site && federatedMaster?.user && <Divider style={{ margin: '15px 0 10px 0' }} />}
+          {federatedMaster?.user && (
             <Box display="flex" alignItems="center">
               <DidAvatar
                 variant="circle"
-                did={userInfo.did}
-                src={getUserAvatar(userInfo.avatar)}
+                did={federatedMaster.user.did}
+                src={getUserAvatar(federatedMaster.user.avatar)}
                 size={28}
                 shape="circle"
               />
               <Box ml={2}>
                 <Box display="flex" justifyContent="space-between" alignItems="center">
-                  <Box fontSize={18}>{userInfo.fullName}</Box>
-                  {userInfo.role?.toUpperCase() && (
+                  <Box fontSize={18}>{federatedMaster.user.fullName}</Box>
+                  {federatedMaster.user.role?.toUpperCase() && (
                     <Chip
-                      label={userInfo.role?.toUpperCase()}
+                      label={federatedMaster.user.role?.toUpperCase()}
                       size="small"
                       variant="outlined"
                       sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
@@ -123,11 +136,11 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
                     />
                   )}
                 </Box>
-                <DidAddress responsive={false}>{userInfo.did}</DidAddress>
+                <DidAddress responsive={false}>{federatedMaster.user.did}</DidAddress>
               </Box>
             </Box>
           )}
-          {siteInfo && (
+          {federatedMaster?.site && (
             <Box display="flex" justifyContent="center" mt={2}>
               <Button variant="contained" size="small" onClick={onLoginFederated}>
                 {translations[locale].connect}

package/src/SessionManager/index.jsx

@@ -2,11 +2,10 @@
 /* eslint-disable react/jsx-no-bind */
 import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, CircularProgress, Divider } from '@mui/material';
+import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import noop from 'lodash/noop';
-import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
 import { useLatest, useMemoizedFn } from 'ahooks';
 
 import DidAvatar from '../Avatar';
@@ -19,7 +18,8 @@ import ManageAccounts from './manage-accounts';
 import ManageBlocklet from './manage-blocklet';
 import { translations } from './translation';
 import { getConnectedAccounts, getSourceProvider } from './utils';
-import useAccounts from './use-accounts';
+import useConfig from './use-config';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 function SessionManager({
   session,
@@ -40,10 +40,11 @@ function SessionManager({
   menuRender,
   dark,
   size,
+  showManageBlocklet,
   ...rest
 }) {
   const latestSession = useLatest(session);
-  const { connectAccount } = useAccounts();
+  const { connectAccount, config, setConfig } = useConfig();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -61,7 +62,6 @@ function SessionManager({
     return session?.initialized === false && session?.loading === true;
   }, [session?.initialized, session?.loading]);
 
-  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -84,39 +84,18 @@ function SessionManager({
       return;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return;
+    const currentApp = getCurrentApp(blocklet);
+    const masterApp = getFederatedApp(blocklet);
+    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
+    if (targetApp) {
+      const loginAccount = {
+        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?.federated?.master;
-    const masterApp = isEmpty(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 = {
-      did: latestSession.current.user.did,
-      avatar: latestSession.current.user.avatar,
-      provider: latestSession.current.provider,
-      ...(latestSession.current.provider === 'federated' ? masterApp : currentApp),
-    };
-    connectAccount(loginAccount);
   });
 
   // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
@@ -219,7 +198,7 @@ function SessionManager({
 
   function _onSwitchPassport() {
     const { user, provider } = session;
-    if (!isRawWalletAccount && provider !== 'federated') {
+    if (['auth0'].includes(provider)) {
       switchOAuthPassport(user);
     } else {
       close();
@@ -250,7 +229,7 @@ function SessionManager({
             session={session}
             size={size}
             locale={locale}
-            onEditUser={() => {
+            onSwitchProfile={() => {
               close();
               _onSwitchProfile();
             }}
@@ -273,35 +252,34 @@ function SessionManager({
             connectAccount={_connectAccount}
             close={close}
             hasBindAccount={hasBindAccount}
+            onLogout={_onLogout}
+            expanded={config.expandAccount}
+            onExpand={(value) => {
+              const cloneConfig = cloneDeep(config);
+              cloneConfig.expandAccount = value;
+              setConfig(cloneConfig);
+            }}
           />
 
-          <Divider />
-
-          <ManageBlocklet menu={menu} menuRender={menuRender} locale={locale} />
-
-          <Divider />
-
-          {/* NOTE: federated 登录方式不允许切换 profile */}
-          {/* {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchProfile}
-              aria-label={translation.switchProfile}
-              data-cy="sessionManager-switch-profile-trigger">
-              <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
-              {translation.switchProfile}
-            </MenuItem>
-          )} */}
-
-          <MenuItem
-            className="session-manager-menu-item"
-            onClick={_onLogout}
-            disabled={disableLogout}
-            aria-label="Logout account"
-            data-cy="sessionManager-logout-trigger">
-            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-            {t('disconnect')}
-          </MenuItem>
+          {/* 为了避免控制台出现警告，采用数组的方式 */}
+          {/* MUI:The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. */}
+          {showManageBlocklet
+            ? [
+                <Divider key="divider" />,
+                <ManageBlocklet
+                  key="manageBlocklet"
+                  menu={menu}
+                  menuRender={menuRender}
+                  locale={locale}
+                  expanded={config.expandBlocklet}
+                  onExpand={(value) => {
+                    const cloneConfig = cloneDeep(config);
+                    cloneConfig.expandBlocklet = value;
+                    setConfig(cloneConfig);
+                  }}
+                />,
+              ]
+            : null}
         </MenuList>
       </UserPopper>
     </>
@@ -311,7 +289,7 @@ function SessionManager({
 SessionManager.propTypes = {
   session: PropTypes.shape({
     federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'federated', 'auth0', '']),
+    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
@@ -360,6 +338,7 @@ SessionManager.propTypes = {
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
   size: PropTypes.number,
+  showManageBlocklet: PropTypes.bool,
 };
 
 SessionManager.defaultProps = {
@@ -380,6 +359,7 @@ SessionManager.defaultProps = {
   onBindWallet: noop,
   dark: false,
   size: 24,
+  showManageBlocklet: true,
 };
 
 export default SessionManager;