@arcblock/ux 2.5.12 → 2.5.13

package/lib/SessionManager/index.js

@@ -23,10 +23,14 @@ 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 _Theme = require("../Theme");
 
 var _Avatar = _interopRequireDefault(require("../Avatar"));
@@ -37,7 +41,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "menu", "menuRender", "dark", "size"],
+const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size"],
       _excluded2 = ["svgIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,9 +76,19 @@ const messages = {
     openInWallet: 'Open DID Wallet'
   }
 };
+const translations = {
+  en: {
+    alreadyBindOAuth: 'Already bind OAuth',
+    bind: 'Bind '
+  },
+  zh: {
+    alreadyBindOAuth: '已绑定 OAuth 账号',
+    bind: '绑定'
+  }
+};
 
 function SessionManager(_ref) {
-  var _session$user, _session$user$avatar, _session$user3, _session$user4;
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5, _session$user6, _session$user7, _session$user8, _session$user9;
 
   let {
     session,
@@ -90,6 +104,7 @@ function SessionManager(_ref) {
     onSwitchDid,
     onSwitchProfile,
     onSwitchPassport,
+    onBindWallet,
     menu,
     menuRender,
     dark,
@@ -98,6 +113,11 @@ function SessionManager(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const userAnchorRef = (0, _react.useRef)(null);
+  const {
+    logoutOAuth,
+    bindOAuth,
+    configs: oauthConfigs
+  } = (0, _OAuth.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(' '));
@@ -107,6 +127,14 @@ 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)();
+  const hasBindOAuth = ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.source) === 'wallet' && ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.derivedAccount);
+  const isDerivedAccount = ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.source) === 'derived';
+  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({
@@ -159,8 +187,14 @@ function SessionManager(_ref) {
 
   function _onLogout() {
     session.logout(function () {
-      setUserOpen(false);
-      onLogout(...arguments);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      logoutOAuth().then(() => {
+        setUserOpen(false);
+        onLogout(...args);
+      });
     });
   }
 
@@ -186,6 +220,19 @@ function SessionManager(_ref) {
     });
   }
 
+  function _onBindWallet() {
+    setUserOpen(false);
+
+    if (session.user.source === 'derived') {
+      session.bindWallet(function () {
+        setUserOpen(false);
+        onBindWallet(...arguments);
+      });
+    } else {
+      bindOAuth();
+    }
+  }
+
   const message = messages[locale] || messages.en;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
@@ -247,8 +294,8 @@ function SessionManager(_ref) {
                 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()),
+                }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user6 = session.user) === null || _session$user6 === void 0 ? void 0 : _session$user6.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                  label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user7 = session.user) === null || _session$user7 === void 0 ? void 0 : _session$user7.role.toUpperCase()),
                   size: "small",
                   variant: "outlined",
                   sx: {
@@ -262,7 +309,7 @@ function SessionManager(_ref) {
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
                 responsive: false,
-                children: session.user.did
+                children: isDerivedAccount ? (_session$user8 = session.user) === null || _session$user8 === void 0 ? void 0 : _session$user8.email : session.user.did
               })]
             }), Array.isArray(menu) && menu.map((menuItem, index) => {
               const {
@@ -320,6 +367,21 @@ function SessionManager(_ref) {
                 component: _VpnKeyOutlined.default,
                 className: "session-manager-menu-icon"
               }), message.switchPassport]
+            }), oauthConfigList.length > 0 && !hasBindOAuth && /*#__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"
+              }), ((_session$user9 = session.user) === null || _session$user9 === void 0 ? void 0 : _session$user9.source) === 'derived' ? "".concat(translations[locale].bind, "DID Wallet") : "".concat(translations[locale].bind, "OAuth")]
+            }), oauthConfigList.length > 0 && hasBindOAuth && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              className: "session-manager-menu-item",
+              disabled: true,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _Link.default,
+                className: "session-manager-menu-icon"
+              }), translations[locale].alreadyBindOAuth]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onLogout,
@@ -343,17 +405,22 @@ SessionManager.propTypes = {
       did: _propTypes.default.string.isRequired,
       role: _propTypes.default.string.isRequired,
       fullName: _propTypes.default.string,
+      email: _propTypes.default.string,
       avatar: _propTypes.default.string,
       passports: _propTypes.default.arrayOf(_propTypes.default.shape({
         name: _propTypes.default.string.isRequired,
         title: _propTypes.default.string.isRequired
-      }))
+      })),
+      source: _propTypes.default.oneOf(['derived', 'wallet', undefined]),
+      derivedAccount: _propTypes.default.object,
+      connectedAccounts: _propTypes.default.array
     }),
     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
+    switchPassport: _propTypes.default.func.isRequired,
+    bindWallet: _propTypes.default.func.isRequired
   }).isRequired,
   locale: _propTypes.default.string,
   showText: _propTypes.default.bool,
@@ -367,6 +434,7 @@ SessionManager.propTypes = {
   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,
@@ -390,18 +458,19 @@ SessionManager.defaultProps = {
   onSwitchDid: noop,
   onSwitchProfile: noop,
   onSwitchPassport: noop,
+  onBindWallet: noop,
   dark: false,
   size: 24
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\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-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref2 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\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-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
-  } = _ref2;
+  } = _ref3;
   return theme.zIndex.tooltip;
-}, _ref3 => {
+}, _ref4 => {
   let {
     $dark
-  } = _ref3;
+  } = _ref4;
   return $dark ? '#aaa' : '#222';
 });
 var _default = SessionManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.12",
+  "version": "2.5.13",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "b125a20f22ff5b3e57ebb117fb0cbe4120ceb44f",
+  "gitHead": "400e7898ea61963ddcdc17db55e815a321b61566",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.12",
-    "@arcblock/react-hooks": "^2.5.12",
+    "@arcblock/icons": "^2.5.13",
+    "@arcblock/react-hooks": "^2.5.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/{index.js → index.jsx}

@@ -9,10 +9,12 @@ import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import SwitchDidIcon from '@arcblock/icons/lib/Switch';
 import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
+import BindWalletIcon from '@mui/icons-material/Link';
 import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { styled } from '../Theme';
+import { useOAuth } from '@arcblock/did-connect/lib/OAuth';
 
+import { styled } from '../Theme';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
 
@@ -34,6 +36,16 @@ const messages = {
     openInWallet: 'Open DID Wallet',
   },
 };
+const translations = {
+  en: {
+    alreadyBindOAuth: 'Already bind OAuth',
+    bind: 'Bind ',
+  },
+  zh: {
+    alreadyBindOAuth: '已绑定 OAuth 账号',
+    bind: '绑定',
+  },
+};
 
 function SessionManager({
   session,
@@ -49,6 +61,7 @@ function SessionManager({
   onSwitchDid,
   onSwitchProfile,
   onSwitchPassport,
+  onBindWallet,
   menu,
   menuRender,
   dark,
@@ -56,6 +69,7 @@ function SessionManager({
   ...rest
 }) {
   const userAnchorRef = useRef(null);
+  const { logoutOAuth, bindOAuth, configs: oauthConfigs } = useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
@@ -66,6 +80,15 @@ function SessionManager({
   );
   const browser = useBrowser();
 
+  const hasBindOAuth = session.user?.source === 'wallet' && session.user?.derivedAccount;
+  const isDerivedAccount = session.user?.source === 'derived';
+
+  const oauthConfigList = Object.entries(oauthConfigs)
+    .map(([key, value]) => {
+      return { ...value, provider: key };
+    })
+    .filter((item) => item.enabled);
+
   if (!session.user) {
     return showText ? (
       <Button
@@ -101,8 +124,10 @@ function SessionManager({
   }
   function _onLogout() {
     session.logout((...args) => {
-      setUserOpen(false);
-      onLogout(...args);
+      logoutOAuth().then(() => {
+        setUserOpen(false);
+        onLogout(...args);
+      });
     });
   }
   function _onSwitchDid() {
@@ -125,6 +150,18 @@ function SessionManager({
     });
   }
 
+  function _onBindWallet() {
+    setUserOpen(false);
+    if (session.user.source === 'derived') {
+      session.bindWallet((...args) => {
+        setUserOpen(false);
+        onBindWallet(...args);
+      });
+    } else {
+      bindOAuth();
+    }
+  }
+
   const message = messages[locale] || messages.en;
 
   return (
@@ -188,7 +225,9 @@ function SessionManager({
                       />
                     )}
                   </div>
-                  <DidAddress responsive={false}>{session.user.did}</DidAddress>
+                  <DidAddress responsive={false}>
+                    {isDerivedAccount ? session.user?.email : session.user.did}
+                  </DidAddress>
                 </div>
                 {Array.isArray(menu) &&
                   menu.map((menuItem, index) => {
@@ -253,6 +292,24 @@ function SessionManager({
                     {message.switchPassport}
                   </MenuItem>
                 )}
+                {oauthConfigList.length > 0 && !hasBindOAuth && (
+                  <MenuItem
+                    className="session-manager-menu-item"
+                    onClick={_onBindWallet}
+                    data-cy="sessionManager-bind-trigger">
+                    <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
+                    {session.user?.source === 'derived'
+                      ? `${translations[locale].bind}DID Wallet`
+                      : `${translations[locale].bind}OAuth`}
+                  </MenuItem>
+                )}
+                {oauthConfigList.length > 0 && hasBindOAuth && (
+                  <MenuItem className="session-manager-menu-item" disabled>
+                    <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
+                    {translations[locale].alreadyBindOAuth}
+                  </MenuItem>
+                )}
+
                 <MenuItem
                   className="session-manager-menu-item"
                   onClick={_onLogout}
@@ -276,6 +333,7 @@ SessionManager.propTypes = {
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
       fullName: PropTypes.string,
+      email: PropTypes.string,
       avatar: PropTypes.string,
       passports: PropTypes.arrayOf(
         PropTypes.shape({
@@ -283,12 +341,16 @@ SessionManager.propTypes = {
           title: PropTypes.string.isRequired,
         })
       ),
+      source: PropTypes.oneOf(['derived', 'wallet', undefined]),
+      derivedAccount: PropTypes.object,
+      connectedAccounts: PropTypes.array,
     }),
     login: PropTypes.func.isRequired,
     logout: PropTypes.func.isRequired,
     switchDid: PropTypes.func.isRequired,
     switchProfile: PropTypes.func.isRequired,
     switchPassport: PropTypes.func.isRequired,
+    bindWallet: PropTypes.func.isRequired,
   }).isRequired,
   locale: PropTypes.string,
   showText: PropTypes.bool,
@@ -302,6 +364,7 @@ SessionManager.propTypes = {
   onSwitchDid: PropTypes.func,
   onSwitchProfile: PropTypes.func,
   onSwitchPassport: PropTypes.func,
+  onBindWallet: PropTypes.func,
   menu: PropTypes.array,
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
@@ -325,6 +388,7 @@ SessionManager.defaultProps = {
   onSwitchDid: noop,
   onSwitchProfile: noop,
   onSwitchPassport: noop,
+  onBindWallet: noop,
   dark: false,
   size: 24,
 };