@blocklet/ui-react 2.9.52 → 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/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/item.js

@@ -3,8 +3,8 @@ import { Box, Chip, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 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";

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,7 @@ export declare const translations: {
         myInfo: string;
         loginNow: string;
         viewAfterLogin: string;
+        sessionManagement: string;
         storage: {
             spaces: {
                 tips: string;
@@ -110,6 +111,7 @@ export declare const translations: {
         myInfo: string;
         loginNow: string;
         viewAfterLogin: string;
+        sessionManagement: string;
         storage: {
             spaces: {
                 tips: string;

package/es/UserCenter/libs/locales.js

@@ -41,6 +41,7 @@ export const translations = {
     myInfo: "\u6211\u7684\u4FE1\u606F",
     loginNow: "\u7ACB\u5373\u767B\u5F55",
     viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B",
+    sessionManagement: "\u4F1A\u8BDD\u7BA1\u7406",
     storage: {
       spaces: {
         tips: "\u63D0\u793A",
@@ -110,6 +111,7 @@ export const translations = {
     myInfo: "My Info",
     loginNow: "Login",
     viewAfterLogin: "View after login",
+    sessionManagement: "Session Management",
     storage: {
       spaces: {
         tips: "Tips",

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 })
+        ] })
+      ]
+    }
+  );
+}

package/es/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;