@arcblock/ux 2.7.13 → 2.7.15

package/es/CardSelector/index.js

@@ -60,6 +60,21 @@ export default function CardSelector({
         transform: `translate(${-translateX}px, 0)`
       },
       children: list.map((e, i) => {
+        if (e instanceof Function) {
+          return /*#__PURE__*/_jsx("div", {
+            className: `card-item ${i === selectedId ? 'selected' : ''}`,
+            style: {
+              width,
+              height,
+              margin: cardSpace / 2
+            }
+            // eslint-disable-next-line react/no-array-index-key
+            ,
+
+            onClick: () => selectedItem(i),
+            children: e(i)
+          }, i);
+        }
         return /*#__PURE__*/_jsx("div", {
           className: `card-item ${i === selectedId ? 'selected' : ''}`,
           style: {
@@ -96,7 +111,8 @@ const Contianer = styled.div`
     align-items: center;
     flex-shrink: 0;
     cursor: pointer;
-    img {
+    img,
+    svg {
       max-width: 100%;
       max-height: 100%;
       width: auto;
@@ -107,7 +123,8 @@ const Contianer = styled.div`
     }
     &.selected {
       cursor: default;
-      img {
+      img,
+      svg {
         outline: #526ded solid 5px;
       }
     }

package/es/Dialog/confirm.js

@@ -1,4 +1,8 @@
 import PropTypes from 'prop-types';
+import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -12,7 +16,7 @@ import Dialog from './dialog';
   @property {boolean} [showCancelButton=true]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
-  @property {import('@mui/material').PaperProps} [PaperProps={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 
 // 注意排在 {...rest} 之后的 props 优先级更高
@@ -87,4 +91,96 @@ Confirm.defaultProps = {
     text: 'Cancel'
   },
   PaperProps: {}
-};
+};
+const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const state = useReactive({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false
+  });
+  const open = useMemoizedFn((params = {}) => {
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.loading = false;
+  });
+  const reset = useMemoizedFn(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = noop;
+    state.onCancel = noop;
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/_jsx(Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary',
+        loading: state.loading
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+export function useConfirm() {
+  const confirmRef = useRef(null);
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/es/Dialog/index.js

@@ -1,3 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
-export { default as Confirm } from './confirm';
+export { default as Confirm } from './confirm';
+export { useConfirm } from './confirm';

package/es/Locale/selector.js

@@ -1,14 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import Box from '@mui/material/Box';
+import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import GlobeIcon from '@arcblock/icons/lib/Globe';
 import { getColor, getBackground } from '../Util';
@@ -92,7 +85,7 @@ export default function LocaleSelector(props) {
           children: languages.find(x => x.code === locale).name
         }) : '']
       })
-    }), /*#__PURE__*/_jsx(Popper, {
+    }), /*#__PURE__*/_jsx(StyledPopper, {
       open: open,
       anchorEl: anchorEl.current,
       ...popperProps,
@@ -179,4 +172,11 @@ const Div = styled('div', {
       visibility: visible;
     }
   }
+`;
+const StyledPopper = styled(Popper)`
+  z-index: ${({
+  theme
+}) => {
+  return theme.zIndex.tooltip + 10;
+}};
 `;

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

@@ -21,7 +21,7 @@ const translations = {
       member
     }) {
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["Use ", master, " account to connect ", member]
+        children: ["Connect ", member, " with ", master, " account"]
       });
     },
     connect: 'Connect Account',
@@ -63,6 +63,14 @@ export default function FederatedLoginDetecter({
       mode: userInfo ? 'auto' : 'manual'
     });
   }, [session, userInfo, _locale]);
+  let appLogoUrl;
+  if (siteInfo) {
+    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+    appLogoUrl.searchParams.set('imageFilter', 'resize');
+    // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
+    appLogoUrl.searchParams.set('w', '80');
+    appLogoUrl.searchParams.set('h', '80');
+  }
   return siteInfo && /*#__PURE__*/_jsx(UserPopper, {
     open: federatedLoginOpen,
     anchorEl: anchorEl,
@@ -77,7 +85,7 @@ export default function FederatedLoginDetecter({
         children: [/*#__PURE__*/_jsx(Box, {
           component: "img",
           mr: 2,
-          src: `${siteInfo.appUrl}${siteInfo.appLogo}`,
+          src: appLogoUrl.href,
           alt: siteInfo.appName,
           width: "30px",
           height: "30px"

package/es/SessionManager/index.js

@@ -6,15 +6,14 @@ import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, Circu
 import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
 import BindWalletIcon from '@mui/icons-material/Link';
 import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
-import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';
 import ShieldCheck from 'mdi-material-ui/ShieldCheck';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import SwitchDidIcon from '@arcblock/icons/lib/Switch';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
+import isEmpty from 'lodash/isEmpty';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
 import { getUserAvatar } from '../Util';
@@ -25,7 +24,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const translations = {
   en: {
+    account: 'account',
     switchDid: 'Switch DID',
+    switchTo: 'Switch to',
     switchProfile: 'Switch Profile',
     switchPassport: 'Switch Passport',
     disconnect: 'Disconnect',
@@ -37,7 +38,9 @@ const translations = {
     connectedWith: 'Connected with'
   },
   zh: {
+    account: '账号',
     switchDid: '切换账户',
+    switchTo: '切换至',
     switchProfile: '切换用户信息',
     switchPassport: '切换通行证',
     disconnect: '退出',
@@ -120,6 +123,7 @@ function SessionManager({
     // eslint-disable-next-line react/prop-types
   }, [session?.initialized, session?.loading]);
   const masterSiteInfo = window.blocklet?.settings?.federated?.master;
+  const currentSiteInfo = window.blocklet;
   if (!session.user) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [showText ? /*#__PURE__*/_jsxs(Button, {
@@ -195,7 +199,8 @@ function SessionManager({
   function _onLogout() {
     session.logout((...args) => {
       logoutOAuth({
-        session
+        session,
+        hack: true
       }, ...args).then(() => {
         onLogout(...args);
       }).catch(err => {
@@ -205,10 +210,28 @@ function SessionManager({
       });
     });
   }
+  /**
+   * @name 切换账户
+   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
+   */
   function _onSwitchDid() {
+    const {
+      provider,
+      user
+    } = session;
+    if (!user) return;
+    let targetProvider = provider;
+    if (provider === 'federated') {
+      targetProvider = 'wallet';
+    } else if (['auth0', 'wallet'].includes(provider)) {
+      targetProvider = 'federated';
+    }
     session.switchDid((...args) => {
       setUserOpen(false);
       onSwitchDid(...args);
+    }, {
+      provider: targetProvider,
+      providerMode: 'paramsFirst'
     });
   }
   function _onSwitchProfile() {
@@ -316,25 +339,6 @@ function SessionManager({
               })
             })]
           })]
-        }), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/_jsx(MenuItem, {
-          className: "session-manager-menu-item",
-          "data-cy": "sessionManager-connectWithFederated",
-          children: /*#__PURE__*/_jsxs(Box, {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            children: [/*#__PURE__*/_jsx(SvgIcon, {
-              component: ConnectWithoutContactIcon,
-              className: "session-manager-menu-icon"
-            }), translation.connectedWith, /*#__PURE__*/_jsx(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,
@@ -366,7 +370,7 @@ function SessionManager({
             component: OpenInIcon,
             className: "session-manager-menu-icon"
           }), translation.openInWallet]
-        }), !!switchDid && /*#__PURE__*/_jsxs(MenuItem, {
+        }), !isEmpty(masterSiteInfo) && !!switchDid && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchDid,
           "aria-label": translation.switchDid,
@@ -374,7 +378,29 @@ function SessionManager({
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: SwitchDidIcon,
             className: "session-manager-menu-icon"
-          }), translation.switchDid]
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              whiteSpace: 'normal',
+              wordBreak: 'break-all'
+            },
+            children: [translation.switchTo, session.provider === 'federated' ? /*#__PURE__*/_jsx(Link, {
+              mx: 1,
+              href: currentSiteInfo.appUrl,
+              underline: "hover",
+              target: "_blank",
+              title: currentSiteInfo.appName,
+              "aria-label": "Open current site url",
+              children: currentSiteInfo.appName
+            }) : /*#__PURE__*/_jsx(Link, {
+              mx: 1,
+              href: masterSiteInfo.appUrl,
+              underline: "hover",
+              target: "_blank",
+              title: masterSiteInfo.appName,
+              "aria-label": "Open federated master site url",
+              children: masterSiteInfo.appName
+            }), translation.account]
+          })]
         }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchProfile,

package/es/SessionManager/user-popper.js

@@ -82,7 +82,9 @@ UserPopper.defaultProps = {
 const StyledPopper = styled(Popper)`
   z-index: ${({
   theme
-}) => theme.zIndex.tooltip};
+}) => {
+  return theme.zIndex.tooltip;
+}};
   .MuiList-root {
     /* HACK: 需要288px 才能将 did 展示完整 */
     width: 290px;

package/lib/CardSelector/index.js

@@ -70,6 +70,21 @@ function CardSelector(_ref) {
         transform: "translate(".concat(-translateX, "px, 0)")
       },
       children: list.map((e, i) => {
+        if (e instanceof Function) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+            style: {
+              width,
+              height,
+              margin: cardSpace / 2
+            }
+            // eslint-disable-next-line react/no-array-index-key
+            ,
+
+            onClick: () => selectedItem(i),
+            children: e(i)
+          }, i);
+        }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "card-item ".concat(i === selectedId ? 'selected' : ''),
           style: {
@@ -90,7 +105,7 @@ function CardSelector(_ref) {
     })
   });
 }
