@arcblock/ux 2.7.15 → 2.7.17

package/lib/SessionManager/manage-accounts.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ManageAccounts;
+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 _accountItem = _interopRequireDefault(require("./account-item"));
+var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
+var _translation = require("./translation");
+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 ManageAccounts(_ref) {
+  let {
+    session,
+    locale,
+    onBindWallet,
+    onSwitchDid,
+    connectAccount,
+    close,
+    hasBindAccount,
+    disableLogout,
+    onLogout,
+    expanded,
+    onExpand
+  } = _ref;
+  const {
+    bindOAuth,
+    configs: oauthConfigs
+  } = session.useOAuth();
+  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 {
+    confirmApi,
+    confirmHolder
+  } = (0, _confirm.useConfirm)();
+  const {
+    deleteAccount,
+    config
+  } = (0, _useConfig.default)();
+  const update = (0, _ahooks.useUpdate)();
+  const onChoose = (0, _ahooks.useMemoizedFn)((account, _ref2) => {
+    let {
+      active
+    } = _ref2;
+    if (active) {
+      return;
+    }
+    close();
+    session.switchDid(function () {
+      connectAccount();
+      onSwitchDid(...arguments);
+    }, {
+      provider: account.provider,
+      sourceAppPid: account.sourceAppPid
+    });
+  });
+  const oauthConfigList = Object.entries(oauthConfigs).map(_ref3 => {
+    let [key, value] = _ref3;
+    return _objectSpread(_objectSpread({}, value), {}, {
+      provider: key
+    });
+  }).filter(item => item.enabled);
+  const isRawWalletAccount = (0, _utils.getSourceProvider)(session.user) === 'wallet';
+  const onDelete = (0, _ahooks.useMemoizedFn)((account, _ref4) => {
+    let {
+      active
+    } = _ref4;
+    if (active) {
+      return;
+    }
+    confirmApi.open({
+      title: t('deleteAccountTitle'),
+      content: t('deleteAccountContent'),
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      onConfirm(done) {
+        deleteAccount(account);
+        update();
+        done();
+      }
+    });
+  });
+  const onAdd = (0, _ahooks.useMemoizedFn)(app => {
+    close();
+    session.switchDid(function () {
+      connectAccount();
+      update();
+      onSwitchDid(...arguments);
+    }, {
+      sourceAppPid: app.sourceAppPid,
+      provider: app.provider
+    });
+  });
+  function _onBindWallet() {
+    close();
+    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
+    if (!isRawWalletAccount) {
+      session.bindWallet(onBindWallet);
+    } else {
+      bindOAuth();
+    }
+  }
+  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, {
+          className: "session-manager-menu-icon",
+          style: {
+            width: 24,
+            height: 24
+          }
+        }), t('accounts')]
+      }),
+      children: [config.accounts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountItem.default, {
+        account: item,
+        locale: locale,
+        active: session.user.did === item.did,
+        onDelete: onDelete,
+        onChoose: onChoose
+      }, item.did)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_addAccountItem.default, {
+        locale: locale,
+        onAdd: onAdd
+      }), 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')),
+        "data-cy": "sessionManager-bind-trigger",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _link.default,
+          width: 24,
+          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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ManageBlocklet;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+var _react = require("@iconify/react");
+var _apps = _interopRequireDefault(require("@iconify-icons/mdi/apps"));
+var _material = require("@mui/material");
+var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["svgIcon"];
+/* eslint-disable react/no-array-index-key */
+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 ManageBlocklet(_ref) {
+  let {
+    menu,
+    menuRender,
+    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('blocklet')]
+    }),
+    children: [Array.isArray(menu) && menu.map((menuItem, index) => {
+      const {
+          svgIcon
+        } = menuItem,
+        menuProps = _objectWithoutProperties(menuItem, _excluded);
+      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'
+      }
+    })]
+  });
+}
+ManageBlocklet.propTypes = {
+  menu: _propTypes.default.array,
+  menuRender: _propTypes.default.func,
+  locale: _propTypes.default.string.isRequired,
+  expanded: _propTypes.default.bool,
+  onExpand: _propTypes.default.func
+};
+ManageBlocklet.defaultProps = {
+  menu: [],
+  menuRender: () => {},
+  expanded: true,
+  onExpand: () => {}
+};

