@arcblock/ux 2.7.14 → 2.7.16

package/lib/SessionManager/index.js

@@ -7,27 +7,25 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
-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 _ConnectWithoutContact = _interopRequireDefault(require("@mui/icons-material/ConnectWithoutContact"));
-var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
 var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
-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 _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _ahooks = require("ahooks");
 var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _Address = _interopRequireDefault(require("../Address"));
 var _Util = require("../Util");
 var _federatedLoginDetecter = _interopRequireDefault(require("./federated-login-detecter"));
 var _userPopper = _interopRequireDefault(require("./user-popper"));
+var _userInfo = _interopRequireDefault(require("./user-info"));
+var _util = require("../Locale/util");
+var _manageAccounts = _interopRequireDefault(require("./manage-accounts"));
+var _manageBlocklet = _interopRequireDefault(require("./manage-blocklet"));
+var _translation = require("./translation");
+var _utils = require("./utils");
+var _useAccounts = _interopRequireDefault(require("./use-accounts"));
 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"],
-  _excluded2 = ["svgIcon"];
-/* eslint-disable react/no-array-index-key  */
+const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size"];
+/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
 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; }
@@ -37,43 +35,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with'
-  },
-  zh: {
-    switchDid: '切换账户',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    connectedWith: '连接至'
-  }
-};
-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, _window$blocklet, _window$blocklet$sett, _window$blocklet$sett2, _session$user3, _session$user4, _session$user5;
+  var _session$user, _session$user$avatar;
   let {
       session,
       locale,
@@ -95,33 +58,30 @@ function SessionManager(_ref) {
       size
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const translation = translations[locale] || translations.en;
+  const latestSession = (0, _ahooks.useLatest)(session);
+  const {
+    connectAccount
+  } = (0, _useAccounts.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);
-  // eslint-disable-next-line react/prop-types
   const {
     logoutOAuth,
-    bindOAuth,
-    configs: oauthConfigs,
     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 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
-  } = session.useDid({
-    session
-  });
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
-  const connectedAccounts = getConnectedAccounts(session.user);
-  const federatedAccount = connectedAccounts.find(item => item.provider === 'federated');
+  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]);
+
+  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -133,18 +93,57 @@ function SessionManager(_ref) {
     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);
-  const isFirstLoading = (0, _react.useMemo)(() => {
-    // eslint-disable-next-line react/prop-types
-    return (session === null || session === void 0 ? void 0 : session.initialized) === false && (session === null || session === void 0 ? void 0 : session.loading) === true;
-    // eslint-disable-next-line react/prop-types
-  }, [session === null || session === void 0 ? void 0 : session.initialized, session === null || session === void 0 ? void 0 : session.loading]);
-  const masterSiteInfo = (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : (_window$blocklet$sett = _window$blocklet.settings) === null || _window$blocklet$sett === void 0 ? void 0 : (_window$blocklet$sett2 = _window$blocklet$sett.federated) === null || _window$blocklet$sett2 === void 0 ? void 0 : _window$blocklet$sett2.master;
+  const _connectAccount = (0, _ahooks.useMemoizedFn)(async () => {
+    var _latestSession$curren, _window, _blocklet$settings, _blocklet$settings$fe;
+    // 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;
+    if (!blocklet) {
+      return;
+    }
+    const currentApp = {
+      appId: blocklet.appId,
+      appPid: blocklet.appPid,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      provider: 'wallet'
+    };
+    const federatedMaster = (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : (_blocklet$settings$fe = _blocklet$settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.master;
+    const masterApp = (0, _isEmpty.default)(federatedMaster) ? null : {
+      appId: federatedMaster.appId,
+      appName: federatedMaster.appName,
+      appDescription: federatedMaster.appDescription,
+      appLogo: federatedMaster.appLogo,
+      appPid: federatedMaster.appPid,
+      appUrl: federatedMaster.appUrl,
+      version: federatedMaster.version,
+      provider: 'federated'
+    };
+    const loginAccount = _objectSpread({
+      did: latestSession.current.user.did,
+      avatar: latestSession.current.user.avatar,
+      provider: latestSession.current.provider
+    }, latestSession.current.provider === 'federated' ? masterApp : currentApp);
+    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({
@@ -165,7 +164,7 @@ function SessionManager(_ref) {
           style: {
             lineHeight: '25px'
           },
-          children: translation.connect
+          children: t('connect')
         })]
       })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
         ref: userAnchorRef
@@ -206,15 +205,21 @@ function SessionManager(_ref) {
   function onToggleUser() {
     setUserOpen(prevOpen => !prevOpen);
   }
+  function close() {
+    setUserOpen(false);
+  }
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-    setUserOpen(false);
+    close();
   }
   function _onLogin() {
     if (!isFirstLoading) {
-      session.login(onLogin);
+      session.login(function () {
+        _connectAccount();
+        onLogin(...arguments);
+      });
     }
   }
   function _onLogout() {
@@ -230,19 +235,18 @@ function SessionManager(_ref) {
       }).catch(err => {
         console.error(err);
       }).finally(() => {
-        setUserOpen(false);
+        close();
       });
     });
   }
