@arcblock/ux 2.8.15 → 2.8.17

package/es/SessionManager/{account-item.js → components/account-item.js}

@@ -9,11 +9,11 @@ import ApiIcon from '@iconify-icons/mdi/api';
 import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import Avatar from '../Avatar';
-import DID from '../DID';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
-import { getFederatedEnabled } from '../Util/federated';
+import Avatar from '../../Avatar';
+import DID from '../../DID';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import { getFederatedEnabled } from '../../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/SessionManager/{add-account-item.js → components/add-account-item.js}

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { MenuItem, Typography } from '@mui/material';
 import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
-import { getApps } from '../Util/federated';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import { getApps } from '../../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AddAccountItem({

package/es/SessionManager/{federated-login-detecter.js → components/federated-login-detecter.js}

@@ -7,11 +7,11 @@ import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import { Icon } from '@iconify/react';
 import { useCreation, useReactive } from 'ahooks';
 import UserPopper from './user-popper';
-import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import Button from '../Button';
-import Toast from '../Toast';
-import { getUserAvatar } from '../Util';
+import DidAvatar from '../../Avatar';
+import DidAddress from '../../Address';
+import Button from '../../Button';
+import Toast from '../../Toast';
+import { getUserAvatar } from '../../Util';
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/SessionManager/{manage-accounts.js → components/manage-accounts.js}

@@ -9,10 +9,10 @@ import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import noop from 'lodash/noop';
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
-import { translations } from './translation';
-import { translate } from '../Locale/util';
-import { useConfirm } from '../Dialog/confirm';
-import { getSourceProvider } from './utils';
+import { translations } from '../libs/translation';
+import { translate } from '../../Locale/util';
+import { useConfirm } from '../../Dialog/confirm';
+import { getSourceProvider } from '../libs/utils';
 import AddAccountItem from './add-account-item';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -30,7 +30,8 @@ export default function ManageAccounts({
   expanded,
   onExpand,
   accounts,
-  deleteAccount
+  deleteAccount,
+  hideLogout
 }) {
   const {
     bindOAuth,
@@ -167,7 +168,7 @@ export default function ManageAccounts({
           height: 24,
           className: "session-manager-menu-icon"
         }), !isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
+      }), !hideLogout ? /*#__PURE__*/_jsxs(MenuItem, {
         className: "session-manager-menu-item",
         onClick: _onLogout,
         disabled: disableLogout,
@@ -188,7 +189,7 @@ export default function ManageAccounts({
           component: DisconnectIcon,
           className: "session-manager-menu-icon"
         }), t('disconnect')]
-      })]
+      }) : null]
     }), confirmHolder]
   });
 }
@@ -205,12 +206,14 @@ ManageAccounts.propTypes = {
   expanded: PropTypes.bool,
   onExpand: PropTypes.func,
   accounts: PropTypes.array.isRequired,
-  deleteAccount: PropTypes.func.isRequired
+  deleteAccount: PropTypes.func.isRequired,
+  hideLogout: PropTypes.bool
 };
 ManageAccounts.defaultProps = {
   locale: 'en',
   hasBindAccount: false,
   disableLogout: false,
   expanded: true,
-  onExpand: noop
+  onExpand: noop,
+  hideLogout: false
 };

package/es/SessionManager/{manage-blocklet.js → components/manage-blocklet.js}

@@ -5,8 +5,8 @@ import { Icon } from '@iconify/react';
 import AppsIcon from '@iconify-icons/mdi/apps';
 import { MenuItem, SvgIcon } from '@mui/material';
 import MenuAccordion from './menu-accordion';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/SessionManager/{menu-accordion.js → components/menu-accordion.js}

@@ -5,8 +5,8 @@ import { Icon } from '@iconify/react';
 import isEmpty from 'lodash/isEmpty';
 import isNil from 'lodash/isNil';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function isEmptyNode(node) {

package/es/SessionManager/components/responsive-popper.js

@@ -0,0 +1,24 @@
+import { useCreation, useSize } from 'ahooks';
+import UserPopper from './user-popper';
+import UserDrawer from './user-drawer';
+import { useTheme } from '../../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ResponsivePopper(props) {
+  const theme = useTheme();
+  const size = useSize(document.body);
+  const isMobile = useCreation(() => {
+    if (size?.width <= theme.breakpoints.values.sm) {
+      return true;
+    }
+    return false;
+  }, [theme, size]);
+  const WrapContainer = useCreation(() => {
+    if (isMobile) {
+      return UserDrawer;
+    }
+    return UserPopper;
+  }, [isMobile]);
+  return /*#__PURE__*/_jsx(WrapContainer, {
+    ...props
+  });
+}

