@blocklet/ui-react 2.9.51 → 2.9.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.51",
+  "version": "2.9.53",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -18,9 +18,9 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src tests --ext js --ext jsx",
+    "lint": "eslint src tests --ext js --ext jsx --ext tsx --ext ts",
     "lint:fix": "npm run lint -- --fix",
-    "build": "unbuild && node tools/auto-exports.js",
+    "build": "unbuild",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
@@ -63,8 +63,9 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.24",
-    "@arcblock/did-connect": "^2.9.51",
-    "@arcblock/ux": "^2.9.51",
+    "@arcblock/did-connect": "^2.9.53",
+    "@arcblock/react-hooks": "^2.9.53",
+    "@arcblock/ux": "^2.9.53",
     "@blocklet/js-sdk": "^1.16.24",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -72,14 +73,20 @@
     "@iconify/react": "^4.1.1",
     "ahooks": "^3.7.10",
     "axios": "^0.27.2",
+    "clsx": "^2.1.0",
     "core-js": "^3.25.5",
+    "dsbridge": "^3.1.4",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
+    "p-all": "^5.0.0",
     "p-wait-for": "^5.0.2",
+    "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
+    "react-router-dom": "^6.22.3",
+    "ua-parser-js": "^1.0.37",
     "ufo": "^1.3.2",
     "url-join": "^4.0.1"
   },
@@ -96,10 +103,11 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@types/ua-parser-js": "^0.7.39",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "e89e3c3f37f0891ef91d1f9f6f864f29806c22b7"
+  "gitHead": "bf54e5b6fe510e2340ae87d1561d38d04dc25363"
 }

package/src/@types/index.ts

@@ -1,15 +1,13 @@
 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;
@@ -17,7 +15,7 @@ export type User = {
   lastLoginIp?: string;
   createdAt?: string;
   passports?: any[];
-  didSpace: Record<string, any>;
+  didSpace?: Record<string, any>;
 };
 
 export type UserCenterTab = {

package/src/Dashboard/index.jsx

@@ -6,7 +6,7 @@ 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';
+import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
@@ -32,6 +32,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     }
   }, [meta]);
   const { localizedNav, flattened, matchedIndex } = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
     // 根据 role 筛选 nav 数据
     localizedNav = filterNavByRole(localizedNav, userRole);
@@ -49,7 +50,9 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       'items'
     );
     // 展平后使用 matchPaths 检测 link#active 状态
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     const matchedIndex = matchPaths(flattened.map((item) => item.url));
     if (matchedIndex !== -1) {
       flattened[matchedIndex].active = true;
@@ -84,6 +87,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     return null;
   }
   const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _headerAddons = (
     <HeaderAddons
       formattedBlocklet={formattedBlocklet}
@@ -111,13 +115,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]),
 };
 

package/src/Footer/index.jsx

@@ -11,7 +11,7 @@ import OverridableThemeProvider from '../common/overridable-theme-provider';
 import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import { blockletMetaProps } from '../types';
+import { BlockletMetaProps } from '../types';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
@@ -72,7 +72,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
 }
 
 Footer.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 允许覆盖 footer 内置的 theme
   theme: PropTypes.object,
 };

package/src/Header/index.jsx

@@ -11,7 +11,7 @@ import omit from 'lodash/omit';
 
 import Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
-import { blockletMetaProps, sessionManagerProps } from '../types';
+import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
@@ -61,6 +61,7 @@ const parseNavigation = (navigation) => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
+
 function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
@@ -82,6 +83,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _addons =
     typeof addons === 'function' ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
   const headerAddons = (
@@ -116,14 +118,14 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
 }
 
 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/src/Icon/index.jsx

@@ -8,6 +8,7 @@ import { isUrl, isIconifyString } from '../utils';
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
  */
 export default function Icon({ icon, size, sx, ...rest }) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _sx = [...(Array.isArray(sx) ? sx : [sx])];
   if (size) {
     _sx.push({ width: size, height: size });

package/src/UserCenter/components/notification.tsx

@@ -10,13 +10,13 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AxiosError } from 'axios';
 
 import { translations } from '../libs/locales';
 import WebhookItem from './webhook-item';
 import { User, WebhookItemData } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
