@arcblock/ux 2.8.26 → 2.9.0

package/lib/SessionManager/index.js

@@ -4,395 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _ahooks = require("ahooks");
-var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _Util = require("../Util");
-var _federatedLoginDetecter = _interopRequireDefault(require("./components/federated-login-detecter"));
-var _userInfo = _interopRequireDefault(require("./components/user-info"));
-var _responsivePopper = _interopRequireDefault(require("./components/responsive-popper"));
-var _util = require("../Locale/util");
-var _manageAccounts = _interopRequireDefault(require("./components/manage-accounts"));
-var _manageBlocklet = _interopRequireDefault(require("./components/manage-blocklet"));
-var _translation = require("./libs/translation");
-var _utils = require("./libs/utils");
-var _useConfig = _interopRequireDefault(require("./hooks/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", "showManageBlocklet"];
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-no-bind */
+var _SessionUser = _interopRequireDefault(require("../SessionUser"));
 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 SessionManager(_ref) {
-  var _session$user, _session$user$avatar;
-  let {
-      session,
-      locale,
-      showText,
-      showRole,
-      switchDid,
-      switchProfile,
-      switchPassport,
-      disableLogout,
-      onLogin,
-      onLogout,
-      onSwitchDid,
-      onSwitchProfile,
-      onSwitchPassport,
-      onBindWallet,
-      menu,
-      menuRender,
-      dark,
-      size,
-      showManageBlocklet
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const latestSession = (0, _ahooks.useLatest)(session);
-  const {
-    connectAccount,
-    config,
-    setConfig,
-    deleteAccount
-  } = (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);
-  });
-  const userAnchorRef = (0, _react.useRef)(null);
-  const {
-    logoutOAuth,
-    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 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]);
-  let hasBindWallet = false;
-  let hasBindAccount = false;
-  if (isRawWalletAccount) {
-    if (connectedAccounts.some(item => item.provider !== 'wallet')) {
-      hasBindAccount = true;
-    }
-    hasBindWallet = true;
-  } else if (connectedAccounts.some(item => item.provider === 'wallet')) {
-    hasBindAccount = true;
-    hasBindWallet = true;
-  }
-  const _connectAccount = (0, _ahooks.useMemoizedFn)(async () => {
-    var _latestSession$curren, _window;
-    // 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;
-    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(_objectSpread({}, targetApp), {}, {
-        did: latestSession.current.user.did,
-        avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider || targetApp.provider,
-        walletOS: latestSession.current.walletOS
-      });
-      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({
-        ref: userAnchorRef,
-        sx: [{
-          borderRadius: '100vw'
-        }, dark && {
-          color: '#fff',
-          borderColor: '#fff'
-        }],
-        variant: "outlined",
-        onClick: _onLogin,
-        role: "button",
-        "aria-label": "Login button"
-      }, rest), {}, {
-        "data-cy": "sessionManager-login",
-        children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            lineHeight: '25px'
-          },
-          children: t('connect')
-        })]
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
-        ref: userAnchorRef
-      }, rest), {}, {
-        onClick: _onLogin,
-        "data-cy": "sessionManager-login",
-        size: "medium",
-        role: "button",
-        "aria-label": "Login button",
-        children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          width: size,
-          height: size,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-            style: {
-              width: size - 4,
-              height: size - 4,
-              color: dark ? '#fff' : ''
-            }
-          })
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
-          style: {
-            width: size,
-            height: size,
-            color: dark ? '#fff' : ''
-          }
-        })
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedLoginDetecter.default, {
-        locale: locale,
-        dark: dark,
-        session: session,
-        anchorEl: userAnchorRef.current
-      })]
-    });
-  }
-  function onToggleUser() {
-    setUserOpen(prevOpen => !prevOpen);
-  }
-  function close() {
-    setUserOpen(false);
-  }
-  function onCloseUser(e) {
-    if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
-      return;
-    }
-    close();
-  }
-  function _onLogin() {
-    if (!isFirstLoading) {
-      session.login(function () {
-        _connectAccount();
-        onLogin(...arguments);
-      });
-    }
-  }
-  function _onLogout() {
-    return new Promise((resolve, reject) => {
-      logoutOAuth({
-        session,
-        hack: true
-      }).catch(err => {
-        console.error(err);
-        reject(err);
-      }).finally(() => {
-        session.logout(function () {
-          onLogout(...arguments);
-          resolve();
-          close();
-        });
-      });
-    });
-  }
-  /**
-   * @name 切换账户
-   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
-   */
-
-  function _onSwitchProfile() {
-    session.switchProfile(function () {
-      close();
-      onSwitchProfile(...arguments);
-    });
-  }
-  function _onSwitchPassport() {
-    const {
-      user,
-      provider
-    } = session;
-    if (['auth0'].includes(provider)) {
-      switchOAuthPassport(user);
-    } else {
-      close();
-      session.switchPassport(function () {
-        close();
-        onSwitchPassport(...arguments);
-      });
-    }
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
-      ref: userAnchorRef,
-      onClick: onToggleUser
-    }, rest), {}, {
-      "data-cy": "sessionManager-logout-popup",
-      size: "medium",
-      role: "button",
-      "aria-label": "User info button",
-      style: {
-        lineHeight: 1
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: size,
-        shape: "circle"
-      })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsivePopper.default, {
-      open: userOpen,
-      onClose: onCloseUser,
-      anchorEl: userAnchorRef.current,
-      dark: dark,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
-        sx: {
-          p: 0
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.default, {
-          session: session,
-          size: size,
-          locale: locale,
-          onSwitchProfile: () => {
-            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,
-          onLogout: _onLogout,
-          expanded: config.expandAccount,
-          onExpand: value => {
-            const cloneConfig = (0, _cloneDeep.default)(config);
-            cloneConfig.expandAccount = value;
-            setConfig(cloneConfig);
-          },
-          deleteAccount: deleteAccount,
-          accounts: config.accounts
-        }), showManageBlocklet ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}, "divider"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageBlocklet.default, {
-          menu: menu,
-          menuRender: menuRender,
-          locale: locale,
-          expanded: config.expandBlocklet,
-          onExpand: value => {
-            const cloneConfig = (0, _cloneDeep.default)(config);
-            cloneConfig.expandBlocklet = value;
-            setConfig(cloneConfig);
-          }
-        }, "manageBlocklet")] : null]
-      })
-    })]
-  });
-}
-SessionManager.propTypes = {
-  session: _propTypes.default.shape({
-    federatedMaster: _propTypes.default.object,
-    provider: _propTypes.default.oneOf(['wallet', 'auth0', '']),
-    user: _propTypes.default.shape({
-      did: _propTypes.default.string.isRequired,
-      role: _propTypes.default.string.isRequired,
-      fullName: _propTypes.default.string,
-      email: _propTypes.default.string,
-      avatar: _propTypes.default.string,
-      sourceProvider: _propTypes.default.string,
-      connectedAccounts: _propTypes.default.arrayOf(_propTypes.default.shape({
-        provider: _propTypes.default.string.isRequired,
-        did: _propTypes.default.string.isRequired,
-        id: _propTypes.default.string
-      })),
-      passports: _propTypes.default.arrayOf(_propTypes.default.shape({
-        name: _propTypes.default.string.isRequired,
-        title: _propTypes.default.string.isRequired
-      })),
-      // Deprecated
-      extraConfigs: _propTypes.default.object
-    }),
-    login: _propTypes.default.func.isRequired,
-    logout: _propTypes.default.func.isRequired,
-    switchDid: _propTypes.default.func.isRequired,
-    switchProfile: _propTypes.default.func.isRequired,
-    switchPassport: _propTypes.default.func.isRequired,
-    bindWallet: _propTypes.default.func.isRequired,
-    refresh: _propTypes.default.func.isRequired
-  }).isRequired,
-  locale: _propTypes.default.string,
-  showText: _propTypes.default.bool,
-  showRole: _propTypes.default.bool,
-  switchDid: _propTypes.default.bool,
-  switchProfile: _propTypes.default.bool,
-  switchPassport: _propTypes.default.bool,
-  disableLogout: _propTypes.default.bool,
-  onLogin: _propTypes.default.func,
-  onLogout: _propTypes.default.func,
-  onSwitchDid: _propTypes.default.func,
-  onSwitchProfile: _propTypes.default.func,
-  onSwitchPassport: _propTypes.default.func,
-  onBindWallet: _propTypes.default.func,
-  menu: _propTypes.default.array,
-  menuRender: _propTypes.default.func,
-  dark: _propTypes.default.bool,
-  size: _propTypes.default.number,
-  showManageBlocklet: _propTypes.default.bool
-};
-SessionManager.defaultProps = {
-  locale: 'en',
-  showText: false,
-  showRole: false,
-  switchDid: true,
-  switchProfile: true,
-  switchPassport: true,
-  disableLogout: false,
-  menu: [],
-  menuRender: _noop.default,
-  onLogin: _noop.default,
-  onLogout: _noop.default,
-  onSwitchDid: _noop.default,
-  onSwitchProfile: _noop.default,
-  onSwitchPassport: _noop.default,
-  onBindWallet: _noop.default,
-  dark: false,
-  size: 24,
-  showManageBlocklet: true
-};
-var _default = SessionManager;
+var _default = _SessionUser.default;
 exports.default = _default;

