@blocklet/ui-react 2.10.3 → 2.10.5

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

@@ -100,3 +100,38 @@ export type CreatePassportProps = {
     width?: string;
     height?: string;
 };
+export type BlockletMetaProps = {
+    appLogo?: React.ReactNode;
+    appName?: string;
+    theme?: {
+        background?: string;
+    };
+    enableConnect?: boolean;
+    enableLocale?: boolean;
+    navigation?: Array<{
+        title?: string | object;
+        link?: string | object;
+        icon?: string;
+        items?: Array<{
+            title?: string | object;
+            link?: string | object;
+        }>;
+    }>;
+};
+export type SessionManagerProps = {
+    showText?: boolean;
+    showRole?: boolean;
+    switchDid?: boolean;
+    switchProfile?: boolean;
+    switchPassport?: boolean;
+    disableLogout?: boolean;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onSwitchDid?: () => void;
+    onSwitchProfile?: () => void;
+    onSwitchPassport?: () => void;
+    menu?: any[];
+    menuRender?: () => void;
+    dark?: boolean;
+    size?: number;
+};

package/lib/Header/index.d.ts

@@ -1,10 +1,11 @@
+import { BlockletMetaProps, SessionManagerProps } from '../@types';
 declare const _default: import("react").ComponentType<{
-    [x: string]: any;
-    meta: any;
-    addons: any;
-    sessionManagerProps: any;
-    homeLink: any;
-    theme: any;
-    hideNavMenu: any;
+    meta: BlockletMetaProps;
+    addons: Function | JSX.Element;
+    sessionManagerProps: SessionManagerProps;
+    homeLink: string;
+    theme: object;
+    hideNavMenu: boolean;
+    bordered?: boolean;
 }>;
 export default _default;

package/lib/Header/index.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import PropTypes from "prop-types";
 import { withErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import { styled } from "@arcblock/ux/lib/Theme";
@@ -11,7 +10,6 @@ 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 { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
@@ -50,7 +48,17 @@ 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, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
+function Header({
+  meta = {},
+  addons,
+  sessionManagerProps = {
+    showRole: true
+  },
+  homeLink = publicPath,
+  theme: themeOverrides,
+  hideNavMenu = false,
+  ...rest
+}) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
@@ -70,7 +78,10 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
   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 });
+  const headerAddons = (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps })
+  );
   return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
     StyledUxHeader,
     {
@@ -80,42 +91,23 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
       ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,
       $bgcolor: theme?.background?.header,
-      children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => /* @__PURE__ */ jsx(
-        NavMenu,
-        {
-          mode: isMobile ? "inline" : "horizontal",
-          activeId,
-          items: navItems,
-          className: "header-nav",
-          bgColor: "transparent",
-          textColor: "#777"
-        }
+      children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => (
+        // @ts-ignore
+        /* @__PURE__ */ jsx(
+          NavMenu,
+          {
+            mode: isMobile ? "inline" : "horizontal",
+            activeId,
+            items: navItems,
+            className: "header-nav",
+            bgColor: "transparent",
+            textColor: "#777"
+          }
+        )
       )
     }
   ) });
 }
-Header.propTypes = {
-  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,
-  homeLink: PropTypes.string,
-  // 允许覆盖 header 内置的 theme
-  theme: PropTypes.object,
-  hideNavMenu: PropTypes.bool
-};
-Header.defaultProps = {
-  meta: {},
-  addons: null,
-  sessionManagerProps: {
-    showRole: true
-  },
-  homeLink: publicPath,
-  theme: null,
-  hideNavMenu: false
-};
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || "#fff"};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,

package/lib/Icon/index.d.ts

@@ -1,23 +1,10 @@
+import 'iconify-icon';
+import type { AvatarProps, BoxProps } from '@mui/material';
 /**
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
  */
-declare function Icon({ icon, size, sx, ...rest }: {
-    [x: string]: any;
-    icon: any;
-    size: any;
-    sx: any;
-}): import("react").JSX.Element | null;
-declare namespace Icon {
-    namespace propTypes {
-        let icon: any;
-        let size: any;
-        let sx: any;
-    }
-    namespace defaultProps {
-        let size_1: null;
-        export { size_1 as size };
-        let sx_1: null;
-        export { sx_1 as sx };
-    }
-}
-export default Icon;
+export default function Icon({ icon, size, sx, ...rest }: {
+    icon: string;
+    size?: number;
+    sx?: BoxProps['sx'];
+} & AvatarProps): import("react").JSX.Element | null;

