@arcblock/ux 2.5.59 → 2.5.60

package/lib/Blocklet/blocklet.js

@@ -8,8 +8,8 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Img = _interopRequireDefault(require("../Img"));
 var _Theme = require("../Theme");

package/lib/BlockletNFT/index.js

@@ -10,7 +10,7 @@ var _Portal = _interopRequireDefault(require("@mui/material/Portal"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Img = _interopRequireDefault(require("../Img"));

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

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FederatedLoginDetecter;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _material = require("@mui/material");
+var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+var _userPopper = _interopRequireDefault(require("./user-popper"));
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Address = _interopRequireDefault(require("../Address"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Toast = _interopRequireDefault(require("../Toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const translations = {
+  en: {
+    useToConnect(_ref) {
+      let {
+        master,
+        member
+      } = _ref;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: ["Use ", master, " account to connect ", member]
+      });
+    },
+    connect: 'Connect Account',
+    loginFederatedFailed: 'Login federated account failed'
+  },
+  zh: {
+    useToConnect(_ref2) {
+      let {
+        master,
+        member
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: ["\u4F7F\u7528 ", master, " \u8D26\u53F7\u8FDE\u63A5 ", member]
+      });
+    },
+    connect: '连接账号',
+    loginFederatedFailed: '登录统一登录账号失败'
+  }
+};
+function FederatedLoginDetecter(_ref3) {
+  var _session$federatedMas, _session$federatedMas2, _userInfo$role, _userInfo$role2;
+  let {
+    session,
+    anchorEl,
+    dark,
+    locale: _locale
+  } = _ref3;
+  const [federatedLoginOpen, setFederatedLoginOpen] = (0, _react.useState)(true);
+  const siteInfo = (_session$federatedMas = session.federatedMaster) === null || _session$federatedMas === void 0 ? void 0 : _session$federatedMas.site;
+  const userInfo = (_session$federatedMas2 = session.federatedMaster) === null || _session$federatedMas2 === void 0 ? void 0 : _session$federatedMas2.user;
+  const localeList = Object.keys(translations);
+  const locale = localeList.includes(_locale) ? _locale : localeList[0];
+  const onLoginFederated = (0, _react.useCallback)(() => {
+    session === null || session === void 0 ? void 0 : session.loginFederated(err => {
+      if (err) {
+        _Toast.default.error(err || translations[_locale].loginFederatedFailed);
+      } else {
+        setFederatedLoginOpen(false);
+      }
+    }, {
+      mode: userInfo ? 'auto' : 'manual'
+    });
+  }, [session, userInfo, _locale]);
+  return siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
+    open: federatedLoginOpen,
+    anchorEl: anchorEl,
+    dark: dark,
+    onClose: () => setFederatedLoginOpen(false),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      p: 2,
+      children: [siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "img",
+          mr: 2,
+          src: "".concat(siteInfo.appUrl).concat(siteInfo.appLogo),
+          alt: siteInfo.appName,
+          width: "30px",
+          height: "30px"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          children: translations[locale].useToConnect({
+            master: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              component: "a",
+              href: siteInfo.appUrl,
+              target: "_blank",
+              sx: {
+                textDecoration: 'none',
+                fontWeight: 'bold',
+                color: 'primary.main',
+                fontSize: '1.2em'
+              },
+              children: siteInfo.appName
+            }),
+            member: window.blocklet.appName
+          })
+        })]
+      }), siteInfo && userInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+        style: {
+          margin: '15px 0 10px 0'
+        }
+      }), userInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          variant: "circle",
+          did: userInfo.did,
+          src: userInfo.avatar,
+          size: 28,
+          shape: "circle"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          ml: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              fontSize: 18,
+              children: userInfo.fullName
+            }), ((_userInfo$role = userInfo.role) === null || _userInfo$role === void 0 ? void 0 : _userInfo$role.toUpperCase()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+              label: (_userInfo$role2 = userInfo.role) === null || _userInfo$role2 === void 0 ? void 0 : _userInfo$role2.toUpperCase(),
+              size: "small",
+              variant: "outlined",
+              sx: {
+                height: 'auto',
+                marginRight: 0,
+                fontSize: 12
+              },
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _ShieldCheck.default,
+                style: {
+                  fontSize: '14px'
+                }
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+            responsive: false,
+            children: userInfo.did
+          })]
+        })]
+      }), siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        justifyContent: "center",
+        mt: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          size: "small",
+          onClick: onLoginFederated,
+          children: translations[locale].connect
+        })
+      })]
+    })
+  });
+}
+FederatedLoginDetecter.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  anchorEl: _propTypes.default.instanceOf(Element),
+  dark: _propTypes.default.bool,
+  locale: _propTypes.default.string
+};
+FederatedLoginDetecter.defaultProps = {
+  dark: false,
+  anchorEl: null,
+  locale: 'en'
+};

package/lib/SessionManager/index.js

@@ -16,19 +16,16 @@ var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonO
 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"];
 /* 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) { 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; }
@@ -94,12 +91,13 @@ function SessionManager(_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)();
+  } = session.useOAuth();
   const [userOpen, setUserOpen] = (0, _react.useState)(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
@@ -109,9 +107,10 @@ function SessionManager(_ref) {
     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';
@@ -134,36 +133,46 @@ function SessionManager(_ref) {
     });
   }).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);
@@ -247,159 +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,
@@ -465,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;