@blocklet/ui-react 2.9.51 → 2.9.53

package/es/@types/index.d.ts

@@ -1,13 +1,11 @@
 import type { Axios } from 'axios';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
 export type SessionContext = {
     session: Session;
     api: Axios;
 };
-export type User = {
-    did: string;
-    fullName: string;
+export type User = UserPublicInfo & {
     role: string;
-    avatar: string;
     email?: string;
     phone?: string;
     sourceProvider?: string;
@@ -15,7 +13,7 @@ export type User = {
     lastLoginIp?: string;
     createdAt?: string;
     passports?: any[];
-    didSpace: Record<string, any>;
+    didSpace?: Record<string, any>;
 };
 export type UserCenterTab = {
     value: string;

package/es/Dashboard/index.d.ts

@@ -13,11 +13,11 @@ declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddon
 }): import("react").JSX.Element | null;
 declare namespace Dashboard {
     namespace propTypes {
-        export { blockletMetaProps as meta };
+        export { BlockletMetaProps as meta };
         export let fallbackUrl: any;
         export let invalidPathFallback: any;
         export let headerAddons: any;
-        export { sessionManagerProps };
+        export { SessionManagerProps as sessionManagerProps };
         export let links: any;
     }
     namespace defaultProps {
@@ -27,15 +27,14 @@ declare namespace Dashboard {
         export { invalidPathFallback_1 as invalidPathFallback };
         let headerAddons_1: undefined;
         export { headerAddons_1 as headerAddons };
-        export namespace sessionManagerProps_1 {
+        export namespace sessionManagerProps {
             let showRole: boolean;
             function onLogout(): void;
         }
-        export { sessionManagerProps_1 as sessionManagerProps };
         let links_1: never[];
         export { links_1 as links };
     }
 }
-import { blockletMetaProps } from '../types';
-import { sessionManagerProps } from '../types';
+import { BlockletMetaProps } from '../types';
+import { SessionManagerProps } from '../types';
 import { publicPath } from '../blocklets';

package/es/Dashboard/index.js

@@ -5,12 +5,12 @@ import PropTypes from "prop-types";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
-import { blockletMetaProps, sessionManagerProps } from "../types.js";
+import { BlockletMetaProps, SessionManagerProps } from "../types.js";
 import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps: sessionManagerProps2, links, ...rest }) {
+function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
   useWalletHiddenTopbar();
   const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
@@ -71,7 +71,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     {
       formattedBlocklet,
       addons: headerAddons,
-      sessionManagerProps: sessionManagerProps2
+      sessionManagerProps
     }
   );
   return /* @__PURE__ */ jsx(
@@ -93,13 +93,13 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
   );
 }
 Dashboard.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
   fallbackUrl: PropTypes.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
   invalidPathFallback: PropTypes.func,
   headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps,
+  sessionManagerProps: SessionManagerProps,
   links: PropTypes.oneOfType([PropTypes.array, PropTypes.func])
 };
 Dashboard.defaultProps = {

package/es/Footer/index.js

@@ -11,7 +11,7 @@ import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
-import { blockletMetaProps } from "../types.js";
+import { BlockletMetaProps } from "../types.js";
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
@@ -62,7 +62,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   ) });
 }
 Footer.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 允许覆盖 footer 内置的 theme
   theme: PropTypes.object
 };

package/es/Header/index.js

@@ -11,7 +11,7 @@ import { temp as colors } from "@arcblock/ux/lib/Colors";
 import omit from "lodash/omit";
 import Icon from "../Icon/index.js";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
-import { blockletMetaProps, sessionManagerProps } from "../types.js";
+import { BlockletMetaProps, SessionManagerProps } from "../types.js";
 import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
@@ -50,7 +50,7 @@ const parseNavigation = (navigation) => {
   const matchedIndex = matchPaths(flattened.map((item) => item.link));
   return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
 };
-function Header({ meta, addons, sessionManagerProps: sessionManagerProps2, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
+function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
@@ -70,7 +70,7 @@ function Header({ meta, addons, sessionManagerProps: sessionManagerProps2, homeL
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
   const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
-  const headerAddons = /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps: sessionManagerProps2 });
+  const headerAddons = /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps });
   return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
     StyledUxHeader,
     {
@@ -95,12 +95,12 @@ function Header({ meta, addons, sessionManagerProps: sessionManagerProps2, homeL
   ) });
 }
 Header.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps,
+  sessionManagerProps: SessionManagerProps,
   homeLink: PropTypes.string,
   // 允许覆盖 header 内置的 theme
   theme: PropTypes.object,

package/es/UserCenter/components/notification.js

