@arcblock/ux 2.8.26 → 2.9.0

package/lib/SessionUser/components/session-user-item.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react2 = require("@iconify/react");
+var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
+var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/ios-rounded"));
+var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
+var _lens = _interopRequireDefault(require("@iconify-icons/material-symbols/lens"));
+var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
+var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _DID = _interopRequireDefault(require("../../DID"));
+var _Colors = require("../../Colors");
+var _utils = require("../libs/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["sessionItem", "statusContent", "active"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _sessionItem$extra, _sessionItem$extra2;
+  let {
+      sessionItem,
+      statusContent,
+      active
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
+  const walletIcon = (0, _ahooks.useCreation)(() => {
+    const {
+      walletOS,
+      provider
+    } = (sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.extra) || {};
+    if (provider === 'auth0') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _auth0Icon.default,
+        width: 10,
+        height: 10,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'ios') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _iosRounded.default,
+        width: 16,
+        height: 16,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'android') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _android.default,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'web') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _language.default,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'api') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _api.default,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    return null;
+  }, [sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra = sessionItem.extra) === null || _sessionItem$extra === void 0 ? void 0 : _sessionItem$extra.walletOS, sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra2 = sessionItem.extra) === null || _sessionItem$extra2 === void 0 ? void 0 : _sessionItem$extra2.provider]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    sx: _objectSpread({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      py: 0.75,
+      px: 1,
+      width: '100%'
+    }, rest === null || rest === void 0 ? void 0 : rest.sx),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        '& .did-address-avatar': {
+          display: 'none !important'
+        },
+        '& .did-address-text': {
+          color: "".concat(_Colors.temp.textBase, " !important")
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mr: 0.5,
+          fontSize: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          did: sessionItem.userDid,
+          size: 36
+        })
+      }), walletIcon, isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        did: sessionItem.userDid,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: 14
+        },
+        children: sessionItem.user.email
+      })]
+    }), statusContent || active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      size: "small",
+      disableRipple: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _lens.default,
+        fontSize: 6,
+        color: _Colors.temp.surfaceSuccess
+      })
+    })]
+  }));
+});
+SessionUserItem.propTypes = {
+  sessionItem: _propTypes.default.object.isRequired,
+  statusContent: _propTypes.default.node,
+  active: _propTypes.default.bool
+};
+SessionUserItem.defaultProps = {
+  statusContent: null,
+  active: false
+};
+var _default = SessionUserItem;
+exports.default = _default;