package/lib/SessionPermission/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SessionPermission;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const roleList = ['owner', 'admin', 'member', 'guest'];
+function SessionPermission(_ref) {
+  var _session$user2;
+  let {
+    session,
+    roles,
+    children
+  } = _ref;
+  const hasPermission = (0, _ahooks.useCreation)(() => {
+    var _session$user;
+    return roles.includes((session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.role) || 'guest');
+  }, [session === null || session === void 0 ? void 0 : (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : _session$user2.role, roles]);
+  if (typeof children === 'function') {
+    return children({
+      hasPermission
+    });
+  }
+  if (hasPermission) {
+    return children;
+  }
+}
+SessionPermission.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  session: _propTypes.default.object.isRequired,
+  roles: _propTypes.default.arrayOf(_propTypes.default.oneOf(roleList))
+};
+SessionPermission.defaultProps = {
+  roles: ['owner', 'admin']
+};

package/lib/SessionUser/components/logged-in.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LoggedIn;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _material = require("@mui/material");
+var _react2 = require("@iconify/react");
+var _personOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/person-outline-rounded"));
+var _filterVintageOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/filter-vintage-outline-rounded"));
+var _accountCircleOffOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/account-circle-off-outline-rounded"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _Util = require("../../Util");
+var _userInfo = _interopRequireDefault(require("./user-info"));
+var _Colors = require("../../Colors");
+var _constant = require("../../Util/constant");
+var _SessionPermission = _interopRequireDefault(require("../../SessionPermission"));
+var _translation = require("../libs/translation");
+var _util = require("../../Locale/util");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["icon", "title"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 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 LoggedIn(_ref) {
+  var _session$user, _session$user$avatar;
+  let {
+    session,
+    dark,
+    onBindWallet,
+    isBlocklet,
+    locale,
+    size
+  } = _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);
+  });
+  const popperAnchorRef = (0, _react.useRef)(null);
+  const currentState = (0, _ahooks.useReactive)({
+    open: false
+  });
+  const onTogglePopper = (0, _ahooks.useMemoizedFn)(function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
+    currentState.open = value;
+  });
+  // 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 handleSwitchPassport = (0, _ahooks.useMemoizedFn)(() => {
+    onTogglePopper(false);
+    session.switchPassport();
+  });
+  const handleSwitchAccount = (0, _ahooks.useMemoizedFn)(function () {
+    let {
+      userSession
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return new Promise(resolve => {
+      const options = {};
+      if (!userSession) {
+        onTogglePopper(false);
+        options.showQuickConnect = false;
+      } else {
+        options.userSession = userSession;
+      }
+      session.switchDid(() => {
+        onTogglePopper(false);
+        resolve();
+      }, {}, options);
+    });
+  });
+  const handleSwitchProfile = (0, _ahooks.useMemoizedFn)(() => {
+    onTogglePopper(false);
+    session.switchProfile();
+  });
+  const onLogout = (0, _ahooks.useMemoizedFn)(() => {
+    onTogglePopper(false);
+    session.logout();
+  });
+  const handleBindWallet = (0, _ahooks.useMemoizedFn)(() => {
+    onTogglePopper(false);
+    session.bindWallet(onBindWallet);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      ref: popperAnchorRef,
+      onClick: () => onTogglePopper(),
+      size: "medium",
+      "data-cy": "sessionManager-logout-popup",
+      "aria-label": "User info button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: size,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, {
+      open: currentState.open,
+      onClose: () => onTogglePopper(false),
+      anchorEl: popperAnchorRef.current,
+      dark: dark,
+      transition: true,
+      placement: "bottom-end",
+      sx: {
+        zIndex: 1600
+      },
+      children: _ref2 => {
+        let {
+          TransitionProps
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+          onClickAway: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onTogglePopper(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, _objectSpread(_objectSpread({}, TransitionProps), {}, {
+            timeout: 350,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                borderRadius: 3,
+                width: 350,
+                maxWidth: '90vw',
+                borderColor: _Colors.temp.lineStep,
+                border: '0 !important',
+                boxShadow: "0px 8px 16px 0px ".concat(_Colors.temp.gray6, ", 0px 0px 0px 1px ").concat(_Colors.temp.gray6)
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.default, {
+                locale: locale,
+                isBlocklet: isBlocklet,
+                session: session,
+                onSwitchPassport: handleSwitchPassport,
+                onSwitchAccount: handleSwitchAccount,
+                onSwitchProfile: handleSwitchProfile,
+                onBindWallet: handleBindWallet
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
+                sx: {
+                  p: 0
+                },
+                children: [isBlocklet ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionPermission.default, {
+                    session: session,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SessionMenuItem, {
+                      icon: _filterVintageOutlineRounded.default,
+                      title: t('dashboard'),
+                      component: "a",
+                      href: _constant.DASHBOARD_URL,
+                      sx: {
+                        display: 'block',
+                        textDecoration: 'none',
+                        color: 'inherit'
+                      }
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SessionMenuItem, {
+                    icon: _personOutlineRounded.default,
+                    title: t('profile'),
+                    component: "a",
+                    href: _constant.PROFILE_URL,
+                    sx: {
+                      display: 'block',
+                      textDecoration: 'none',
+                      color: 'inherit'
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+                    sx: {
+                      m: '0!important',
+                      borderColor: _Colors.temp.lineStep
+                    }
+                  })]
+                }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SessionMenuItem, {
+                  icon: _accountCircleOffOutlineRounded.default,
+                  title: t('logout'),
+                  sx: {
+                    color: 'error.main'
+                  },
+                  onClick: onLogout,
+                  "data-cy": "sessionManager-logout-trigger"
+                })]
+              })]
+            })
+          }))
+        });
+      }
+    })]
+  });
+}
+LoggedIn.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  onBindWallet: _propTypes.default.func,
+  dark: _propTypes.default.bool,
+  isBlocklet: _propTypes.default.bool,
+  locale: _propTypes.default.string,
+  size: _propTypes.default.number
+};
+LoggedIn.defaultProps = {
+  dark: false,
+  isBlocklet: true,
+  onBindWallet: _noop.default,
+  locale: 'en',
+  size: 24
+};
+function SessionMenuItem(_ref3) {
+  let {
+      icon,
+      title
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
+    sx: _objectSpread({
+      p: 0.5
+    }, rest === null || rest === void 0 ? void 0 : rest.sx),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      sx: {
+        display: 'flex',
+        gap: 1,
+        alignItems: 'center',
+        borderRadius: 2,
+        '&:hover': {
+          backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important")
+        },
+        py: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: icon,
+        fontSize: 24
+      }), title]
+    })
+  }));
+}
+SessionMenuItem.propTypes = {
+  icon: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired
+};