-const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img,\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img,\n      svg {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
 CardSelector.propTypes = {
   list: _propTypes.default.array,
   width: _propTypes.default.number,

package/lib/Dialog/confirm.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Confirm;
+exports.useConfirm = useConfirm;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _context = require("../Locale/context");
 var _Button = _interopRequireDefault(require("../Button"));
 var _dialog = _interopRequireDefault(require("./dialog"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +24,7 @@ const _excluded = ["title", "children", "onConfirm", "onCancel", "showCancelButt
   @property {boolean} [showCancelButton=true]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
-  @property {import('@mui/material').PaperProps} [PaperProps={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 // 注意排在 {...rest} 之后的 props 优先级更高
 /**
@@ -99,4 +104,105 @@ Confirm.defaultProps = {
     text: 'Cancel'
   },
   PaperProps: {}
-};
+};
+const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const state = (0, _ahooks.useReactive)({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: _noop.default,
+    onCancel: _noop.default,
+    loading: false
+  });
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || _noop.default;
+    state.onCancel = params.onCancel || _noop.default;
+    state.loading = false;
+  });
+  const reset = (0, _ahooks.useMemoizedFn)(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = _noop.default;
+    state.onCancel = _noop.default;
+  });
+  const close = (0, _ahooks.useMemoizedFn)(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = (0, _ahooks.useMemoizedFn)(() => {
+    close();
+    state === null || state === void 0 ? void 0 : state.onCancel();
+  }, []);
+  const onConfirm = (0, _ahooks.useMemoizedFn)(async () => {
+    state.loading = true;
+    try {
+      await (state === null || state === void 0 ? void 0 : state.onConfirm(close));
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary',
+        loading: state.loading
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+function useConfirm() {
+  const confirmRef = (0, _react.useRef)(null);
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
+  });
+  const close = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current2;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    (_confirmRef$current2 = confirmRef.current) === null || _confirmRef$current2 === void 0 ? void 0 : _confirmRef$current2.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/lib/Dialog/index.js

@@ -15,6 +15,14 @@ Object.defineProperty(exports, "default", {
     return _dialog.default;
   }
 });
+Object.defineProperty(exports, "useConfirm", {
+  enumerable: true,
+  get: function get() {
+    return _confirm.useConfirm;
+  }
+});
 var _dialog = _interopRequireDefault(require("./dialog"));
-var _confirm = _interopRequireDefault(require("./confirm"));
+var _confirm = _interopRequireWildcard(require("./confirm"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Locale/selector.js

@@ -6,21 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = LocaleSelector;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
-var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _material = require("@mui/material");
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Globe = _interopRequireDefault(require("@arcblock/icons/lib/Globe"));
 var _Util = require("../Util");
 var _context = require("./context");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
+var _templateObject, _templateObject2;
 const _excluded = ["showText", "popperProps", "popperType", "icon", "size"];
 /* eslint-disable react/jsx-no-bind */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,7 +58,7 @@ function LocaleSelector(props) {
     }
     setOpen(false);
   };
-  const ButtonComponent = showText ? _Button.default : _IconButton.default;
+  const ButtonComponent = showText ? _material.Button : _material.IconButton;
   const handleEventProps = popperType === 'hover' ? {
     onMouseEnter: () => {
       setOpen(true);
@@ -100,31 +93,31 @@ function LocaleSelector(props) {
       className: "trigger",
       role: "button",
       "aria-label": "Locale selector button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         display: "flex",
         alignItems: "center",
-        children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "strong",
           className: "trigger-text",
           children: languages.find(x => x.code === locale).name
         }) : '']
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, _objectSpread(_objectSpread({
       open: open,
       anchorEl: anchorEl.current
     }, popperProps), {}, {
       disablePortal: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "locales",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
           onClickAway: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuList, {
             children: languages.map(_ref => {
               let {
                 code,
                 name
               } = _ref;
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
                 className: "locale-item",
                 onClick: () => onSelect(code, name),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
@@ -157,4 +150,10 @@ LocaleSelector.defaultProps = {
 };
 const Div = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'dark'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.zIndex.tooltip + 10;
+});

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

@@ -27,7 +27,7 @@ const translations = {
         member
       } = _ref;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: ["Use ", master, " account to connect ", member]
+        children: ["Connect ", member, " with ", master, " account"]
       });
     },
     connect: 'Connect Account',
@@ -72,6 +72,14 @@ function FederatedLoginDetecter(_ref3) {
       mode: userInfo ? 'auto' : 'manual'
     });
   }, [session, userInfo, _locale]);
+  let appLogoUrl;
+  if (siteInfo) {
+    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+    appLogoUrl.searchParams.set('imageFilter', 'resize');
+    // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
+    appLogoUrl.searchParams.set('w', '80');
+    appLogoUrl.searchParams.set('h', '80');
+  }
   return siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
     open: federatedLoginOpen,
     anchorEl: anchorEl,
@@ -86,7 +94,7 @@ function FederatedLoginDetecter(_ref3) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           component: "img",
           mr: 2,
-          src: "".concat(siteInfo.appUrl).concat(siteInfo.appLogo),
+          src: appLogoUrl.href,
           alt: siteInfo.appName,
           width: "30px",
           height: "30px"

package/lib/SessionManager/index.js

@@ -10,15 +10,14 @@ 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 _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
 var _Util = require("../Util");
@@ -39,7 +38,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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: {
+    account: 'account',
     switchDid: 'Switch DID',
+    switchTo: 'Switch to',
     switchProfile: 'Switch Profile',
     switchPassport: 'Switch Passport',
     disconnect: 'Disconnect',
@@ -51,7 +52,9 @@ const translations = {
     connectedWith: 'Connected with'
   },
   zh: {
+    account: '账号',
     switchDid: '切换账户',
+    switchTo: '切换至',
     switchProfile: '切换用户信息',
     switchPassport: '切换通行证',
     disconnect: '退出',
@@ -145,6 +148,7 @@ function SessionManager(_ref) {
     // 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 currentSiteInfo = window.blocklet;
   if (!session.user) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
@@ -223,7 +227,8 @@ function SessionManager(_ref) {
         args[_key] = arguments[_key];
       }
       logoutOAuth({
-        session
+        session,
+        hack: true
       }, ...args).then(() => {
         onLogout(...args);
       }).catch(err => {
@@ -233,10 +238,28 @@ function SessionManager(_ref) {
       });
     });
   }
+  /**
+   * @name 切换账户
+   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
+   */
   function _onSwitchDid() {
+    const {
+      provider,
+      user
+    } = session;
+    if (!user) return;
+    let targetProvider = provider;
+    if (provider === 'federated') {
+      targetProvider = 'wallet';
+    } else if (['auth0', 'wallet'].includes(provider)) {
+      targetProvider = 'federated';
+    }
     session.switchDid(function () {
       setUserOpen(false);
       onSwitchDid(...arguments);
+    }, {
+      provider: targetProvider,
+      providerMode: 'paramsFirst'
     });
   }
   function _onSwitchProfile() {
@@ -344,25 +367,6 @@ function SessionManager(_ref) {
               })
             })]
           })]