-  function _onSwitchDid() {
-    session.switchDid(function () {
-      setUserOpen(false);
-      onSwitchDid(...arguments);
-    });
-  }
+  /**
+   * @name 切换账户
+   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
+   */
+
   function _onSwitchProfile() {
     session.switchProfile(function () {
-      setUserOpen(false);
+      close();
       onSwitchProfile(...arguments);
     });
   }
@@ -254,25 +258,13 @@ function SessionManager(_ref) {
     if (!isRawWalletAccount && provider !== 'federated') {
       switchOAuthPassport(user);
     } else {
-      setUserOpen(false);
+      close();
       session.switchPassport(function () {
-        setUserOpen(false);
+        close();
         onSwitchPassport(...arguments);
       });
     }
   }
-  function _onBindWallet() {
-    setUserOpen(false);
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet(function () {
-        setUserOpen(false);
-        onBindWallet(...arguments);
-      });
-    } else {
-      bindOAuth();
-    }
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
       ref: userAnchorRef,
@@ -301,138 +293,34 @@ function SessionManager(_ref) {
         sx: {
           p: 0
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "session-manager-user",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "session-manager-user-name",
-            role: "button",
-            "aria-label": "User info panel",
-            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",
-            "aria-label": "User DID list",
-            children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: walletDid
-              })
-            }), federatedAccount && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "session-manager-id-item",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: federatedAccount.did
-              })
-            }), (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
-              })
-            })]
-          })]
-        }), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-          className: "session-manager-menu-item",
-          "data-cy": "sessionManager-connectWithFederated",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-              component: _ConnectWithoutContact.default,
-              className: "session-manager-menu-icon"
-            }), translation.connectedWith, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-              ml: 1,
-              href: masterSiteInfo.appUrl,
-              underline: "hover",
-              target: "_blank",
-              title: masterSiteInfo.appName,
-              "aria-label": "Open federated master site url",
-              children: masterSiteInfo.appName
-            })]
-          })
-        }), 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/",
-          "aria-label": translation.openInWallet,
-          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,
-          "aria-label": translation.switchDid,
-          "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,
-          "aria-label": translation.switchProfile,
-          "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,
-          "aria-label": translation.switchPassport,
-          "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,
-          "aria-label": !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty),
-          "data-cy": "sessionManager-bind-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _Link.default,
-            className: "session-manager-menu-icon"
-          }), !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.default, {
+          session: session,
+          size: size,
+          locale: locale,
+          onEditUser: () => {
+            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
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageBlocklet.default, {
+          menu: menu,
+          menuRender: menuRender,
+          locale: locale
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onLogout,
           disabled: disableLogout,
@@ -441,7 +329,7 @@ function SessionManager(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
             component: _Disconnect.default,
             className: "session-manager-menu-icon"
-          }), translation.disconnect]
+          }), t('disconnect')]
         })]
       })
     })]

package/lib/SessionManager/manage-accounts.js

@@ -0,0 +1,155 @@
+"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 _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 _useAccounts = _interopRequireDefault(require("./use-accounts"));
+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
+  } = _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 {
+    accounts,
+    setAccounts
+  } = (0, _useAccounts.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,
+      providerMode: 'paramsFirst'
+    });
+  });
+  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) {
+        const findIndex = accounts.findIndex(item => item.did === account.did);
+        if (findIndex >= 0) {
+          accounts.splice(findIndex, 1);
+        }
+        setAccounts(accounts);
+        update();
+        done();
+      }
+    });
+  });
+  const onAdd = (0, _ahooks.useMemoizedFn)(app => {
+    close();
+    session.switchDid(function () {
+      connectAccount();
+      update();
+      onSwitchDid(...arguments);
+    }, {
+      provider: app.provider,
+      providerMode: 'paramsFirst'
+    });
+  });
+  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, {
+      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('manageAccounts')]
+      }),
+      children: [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 && session.provider !== 'federated' && /*#__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'))]
+      })]
+    }), confirmHolder]
+  });
+}