package/lib/SessionUser/components/session-user-switch.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SessionUserSwitch;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _react2 = require("@iconify/react");
+var _addCircleOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/add-circle-outline-rounded"));
+var _expandMoreRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/expand-more-rounded"));
+var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _sessionUserItem = _interopRequireDefault(require("./session-user-item"));
+var _Colors = require("../../Colors");
+var _Util = require("../../Util");
+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 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 SessionUserSwitch(_ref) {
+  let {
+    session,
+    onSwitch,
+    isBlocklet,
+    locale
+  } = _ref;
+  const popperAnchorRef = (0, _react.useRef)(null);
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  const currentState = (0, _ahooks.useReactive)({
+    open: false,
+    userSessions: [],
+    loadingSessionId: null
+  });
+  (0, _ahooks.useMount)(async () => {
+    if (isBlocklet) {
+      const userSessions = await session.getUserSessions();
+      currentState.userSessions = userSessions;
+    }
+  });
+  const currentSession = (0, _ahooks.useCreation)(() => {
+    var _globalThis$blocklet2, _globalThis$env, _globalThis$blocklet3, _globalThis$env2, _session$user2;
+    const matchSession = (currentState.userSessions || []).find(item => {
+      var _globalThis$blocklet, _session$user;
+      return item.appPid === (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet = globalThis.blocklet) === null || _globalThis$blocklet === void 0 ? void 0 : _globalThis$blocklet.appPid) && item.userDid === (session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.did);
+    });
+    if (matchSession) {
+      return matchSession;
+    }
+    return {
+      appName: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet2 = globalThis.blocklet) === null || _globalThis$blocklet2 === void 0 ? void 0 : _globalThis$blocklet2.appName) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env = globalThis.env) === null || _globalThis$env === void 0 ? void 0 : _globalThis$env.appName),
+      appPid: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet3 = globalThis.blocklet) === null || _globalThis$blocklet3 === void 0 ? void 0 : _globalThis$blocklet3.appPid) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env2 = globalThis.env) === null || _globalThis$env2 === void 0 ? void 0 : _globalThis$env2.appPid),
+      userDid: session === null || session === void 0 ? void 0 : (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : _session$user2.did,
+      visitorId: (0, _Util.getVisitorId)(),
+      // passportId: '', // 无法从当前 session 获取 passportId 的值
+      // updatedAt: '', // 当前 session 拼凑的信息无法得到 userSession 的更新时间
+      user: (0, _pick.default)(session === null || session === void 0 ? void 0 : session.user, ['did', 'sourceProvider', 'fullName', 'email', 'avatar', 'remark', 'sourceAppPid', 'role'])
+    };
+  }, [currentState.userSessions, session === null || session === void 0 ? void 0 : session.user]);
+  const onTogglePopper = (0, _ahooks.useMemoizedFn)(function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
+    currentState.open = value;
+  });
+  const size = (0, _ahooks.useSize)(popperAnchorRef.current);
+  const handleAddAccount = (0, _ahooks.useMemoizedFn)(() => {
+    onTogglePopper(false);
+    onSwitch();
+  });
+  const handleSwitch = (0, _ahooks.useMemoizedFn)(async userSession => {
+    try {
+      currentState.loadingSessionId = userSession === null || userSession === void 0 ? void 0 : userSession.id;
+      await onSwitch({
+        userSession
+      });
+      onTogglePopper(false);
+    } finally {
+      currentState.loadingSessionId = null;
+    }
+  });
+  if (!isBlocklet) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
+      sessionItem: currentSession,
+      statusContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _swapHorizRounded.default,
+        color: _Colors.temp.textMuted
+      }),
+      sx: {
+        border: "1px solid ".concat(_Colors.temp.borderBase),
+        borderRadius: 2,
+        cursor: 'pointer',
+        py: 1.25,
+        px: 1.5
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      onClick: handleAddAccount,
+      ref: popperAnchorRef
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
+      sessionItem: currentSession,
+      statusContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _expandMoreRounded.default,
+        color: _Colors.temp.textMuted
+      }),
+      sx: {
+        border: "1px solid ".concat(_Colors.temp.borderBase),
+        borderRadius: 2,
+        cursor: 'pointer',
+        py: 1.25,
+        px: 1.5
+      },
+      onClick: () => onTogglePopper(),
+      ref: popperAnchorRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, {
+      open: currentState.open,
+      onClose: () => onTogglePopper(false),
+      anchorEl: popperAnchorRef.current,
+      transition: true,
+      sx: {
+        zIndex: 1600
+      },
+      children: _ref2 => {
+        let {
+          TransitionProps
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+          onClickAway: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onTogglePopper(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, _objectSpread(_objectSpread({}, TransitionProps), {}, {
+            timeout: 350,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                borderRadius: 3,
+                width: (size === null || size === void 0 ? void 0 : size.width) || 0,
+                borderColor: _Colors.temp.lineStep,
+                mt: 0.5,
+                border: '0 !important',
+                boxShadow: "0px 8px 16px 0px ".concat(_Colors.temp.gray6, ", 0px 0px 0px 1px ").concat(_Colors.temp.gray6)
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
+                sx: {
+                  p: 0.5
+                },
+                children: [currentState.userSessions.map(userSessionItem => {
+                  const isLoading = currentState.loadingSessionId === userSessionItem.id;
+                  const isActive = userSessionItem.id === currentSession.id;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                    sx: {
+                      position: 'relative',
+                      p: 0,
+                      '&:hover': {
+                        backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important")
+                      }
+                    },
+                    onClick: () => {
+                      if (!isActive) {
+                        handleSwitch(userSessionItem);
+                      }
+                    },
+                    children: [isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+                      sx: {
+                        height: '2px',
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
+                      sessionItem: userSessionItem,
+                      active: isActive
+                    })]
+                  }, userSessionItem.id);
+                }), currentState.userSessions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+                  sx: {
+                    m: '0!important',
+                    borderColor: _Colors.temp.lineStep
+                  }
+                }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                  sx: {
+                    color: _Colors.temp.primaryBase,
+                    borderRadius: 2,
+                    '&:hover': {
+                      backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important")
+                    },
+                    px: 1,
+                    py: 1.5,
+                    lineHeight: 1
+                  },
+                  onClick: handleAddAccount,
+                  "data-cy": "sessionManager-switch-trigger",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    component: _react2.Icon,
+                    icon: _addCircleOutlineRounded.default,
+                    fontSize: 20,
+                    sx: {
+                      mr: 0.5
+                    }
+                  }), t('addAnotherAccount')]
+                })]
+              })
+            })
+          }))
+        });
+      }
+    })]
+  });
+}
+SessionUserSwitch.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  onSwitch: _propTypes.default.func.isRequired,
+  isBlocklet: _propTypes.default.bool,
+  locale: _propTypes.default.string
+};
+SessionUserSwitch.defaultProps = {
+  isBlocklet: true,
+  locale: 'en'
+};