-        }), 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
@@ -395,7 +399,7 @@ function SessionManager(_ref) {
             component: _OpenIn.default,
             className: "session-manager-menu-icon"
           }), translation.openInWallet]
-        }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), !(0, _isEmpty.default)(masterSiteInfo) && !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchDid,
           "aria-label": translation.switchDid,
@@ -403,7 +407,29 @@ function SessionManager(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
             component: _Switch.default,
             className: "session-manager-menu-icon"
-          }), translation.switchDid]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              whiteSpace: 'normal',
+              wordBreak: 'break-all'
+            },
+            children: [translation.switchTo, session.provider === 'federated' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+              mx: 1,
+              href: currentSiteInfo.appUrl,
+              underline: "hover",
+              target: "_blank",
+              title: currentSiteInfo.appName,
+              "aria-label": "Open current site url",
+              children: currentSiteInfo.appName
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+              mx: 1,
+              href: masterSiteInfo.appUrl,
+              underline: "hover",
+              target: "_blank",
+              title: masterSiteInfo.appName,
+              "aria-label": "Open federated master site url",
+              children: masterSiteInfo.appName
+            }), translation.account]
+          })]
         }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchProfile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.13",
+  "version": "2.7.15",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -318,11 +318,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "8e85f20d1c7a24261811c482cd763065fb2e422a",
+  "gitHead": "a40ed26cfd0cbf892b00f98c773eff8ad7a50570",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.13",
-    "@arcblock/react-hooks": "^2.7.13",
+    "@arcblock/icons": "^2.7.15",
+    "@arcblock/react-hooks": "^2.7.15",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/CardSelector/index.jsx