package/lib/Icon/index.js

@@ -1,9 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import "iconify-icon";
-import PropTypes from "prop-types";
-import Avatar from "@mui/material/Avatar";
+import { Avatar } from "@mui/material";
+import { Icon as IconifyIcon } from "@iconify/react";
 import { isUrl, isIconifyString } from "../utils.js";
-export default function Icon({ icon, size, sx, ...rest }) {
+export default function Icon({
+  icon,
+  size,
+  sx,
+  ...rest
+}) {
   const _sx = [...Array.isArray(sx) ? sx : [sx]];
   if (size) {
     _sx.push({ width: size, height: size });
@@ -24,11 +29,11 @@ export default function Icon({ icon, size, sx, ...rest }) {
     });
   }
   if (isUrl(icon)) {
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, src: icon, sx: _sx });
+    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, src: icon, sx: _sx });
   }
   if (isIconifyString(icon)) {
     const height = size ? 0.6 * size + 4 : 0;
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx("iconify-icon", { icon, height: height || void 0 }) });
+    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx(IconifyIcon, { icon, height: height || void 0 }) });
   }
   if (icon && typeof icon === "string") {
     _sx.push({
@@ -37,19 +42,7 @@ export default function Icon({ icon, size, sx, ...rest }) {
         ...size && { fontSize: size - 2 }
       }
     });
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: Array.from(icon)[0] });
+    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, sx: _sx, children: Array.from(icon)[0] });
   }
   return null;
 }
-Icon.propTypes = {
-  // icon 支持 2 种形式:
-  // 1. iconify icon name: <prefix>:<name>
-  // 2. url
-  icon: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object])
-};
-Icon.defaultProps = {
-  size: null,
-  sx: null
-};

package/lib/UserCenter/components/config-profile.d.ts

@@ -1,4 +1,5 @@
 import { User } from '../../@types';
-export default function ConfigProfile({ user }: {
+export default function ConfigProfile({ user, onSave }: {
     user: User;
+    onSave: (type: 'profile') => void;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/config-profile.js

@@ -10,8 +10,8 @@ const languages = [
   { label: "English", value: "en" },
   { label: "\u4E2D\u6587", value: "zh" }
 ];
-export default function ConfigProfile({ user }) {
-  const { locale } = useLocaleContext();
+export default function ConfigProfile({ user, onSave }) {
+  const { locale, changeLocale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
@@ -29,6 +29,8 @@ export default function ConfigProfile({ user }) {
         }),
         sleep(350)
       ]);
+      await onSave("profile");
+      changeLocale(value);
       currentState.locale = value;
     } finally {
       currentState.loading = false;

package/lib/UserCenter/components/privacy.d.ts

@@ -3,8 +3,8 @@ type PrivacyConfig = {
     name: string;
     value: boolean;
 };
-export default function Privacy({ configList, onSave }: {
+export default function Privacy({ configList, onSave, }: {
     configList: PrivacyConfig[];
-    onSave: () => void;
+    onSave: (type: 'privacy') => void;
 }): import("react").JSX.Element;
 export {};

package/lib/UserCenter/components/privacy.js

@@ -9,7 +9,10 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { translations } from "../libs/locales.js";
 import { client } from "../../libs/client.js";
 import { formatAxiosError } from "../libs/utils.js";
-export default function Privacy({ configList, onSave }) {
+export default function Privacy({
+  configList,
+  onSave
+}) {
   const [dataList, setDataList] = useState(configList);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -29,7 +32,7 @@ export default function Privacy({ configList, onSave }) {
         })
       );
       Toast.success(t("saveSuccess"));
-      onSave();
+      onSave("privacy");
     } catch (err) {
       Toast.error(formatAxiosError(err));
     }
@@ -69,31 +72,33 @@ export default function Privacy({ configList, onSave }) {
           }
         }
       },
-      children: dataList.map((item) => /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: !item.value,
-          labelProps: {
-            label: /* @__PURE__ */ jsx(
-              Typography,
-              {
-                color: "text.primary",
-                sx: {
-                  fontSize: 14,
-                  display: "flex",
-                  flexFlow: "wrap",
-                  columnGap: 1,
-                  flex: 1
-                },
-                children: t("toPublic", { name: item.name })
-              }
-            )
+      children: dataList.map((item) => {
+        return /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: !item.value,
+            labelProps: {
+              label: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  color: "text.primary",
+                  sx: {
+                    fontSize: 14,
+                    display: "flex",
+                    flexFlow: "wrap",
+                    columnGap: 1,
+                    flex: 1
+                  },
+                  children: t("toPublic", { name: item.name })
+                }
+              )
+            },
+            size: "small",
+            onChange: (event) => handleChangeSwitch(item.key, event.target.checked)
           },
-          size: "small",
-          onChange: (event) => handleChangeSwitch(item.key, event.target.checked)
-        },
-        item.key
-      ))
+          item.key
+        );
+      })
     }
   );
 }