package/es/SessionManager/components/user-drawer.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import { IconButton, Drawer } from '@mui/material';
+import CloseIcon from '@iconify-icons/mdi/close';
+import { Icon } from '@iconify/react';
+import noop from 'lodash/noop';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function UserDrawer({
+  children,
+  open,
+  onOpen,
+  onClose
+}) {
+  return /*#__PURE__*/_jsxs(Drawer, {
+    anchor: "right",
+    open: open,
+    onClose: onClose,
+    onOpen: onOpen,
+    sx: theme => ({
+      '& .MuiPaper-root': {
+        width: '100%'
+      },
+      '& .MuiChip-root .MuiChip-icon': {
+        color: theme.palette.success.main
+      },
+      '& .session-manager-menu-item': {
+        padding: '15px',
+        color: '#777',
+        fontSize: '16px',
+        '&:hover': {
+          backgroundColor: '#fbfbfb'
+        }
+      },
+      '& .session-manager-menu-icon': {
+        color: '#999',
+        marginRight: '8px'
+      }
+    }),
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      sx: {
+        cursor: 'pointer',
+        position: 'absolute',
+        right: '8px',
+        top: '8px',
+        zIndex: 1
+      },
+      onClick: onClose,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: CloseIcon,
+        width: 28,
+        height: 28
+      })
+    }), children]
+  });
+}
+UserDrawer.propTypes = {
+  children: PropTypes.any.isRequired,
+  open: PropTypes.bool.isRequired,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func
+};
+UserDrawer.defaultProps = {
+  onOpen: noop,
+  onClose: noop
+};

package/es/SessionManager/{user-info.js → components/user-info.js}

@@ -5,13 +5,13 @@ import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
 import { Icon } from '@iconify/react';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import DID from '../DID';
