@arcblock/ux 2.5.58 → 2.5.60

package/lib/SessionManager/index.js

@@ -4,62 +4,35 @@ 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 _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
-
 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 _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
-
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-
 var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
-
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
-
-var _OAuth = require("@arcblock/did-connect/lib/OAuth");
-
-var _User = require("@arcblock/did-connect/lib/User");
-
-var _Theme = require("../Theme");
-
 var _Avatar = _interopRequireDefault(require("../Avatar"));
-
 var _Address = _interopRequireDefault(require("../Address"));
-
+var _federatedLoginDetecter = _interopRequireDefault(require("./federated-login-detecter"));
+var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject;
-
 const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size"],
-      _excluded2 = ["svgIcon"];
-
+  _excluded2 = ["svgIcon"];
+/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/jsx-no-bind */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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; }
-
 const translations = {
   en: {
     switchDid: 'Switch DID',
@@ -85,144 +58,139 @@ const translations = {
     thirdParty: '第三方登录'
   }
 };
-
 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, _session$user3, _session$user4, _session$user5;
-
   let {
-    session,
-    locale,
-    showText,
-    showRole,
-    switchDid,
-    switchProfile,
-    switchPassport,
-    disableLogout,
-    onLogin,
-    onLogout,
-    onSwitchDid,
-    onSwitchProfile,
-    onSwitchPassport,
-    onBindWallet,
-    menu,
-    menuRender,
-    dark,
-    size
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+      session,
+      locale,
+      showText,
+      showRole,
+      switchDid,
+      switchProfile,
+      switchPassport,
+      disableLogout,
+      onLogin,
+      onLogout,
+      onSwitchDid,
+      onSwitchProfile,
+      onSwitchPassport,
+      onBindWallet,
+      menu,
+      menuRender,
+      dark,
+      size
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const translation = translations[locale] || translations.en;
   const userAnchorRef = (0, _react.useRef)(null);
+  // eslint-disable-next-line react/prop-types
   const {
     logoutOAuth,
     bindOAuth,
     configs: oauthConfigs,
     switchOAuthPassport
-  } = (0, _OAuth.useOAuth)();
-  const [userOpen, setUserOpen] = (0, _react.useState)(false); // base64 img maybe have some blank char, need encodeURIComponent to transform it
+  } = session.useOAuth();
+  const [userOpen, setUserOpen] = (0, _react.useState)(false);
 
+  // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = (_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
-  } = (0, _User.useDid)({
+  } = session.useDid({
     session
   });
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
   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 oauthConfigList = Object.entries(oauthConfigs).map(_ref2 => {
     let [key, value] = _ref2;
     return _objectSpread(_objectSpread({}, value), {}, {
       provider: key
     });
   }).filter(item => item.enabled);
-
   if (!session.user) {
-    return showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
-      sx: [{
-        borderRadius: '100vw'
-      }, dark && {
-        color: '#fff',
-        borderColor: '#fff'
-      }],
-      variant: "outlined",
-      onClick: _onLogin,
-      "aria-label": "login button"
-    }, rest), {}, {
-      "data-cy": "sessionManager-login",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          lineHeight: '25px'
-        },
-        children: translation.connect
+    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,
+        "aria-label": "login button"
+      }, rest), {}, {
+        "data-cy": "sessionManager-login",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            lineHeight: '25px'
+          },
+          children: translation.connect
+        })]
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
+        ref: userAnchorRef
+      }, rest), {}, {
+        onClick: _onLogin,
+        "data-cy": "sessionManager-login",
+        size: "medium",
+        children: /*#__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
       })]
-    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
-      onClick: _onLogin,
-      "data-cy": "sessionManager-login",
-      size: "medium",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
-        style: {
-          width: size,
-          height: size,
-          color: dark ? '#fff' : ''
-        }
-      })
-    }));
+    });
   }
-
   function onToggleUser() {
     setUserOpen(prevOpen => !prevOpen);
   }
-
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-
     setUserOpen(false);
   }
-
   function _onLogin() {
     session.login(onLogin);
   }
-
   function _onLogout() {
     session.logout(function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       logoutOAuth({
         session
       }, ...args).then(() => {
@@ -234,26 +202,22 @@ function SessionManager(_ref) {
       });
     });
   }
-
   function _onSwitchDid() {
     session.switchDid(function () {
       setUserOpen(false);
       onSwitchDid(...arguments);
     });
   }
-
   function _onSwitchProfile() {
     session.switchProfile(function () {
       setUserOpen(false);
       onSwitchProfile(...arguments);
     });
   }
-
   function _onSwitchPassport() {
     const {
       user
     } = session;
-
     if (isRawWalletAccount) {
       setUserOpen(false);
       session.switchPassport(function () {
@@ -264,10 +228,8 @@ function SessionManager(_ref) {
       switchOAuthPassport(user);
     }
   }
-
   function _onBindWallet() {
     setUserOpen(false);
-
     if (isRawWalletAccount) {
       bindOAuth();
     } else {
@@ -277,7 +239,6 @@ function SessionManager(_ref) {
       });
     }
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
       ref: userAnchorRef,
@@ -295,161 +256,131 @@ function SessionManager(_ref) {
         size: size,
         shape: "circle"
       })
-    })), userAnchorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
       open: userOpen,
-      disablePortal: true,
+      onClose: onCloseUser,
       anchorEl: userAnchorRef.current,
-      placement: "bottom-end",
-      $dark: dark,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
-        sx: [theme => ({
-          borderColor: '#F0F0F0',
-          boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
-          borderRadius: theme.spacing(2),
-          overflow: 'hidden',
-          maxWidth: 'calc(100vw - 10px)',
-          '& .MuiChip-root .MuiChip-icon': {
-            color: theme.palette.success.main
-          }
-        }), dark && {
-          backgroundColor: '#27282c',
-          color: '#fff',
-          border: 0,
-          '& .MuiChip-root': {
-            borderColor: '#aaa'
-          },
-          '& .MuiListItem-root, & .MuiChip-label': {
-            color: '#aaa'
-          },
-          '& .MuiListItem-root:hover': {
-            backgroundColor: '#363434'
-          }
-        }],
-        variant: "outlined",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-          onClickAway: onCloseUser,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
-            sx: {
-              p: 0
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "session-manager-user",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: "session-manager-user-name",
-                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",
-                children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "session-manager-id-item",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                    responsive: false,
-                    children: walletDid
-                  })
-                }), (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/",
-              target: "_blank",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                component: _OpenIn.default,
-                className: "session-manager-menu-icon"
-              }), translation.openInWallet]
-            }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-              className: "session-manager-menu-item",
-              onClick: _onSwitchDid,
-              "data-cy": "sessionManager-switch-trigger",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                component: _Switch.default,
-                className: "session-manager-menu-icon"
-              }), translation.switchDid]
-            }), !!switchProfile && hasBindWallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-              className: "session-manager-menu-item",
-              onClick: _onSwitchProfile,
-              "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,
-              "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 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-              className: "session-manager-menu-item",
-              onClick: _onBindWallet,
-              "data-cy": "sessionManager-bind-trigger",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                component: _Link.default,
-                className: "session-manager-menu-icon"
-              }), isRawWalletAccount ? "".concat(translation.bind).concat(translation.thirdParty) : "".concat(translation.bind, "DID Wallet")]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-              className: "session-manager-menu-item",
-              onClick: _onLogout,
-              disabled: disableLogout,
-              "data-cy": "sessionManager-logout-trigger",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                component: _Disconnect.default,
-                className: "session-manager-menu-icon"
-              }), translation.disconnect]
+      dark: dark,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
+        sx: {
+          p: 0
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "session-manager-user",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "session-manager-user-name",
+            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",
+            children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "session-manager-id-item",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                responsive: false,
+                children: walletDid
+              })
+            }), (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/",
+          target: "_blank",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+            component: _OpenIn.default,
+            className: "session-manager-menu-icon"
+          }), translation.openInWallet]
+        }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onSwitchDid,
+          "data-cy": "sessionManager-switch-trigger",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+            component: _Switch.default,
+            className: "session-manager-menu-icon"
+          }), translation.switchDid]
+        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onSwitchProfile,
+          "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,
+          "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,
+          "data-cy": "sessionManager-bind-trigger",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+            component: _Link.default,
+            className: "session-manager-menu-icon"
+          }), isRawWalletAccount ? "".concat(translation.bind).concat(translation.thirdParty) : "".concat(translation.bind, "DID Wallet")]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onLogout,
+          disabled: disableLogout,
+          "data-cy": "sessionManager-logout-trigger",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+            component: _Disconnect.default,
+            className: "session-manager-menu-icon"
+          }), translation.disconnect]
+        })]
       })
     })]
   });
 }
-
 SessionManager.propTypes = {
   session: _propTypes.default.shape({
+    federatedMaster: _propTypes.default.object,
+    provider: _propTypes.default.oneOf(['wallet', 'federated', 'auth0']),
     user: _propTypes.default.shape({
       did: _propTypes.default.string.isRequired,
       role: _propTypes.default.string.isRequired,
@@ -495,9 +426,7 @@ SessionManager.propTypes = {
   dark: _propTypes.default.bool,
   size: _propTypes.default.number
 };
-
 const noop = () => {};
-
 SessionManager.defaultProps = {
   locale: 'en',
   showText: false,
@@ -517,16 +446,5 @@ SessionManager.defaultProps = {
   dark: false,
   size: 24
 };
-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"])), _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.zIndex.tooltip;
-}, _ref4 => {
-  let {
-    $dark
-  } = _ref4;
-  return $dark ? '#aaa' : '#222';
-});
 var _default = SessionManager;
 exports.default = _default;