@@ -13,7 +13,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { translations } from "../libs/locales.js";
 import WebhookItem from "./webhook-item.js";
 import { formatAxiosError } from "../libs/utils.js";
-import { client } from "../libs/client.js";
+import { client } from "../../libs/client.js";
 export default function Notification({ user }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {

package/es/UserCenter/components/passport.js

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

package/es/UserCenter/components/privacy.js

@@ -7,7 +7,7 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { translations } from "../libs/locales.js";
-import { client } from "../libs/client.js";
+import { client } from "../../libs/client.js";
 import { formatAxiosError } from "../libs/utils.js";
 export default function Privacy({ configList, onSave }) {
   const [dataList, setDataList] = useState(configList);

package/es/UserCenter/components/settings.js

@@ -9,6 +9,7 @@ import { translations } from "../libs/locales.js";
 import Notification from "./notification.js";
 import Privacy from "./privacy.js";
 import DidSpace from "./storage/index.js";
+import { UserSessions } from "../../UserSessions/index.js";
 export default function Settings({
   user,
   settings,
@@ -45,6 +46,11 @@ export default function Settings({
         label: t("storageManagement"),
         value: "storage",
         content: /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) })
+      },
+      {
+        label: t("sessionManagement"),
+        value: "session",
+        content: /* @__PURE__ */ jsx(UserSessions, { user })
       }
     ].filter(Boolean);
   }, [user, privacyConfigList]);