-import { getUserAvatar } from '../Util';
-import { t as translate } from '../Locale/util';
-import { translations } from './translation';
-import Typography from '../Typography';
+import DidAvatar from '../../Avatar';
+import DidAddress from '../../Address';
+import DID from '../../DID';
+import { getUserAvatar } from '../../Util';
+import { t as translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import Typography from '../../Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function UserInfo({

package/es/SessionManager/{user-popper.js → components/user-popper.js}

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
 import CloseIcon from '@iconify-icons/mdi/close';
 import { Icon } from '@iconify/react';
-import { styled } from '../Theme';
+import { styled } from '../../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,6 +30,9 @@ export default function UserPopper({
         maxHeight: 'calc(100vh - 80px)',
         '& .MuiChip-root .MuiChip-icon': {
           color: theme.palette.success.main
+        },
+        '& .MuiList-root': {
+          width: '320px'
         }
       }), dark && {
         backgroundColor: '#27282c',
@@ -91,9 +94,7 @@ const StyledPopper = styled(Popper)`
 }) => {
   return theme.zIndex.tooltip;
 }};
-  .MuiList-root {
-    width: 320px;
-  }
+
   .session-manager-menu-item {
     padding: 15px;
     color: #777;

package/es/SessionManager/index.js

@@ -9,15 +9,15 @@ import cloneDeep from 'lodash/cloneDeep';
 import { useLatest, useMemoizedFn } from 'ahooks';
 import DidAvatar from '../Avatar';
 import { getUserAvatar, sleep } from '../Util';
-import FederatedLoginDetecter from './federated-login-detecter';
-import UserPopper from './user-popper';
-import UserInfo from './user-info';
+import FederatedLoginDetecter from './components/federated-login-detecter';
+import UserInfo from './components/user-info';
+import ResponsivePopper from './components/responsive-popper';
 import { translate } from '../Locale/util';
-import ManageAccounts from './manage-accounts';
-import ManageBlocklet from './manage-blocklet';
-import { translations } from './translation';
-import { getConnectedAccounts, getSourceProvider } from './utils';
-import useConfig from './use-config';
+import ManageAccounts from './components/manage-accounts';
+import ManageBlocklet from './components/manage-blocklet';
+import { translations } from './libs/translation';
+import { getConnectedAccounts, getSourceProvider } from './libs/utils';
+import useConfig from './hooks/use-config';
 import { getCurrentApp, getFederatedApp } from '../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -252,7 +252,7 @@ function SessionManager({
         size: size,
         shape: "circle"
       })
-    }), /*#__PURE__*/_jsx(UserPopper, {
+    }), /*#__PURE__*/_jsx(ResponsivePopper, {
       open: userOpen,
       onClose: onCloseUser,
       anchorEl: userAnchorRef.current,

package/lib/SessionManager/{account-item.js → components/account-item.js}

@@ -15,11 +15,11 @@ var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
 var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
 var _trashCanOutline = _interopRequireDefault(require("@iconify-icons/mdi/trash-can-outline"));
 var _ahooks = require("ahooks");
-var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _DID = _interopRequireDefault(require("../DID"));
-var _util = require("../Locale/util");
-var _translation = require("./translation");
-var _federated = require("../Util/federated");
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _DID = _interopRequireDefault(require("../../DID"));
+var _util = require("../../Locale/util");
+var _translation = require("../libs/translation");
+var _federated = require("../../Util/federated");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function AccountItem(_ref) {

package/lib/SessionManager/{add-account-item.js → components/add-account-item.js}

@@ -9,9 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _iosAddCircleOutline = _interopRequireDefault(require("@iconify-icons/ion/ios-add-circle-outline"));
 var _ahooks = require("ahooks");
-var _util = require("../Locale/util");
-var _translation = require("./translation");
-var _federated = require("../Util/federated");
+var _util = require("../../Locale/util");
+var _translation = require("../libs/translation");
+var _federated = require("../../Util/federated");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function AddAccountItem(_ref) {

package/lib/SessionManager/{federated-login-detecter.js → components/federated-login-detecter.js}

@@ -13,11 +13,11 @@ var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-che
 var _react2 = require("@iconify/react");
 var _ahooks = require("ahooks");
 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 _Util = require("../Util");
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _Address = _interopRequireDefault(require("../../Address"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Toast = _interopRequireDefault(require("../../Toast"));
+var _Util = require("../../Util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const translations = {

package/lib/SessionManager/{manage-accounts.js → components/manage-accounts.js}

@@ -14,10 +14,10 @@ var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect
 var _noop = _interopRequireDefault(require("lodash/noop"));
 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 _translation = require("../libs/translation");
+var _util = require("../../Locale/util");
+var _confirm = require("../../Dialog/confirm");
+var _utils = require("../libs/utils");
 var _addAccountItem = _interopRequireDefault(require("./add-account-item"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,7 +40,8 @@ function ManageAccounts(_ref) {
     expanded,
     onExpand,
     accounts,
-    deleteAccount
+    deleteAccount,
+    hideLogout
   } = _ref;
   const {
     bindOAuth,
@@ -180,7 +181,7 @@ function ManageAccounts(_ref) {
           height: 24,
           className: "session-manager-menu-icon"
         }), !isRawWalletAccount ? "".concat(t('bind'), "DID Wallet") : "".concat(t('bind')).concat(t('thirdParty'))]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      }), !hideLogout ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
         className: "session-manager-menu-item",
         onClick: _onLogout,
         disabled: disableLogout,
@@ -201,7 +202,7 @@ function ManageAccounts(_ref) {
           component: _Disconnect.default,
           className: "session-manager-menu-icon"
         }), t('disconnect')]
-      })]
+      }) : null]
     }), confirmHolder]
   });
 }
@@ -218,12 +219,14 @@ ManageAccounts.propTypes = {
   expanded: _propTypes.default.bool,
   onExpand: _propTypes.default.func,
   accounts: _propTypes.default.array.isRequired,
-  deleteAccount: _propTypes.default.func.isRequired
+  deleteAccount: _propTypes.default.func.isRequired,
+  hideLogout: _propTypes.default.bool
 };
 ManageAccounts.defaultProps = {
   locale: 'en',
   hasBindAccount: false,
   disableLogout: false,
   expanded: true,
-  onExpand: _noop.default
+  onExpand: _noop.default,
+  hideLogout: false
 };

package/lib/SessionManager/{manage-blocklet.js → components/manage-blocklet.js}

@@ -10,8 +10,8 @@ var _react = require("@iconify/react");
 var _apps = _interopRequireDefault(require("@iconify-icons/mdi/apps"));
 var _material = require("@mui/material");
 var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
-var _util = require("../Locale/util");
-var _translation = require("./translation");
+var _util = require("../../Locale/util");
+var _translation = require("../libs/translation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["svgIcon"];
 /* eslint-disable react/no-array-index-key */

package/lib/SessionManager/{menu-accordion.js → components/menu-accordion.js}

@@ -11,8 +11,8 @@ var _react = require("@iconify/react");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _ahooks = require("ahooks");
-var _util = require("../Locale/util");
-var _translation = require("./translation");
+var _util = require("../../Locale/util");
+var _translation = require("../libs/translation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function isEmptyNode(node) {

package/lib/SessionManager/components/responsive-popper.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResponsivePopper;
+var _ahooks = require("ahooks");
+var _userPopper = _interopRequireDefault(require("./user-popper"));
+var _userDrawer = _interopRequireDefault(require("./user-drawer"));
+var _Theme = require("../../Theme");
+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); }
+function ResponsivePopper(props) {
+  const theme = (0, _Theme.useTheme)();
+  const size = (0, _ahooks.useSize)(document.body);
+  const isMobile = (0, _ahooks.useCreation)(() => {
+    if ((size === null || size === void 0 ? void 0 : size.width) <= theme.breakpoints.values.sm) {
+      return true;
+    }
+    return false;
+  }, [theme, size]);
+  const WrapContainer = (0, _ahooks.useCreation)(() => {
+    if (isMobile) {
+      return _userDrawer.default;
+    }
+    return _userPopper.default;
+  }, [isMobile]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapContainer, _objectSpread({}, props));
+}

package/lib/SessionManager/components/user-drawer.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserDrawer;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
+var _react = require("@iconify/react");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserDrawer(_ref) {
+  let {
+    children,
+    open,
+    onOpen,
+    onClose
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Drawer, {
+    anchor: "right",
+    open: open,
+    onClose: onClose,
+    onOpen: onOpen,
+    sx: theme => ({
+      '& .MuiPaper-root': {
+        width: '100%'
+      },
+      '& .MuiChip-root .MuiChip-icon': {
+        color: theme.palette.success.main
+      },
+      '& .session-manager-menu-item': {
+        padding: '15px',
+        color: '#777',
+        fontSize: '16px',
+        '&:hover': {
+          backgroundColor: '#fbfbfb'
+        }
+      },
+      '& .session-manager-menu-icon': {
+        color: '#999',
+        marginRight: '8px'
+      }
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      sx: {
+        cursor: 'pointer',
+        position: 'absolute',
+        right: '8px',
+        top: '8px',
+        zIndex: 1
+      },
+      onClick: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _close.default,
+        width: 28,
+        height: 28
+      })
+    }), children]
+  });
+}
+UserDrawer.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  open: _propTypes.default.bool.isRequired,
+  onOpen: _propTypes.default.func,
+  onClose: _propTypes.default.func
+};
+UserDrawer.defaultProps = {
+  onOpen: _noop.default,
+  onClose: _noop.default
+};

package/lib/SessionManager/{user-info.js → components/user-info.js}

@@ -9,13 +9,13 @@ var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-che
 var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
 var _react = require("@iconify/react");
 var _ahooks = require("ahooks");
-var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _Address = _interopRequireDefault(require("../Address"));
-var _DID = _interopRequireDefault(require("../DID"));
-var _Util = require("../Util");
-var _util = require("../Locale/util");
-var _translation = require("./translation");
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _Address = _interopRequireDefault(require("../../Address"));
+var _DID = _interopRequireDefault(require("../../DID"));
+var _Util = require("../../Util");
+var _util = require("../../Locale/util");
+var _translation = require("../libs/translation");
+var _Typography = _interopRequireDefault(require("../../Typography"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable react/jsx-no-bind */

package/lib/SessionManager/{user-popper.js → components/user-popper.js}

@@ -8,7 +8,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
 var _react = require("@iconify/react");
-var _Theme = require("../Theme");
+var _Theme = require("../../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,6 +38,9 @@ function UserPopper(_ref) {
         maxHeight: 'calc(100vh - 80px)',
         '& .MuiChip-root .MuiChip-icon': {
           color: theme.palette.success.main
+        },
+        '& .MuiList-root': {
+          width: '320px'
         }
       }), dark && {
         backgroundColor: '#27282c',
@@ -93,7 +96,7 @@ UserPopper.defaultProps = {
   onClose: () => {},
   autoClose: true
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 320px;\n  }\n  .session-manager-menu-item {\n    padding: 15px;\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: 8px;\n  }\n"])), _ref2 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n\n  .session-manager-menu-item {\n    padding: 15px;\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: 8px;\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;

package/lib/SessionManager/index.js

@@ -13,15 +13,15 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ahooks = require("ahooks");
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Util = require("../Util");
-var _federatedLoginDetecter = _interopRequireDefault(require("./federated-login-detecter"));
-var _userPopper = _interopRequireDefault(require("./user-popper"));
-var _userInfo = _interopRequireDefault(require("./user-info"));
+var _federatedLoginDetecter = _interopRequireDefault(require("./components/federated-login-detecter"));
+var _userInfo = _interopRequireDefault(require("./components/user-info"));
+var _responsivePopper = _interopRequireDefault(require("./components/responsive-popper"));
 var _util = require("../Locale/util");
-var _manageAccounts = _interopRequireDefault(require("./manage-accounts"));
-var _manageBlocklet = _interopRequireDefault(require("./manage-blocklet"));
-var _translation = require("./translation");
-var _utils = require("./utils");
-var _useConfig = _interopRequireDefault(require("./use-config"));
+var _manageAccounts = _interopRequireDefault(require("./components/manage-accounts"));
+var _manageBlocklet = _interopRequireDefault(require("./components/manage-blocklet"));
+var _translation = require("./libs/translation");
+var _utils = require("./libs/utils");
+var _useConfig = _interopRequireDefault(require("./hooks/use-config"));
 var _federated = require("../Util/federated");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "onBindWallet", "menu", "menuRender", "dark", "size", "showManageBlocklet"];
@@ -268,7 +268,7 @@ function SessionManager(_ref) {
         size: size,
         shape: "circle"
       })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsivePopper.default, {
       open: userOpen,
       onClose: onCloseUser,
       anchorEl: userAnchorRef.current,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.8.15",
+  "version": "2.8.17",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -322,11 +322,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "82cb60b92bddc5dd96309350c542e05580011323",
+  "gitHead": "bd7a8f9d5bfbd61bcb0f6ff57de4600d8afded7b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.8.15",
-    "@arcblock/react-hooks": "^2.8.15",
+    "@arcblock/icons": "^2.8.17",
+    "@arcblock/react-hooks": "^2.8.17",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/{account-item.jsx → components/account-item.jsx}

@@ -10,11 +10,11 @@ import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
 import { useCreation, useMemoizedFn } from 'ahooks';
 
-import Avatar from '../Avatar';
-import DID from '../DID';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
-import { getFederatedEnabled } from '../Util/federated';
+import Avatar from '../../Avatar';
+import DID from '../../DID';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import { getFederatedEnabled } from '../../Util/federated';
 
 export default function AccountItem({ account, active, onDelete, onChoose, locale }) {
   const t = useMemoizedFn((key, data = {}) => {

package/src/SessionManager/{add-account-item.jsx → components/add-account-item.jsx}

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { MenuItem, Typography } from '@mui/material';
 import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
-import { getApps } from '../Util/federated';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import { getApps } from '../../Util/federated';
 
 export default function AddAccountItem({ onAdd, locale, session }) {
   const t = useMemoizedFn((key, data = {}) => {

package/src/SessionManager/{federated-login-detecter.jsx → components/federated-login-detecter.jsx}

@@ -8,11 +8,11 @@ import { Icon } from '@iconify/react';
 import { useCreation, useReactive } from 'ahooks';
 
 import UserPopper from './user-popper';
-import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import Button from '../Button';
-import Toast from '../Toast';
-import { getUserAvatar } from '../Util';
+import DidAvatar from '../../Avatar';
+import DidAddress from '../../Address';
+import Button from '../../Button';
+import Toast from '../../Toast';
+import { getUserAvatar } from '../../Util';
 
 const translations = {
   en: {

package/src/SessionManager/{manage-accounts.jsx → components/manage-accounts.jsx}

@@ -10,10 +10,10 @@ import noop from 'lodash/noop';
 
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
-import { translations } from './translation';
-import { translate } from '../Locale/util';
-import { useConfirm } from '../Dialog/confirm';
-import { getSourceProvider } from './utils';
+import { translations } from '../libs/translation';
+import { translate } from '../../Locale/util';
+import { useConfirm } from '../../Dialog/confirm';
+import { getSourceProvider } from '../libs/utils';
 import AddAccountItem from './add-account-item';
 
 export default function ManageAccounts({
@@ -30,6 +30,7 @@ export default function ManageAccounts({
   onExpand,
   accounts,
   deleteAccount,
+  hideLogout,
 }) {
   const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
   const t = useMemoizedFn((key, data = {}) => {
@@ -169,29 +170,31 @@ export default function ManageAccounts({
           </MenuItem>
         )}
 
-        <MenuItem
-          className="session-manager-menu-item"
-          onClick={_onLogout}
-          disabled={disableLogout}
-          aria-label="Logout account"
-          sx={{
-            position: 'relative',
-          }}
-          data-cy="sessionManager-logout-trigger">
-          {pageState.logoutLoading ? (
-            <LinearProgress
-              sx={{
-                height: '2px',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-              }}
-            />
-          ) : null}
-          <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-          {t('disconnect')}
-        </MenuItem>
+        {!hideLogout ? (
+          <MenuItem
+            className="session-manager-menu-item"
+            onClick={_onLogout}
+            disabled={disableLogout}
+            aria-label="Logout account"
+            sx={{
+              position: 'relative',
+            }}
+            data-cy="sessionManager-logout-trigger">
+            {pageState.logoutLoading ? (
+              <LinearProgress
+                sx={{
+                  height: '2px',
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                }}
+              />
+            ) : null}
+            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
+            {t('disconnect')}
+          </MenuItem>
+        ) : null}
       </MenuAccordion>
       {confirmHolder}
     </>
@@ -212,6 +215,7 @@ ManageAccounts.propTypes = {
   onExpand: PropTypes.func,
   accounts: PropTypes.array.isRequired,
   deleteAccount: PropTypes.func.isRequired,
+  hideLogout: PropTypes.bool,
 };
 
 ManageAccounts.defaultProps = {
@@ -220,4 +224,5 @@ ManageAccounts.defaultProps = {
   disableLogout: false,
   expanded: true,
   onExpand: noop,
+  hideLogout: false,
 };

package/src/SessionManager/{manage-blocklet.jsx → components/manage-blocklet.jsx}

@@ -6,8 +6,8 @@ import AppsIcon from '@iconify-icons/mdi/apps';
 import { MenuItem, SvgIcon } from '@mui/material';
 
 import MenuAccordion from './menu-accordion';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
 
 export default function ManageBlocklet({ menu, menuRender, locale, expanded, onExpand }) {
   const t = useMemoizedFn((key, data = {}) => {

package/src/SessionManager/{menu-accordion.jsx → components/menu-accordion.jsx}

@@ -5,8 +5,8 @@ import { Icon } from '@iconify/react';
 import isEmpty from 'lodash/isEmpty';
 import isNil from 'lodash/isNil';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../Locale/util';
-import { translations } from './translation';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
 
 function isEmptyNode(node) {
   if (isNil(node)) {

package/src/SessionManager/components/responsive-popper.jsx

@@ -0,0 +1,26 @@
+import { useCreation, useSize } from 'ahooks';
+
+import UserPopper from './user-popper';
+import UserDrawer from './user-drawer';
+import { useTheme } from '../../Theme';
+
+export default function ResponsivePopper(props) {
+  const theme = useTheme();
+  const size = useSize(document.body);
+  const isMobile = useCreation(() => {
+    if (size?.width <= theme.breakpoints.values.sm) {
+      return true;
+    }
+    return false;
+  }, [theme, size]);
+
+  const WrapContainer = useCreation(() => {
+    if (isMobile) {
+      return UserDrawer;
+    }
+
+    return UserPopper;
+  }, [isMobile]);
+
+  return <WrapContainer {...props} />;
+}

package/src/SessionManager/components/user-drawer.jsx

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { IconButton, Drawer } from '@mui/material';
+import CloseIcon from '@iconify-icons/mdi/close';
+import { Icon } from '@iconify/react';
+import noop from 'lodash/noop';
+
+export default function UserDrawer({ children, open, onOpen, onClose }) {
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      onOpen={onOpen}
+      sx={(theme) => ({
+        '& .MuiPaper-root': {
+          width: '100%',
+        },
+        '& .MuiChip-root .MuiChip-icon': {
+          color: theme.palette.success.main,
+        },
+        '& .session-manager-menu-item': {
+          padding: '15px',
+          color: '#777',
+          fontSize: '16px',
+          '&:hover': {
+            backgroundColor: '#fbfbfb',
+          },
+        },
+        '& .session-manager-menu-icon': {
+          color: '#999',
+          marginRight: '8px',
+        },
+      })}>
+      <IconButton
+        sx={{ cursor: 'pointer', position: 'absolute', right: '8px', top: '8px', zIndex: 1 }}
+        onClick={onClose}>
+        <Icon icon={CloseIcon} width={28} height={28} />
+      </IconButton>
+      {children}
+    </Drawer>
+  );
+}
+
+UserDrawer.propTypes = {
+  children: PropTypes.any.isRequired,
+  open: PropTypes.bool.isRequired,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+};
+
+UserDrawer.defaultProps = {
+  onOpen: noop,
+  onClose: noop,
+};

package/src/SessionManager/{user-info.jsx → components/user-info.jsx}

@@ -6,13 +6,13 @@ import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
 import { Icon } from '@iconify/react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 
-import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import DID from '../DID';
-import { getUserAvatar } from '../Util';
-import { t as translate } from '../Locale/util';
-import { translations } from './translation';
-import Typography from '../Typography';
+import DidAvatar from '../../Avatar';
+import DidAddress from '../../Address';
+import DID from '../../DID';
+import { getUserAvatar } from '../../Util';
+import { t as translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import Typography from '../../Typography';
 
 export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPassport, switchProfile, hasBindWallet }) {
   const t = (key, data = {}) => {

package/src/SessionManager/{user-popper.jsx → components/user-popper.jsx}

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
 import CloseIcon from '@iconify-icons/mdi/close';
 import { Icon } from '@iconify/react';
-import { styled } from '../Theme';
+import { styled } from '../../Theme';
 
 export default function UserPopper({ anchorEl, dark, children, open, onClose, autoClose }) {
   return (
@@ -20,6 +20,9 @@ export default function UserPopper({ anchorEl, dark, children, open, onClose, au
               '& .MuiChip-root .MuiChip-icon': {
                 color: theme.palette.success.main,
               },
+              '& .MuiList-root': {
+                width: '320px',
+              },
             }),
             dark && {
               backgroundColor: '#27282c',
@@ -76,9 +79,7 @@ const StyledPopper = styled(Popper)`
   z-index: ${({ theme }) => {
     return theme.zIndex.tooltip;
   }};
-  .MuiList-root {
-    width: 320px;
-  }
+
   .session-manager-menu-item {
     padding: 15px;
     color: #777;

package/src/SessionManager/index.jsx

@@ -10,15 +10,15 @@ import { useLatest, useMemoizedFn } from 'ahooks';
 
 import DidAvatar from '../Avatar';
 import { getUserAvatar, sleep } from '../Util';
-import FederatedLoginDetecter from './federated-login-detecter';
-import UserPopper from './user-popper';
-import UserInfo from './user-info';
+import FederatedLoginDetecter from './components/federated-login-detecter';
+import UserInfo from './components/user-info';
+import ResponsivePopper from './components/responsive-popper';
 import { translate } from '../Locale/util';
-import ManageAccounts from './manage-accounts';
-import ManageBlocklet from './manage-blocklet';
-import { translations } from './translation';
-import { getConnectedAccounts, getSourceProvider } from './utils';
-import useConfig from './use-config';
+import ManageAccounts from './components/manage-accounts';
+import ManageBlocklet from './components/manage-blocklet';
+import { translations } from './libs/translation';
+import { getConnectedAccounts, getSourceProvider } from './libs/utils';
+import useConfig from './hooks/use-config';
 import { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 function SessionManager({
@@ -226,7 +226,7 @@ function SessionManager({
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
       </IconButton>
 
-      <UserPopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
+      <ResponsivePopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
         <MenuList sx={{ p: 0 }}>
           <UserInfo
             session={session}
@@ -286,7 +286,7 @@ function SessionManager({
               ]
             : null}
         </MenuList>
-      </UserPopper>
+      </ResponsivePopper>
     </>
   );
 }