package/lib/SessionUser/components/un-login.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UnLogin;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _react = require("@iconify/react");
+var _personOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/person-outline-rounded"));
+var _react2 = require("react");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UnLogin(_ref) {
+  let {
+    session,
+    onLogin,
+    size,
+    dark
+  } = _ref;
+  const isFirstLoading = false;
+  const userAnchorRef = (0, _react2.useRef)(null);
+  const _onLogin = (0, _ahooks.useMemoizedFn)(() => {
+    if (isFirstLoading) {
+      return;
+    }
+    session.login(onLogin);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      ref: userAnchorRef,
+      onClick: _onLogin,
+      "data-cy": "sessionManager-login",
+      size: "medium",
+      "aria-label": "Login button",
+      children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        width: size,
+        height: size,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          style: {
+            width: size - 4,
+            height: size - 4,
+            color: dark ? '#fff' : ''
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _personOutlineRounded.default,
+        fontSize: size,
+        color: dark ? '#fff' : 'inherit',
+        style: {
+          transform: 'scale(1.08)'
+        }
+      })
+    })
+  });
+}
+UnLogin.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  onLogin: _propTypes.default.func,
+  size: _propTypes.default.number,
+  dark: _propTypes.default.bool
+};
+UnLogin.defaultProps = {
+  onLogin: _noop.default,
+  size: 24,
+  dark: false
+};

package/lib/SessionUser/components/user-info.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserInfo;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _react = require("@iconify/react");
+var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
+var _arrowRightAltRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/arrow-right-alt-rounded"));
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _Avatar = _interopRequireDefault(require("../../Avatar"));
+var _Util = require("../../Util");
+var _sessionUserSwitch = _interopRequireDefault(require("./session-user-switch"));
+var _Colors = require("../../Colors");
+var _utils = require("../libs/utils");
+var _translation = require("../libs/translation");
+var _util = require("../../Locale/util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserInfo(_ref) {
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5;
+  let {
+    session,
+    onSwitchPassport,
+    onSwitchAccount,
+    onBindWallet,
+    onSwitchProfile,
+    locale,
+    isBlocklet
+  } = _ref;
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  const avatar = (0, _Util.getUserAvatar)((_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' ')), 64);
+  const currentRole = (0, _ahooks.useCreation)(() => {
+    var _session$user2, _session$user2$passpo;
+    return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
+  }, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
+  const isRawWalletAccount = (0, _utils.getSourceProvider)(session.user) === 'wallet';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      p: 2,
+      pb: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1.5
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: isBlocklet ? _noop.default : onSwitchProfile,
+          "data-cy": "sessionManager-switch-profile-trigger",
+          sx: {
+            cursor: isBlocklet ? 'default' : 'pointer',
+            position: 'relative',
+            borderRadius: '100%',
+            overflow: 'hidden',
+            fontSize: 0,
+            flexShrink: 0,
+            '&:hover': isBlocklet ? {} : {
+              '&::after': {
+                content: "\"".concat(t('switch'), "\""),
+                position: 'absolute',
+                bottom: 0,
+                background: 'rgba(0, 0, 0, 0.2)',
+                left: 0,
+                right: 0,
+                height: '2.2em',
+                color: 'white',
+                textAlign: 'center',
+                fontSize: '12px',
+                lineHeight: '2em'
+              }
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            variant: "circle",
+            did: session.user.did,
+            src: avatar,
+            size: 48,
+            shape: "circle",
+            sx: {
+              cursor: isBlocklet ? 'unset' : 'pointer'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          sx: {
+            wordBreak: 'break-all'
+          },
+          children: session.user.fullName
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.role.toUpperCase()),
+        size: "small",
+        variant: "outlined",
+        clickable: true,
+        sx: {
+          flexShrink: 0,
+          fontWeight: 'bold',
+          fontSize: '12px',
+          color: _Colors.temp.textBase,
+          borderColor: _Colors.temp.borderBase,
+          pr: 1,
+          pl: 0.5,
+          '&:active': {
+            boxShadow: 'none'
+          }
+        },
+        deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _swapHorizRounded.default,
+          color: _Colors.temp.textBase
+        }),
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserSwitch.default, {
+      session: session,
+      onSwitch: onSwitchAccount,
+      isBlocklet: isBlocklet,
+      locale: locale
+    }), isRawWalletAccount ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        color: _Colors.temp.primaryBase,
+        backgroundColor: _Colors.temp.surfacePrimarySubtitle,
+        borderRadius: 1,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: 12,
+        py: 0.75,
+        px: 1.5,
+        cursor: 'pointer',
+        mt: -0.75
+      },
+      onClick: onBindWallet,
+      "data-cy": "sessionManager-bind-trigger",
+      children: [t('connectDIDWallet'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _arrowRightAltRounded.default,
+        color: _Colors.temp.primaryBase,
+        fontSize: 16
+      })]
+    })]
+  });
+}
+UserInfo.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  onSwitchPassport: _propTypes.default.func.isRequired,
+  onSwitchAccount: _propTypes.default.func.isRequired,
+  onBindWallet: _propTypes.default.func.isRequired,
+  onSwitchProfile: _propTypes.default.func,
+  locale: _propTypes.default.string,
+  isBlocklet: _propTypes.default.bool
+};
+UserInfo.defaultProps = {
+  locale: 'en',
+  isBlocklet: true,
+  onSwitchProfile: _noop.default
+};