-import { client } from '../libs/client';
-import { AxiosError } from 'axios';
+import { client } from '../../libs/client';
 
 export default function Notification({ user }: { user: User }) {
   const { locale } = useLocaleContext();

package/src/UserCenter/components/passport.tsx

@@ -31,9 +31,8 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
       }
       if (a.revoked) {
         return 1;
-      } else {
-        return -1;
       }
+      return -1;
     });
 
     return uniqBy(passportList, 'role');

package/src/UserCenter/components/privacy.tsx

@@ -8,7 +8,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
 
 import { translations } from '../libs/locales';
-import { client } from '../libs/client';
+import { client } from '../../libs/client';
 import { formatAxiosError } from '../libs/utils';
 
 type PrivacyConfig = {

package/src/UserCenter/components/settings.tsx

@@ -4,12 +4,14 @@ import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
 import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import { translations } from '../libs/locales';
 import Notification from './notification';
 import Privacy from './privacy';
 import { User, UserCenterTab } from '../../@types';
 import DidSpace from './storage';
+import { UserSessions } from '../../UserSessions';
 
 export default function Settings({
   user,
@@ -52,7 +54,16 @@ export default function Settings({
       user?.didSpace?.endpoint && {
         label: t('storageManagement'),
         value: 'storage',
-        content:  <ConfigUserSpaceProvider><DidSpace /></ConfigUserSpaceProvider>,
+        content: (
+          <ConfigUserSpaceProvider>
+            <DidSpace />
+          </ConfigUserSpaceProvider>
+        ),
+      },
+      {
+        label: t('sessionManagement'),
+        value: 'session',
+        content: <UserSessions user={user} />,
       },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
@@ -73,7 +84,9 @@ export default function Settings({
         {...rest}
         sx={{
           ...rest?.sx,
-          width: 520,
+          minWidth: {
+            md: 500,
+          },
           maxWidth: '100%',
         }}>
         <Tabs variant="card" tabs={tabs} current={currentTab.value} onChange={handleChangeTab} />

package/src/UserCenter/components/storage/connect-to.tsx

@@ -5,12 +5,17 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
 import { joinURL } from 'ufo';
 import toast from '@arcblock/ux/lib/Toast';
-import { func, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
-import {axios} from '../../libs/api';
+import { axios } from '../../libs/api';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 
-function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceGateway: SpaceGateway) => Promise<void>, storageEndpoint: string}) {
+function ConnectTo({
+  onConnect,
+  storageEndpoint,
+}: {
+  onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
+  storageEndpoint: string;
+}) {
   const { t, locale } = useLocaleContext();
 
   const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
@@ -18,8 +23,11 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
     action: 'connect-to-did-spaces-for-user',
     checkTimeout: 1000 * 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),
@@ -36,7 +44,6 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
     },
   });
 
-
   const updateSpaceGateway = async (spaceGateway: SpaceGateway) => {
     await onConnect(spaceGateway);
     toast.success(t('storage.spaces.connectedWithName', { name: spaceGateway.name }));
@@ -73,24 +80,24 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
       open: true,
       extraParams: {
         appDid: window.blocklet.appId,
-        appName:  window.blocklet.appName,
+        appName: window.blocklet.appName,
         appDescription: window.blocklet.appDescription,
         scopes: 'list:object read:object write:object',
         appUrl: window.blocklet.appUrl,
-        referrer: window.location.href
+        referrer: window.location.href,
       },
     }));
   };
 
   return (
     <Box>
-      <Button  
+      <Button
         color="primary"
         style={{ textTransform: 'none !important', fontSize: '1rem' }}
         size="small"
         onClick={handleUseWalletConnect}
         variant="outlined">
-          {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
+        {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
       </Button>
 
       {/* 为了获取 DID Spaces Url */}
@@ -109,7 +116,6 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
         messages={authorizeFromNftConnect.messages}
         locale={locale}
       />
-
     </Box>
   );
 }

package/src/UserCenter/components/storage/connected.tsx

@@ -1,9 +1,15 @@
-import { Box, Typography } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import SpaceItem from './item';
+import { Box, Typography } from '@mui/material';
 import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
+import SpaceItem from './item';
 
-function Connected({ spaceGateway, settingStorageEndpoint }: {spaceGateway: SpaceGateway | undefined, settingStorageEndpoint: SettingStorageEndpoint }) {
+function Connected({
+  spaceGateway,
+  settingStorageEndpoint,
+}: {
+  spaceGateway: SpaceGateway | undefined;
+  settingStorageEndpoint: SettingStorageEndpoint;
+}) {
   const { t } = useLocaleContext();
 
   return (

package/src/UserCenter/components/storage/delete.tsx

@@ -1,4 +1,4 @@
-import  React, { useState } from 'react';
+import React, { useState } from 'react';
 import { IconButton } from '@mui/material';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Confirm from '@arcblock/ux/lib/Dialog/confirm';
@@ -6,7 +6,13 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import toast from '@arcblock/ux/lib/Toast';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 
-function SpaceDelete({ spaceGateway, onDeleteSpace }: {spaceGateway: SpaceGateway, onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void> }) {
+function SpaceDelete({
+  spaceGateway,
+  onDeleteSpace,
+}: {
+  spaceGateway: SpaceGateway;
+  onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void>;
+}) {
   const { t } = useLocaleContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);

package/src/UserCenter/components/storage/index.tsx

@@ -1,4 +1,5 @@
 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';
@@ -6,6 +7,7 @@ import useMobile from '../../../hooks/use-mobile';
 import ConnectTo from './connect-to';
 import Connected from './connected';
 import Disconnect from './disconnect';
+import { translations } from '../../libs/locales';
 
 function DidSpace() {
   const isMobile = useMobile({});
@@ -21,21 +23,23 @@ function DidSpace() {
   }
 
   return (
-    <Container>
-      {/* 标题区 */}
+    <LocaleProvider translations={translations}>
+      <Container>
+        {/* 标题区 */}
 
-      <Box maxWidth={isMobile ? '360px' : '720px'}>
-        {hasStorageEndpoint ? (
-          <Connected spaceGateway={spaceGateway} settingStorageEndpoint={settingStorageEndpoint} />
-        ) : (
-          <Disconnect />
-        )}
-      </Box>
+        <Box maxWidth={isMobile ? '360px' : '720px'}>
+          {hasStorageEndpoint ? (
+            <Connected spaceGateway={spaceGateway} settingStorageEndpoint={settingStorageEndpoint} />
+          ) : (
+            <Disconnect />
+          )}
+        </Box>
 
-      <Box display="flex" alignItems="center" justifyContent="center" paddingTop="24px">
-        <ConnectTo onConnect={updateSpaceGateway} storageEndpoint={storageEndpoint} />
-      </Box>
-    </Container>
+        <Box display="flex" alignItems="center" justifyContent="center" paddingTop="24px">
+          <ConnectTo onConnect={updateSpaceGateway} storageEndpoint={storageEndpoint} />
+        </Box>
+      </Container>
+    </LocaleProvider>
   );
 }
 

package/src/UserCenter/components/storage/item.tsx

@@ -1,32 +1,25 @@
 import { Box, BoxProps, 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 DidAddress from '@arcblock/ux/lib/DID';
+
 // @ts-expect-error
 import SpacesConnectedSvg from './icons/space-connected.svg?react';
-import DidAddress from '@arcblock/ux/lib/DID';
-import PropTypes, { bool, func } from 'prop-types';
 import PreviewSpaceNft from './preview-nft';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 import useMobile from '../../../hooks/use-mobile';
 import { getSpaceNftDisplayUrlFromEndpoint } from '../../../libs/spaces';
 
-
-function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }: {spaceGateway: SpaceGateway, connected: boolean, onDisconnect: Function} & BoxProps) {
+function SpaceItem({
+  spaceGateway,
+  connected,
+  onDisconnect,
+  ...rest
+}: { spaceGateway: SpaceGateway; connected: boolean; onDisconnect: Function } & BoxProps) {
   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: any) {
-      console.error(error);
-      toast.error(error.message);
-    }
-  };
-
   return (
     <BoxContainer
       style={{

package/src/UserCenter/components/storage/preview-nft.tsx

@@ -5,7 +5,7 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 // @ts-expect-error
 import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
 
-function PreviewSpaceNft({ src, alt }: {src: string, alt: string}) {
+function PreviewSpaceNft({ src, alt }: { src: string; alt: string }) {
   const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
   const [open, setOpen] = useState(false);
 

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

@@ -16,17 +16,19 @@ import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery } from 'ufo';
 import type { AxiosError } from 'axios';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
 
-import { Header, Footer } from '../../';
+import Footer from '../../Footer';
+import Header from '../../Header';
 import { translations } from '../libs/locales';
 import UserInfo from './user-info';
 import UserBasicInfo from './user-basic-info';
-import type { SessionContext as TSessionContext, UserCenterTab } from '../../@types';
+import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
 import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
 import Passport from './passport';
 import Settings from './settings';
-import { client } from '../libs/client';
+import { client } from '../../libs/client';
 
 export default function UserCenter({
   children,
@@ -37,7 +39,7 @@ export default function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid,
+  userDid = undefined,
   stickySidebar = false,
 }: {
   readonly children: any;
@@ -46,8 +48,9 @@ export default function UserCenter({
   readonly disableAutoRedirect?: boolean;
   readonly autoPopupSetting?: boolean;
   readonly hideFooter?: boolean;
-  readonly headerProps?: object;
-  readonly footerProps?: object;
+  // FIXME: @zhanghan 将 header 和 footer 改为 ts 后，去掉这个 any
+  readonly headerProps?: any;
+  readonly footerProps?: any;
   readonly userDid?: string;
   readonly stickySidebar?: boolean;
 }) {
@@ -81,14 +84,15 @@ export default function UserCenter({
     return false;
   }, [currentDid, session?.user?.did]);
 
-  const userState = useRequest(
+  const userState = useRequest<UserPublicInfo | User | undefined, []>(
+    // eslint-disable-next-line consistent-return
     async () => {
       await pWaitFor(() => session?.initialized);
       if (isMyself) {
-        return session.user;
+        return session.user as User;
       }
       if (currentDid) {
-        return await client.user.getUserPublicInfo({ did: currentDid });
+        return client.user.getUserPublicInfo({ did: currentDid });
       }
     },
     {
@@ -114,6 +118,7 @@ export default function UserCenter({
     sx: {
       '.MuiDialog-paper': {
         borderRadius: 2,
+        maxWidth: 1200,
       },
       '.ux-dialog_title': {
         fontWeight: 600,
@@ -174,7 +179,7 @@ export default function UserCenter({
       title: t('settings'),
       content: (
         <Settings
-          user={userState.data}
+          user={userState.data as User}
           settings={{
             userCenterTabs,
           }}
@@ -258,7 +263,7 @@ export default function UserCenter({
             switchPassport={session.switchPassport}
             switchProfile={session.switchProfile}
             openSettings={openSettings}
-            user={userState.data}
+            user={userState.data as User}
             showFullDid={false}
             sx={{
               display: {
@@ -294,12 +299,14 @@ export default function UserCenter({
                   <CircularProgress sx={{ color: colors.primary100 }} />
                 </Box>
               ) : (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
                 <>
                   {currentActiveTab?.protected && !isMyself ? (
                     <Box>
                       <Empty>{t('underProtected')}</Empty>
                     </Box>
                   ) : (
+                    // eslint-disable-next-line react/jsx-no-useless-fragment
                     <>{children && <Box {...contentProps}>{children}</Box>}</>
                   )}
                 </>
@@ -355,7 +362,7 @@ export default function UserCenter({
               switchPassport={session.switchPassport}
               switchProfile={session.switchProfile}
               openSettings={openSettings}
-              user={userState.data}
+              user={userState.data as User}
               sx={{
                 display: {
                   xs: 'none',
@@ -368,11 +375,11 @@ export default function UserCenter({
               <>
                 <Box>
                   <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
-                  <UserInfo user={userState.data} />
+                  <UserInfo user={userState.data as User} />
                 </Box>
                 <Box>
                   <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                  <Passport user={userState.data} />
+                  <Passport user={userState.data as User} />
                 </Box>
               </>
             ) : null}

package/src/UserCenter/components/webhook-item.tsx

@@ -6,7 +6,6 @@ import {
   InputAdornment,
   MenuItem,
   Select,
-  Stack,
   TextField,
   Typography,
 } from '@mui/material';
@@ -75,6 +74,7 @@ export default function WebhookItem({
     onCancel();
   });
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _onTest = useMemoizedFn(async (data) => {
     currentState.loading = true;
     await onTest(data);