package/lib/UserCenter/components/settings.d.ts

@@ -2,7 +2,7 @@ import type { BoxProps } from '@mui/material';
 import { User, UserCenterTab } from '../../@types';
 export default function Settings({ user, settings, onSave, ...rest }: {
     user: User;
-    onSave: () => void;
+    onSave: (type: 'privacy' | 'profile') => void;
     settings: {
         userCenterTabs: UserCenterTab[];
     };

package/lib/UserCenter/components/settings.js

@@ -37,7 +37,7 @@ export default function Settings({
       {
         label: t("commonSetting.title"),
         value: "common",
-        content: /* @__PURE__ */ jsx(ConfigProfile, { user })
+        content: /* @__PURE__ */ jsx(ConfigProfile, { user, onSave })
       },
       {
         label: t("notificationManagement"),

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

@@ -149,13 +149,19 @@ export default function UserCenter({
       {
         user: userState.data,
         settings: { userCenterTabs },
-        onSave: async () => {
-          await privacyState.runAsync();
-          return privacyState.data;
+        onSave: async (type) => {
+          if (type === "privacy") {
+            await privacyState.runAsync();
+            return privacyState.data;
+          }
+          if (type === "profile") {
+            await session.refresh();
+          }
+          return null;
         }
       }
     );
-  }, [userState.data]);
+  }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t("settings"),
@@ -352,15 +358,13 @@ export default function UserCenter({
                     }
                   }
                 ),
-                isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
-                    /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-                    /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                  ] })
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
+                  /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
+                ] }),
+                isMyself ? /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
+                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
                 ] }) : null
               ]
             }

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

@@ -1,5 +1,6 @@
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../../@types';
-export default function UserInfo({ user, ...rest }: {
+export default function UserInfo({ user, isMySelf, ...rest }: {
     user: User;
+    isMySelf: boolean;
 } & BoxProps): import("react").JSX.Element;

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

@@ -15,6 +15,7 @@ import { translations } from "../../libs/locales.js";
 import UserInfoItem from "./user-info-item.js";
 export default function UserInfo({
   user,
+  isMySelf = false,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -25,31 +26,39 @@ export default function UserInfo({
     return user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
-  userInfoListData.push({
-    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
-    title: t("email"),
-    content: user?.email || t("emptyField")
-  });
-  userInfoListData.push({
-    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
-    title: t("lastLoginAt"),
-    content: user?.lastLoginAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt, relativeRange: 3 * 86400 * 1e3 }) : t("unknown")
-  });
-  userInfoListData.push({
-    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: SettingsInputAntennaRoundedIcon }),
-    title: t("lastLoginIp"),
-    content: user?.lastLoginIp || t("unknown")
-  });
+  if (isMySelf) {
+    userInfoListData.push({
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
+      title: t("email"),
+      content: user?.email || t("emptyField")
+    });
+    userInfoListData.push({
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
+      title: t("lastLoginAt"),
+      content: user?.lastLoginAt ? (
+        // @ts-ignore
+        /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt, relativeRange: 3 * 86400 * 1e3 })
+      ) : t("unknown")
+    });
+    userInfoListData.push({
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: SettingsInputAntennaRoundedIcon }),
+      title: t("lastLoginIp"),
+      content: user?.lastLoginIp || t("unknown")
+    });
+  }
   userInfoListData.push({
     icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MoreTimeRoundedIcon }),
     title: t("createdAt"),
+    // @ts-ignore
     content: user?.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.createdAt }) : t("unknown")
   });