package/lib/SessionManager/menu-accordion.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MenuAccordion;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
+var _react = require("@iconify/react");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _ahooks = require("ahooks");
+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 isEmptyNode(node) {
+  if ((0, _isNil.default)(node)) {
+    return true;
+  }
+  if ((0, _isEmpty.default)(node)) {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.every(item => isEmptyNode(item));
+  }
+  return false;
+}
+function MenuAccordion(_ref) {
+  let {
+    title,
+    children,
+    locale,
+    expanded,
+    onChange: _onChange
+  } = _ref;
+  const isEmptyChildren = (0, _ahooks.useCreation)(() => isEmptyNode(children), [children]);
+  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)(_material.Accordion, {
+    expanded: expanded,
+    disableGutters: true,
+    elevation: 0,
+    onChange: (e, value) => {
+      _onChange(value);
+    },
+    sx: {
+      '&.MuiAccordion-root:before': {
+        content: 'unset'
+      },
+      '.MuiAccordionSummary-root': {
+        minHeight: 'auto',
+        width: '100%'
+      },
+      '.MuiAccordionSummary-content': {
+        margin: 0
+      },
+      '.MuiAccordionDetails-root': {
+        padding: 0,
+        paddingLeft: '30px',
+        '.session-manager-menu-item': {
+          fontSize: '15px',
+          padding: '12px 15px',
+          whiteSpace: 'normal'
+        },
+        '.session-manager-menu-icon': {
+          height: '21px',
+          widht: '21px'
+        }
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      sx: {
+        padding: 0,
+        width: '100%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+        className: "session-manager-menu-item",
+        expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _expandMore.default,
+          width: 24,
+          height: 24
+        }),
+        children: title
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionDetails, {
+      children: isEmptyChildren ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        disabled: true,
+        className: "session-manager-menu-item",
+        sx: {
+          justifyContent: 'center'
+        },
+        children: t('noneMenu')
+      }, "empty") : children
+    })]
+  });
+}
+MenuAccordion.propTypes = {
+  title: _propTypes.default.any.isRequired,
+  children: _propTypes.default.any.isRequired,
+  locale: _propTypes.default.string,
+  expanded: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+MenuAccordion.defaultProps = {
+  locale: 'en',
+  expanded: true,
+  onChange: () => {}
+};

package/lib/SessionManager/translation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+/* eslint-disable import/prefer-default-export */
+const translations = {
+  en: {
+    switch: 'Switch',
+    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',
+    addAppAccount: 'Add {appName} account',
+    accounts: 'Accounts',
+    blocklet: 'Blocklet',
+    from: 'From',
+    addAnotherAccount: 'Add another account',
+    deleteAccountTitle: 'Remove this account ?',
+    deleteAccountContent: 'After delete account, you can add it agian',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    noneMenu: 'Empty menu, maybe you should switch to another role'
+  },
+  zh: {
+    switch: '切换',
+    account: '账号',
+    switchDid: '切换账户',
+    switchTo: '切换至',
+    switchProfile: '切换用户信息',
+    switchPassport: '切换通行证',
+    disconnect: '退出登录',
+    connect: '登录',
+    openInWallet: '打开 DID 钱包',
+    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
+    alreadyBindOAuth: '已绑定 Auth0 账号',
+    bind: '绑定',
+    thirdParty: '第三方登录',
+    addAppAccount: '添加 {appName} 账户',
+    accounts: '账户',
+    blocklet: '应用',
+    from: '连接至',
+    addAnotherAccount: '添加账号',
+    deleteAccountTitle: '是否删除账户？',
+    deleteAccountContent: '账户删除后，可再次添加',
+    confirm: '确认',
+    cancel: '取消',
+    noneMenu: '无操作项，请尝试切换角色'
+  }
+};
+exports.translations = translations;

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

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserInfo;
+var _material = require("@mui/material");
+var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
+var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
+var _react = require("@iconify/react");
+var _ahooks = require("ahooks");
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Address = _interopRequireDefault(require("../Address"));
+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 */
+/* eslint-disable react/prop-types */
+
+function UserInfo(_ref) {
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user6;
+  let {
+    session,
+    locale,
+    onSwitchProfile,
+    onSwitchPassport,
+    switchProfile,
+    hasBindWallet
+  } = _ref;
+  const t = function t(key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.t)(_translation.translations, key, locale, 'en', data);
+  };
+  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 {
+    walletDid
+  } = session.useDid({
+    session
+  });
+  const currentRole = (0, _ahooks.useCreation)(() => {
+    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 === 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';
+  }, [session === null || session === void 0 ? void 0 : session.user]);
+  const canEdit = (0, _ahooks.useCreation)(() => {
+    if (onSwitchProfile instanceof Function) {
+      if (switchProfile && hasBindWallet) {
+        return true;
+      }
+    }
+    return false;
+  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
+  const _onSwitchProfile = (0, _ahooks.useMemoizedFn)(() => {
+    if (canEdit) {
+      onSwitchProfile();
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px',
+      padding: '15px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      onClick: _onSwitchProfile,
+      "data-cy": "sessionManager-switch-profile-trigger",
+      sx: {
+        cursor: canEdit ? 'pointer' : 'default',
+        position: 'relative',
+        borderRadius: '100%',
+        overflow: 'hidden',
+        fontSize: 0,
+        '&:hover': canEdit ? {
+          '&::after': {
+            content: "\"".concat(t('switch'), "\""),
+            position: 'absolute',
+            bottom: 0,
+            background: 'rgba(0, 0, 0, 0.2)',
+            left: 0,
+            right: 0,
+            height: '2.2em',
+            color: 'white',
+            textAlign: 'center',
+            fontSize: '12px',
+            lineHeight: '2em'
+          }
+        } : {}
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: 64,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        position: 'static',
+        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",
+          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,
+        did: walletDid
+      }) : null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        responsive: false,
+        compact: true,
+        did: session.user.did
+      }), userEmail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+        responsive: false,
+        children: userEmail
+      }) : null]
+    })]
+  });
+}

package/lib/SessionManager/user-popper.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = UserPopper;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
+var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
+var _react = require("@iconify/react");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
@@ -66,7 +67,11 @@ function UserPopper(_ref) {
             zIndex: 1
           },
           onClick: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _close.default,
+            width: 20,
+            height: 20
+          })
         }), children]
       })
     })
@@ -87,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    /* HACK: \u9700\u8981288px \u624D\u80FD\u5C06 did \u5C55\u793A\u5B8C\u6574 */\n    width: 290px;\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-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:first-of-type:last-of-type {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-of-type):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\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: 16px;\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';
 });