@@ -63,7 +69,9 @@ export default function Settings({
       ...rest,
       sx: {
         ...rest?.sx,
-        width: 520,
+        minWidth: {
+          md: 500
+        },
         maxWidth: "100%"
       },
       children: [

package/es/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/es/UserCenter/components/storage/connect-to.js

@@ -8,15 +8,21 @@ import { joinURL } from "ufo";
 import toast from "@arcblock/ux/lib/Toast";
 import isEmpty from "lodash/isEmpty";
 import { axios } from "../../libs/api.js";
-function ConnectTo({ onConnect, storageEndpoint, ...rest }) {
+function ConnectTo({
+  onConnect,
+  storageEndpoint
+}) {
   const { t, locale } = useLocaleContext();
   const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
     open: false,
     action: "connect-to-did-spaces-for-user",
     checkTimeout: 1e3 * 300,
     prefix: "/api/did",
-    // @ts-expect-error
-    checkFn: axios.create({ baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/") }).get,
+    checkFn: axios.create({
+      // FIXME: @jianchao 检查 env 的使用是否正确
+      // @ts-ignore
+      baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
+    }).get,
     extraParams: {},
     messages: {
       title: t("storage.spaces.provideNFT.title", { appName: window.blocklet.appName }, locale),

package/es/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/es/UserCenter/components/storage/connected.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Typography } from "@mui/material";
 import SpaceItem from "./item.js";
-function Connected({ spaceGateway, settingStorageEndpoint }) {
+function Connected({
+  spaceGateway,
+  settingStorageEndpoint
+}) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: "12px", children: /* @__PURE__ */ jsx(Typography, { fontSize: "1.2rem", fontWeight: "bold", children: t("storage.spaces.connected.title") }) }),

package/es/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/es/UserCenter/components/storage/delete.js

@@ -5,7 +5,10 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import Confirm from "@arcblock/ux/lib/Dialog/confirm";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import toast from "@arcblock/ux/lib/Toast";
-function SpaceDelete({ spaceGateway, onDeleteSpace }) {
+function SpaceDelete({
+  spaceGateway,
+  onDeleteSpace
+}) {
   const { t } = useLocaleContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
+import { LocaleProvider } from "@arcblock/ux/lib/Locale/context";
 import styled from "@emotion/styled";
 import { Box, CircularProgress } from "@mui/material";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
@@ -7,16 +8,17 @@ import useMobile from "../../../hooks/use-mobile.js";
 import ConnectTo from "./connect-to.js";
 import Connected from "./connected.js";
 import Disconnect from "./disconnect.js";
+import { translations } from "../../libs/locales.js";
 function DidSpace() {
   const isMobile = useMobile({});
   const { spaceGateway, updateSpaceGateway, settingStorageEndpoint, hasStorageEndpoint, loading, storageEndpoint } = useConfigUserSpaceContext();
   if (loading) {
     return /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  return /* @__PURE__ */ jsxs(Container, { children: [
+  return /* @__PURE__ */ jsx(LocaleProvider, { translations, children: /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsx(Box, { maxWidth: isMobile ? "360px" : "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway, settingStorageEndpoint }) : /* @__PURE__ */ jsx(Disconnect, {}) }),
     /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", paddingTop: "24px", children: /* @__PURE__ */ jsx(ConnectTo, { onConnect: updateSpaceGateway, storageEndpoint }) })
-  ] });
+  ] }) });
 }
 const Container = styled(Box)`
   height: 100%;

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

@@ -1,26 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Box, Chip, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import toast from "@arcblock/ux/lib/Toast";
 import CheckIcon from "@mui/icons-material/Check";
 import styled from "@emotion/styled";
-import SpacesConnectedSvg from "./icons/space-connected.svg?react";
 import DidAddress from "@arcblock/ux/lib/DID";
+import SpacesConnectedSvg from "./icons/space-connected.svg?react";
 import PreviewSpaceNft from "./preview-nft.js";
 import useMobile from "../../../hooks/use-mobile.js";
 import { getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
-function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }) {
+function SpaceItem({
+  spaceGateway,
+  connected,
+  onDisconnect,
+  ...rest
+}) {
   const isMobile = useMobile({});
   const { t } = useLocaleContext();
-  const handleOnDisconnect = async () => {
-    try {
-      await onDisconnect();
-      toast.success(t("storage.spaces.gateway.delete.succeeded", { name: spaceGateway.name }));
-    } catch (error) {
-      console.error(error);
-      toast.error(error.message);
-    }
-  };
   return /* @__PURE__ */ jsxs(
     BoxContainer,
     {

package/es/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/es/UserCenter/components/user-center.js

@@ -14,14 +14,15 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
 import { getQuery, withQuery } from "ufo";
-import { Header, Footer } from "../..//index.js";
+import Footer from "../../Footer/index.js";
+import Header from "../../Header/index.js";
 import { translations } from "../libs/locales.js";
 import UserInfo from "./user-info.js";
 import UserBasicInfo from "./user-basic-info.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
-import { client } from "../libs/client.js";
+import { client } from "../../libs/client.js";
 export default function UserCenter({
   children,
   currentTab,
@@ -31,7 +32,7 @@ export default function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid,
+  userDid = void 0,
   stickySidebar = false
 }) {
   const { locale } = useLocaleContext();
@@ -61,13 +62,14 @@ export default function UserCenter({
     return false;
   }, [currentDid, session?.user?.did]);
   const userState = useRequest(
+    // eslint-disable-next-line consistent-return
     async () => {
       await pWaitFor(() => session?.initialized);
       if (isMyself) {
         return session.user;
       }
       if (currentDid) {
-        return await client.user.getUserPublicInfo({ did: currentDid });
+        return client.user.getUserPublicInfo({ did: currentDid });
       }
     },
     {
@@ -90,7 +92,8 @@ export default function UserCenter({
   const { confirmHolder, confirmApi } = useConfirm({
     sx: {
       ".MuiDialog-paper": {
-        borderRadius: 2
+        borderRadius: 2,
+        maxWidth: 1200
       },
       ".ux-dialog_title": {
         fontWeight: 600
@@ -261,7 +264,13 @@ export default function UserCenter({
                   },
                   children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
                 }
-              ) : /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(Box, { ...contentProps, children }) }) })
+              ) : (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
+                  // eslint-disable-next-line react/jsx-no-useless-fragment
+                  /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(Box, { ...contentProps, children }) })
+                ) })
+              )
             ]
           }
         ) : null,

package/es/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/es/UserCenter/libs/locales.js

@@ -40,7 +40,34 @@ export const 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",
@@ -83,6 +110,33 @@ export const 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/es/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/es/UserSessions/components/user-session-info.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, Typography } from "@mui/material";
+import Avatar from "@arcblock/ux/lib/Avatar";
+import { useCreation } from "ahooks";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+export default function UserSessionInfo({ user, sessionUser }) {
+  const currentRole = useCreation(() => {
+    return (user?.passports || [])?.find((item) => item.name === sessionUser.role);
+  }, [user?.passports, sessionUser?.role]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: 40, variant: "circle", shape: "circle", src: sessionUser.avatar, did: sessionUser.did }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "normal", wordBreak: "break-all" }, children: sessionUser.fullName }),
+                /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: currentRole?.title || currentRole?.name || "Guest",
+                    size: "small",
+                    variant: "outlined",
+                    sx: {
+                      flexShrink: 0,
+                      fontWeight: "bold",
+                      fontSize: "12px",
+                      color: colors.textBase,
+                      borderColor: colors.strokeBorderStrong,
+                      backgroundColor: "transparent",
+                      textTransform: "capitalize",
+                      pr: 1,
+                      pl: 0.5
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: sessionUser.email })
+        ] })
+      ]
+    }
+  );
+}