@@ -54,6 +54,18 @@ export default function CardSelector({ list, width, height, cardSpace, onSelect,
     <Contianer ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
       <div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
         {list.map((e, i) => {
+          if (e instanceof Function) {
+            return (
+              <div
+                className={`card-item ${i === selectedId ? 'selected' : ''}`}
+                style={{ width, height, margin: cardSpace / 2 }}
+                // eslint-disable-next-line react/no-array-index-key
+                key={i}
+                onClick={() => selectedItem(i)}>
+                {e(i)}
+              </div>
+            );
+          }
           return (
             <div
               className={`card-item ${i === selectedId ? 'selected' : ''}`}
@@ -86,7 +98,8 @@ const Contianer = styled.div`
     align-items: center;
     flex-shrink: 0;
     cursor: pointer;
-    img {
+    img,
+    svg {
       max-width: 100%;
       max-height: 100%;
       width: auto;
@@ -97,7 +110,8 @@ const Contianer = styled.div`
     }
     &.selected {
       cursor: default;
-      img {
+      img,
+      svg {
         outline: #526ded solid 5px;
       }
     }

package/src/Dialog/confirm.js

@@ -1,4 +1,9 @@
 import PropTypes from 'prop-types';
+import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+
+import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -12,7 +17,7 @@ import Dialog from './dialog';
   @property {boolean} [showCancelButton=true]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
   @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
-  @property {import('@mui/material').PaperProps} [PaperProps={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 
 // 注意排在 {...rest} 之后的 props 优先级更高
@@ -91,3 +96,103 @@ Confirm.defaultProps = {
   },
   PaperProps: {},
 };
+
+const ConfirmHolder = forwardRef((props, ref) => {
+  const { t } = useContext(LocaleContext);
+
+  const state = useReactive({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false,
+  });
+  const open = useMemoizedFn((params = {}) => {
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.loading = false;
+  });
+  const reset = useMemoizedFn(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = noop;
+    state.onCancel = noop;
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+      };
+    },
+    [open, close]
+  );
+
+  return (
+    <Confirm
+      open={state.show}
+      title={state.title}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      confirmButton={{
+        text: t('common.confirm'),
+        props: {
+          variant: 'contained',
+          color: 'primary',
+          loading: state.loading,
+        },
+      }}
+      cancelButton={{
+        text: t('common.cancel'),
+        props: {
+          variant: 'outlined',
+          color: 'primary',
+        },
+      }}>
+      {state.content}
+    </Confirm>
+  );
+});
+
+export function useConfirm() {
+  const confirmRef = useRef(null);
+
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close,
+  };
+
+  return {
+    confirmHolder: <ConfirmHolder ref={confirmRef} />,
+    confirmApi,
+  };
+}

package/src/Dialog/index.js

@@ -1,3 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
 export { default as Confirm } from './confirm';
+export { useConfirm } from './confirm';

package/src/Locale/{selector.js → selector.jsx}

@@ -1,14 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import Box from '@mui/material/Box';
+import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import GlobeIcon from '@arcblock/icons/lib/Globe';
 
@@ -82,7 +75,7 @@ export default function LocaleSelector(props) {
         </Box>
       </ButtonComponent>
 
-      <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
+      <StyledPopper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
@@ -98,7 +91,7 @@ export default function LocaleSelector(props) {
             </MenuList>
           </ClickAwayListener>
         </div>
-      </Popper>
+      </StyledPopper>
     </Div>
   );
 }
@@ -166,3 +159,9 @@ const Div = styled('div', {
     }
   }
 `;
+
+const StyledPopper = styled(Popper)`
+  z-index: ${({ theme }) => {
+    return theme.zIndex.tooltip + 10;
+  }};
+`;

package/src/SessionManager/federated-login-detecter.jsx

@@ -18,7 +18,7 @@ const translations = {
     useToConnect({ master, member }) {
       return (
         <>
-          Use {master} account to connect {member}
+          Connect {member} with {master} account
         </>
       );
     },
@@ -63,6 +63,15 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
     );
   }, [session, userInfo, _locale]);
 
+  let appLogoUrl;
+  if (siteInfo) {
+    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+    appLogoUrl.searchParams.set('imageFilter', 'resize');
+    // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
+    appLogoUrl.searchParams.set('w', '80');
+    appLogoUrl.searchParams.set('h', '80');
+  }
+
   return (
     siteInfo && (
       <UserPopper
@@ -74,14 +83,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
         <Box p={2}>
           {siteInfo && (
             <Box display="flex" alignItems="center">
-              <Box
-                component="img"
-                mr={2}
-                src={`${siteInfo.appUrl}${siteInfo.appLogo}`}
-                alt={siteInfo.appName}
-                width="30px"
-                height="30px"
-              />
+              <Box component="img" mr={2} src={appLogoUrl.href} alt={siteInfo.appName} width="30px" height="30px" />
               <Box sx={{ maxWidth: '260px' }}>
                 {translations[locale].useToConnect({
                   master: (

package/src/SessionManager/index.jsx

@@ -6,15 +6,14 @@ import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, Circu
 import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
 import BindWalletIcon from '@mui/icons-material/Link';
 import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
-import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';
 import ShieldCheck from 'mdi-material-ui/ShieldCheck';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import SwitchDidIcon from '@arcblock/icons/lib/Switch';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
+import isEmpty from 'lodash/isEmpty';
 
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
@@ -24,7 +23,9 @@ import UserPopper from './user-popper';
 
 const translations = {
   en: {
+    account: 'account',
     switchDid: 'Switch DID',
+    switchTo: 'Switch to',
     switchProfile: 'Switch Profile',
     switchPassport: 'Switch Passport',
     disconnect: 'Disconnect',
@@ -36,7 +37,9 @@ const translations = {
     connectedWith: 'Connected with',
   },
   zh: {
+    account: '账号',
     switchDid: '切换账户',
+    switchTo: '切换至',
     switchProfile: '切换用户信息',
     switchPassport: '切换通行证',
     disconnect: '退出',
@@ -118,6 +121,7 @@ function SessionManager({
   }, [session?.initialized, session?.loading]);
 
   const masterSiteInfo = window.blocklet?.settings?.federated?.master;
+  const currentSiteInfo = window.blocklet;
 
   if (!session.user) {
     return (
@@ -177,7 +181,7 @@ function SessionManager({
   }
   function _onLogout() {
     session.logout((...args) => {
-      logoutOAuth({ session }, ...args)
+      logoutOAuth({ session, hack: true }, ...args)
         .then(() => {
           onLogout(...args);
         })
@@ -189,11 +193,29 @@ function SessionManager({
         });
     });
   }
+  /**
+   * @name 切换账户
+   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
+   */
   function _onSwitchDid() {
-    session.switchDid((...args) => {
-      setUserOpen(false);
-      onSwitchDid(...args);
-    });
+    const { provider, user } = session;
+    if (!user) return;
+    let targetProvider = provider;
+    if (provider === 'federated') {
+      targetProvider = 'wallet';
+    } else if (['auth0', 'wallet'].includes(provider)) {
+      targetProvider = 'federated';
+    }
+    session.switchDid(
+      (...args) => {
+        setUserOpen(false);
+        onSwitchDid(...args);
+      },
+      {
+        provider: targetProvider,
+        providerMode: 'paramsFirst',
+      }
+    );
   }
   function _onSwitchProfile() {
     session.switchProfile((...args) => {
@@ -274,23 +296,6 @@ function SessionManager({
               )}
             </div>
           </div>
-          {federatedAccount && !isEmpty(masterSiteInfo) && (
-            <MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
-              <Box overflow="hidden" textOverflow="ellipsis">
-                <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
-                {translation.connectedWith}
-                <Link
-                  ml={1}
-                  href={masterSiteInfo.appUrl}
-                  underline="hover"
-                  target="_blank"
-                  title={masterSiteInfo.appName}
-                  aria-label="Open federated master site url">
-                  {masterSiteInfo.appName}
-                </Link>
-              </Box>
-            </MenuItem>
-          )}
           {Array.isArray(menu) &&
             menu.map((menuItem, index) => {
               const { svgIcon, ...menuProps } = menuItem;
@@ -328,14 +333,38 @@ function SessionManager({
               {translation.openInWallet}
             </MenuItem>
           )}
-          {!!switchDid && (
+          {!isEmpty(masterSiteInfo) && !!switchDid && (
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onSwitchDid}
               aria-label={translation.switchDid}
               data-cy="sessionManager-switch-trigger">
               <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
-              {translation.switchDid}
+              <Box sx={{ whiteSpace: 'normal', wordBreak: 'break-all' }}>
+                {translation.switchTo}
+                {session.provider === 'federated' ? (
+                  <Link
+                    mx={1}
+                    href={currentSiteInfo.appUrl}
+                    underline="hover"
+                    target="_blank"
+                    title={currentSiteInfo.appName}
+                    aria-label="Open current site url">
+                    {currentSiteInfo.appName}
+                  </Link>
+                ) : (
+                  <Link
+                    mx={1}
+                    href={masterSiteInfo.appUrl}
+                    underline="hover"
+                    target="_blank"
+                    title={masterSiteInfo.appName}
+                    aria-label="Open federated master site url">
+                    {masterSiteInfo.appName}
+                  </Link>
+                )}
+                {translation.account}
+              </Box>
             </MenuItem>
           )}
           {/* NOTE: federated 登录方式不允许切换 profile */}

package/src/SessionManager/user-popper.jsx

@@ -71,7 +71,9 @@ UserPopper.defaultProps = {
 };
 
 const StyledPopper = styled(Popper)`
-  z-index: ${({ theme }) => theme.zIndex.tooltip};
+  z-index: ${({ theme }) => {
+    return theme.zIndex.tooltip;
+  }};
   .MuiList-root {
     /* HACK: 需要288px 才能将 did 展示完整 */
     width: 290px;