-  userInfoListData.push({
-    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
-    title: t("registerFrom"),
-    content: readableProvider
-  });
+  if (isMySelf) {
+    userInfoListData.push({
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
+      title: t("registerFrom"),
+      content: readableProvider
+    });
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {

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

@@ -42,6 +42,7 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        hisInfo: string;
         loginNow: string;
         viewAfterLogin: string;
         sessionManagement: string;
@@ -127,6 +128,7 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        hisInfo: string;
         loginNow: string;
         viewAfterLogin: string;
         sessionManagement: string;

package/lib/UserCenter/libs/locales.js

@@ -8,7 +8,7 @@ export const translations = {
     lastLogin: "\u4E0A\u6B21\u767B\u5F55",
     lastLoginAt: "\u4E0A\u6B21\u767B\u5F55\u65F6\u95F4",
     lastLoginIp: "\u4E0A\u6B21\u767B\u5F55\u5730\u5740",
-    createdAt: "\u521B\u5EFA\u65F6\u95F4",
+    createdAt: "\u52A0\u5165\u65F6\u95F4",
     registerFrom: "\u6CE8\u518C\u6765\u6E90",
     unknown: "\u672A\u77E5",
     walletNotification: "\u94B1\u5305\u901A\u77E5",
@@ -42,6 +42,7 @@ export const translations = {
     switchProfile: "\u5207\u6362",
     userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
     myInfo: "\u6211\u7684\u4FE1\u606F",
+    hisInfo: "TA \u7684\u4FE1\u606F",
     loginNow: "\u7ACB\u5373\u767B\u5F55",
     viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B",
     sessionManagement: "\u4F1A\u8BDD\u7BA1\u7406",
@@ -93,7 +94,7 @@ export const translations = {
     lastLogin: "Last Login & IP",
     lastLoginAt: "Last Login",
     lastLoginIp: "Last IP",
-    createdAt: "Created At",
+    createdAt: "Member Since",
     registerFrom: "Register From",
     unknown: "Unknown",
     walletNotification: "DID Wallet notification",
@@ -127,6 +128,7 @@ export const translations = {
     switchProfile: "Switch",
     userInfo: "User Info",
     myInfo: "My Info",
+    hisInfo: "His/Her Info",
     loginNow: "Login",
     viewAfterLogin: "View after login",
     sessionManagement: "Session Management",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.3",
+  "version": "2.10.5",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.3",
-    "@arcblock/react-hooks": "^2.10.3",
+    "@arcblock/bridge": "^2.10.5",
+    "@arcblock/react-hooks": "^2.10.5",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -78,5 +78,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "bd12e5b7417376a7a2be74354a070f04a997efac"
+  "gitHead": "b5740a02ed3bae848a586abe9cd8b35d507f0152"
 }

package/src/@types/index.ts

@@ -112,3 +112,40 @@ export type CreatePassportProps = {
   width?: string;
   height?: string;
 };
+
+export type BlockletMetaProps = {
+  appLogo?: React.ReactNode;
+  appName?: string;
+  theme?: {
+    background?: string;
+  };
+  enableConnect?: boolean;
+  enableLocale?: boolean;
+  navigation?: Array<{
+    title?: string | object;
+    link?: string | object;
+    icon?: string;
+    items?: Array<{
+      title?: string | object;
+      link?: string | object;
+    }>;
+  }>;
+};
+
+export type SessionManagerProps = {
+  showText?: boolean;
+  showRole?: boolean;
+  switchDid?: boolean;
+  switchProfile?: boolean;
+  switchPassport?: boolean;
+  disableLogout?: boolean;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onSwitchDid?: () => void;
+  onSwitchProfile?: () => void;
+  onSwitchPassport?: () => void;
+  menu?: any[];
+  menuRender?: () => void;
+  dark?: boolean;
+  size?: number;
+};

package/src/Header/{index.jsx → index.tsx}

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { styled } from '@arcblock/ux/lib/Theme';
@@ -11,19 +10,19 @@ import omit from 'lodash/omit';
 
 import Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
-import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
+import { BlockletMetaProps, SessionManagerProps } from '../@types';
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
-const parseNavigation = (navigation) => {
+const parseNavigation = (navigation: any) => {
   if (!navigation?.length) {
     return { navItems: [], activeId: null };
   }
   let counter = 1;
-  const parseItem = (item) => {
+  const parseItem = (item: any) => {
     const icon = item.icon ? <Icon icon={item.icon} /> : null;
     if (item.items) {
       return {
@@ -62,7 +61,25 @@ const parseNavigation = (navigation) => {
  */
 // eslint-disable-next-line no-shadow
 
-function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
+function Header({
+  meta = {},
+  addons,
+  sessionManagerProps = {
+    showRole: true,
+  },
+  homeLink = publicPath,
+  theme: themeOverrides,
+  hideNavMenu = false,
+  ...rest
+}: {
+  meta: BlockletMetaProps;
+  addons: Function | JSX.Element;
+  sessionManagerProps: SessionManagerProps;
+  homeLink: string;
+  theme: object;
+  hideNavMenu: boolean;
+  bordered?: boolean;
+}) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
@@ -85,8 +102,11 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const _addons =
-    typeof addons === 'function' ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
+    typeof addons === 'function'
+      ? (builtInAddons: any) => addons(builtInAddons, { navigation: parsedNavigation })
+      : addons;
   const headerAddons = (
+    // @ts-ignore
     <HeaderAddons formattedBlocklet={formattedBlocklet} addons={_addons} sessionManagerProps={sessionManagerProps} />
   );
 
@@ -102,7 +122,8 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {hideNavMenu || !navItems?.length
           ? null
-          : ({ isMobile }) => (
+          : ({ isMobile }: { isMobile: boolean }) => (
+              // @ts-ignore
               <NavMenu
                 mode={isMobile ? 'inline' : 'horizontal'}
                 activeId={activeId}
@@ -117,32 +138,6 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
   );
 }
 
-Header.propTypes = {
-  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,
-  homeLink: PropTypes.string,
-  // 允许覆盖 header 内置的 theme
-  theme: PropTypes.object,
-  hideNavMenu: PropTypes.bool,
-};
-
-Header.defaultProps = {
-  meta: {},
-  addons: null,
-  sessionManagerProps: {
-    showRole: true,
-  },
-  homeLink: publicPath,
-  theme: null,
-  hideNavMenu: false,
-};
-
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,

package/src/Icon/{index.jsx → index.tsx}

@@ -1,13 +1,23 @@
 import 'iconify-icon';
 
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
+import { Avatar } from '@mui/material';
+import type { AvatarProps, BoxProps } from '@mui/material';
+import { Icon as IconifyIcon } from '@iconify/react';
 import { isUrl, isIconifyString } from '../utils';
 
 /**
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
  */
-export default function Icon({ icon, size, sx, ...rest }) {
+export default function Icon({
+  icon,
+  size,
+  sx,
+  ...rest
+}: {
+  icon: string;
+  size?: number;
+  sx?: BoxProps['sx'];
+} & AvatarProps) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const _sx = [...(Array.isArray(sx) ? sx : [sx])];
   if (size) {
@@ -30,14 +40,14 @@ export default function Icon({ icon, size, sx, ...rest }) {
     });
   }
   if (isUrl(icon)) {
-    return <Avatar as="span" {...rest} src={icon} sx={_sx} />;
+    return <Avatar component="span" {...rest} src={icon} sx={_sx} />;
   }
   if (isIconifyString(icon)) {
     // y = 0.6 * x + 4
     const height = size ? 0.6 * size + 4 : 0;
     return (
-      <Avatar as="span" {...rest} sx={_sx}>
-        <iconify-icon icon={icon} height={height || undefined} />
+      <Avatar component="span" {...rest} sx={_sx}>
+        <IconifyIcon icon={icon} height={height || undefined} />
       </Avatar>
     );
   }
@@ -50,24 +60,10 @@ export default function Icon({ icon, size, sx, ...rest }) {
       },
     });
     return (
-      <Avatar as="span" {...rest} sx={_sx}>
+      <Avatar component="span" {...rest} sx={_sx}>
         {Array.from(icon)[0]}
       </Avatar>
     );
   }
   return null;
 }
-
-Icon.propTypes = {
-  // icon 支持 2 种形式:
-  // 1. iconify icon name: <prefix>:<name>
-  // 2. url
-  icon: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object]),
-};
-
-Icon.defaultProps = {
-  size: null,
-  sx: null,
-};

package/src/UserCenter/components/config-profile.tsx

@@ -14,8 +14,8 @@ const languages = [
   { label: '中文', value: 'zh' },
 ];
 
-export default function ConfigProfile({ user }: { user: User }) {
-  const { locale } = useLocaleContext();
+export default function ConfigProfile({ user, onSave }: { user: User; onSave: (type: 'profile') => void }) {
+  const { locale, changeLocale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -34,6 +34,8 @@ export default function ConfigProfile({ user }: { user: User }) {
         }),
         sleep(350),
       ]);
+      await onSave('profile');
+      changeLocale(value);
       currentState.locale = value;
     } finally {
       currentState.loading = false;

package/src/UserCenter/components/privacy.tsx

@@ -17,7 +17,13 @@ type PrivacyConfig = {
   value: boolean;
 };
 
-export default function Privacy({ configList, onSave }: { configList: PrivacyConfig[]; onSave: () => void }) {
+export default function Privacy({
+  configList,
+  onSave,
+}: {
+  configList: PrivacyConfig[];
+  onSave: (type: 'privacy') => void;
+}) {
   const [dataList, setDataList] = useState(configList);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -38,7 +44,7 @@ export default function Privacy({ configList, onSave }: { configList: PrivacyCon
         })
       );
       Toast.success(t('saveSuccess'));
-      onSave();
+      onSave('privacy');
     } catch (err) {
       Toast.error(formatAxiosError(err as AxiosError));
     }
@@ -79,29 +85,31 @@ export default function Privacy({ configList, onSave }: { configList: PrivacyCon
           },
         },
       }}>
-      {dataList.map((item) => (
-        <Switch
-          key={item.key}
-          checked={!item.value}
-          labelProps={{
-            label: (
-              <Typography
-                color="text.primary"
-                sx={{
-                  fontSize: 14,
-                  display: 'flex',
-                  flexFlow: 'wrap',
-                  columnGap: 1,
-                  flex: 1,
-                }}>
-                {t('toPublic', { name: item.name })}
-              </Typography>
-            ),
-          }}
-          size="small"
-          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch(item.key, event.target.checked)}
-        />
-      ))}
+      {dataList.map((item) => {
+        return (
+          <Switch
+            key={item.key}
+            checked={!item.value}
+            labelProps={{
+              label: (
+                <Typography
+                  color="text.primary"
+                  sx={{
+                    fontSize: 14,
+                    display: 'flex',
+                    flexFlow: 'wrap',
+                    columnGap: 1,
+                    flex: 1,
+                  }}>
+                  {t('toPublic', { name: item.name })}
+                </Typography>
+              ),
+            }}
+            size="small"
+            onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch(item.key, event.target.checked)}
+          />
+        );
+      })}
     </Box>
   );
 }

package/src/UserCenter/components/settings.tsx

@@ -22,7 +22,7 @@ export default function Settings({
   ...rest
 }: {
   user: User;
-  onSave: () => void;
+  onSave: (type: 'privacy' | 'profile') => void;
   settings: {
     userCenterTabs: UserCenterTab[];
   };
@@ -46,7 +46,7 @@ export default function Settings({
       {
         label: t('commonSetting.title'),
         value: 'common',
-        content: <ConfigProfile user={user} />,
+        content: <ConfigProfile user={user} onSave={onSave} />,
       },
       {
         label: t('notificationManagement'),

package/src/UserCenter/components/user-center.tsx

@@ -180,13 +180,19 @@ export default function UserCenter({
       <Settings
         user={userState.data as User}
         settings={{ userCenterTabs }}
-        onSave={async () => {
-          await privacyState.runAsync();
-          return privacyState.data;
+        onSave={async (type: 'privacy' | 'profile') => {
+          if (type === 'privacy') {
+            await privacyState.runAsync();
+            return privacyState.data;
+          }
+          if (type === 'profile') {
+            await session.refresh();
+          }
+          return null;
         }}
       />
     );
-  }, [userState.data]);
+  }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
 
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
@@ -383,17 +389,15 @@ export default function UserCenter({
               }}
             />
 
+            <Box>
+              <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{isMyself ? t('myInfo') : t('hisInfo')}</Typography>
+              <UserInfo user={userState.data as User} isMySelf={isMyself} />
+            </Box>
             {isMyself ? (
-              <>
-                <Box>
-                  <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
-                  <UserInfo user={userState.data as User} />
-                </Box>
-                <Box>
-                  <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                  <Passport user={userState.data as User} />
-                </Box>
-              </>
+              <Box>
+                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
+                <Passport user={userState.data as User} />
+              </Box>
             ) : null}
           </Box>
         </Box>

package/src/UserCenter/components/user-info/user-info.tsx

@@ -18,9 +18,11 @@ import type { User } from '../../../@types';
 
 export default function UserInfo({
   user,
+  isMySelf = false,
   ...rest
 }: {
   user: User;
+  isMySelf: boolean;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -32,35 +34,41 @@ export default function UserInfo({
   }, [user?.sourceProvider]);
 
   const userInfoListData = [];
-  userInfoListData.push({
-    icon: <Icon fontSize={16} icon={MailOutlineRoundedIcon} />,
-    title: t('email'),
-    content: user?.email || t('emptyField'),
-  });
-  userInfoListData.push({
-    icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
-    title: t('lastLoginAt'),
-    content: user?.lastLoginAt ? (
-      <RelativeTime locale={locale} value={user?.lastLoginAt} relativeRange={3 * 86400 * 1000} />
-    ) : (
-      t('unknown')
-    ),
-  });
-  userInfoListData.push({
-    icon: <Icon fontSize={16} icon={SettingsInputAntennaRoundedIcon} />,
-    title: t('lastLoginIp'),
-    content: user?.lastLoginIp || t('unknown'),
-  });
+  if (isMySelf) {
+    userInfoListData.push({
+      icon: <Icon fontSize={16} icon={MailOutlineRoundedIcon} />,
+      title: t('email'),
+      content: user?.email || t('emptyField'),
+    });
+    userInfoListData.push({
+      icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
+      title: t('lastLoginAt'),
+      content: user?.lastLoginAt ? (
+        // @ts-ignore
+        <RelativeTime locale={locale} value={user?.lastLoginAt} relativeRange={3 * 86400 * 1000} />
+      ) : (
+        t('unknown')
+      ),
+    });
+    userInfoListData.push({
+      icon: <Icon fontSize={16} icon={SettingsInputAntennaRoundedIcon} />,
+      title: t('lastLoginIp'),
+      content: user?.lastLoginIp || t('unknown'),
+    });
+  }
   userInfoListData.push({
     icon: <Icon fontSize={16} icon={MoreTimeRoundedIcon} />,
     title: t('createdAt'),
+    // @ts-ignore
     content: user?.createdAt ? <RelativeTime locale={locale} value={user?.createdAt} /> : t('unknown'),
   });
-  userInfoListData.push({
-    icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
-    title: t('registerFrom'),
-    content: readableProvider,
-  });
+  if (isMySelf) {
+    userInfoListData.push({
+      icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
+      title: t('registerFrom'),
+      content: readableProvider,
+    });
+  }
 
   return (
     <Box

package/src/UserCenter/libs/locales.ts

@@ -8,7 +8,7 @@ export const translations = {
     lastLogin: '上次登录',
     lastLoginAt: '上次登录时间',
     lastLoginIp: '上次登录地址',
-    createdAt: '创建时间',
+    createdAt: '加入时间',
     registerFrom: '注册来源',
     unknown: '未知',
     walletNotification: '钱包通知',
@@ -42,6 +42,7 @@ export const translations = {
     switchProfile: '切换',
     userInfo: '个人信息',
     myInfo: '我的信息',
+    hisInfo: 'TA 的信息',
     loginNow: '立即登录',
     viewAfterLogin: '登录后才可以查看',
     sessionManagement: '会话管理',
@@ -94,7 +95,7 @@ export const translations = {
     lastLogin: 'Last Login & IP',
     lastLoginAt: 'Last Login',
     lastLoginIp: 'Last IP',
-    createdAt: 'Created At',
+    createdAt: 'Member Since',
     registerFrom: 'Register From',
     unknown: 'Unknown',
     walletNotification: 'DID Wallet notification',
@@ -128,6 +129,7 @@ export const translations = {
     switchProfile: 'Switch',
     userInfo: 'User Info',
     myInfo: 'My Info',
+    hisInfo: 'His/Her Info',
     loginNow: 'Login',
     viewAfterLogin: 'View after login',
     sessionManagement: 'Session Management',