@blocklet/ui-react 2.9.51 → 2.9.53

package/lib/Dashboard/index.js

@@ -22,7 +22,7 @@ function Dashboard({
   fallbackUrl,
   invalidPathFallback,
   headerAddons,
-  sessionManagerProps: sessionManagerProps2,
+  sessionManagerProps,
   links,
   ...rest
 }) {
@@ -98,7 +98,7 @@ function Dashboard({
   const _headerAddons = /* @__PURE__ */(0, _jsxRuntime.jsx)(_headerAddons2.default, {
     formattedBlocklet,
     addons: headerAddons,
-    sessionManagerProps: sessionManagerProps2
+    sessionManagerProps
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_dashboard.default, {
     title: appName,
@@ -119,13 +119,13 @@ function Dashboard({
   });
 }
 Dashboard.propTypes = {
-  meta: _types.blockletMetaProps,
+  meta: _types.BlockletMetaProps,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
   fallbackUrl: _propTypes.default.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
   invalidPathFallback: _propTypes.default.func,
   headerAddons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.sessionManagerProps,
+  sessionManagerProps: _types.SessionManagerProps,
   links: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func])
 };
 Dashboard.defaultProps = {

package/lib/Footer/index.js

@@ -82,7 +82,7 @@ function Footer({
   });
 }
 Footer.propTypes = {
-  meta: _types.blockletMetaProps,
+  meta: _types.BlockletMetaProps,
   // 允许覆盖 footer 内置的 theme
   theme: _propTypes.default.object
 };

package/lib/Header/index.js

@@ -72,7 +72,7 @@ const parseNavigation = navigation => {
 function Header({
   meta,
   addons,
-  sessionManagerProps: sessionManagerProps2,
+  sessionManagerProps,
   homeLink,
   theme: themeOverrides,
   hideNavMenu,
@@ -111,7 +111,7 @@ function Header({
   const headerAddons = /* @__PURE__ */(0, _jsxRuntime.jsx)(_headerAddons.default, {
     formattedBlocklet,
     addons: _addons,
-    sessionManagerProps: sessionManagerProps2
+    sessionManagerProps
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
     theme: themeOverrides,
@@ -139,12 +139,12 @@ function Header({
   });
 }
 Header.propTypes = {
-  meta: _types.blockletMetaProps,
+  meta: _types.BlockletMetaProps,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.sessionManagerProps,
+  sessionManagerProps: _types.SessionManagerProps,
   homeLink: _propTypes.default.string,
   // 允许覆盖 header 内置的 theme
   theme: _propTypes.default.object,

package/lib/UserCenter/components/notification.js

@@ -19,7 +19,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _locales = require("../libs/locales");
 var _webhookItem = _interopRequireDefault(require("./webhook-item"));
 var _utils2 = require("../libs/utils");
-var _client = require("../libs/client");
+var _client = require("../../libs/client");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Notification({
   user

package/lib/UserCenter/components/passport.js

@@ -40,9 +40,8 @@ function Passport({
       }
       if (a.revoked) {
         return 1;
-      } else {
-        return -1;
       }
+      return -1;
     });
     return (0, _uniqBy.default)(passportList, "role");
   }, [user?.passports]);

package/lib/UserCenter/components/privacy.js

@@ -13,7 +13,7 @@ var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _locales = require("../libs/locales");
-var _client = require("../libs/client");
+var _client = require("../../libs/client");
 var _utils = require("../libs/utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Privacy({

package/lib/UserCenter/components/settings.js

@@ -15,6 +15,7 @@ var _locales = require("../libs/locales");
 var _notification = _interopRequireDefault(require("./notification"));
 var _privacy = _interopRequireDefault(require("./privacy"));
 var _storage = _interopRequireDefault(require("./storage"));
+var _UserSessions = require("../../UserSessions");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Settings({
   user,
@@ -58,6 +59,12 @@ function Settings({
       content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_configUserSpace.ConfigUserSpaceProvider, {
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_storage.default, {})
       })
+    }, {
+      label: t("sessionManagement"),
+      value: "session",
+      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_UserSessions.UserSessions, {
+        user
+      })
     }].filter(Boolean);
   }, [user, privacyConfigList]);
   const currentState = (0, _ahooks.useReactive)({
@@ -73,7 +80,9 @@ function Settings({
     ...rest,
     sx: {
       ...rest?.sx,
-      width: 520,
+      minWidth: {
+        md: 500
+      },
       maxWidth: "100%"
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {

package/lib/UserCenter/components/storage/connect-to.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SpaceGateway } from '../../../contexts/config-user-space';
-declare function ConnectTo({ onConnect, storageEndpoint, ...rest }: {
+declare function ConnectTo({ onConnect, storageEndpoint, }: {
     onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
     storageEndpoint: string;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/storage/connect-to.js

@@ -17,8 +17,7 @@ var _api = require("../../libs/api");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ConnectTo({
   onConnect,
-  storageEndpoint,
-  ...rest
+  storageEndpoint
 }) {
   const {
     t,
@@ -29,8 +28,9 @@ function ConnectTo({
     action: "connect-to-did-spaces-for-user",
     checkTimeout: 1e3 * 300,
     prefix: "/api/did",
-    // @ts-expect-error
     checkFn: _api.axios.create({
+      // FIXME: @jianchao 检查 env 的使用是否正确
+      // @ts-ignore
       baseURL: (0, _ufo.joinURL)(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
     }).get,
     extraParams: {},

package/lib/UserCenter/components/storage/connected.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
-declare function Connected({ spaceGateway, settingStorageEndpoint }: {
+declare function Connected({ spaceGateway, settingStorageEndpoint, }: {
     spaceGateway: SpaceGateway | undefined;
     settingStorageEndpoint: SettingStorageEndpoint;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/storage/connected.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
 var _item = _interopRequireDefault(require("./item"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Connected({

package/lib/UserCenter/components/storage/delete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SpaceGateway } from '../../../contexts/config-user-space';
-declare function SpaceDelete({ spaceGateway, onDeleteSpace }: {
+declare function SpaceDelete({ spaceGateway, onDeleteSpace, }: {
     spaceGateway: SpaceGateway;
     onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void>;
 }): JSX.Element;

package/lib/UserCenter/components/storage/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _jsxRuntime = require("react/jsx-runtime");
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _context = require("@arcblock/ux/lib/Locale/context");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _material = require("@mui/material");
 var _configUserSpace = require("../../../contexts/config-user-space");
@@ -13,6 +14,7 @@ var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
 var _connectTo = _interopRequireDefault(require("./connect-to"));
 var _connected = _interopRequireDefault(require("./connected"));
 var _disconnect = _interopRequireDefault(require("./disconnect"));
+var _locales = require("../../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function DidSpace() {
   const isMobile = (0, _useMobile.default)({});
@@ -30,23 +32,26 @@ function DidSpace() {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Container, {
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      maxWidth: isMobile ? "360px" : "720px",
-      children: hasStorageEndpoint ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_connected.default, {
-        spaceGateway,
-        settingStorageEndpoint
-      }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_disconnect.default, {})
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingTop: "24px",
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_connectTo.default, {
-        onConnect: updateSpaceGateway,
-        storageEndpoint
-      })
-    })]
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_context.LocaleProvider, {
+    translations: _locales.translations,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Container, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        maxWidth: isMobile ? "360px" : "720px",
+        children: hasStorageEndpoint ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_connected.default, {
+          spaceGateway,
+          settingStorageEndpoint
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_disconnect.default, {})
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: "24px",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_connectTo.default, {
+          onConnect: updateSpaceGateway,
+          storageEndpoint
+        })
+      })]
+    })
   });
 }
 const Container = (0, _styled.default)(_material.Box)`

package/lib/UserCenter/components/storage/item.js

@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
 var _previewNft = _interopRequireDefault(require("./preview-nft"));
 var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
 var _spaces = require("../../../libs/spaces");
@@ -26,17 +25,6 @@ function SpaceItem({
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const handleOnDisconnect = async () => {
-    try {
-      await onDisconnect();
-      _Toast.default.success(t("storage.spaces.gateway.delete.succeeded", {
-        name: spaceGateway.name
-      }));
-    } catch (error) {
-      console.error(error);
-      _Toast.default.error(error.message);
-    }
-  };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(BoxContainer, {
     style: {
       position: "relative"

package/lib/UserCenter/components/user-center.d.ts

@@ -7,8 +7,8 @@ export default function UserCenter({ children, currentTab, contentProps, disable
     readonly disableAutoRedirect?: boolean;
     readonly autoPopupSetting?: boolean;
     readonly hideFooter?: boolean;
-    readonly headerProps?: object;
-    readonly footerProps?: object;
+    readonly headerProps?: any;
+    readonly footerProps?: any;
     readonly userDid?: string;
     readonly stickySidebar?: boolean;
 }): import("react").JSX.Element | null;

package/lib/UserCenter/components/user-center.js

@@ -20,14 +20,15 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ufo = require("ufo");
-var _ = require("../../");
+var _Footer = _interopRequireDefault(require("../../Footer"));
+var _Header = _interopRequireDefault(require("../../Header"));
 var _locales = require("../libs/locales");
 var _userInfo = _interopRequireDefault(require("./user-info"));
 var _userBasicInfo = _interopRequireDefault(require("./user-basic-info"));
 var _blocklets = require("../../blocklets");
 var _passport = _interopRequireDefault(require("./passport"));
 var _settings = _interopRequireDefault(require("./settings"));
-var _client = require("../libs/client");
+var _client = require("../../libs/client");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserCenter({
   children,
@@ -38,7 +39,7 @@ function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid,
+  userDid = void 0,
   stickySidebar = false
 }) {
   const {
@@ -69,13 +70,15 @@ function UserCenter({
     }
     return false;
   }, [currentDid, session?.user?.did]);
-  const userState = (0, _ahooks.useRequest)(async () => {
+  const userState = (0, _ahooks.useRequest)(
+  // eslint-disable-next-line consistent-return
+  async () => {
     await (0, _pWaitFor.default)(() => session?.initialized);
     if (isMyself) {
       return session.user;
     }
     if (currentDid) {
-      return await _client.client.user.getUserPublicInfo({
+      return _client.client.user.getUserPublicInfo({
         did: currentDid
       });
     }
@@ -100,7 +103,8 @@ function UserCenter({
   } = (0, _Dialog.useConfirm)({
     sx: {
       ".MuiDialog-paper": {
-        borderRadius: 2
+        borderRadius: 2,
+        maxWidth: 1200
       },
       ".ux-dialog_title": {
         fontWeight: 600
@@ -273,12 +277,18 @@ function UserCenter({
                 color: _Colors.temp.primary100
               }
             })
-          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          }) :
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          /* @__PURE__ */
+          (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
             children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
                 children: t("underProtected")
               })
-            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            }) :
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            /* @__PURE__ */
+            (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
               children: children && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
                 ...contentProps,
                 children
@@ -377,7 +387,7 @@ function UserCenter({
       display: "flex",
       flexDirection: "column"
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_.Header, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
       bordered: true,
       ...headerProps
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -396,7 +406,7 @@ function UserCenter({
         gap: 2.5
       },
       children: [content, confirmHolder]
-    }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_.Footer, {
+    }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_Footer.default, {
       bordered: true,
       ...footerProps
     })]

package/lib/UserCenter/libs/locales.d.ts

@@ -41,6 +41,33 @@ export declare const translations: {
         myInfo: string;
         loginNow: string;
         viewAfterLogin: string;
+        sessionManagement: string;
+        storage: {
+            spaces: {
+                tips: string;
+                label: string;
+                connectedWithName: string;
+                gateway: {
+                    delete: {
+                        failed: string;
+                    };
+                };
+                provideNFT: {
+                    title: string;
+                    scan: string;
+                    success: string;
+                };
+                connect: {
+                    useWallet: string;
+                    useWalletReconnect: string;
+                    providerForStorage: string;
+                };
+                connected: {
+                    title: string;
+                    tag: string;
+                };
+            };
+        };
     };
     en: {
         settings: string;
@@ -84,5 +111,32 @@ export declare const translations: {
         myInfo: string;
         loginNow: string;
         viewAfterLogin: string;
+        sessionManagement: string;
+        storage: {
+            spaces: {
+                tips: string;
+                label: string;
+                connectedWithName: string;
+                gateway: {
+                    delete: {
+                        failed: string;
+                    };
+                };
+                provideNFT: {
+                    title: string;
+                    scan: string;
+                    success: string;
+                };
+                connect: {
+                    useWallet: string;
+                    useWalletReconnect: string;
+                    providerForStorage: string;
+                };
+                connected: {
+                    title: string;
+                    tag: string;
+                };
+            };
+        };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -46,7 +46,34 @@ const translations = exports.translations = {
     userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
     myInfo: "\u6211\u7684\u4FE1\u606F",
     loginNow: "\u7ACB\u5373\u767B\u5F55",
-    viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B"
+    viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B",
+    sessionManagement: "\u4F1A\u8BDD\u7BA1\u7406",
+    storage: {
+      spaces: {
+        tips: "\u63D0\u793A",
+        label: "\u8BF7\u8F93\u5165 DID Spaces \u670D\u52A1\u5730\u5740",
+        connectedWithName: "\u4F60\u5DF2\u6210\u529F\u8FDE\u63A5\u81F3 {name}",
+        gateway: {
+          delete: {
+            failed: "\u5220\u9664 DID Spaces \u5931\u8D25"
+          }
+        },
+        provideNFT: {
+          title: "\u8BF7\u4E3A {appName} \u51FA\u793A DID Spaces NFT",
+          scan: "\u4F7F\u7528\u4F60\u7684 DID Wallet \u626B\u63CF\u4E0B\u9762\u7684\u4E8C\u7EF4\u7801\u4E3A\u5E94\u7528 {appName} \u51FA\u793A DID Spaces NFT",
+          success: "\u8FDE\u63A5\u6210\u529F"
+        },
+        connect: {
+          useWallet: "\u4F7F\u7528 DID Wallet \u8FDE\u63A5",
+          useWalletReconnect: "\u4F7F\u7528 DID Wallet \u91CD\u65B0\u8FDE\u63A5",
+          providerForStorage: "\u8BF7\u8FDE\u63A5\u60A8\u7684 DID Spaces"
+        },
+        connected: {
+          title: "\u5DF2\u8FDE\u63A5\u7684 DID Spaces",
+          tag: "\u5DF2\u8FDE\u63A5"
+        }
+      }
+    }
   },
   en: {
     settings: "Settings",
@@ -89,6 +116,33 @@ const translations = exports.translations = {
     userInfo: "User Info",
     myInfo: "My Info",
     loginNow: "Login",
-    viewAfterLogin: "View after login"
+    viewAfterLogin: "View after login",
+    sessionManagement: "Session Management",
+    storage: {
+      spaces: {
+        tips: "Tips",
+        label: "Enter DID Spaces Gateway",
+        connectedWithName: "You have successfully connected to {name}",
+        gateway: {
+          delete: {
+            failed: "Delete gateway failed"
+          }
+        },
+        provideNFT: {
+          title: "Please show the DID Spaces NFT for {appName}",
+          scan: "Use your DID Wallet to scan the QR code below to allow the app {appName} show DID space NFT",
+          success: "Connected successfully"
+        },
+        connect: {
+          useWallet: "Connect with DID Wallet",
+          useWalletReconnect: "Reconnect with DID Wallet",
+          providerForStorage: "Please connect your DID Spaces"
+        },
+        connected: {
+          title: "Connected DID Spaces",
+          tag: "Connected"
+        }
+      }
+    }
   }
 };

package/lib/UserSessions/components/user-session-info.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { User } from '../../@types';
+export default function UserSessionInfo({ user, sessionUser }: {
+    readonly user: User;
+    readonly sessionUser: any;
+}): import("react").JSX.Element;

package/lib/UserSessions/components/user-session-info.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = UserSessionInfo;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
+var _ahooks = require("ahooks");
+var _Colors = require("@arcblock/ux/lib/Colors");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserSessionInfo({
+  user,
+  sessionUser
+}) {
+  const currentRole = (0, _ahooks.useCreation)(() => {
+    return (user?.passports || [])?.find(item => item.name === sessionUser.role);
+  }, [user?.passports, sessionUser?.role]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
+      size: 40,
+      variant: "circle",
+      shape: "circle",
+      src: sessionUser.avatar,
+      did: sessionUser.did
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            whiteSpace: "normal",
+            wordBreak: "break-all"
+          },
+          children: sessionUser.fullName
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+          label: currentRole?.title || currentRole?.name || "Guest",
+          size: "small",
+          variant: "outlined",
+          sx: {
+            flexShrink: 0,
+            fontWeight: "bold",
+            fontSize: "12px",
+            color: _Colors.temp.textBase,
+            borderColor: _Colors.temp.strokeBorderStrong,
+            backgroundColor: "transparent",
+            textTransform: "capitalize",
+            pr: 1,
+            pl: 0.5
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        color: "grey",
+        children: sessionUser.email
+      })]
+    })]
+  });
+}

package/lib/UserSessions/components/user-sessions.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { User } from '../../@types';
+export default function UserSessions({ user, showAction, showUser, }: {
+    readonly user: User & {
+        userSessions?: any[];
+    };
+    readonly showAction?: boolean;
+    readonly showUser?: boolean;
+}): import("react").JSX.Element;