@blocklet/ui-react 2.13.70 → 3.0.1

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

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { use } from 'react';
 import { Box, CircularProgress, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
@@ -111,7 +111,7 @@ export default function UserCenter({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
-  const sessionCtx: TSessionContext = useContext(SessionContext);
+  const sessionCtx: TSessionContext = use(SessionContext);
   const session = sessionCtx?.session;
 
   const currentDid = useCreation(() => {
@@ -502,12 +502,17 @@ export default function UserCenter({
 
     return (
       <ContentWrapper display="flex" flexDirection={isMobile ? 'column' : 'row'}>
-        <Box flex="1" className="user-center-tabs" order={isMobile ? 2 : 'unset'}>
+        <Box
+          className="user-center-tabs"
+          sx={{
+            flex: '1',
+            order: isMobile ? 2 : 'unset',
+          }}>
           {userCenterTabs.length > 0 && currentTab ? (
             <Box
-              display="flex"
-              flexDirection="column"
               sx={{
+                display: 'flex',
+                flexDirection: 'column',
                 height: '100%',
                 overflow: 'auto',
                 padding: '1px',

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

@@ -58,7 +58,13 @@ export default function AddressEditor({
   });
 
   return (
-    <Box display="flex" flexDirection="column" gap={2} mt={2}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        mt: 2,
+      }}>
       <EditableField
         placeholder={t('profile.address.country')}
         value={address.country || defaultCountry}
@@ -76,8 +82,11 @@ export default function AddressEditor({
           sx={selectStyle}
         />
       </EditableField>
-
-      <Box display="flex" gap={2}>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 2,
+        }}>
         <EditableField
           value={address.province || ''}
           onChange={(value) => handleChange('province', value)}
@@ -96,7 +105,6 @@ export default function AddressEditor({
           errorMsg={errors.city}
         />
       </Box>
-
       <EditableField
         value={address.line1 || ''}
         onChange={(value) => handleChange('line1', value)}
@@ -107,7 +115,6 @@ export default function AddressEditor({
         rows={2}
         errorMsg={errors.line1}
       />
-
       <EditableField
         value={address.line2 || ''}
         onChange={(value) => handleChange('line2', value)}
@@ -118,7 +125,6 @@ export default function AddressEditor({
         rows={2}
         errorMsg={errors.line2}
       />
-
       <EditableField
         value={address.postalCode || ''}
         onChange={(value) => handleChange('postalCode', value)}

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -1,15 +1,12 @@
-import { Box, Button, FormControl, IconButton, styled, TextField, Typography } from '@mui/material';
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-import useTheme from '@mui/material/styles/useTheme';
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, useMemo, useState } from 'react';
+import { Box, Button, FormControl, IconButton, styled, TextField, Typography, useTheme } from '@mui/material';
+import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useMemoizedFn } from 'ahooks';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import LinkIcon from '@arcblock/icons/lib/Link';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import { joinURL, withoutProtocol } from 'ufo';
+import { withoutProtocol } from 'ufo';
 import { isValidUrl } from './utils';
 import { translations } from '../../libs/locales';
 import { commonInputStyle, inputFieldStyle } from '../editable-field';
@@ -96,15 +93,30 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
   };
 
   return (
-    <Box width="100%">
-      <Box display="flex" justifyContent="space-between" alignItems="center" gap={1}>
+    <Box
+      sx={{
+        width: '100%',
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: 1,
+        }}>
         <Typography variant="subtitle1" gutterBottom sx={{ mb: 0, fontSize: '12px', color: 'text.primary' }}>
           {t('profile.socialMedia')}
         </Typography>
       </Box>
       {links.map((link, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Box key={index} display="flex" alignItems="flex-start" mb={1}>
+        <Box
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          sx={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            mb: 1,
+          }}>
           <LinkInput
             value={link}
             onChange={(value) => handleInputChange(index, value)}
@@ -146,49 +158,16 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
  * favicon 预览
  */
 function FaviconPreview({ link }: { link: string }) {
-  const [favicon, setFavicon] = useState('');
-  const [iconError, setIconError] = useState(false); // 控制是否显示默认图标
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
 
-  useEffect(() => {
-    try {
-      if (link) {
-        const url = new URL(link);
-        const faviconUrl = joinURL(url.origin, 'favicon.ico');
-
-        // 尝试加载 Favicon
-        const img = new Image();
-        img.src = faviconUrl;
-        // TODO: CSP 导致解析失败
-        img.onload = () => {
-          setFavicon(faviconUrl);
-          setIconError(false);
-        };
-        img.onerror = () => {
-          setIconError(true);
-          setFavicon('');
-        };
-      } else {
-        setIconError(true);
-        setFavicon('');
-      }
-    } catch (error) {
-      setIconError(true); // URL 解析失败，直接回退到默认图标
-    }
-  }, [link]);
-
   if (!link) {
     return null;
   }
 
-  if (iconError || !favicon) {
-    return (
-      <LinkIcon width={20} height={20} style={{ filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none' }} />
-    );
-  }
-
-  return <img src={favicon} alt="Favicon" width={20} height={20} />;
+  return (
+    <LinkIcon width={20} height={20} style={{ filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none' }} />
+  );
 }
 
 export function LinkPreviewInput({
@@ -205,14 +184,20 @@ export function LinkPreviewInput({
   }
 
   return (
-    <Box width="100%" display="flex" flexDirection="column" gap={2}>
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}>
       {links.map((link) => (
         <Box
           key={link}
-          display="flex"
-          alignItems="center"
-          gap={1}
           sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
             overflow: 'hidden',
             width: '100%',
           }}>

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

@@ -1,11 +1,8 @@
-/* eslint-disable react/no-unstable-nested-components */
-/* eslint-disable import/no-extraneous-dependencies */
 import { Icon } from '@iconify/react';
 import { Box, Backdrop, useMediaQuery, SwipeableDrawer, Typography, Tooltip } from '@mui/material';
 import type { BackdropProps } from '@mui/material';
 
 import styled from '@emotion/styled';
-import { joinURL } from 'ufo';
 import Button from '@arcblock/ux/lib/Button';
 import PhoneInput, {
   PhoneValue,
@@ -19,7 +16,7 @@ import omit from 'lodash/omit';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
+import { useMemo, useRef, useState, memo, useEffect, lazy } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import isEmail from 'validator/lib/isEmail';
 import isPostalCode from 'validator/lib/isPostalCode';
@@ -47,23 +44,27 @@ const iconSize = {
 
 const bioMaxLength = 200;
 
-const BackdropWrap = memo(
-  forwardRef<HTMLDivElement, BackdropProps>(function BackdropWrap(backdropProps, ref) {
-    return (
-      <Backdrop
-        ref={ref}
-        component="div"
-        style={{
-          backgroundColor: 'rgba(0, 0, 0, 0.6)',
-          backdropFilter: 'blur(3px)',
-          touchAction: 'none',
-        }}
-        {...backdropProps}
-        key="background"
-      />
-    );
-  })
-);
+const BackdropWrap = memo(function BackdropWrap({
+  ref,
+  ...backdropProps
+}: BackdropProps & {
+  // eslint-disable-next-line react/require-default-props
+  ref?: React.Ref<unknown>;
+}) {
+  return (
+    <Backdrop
+      ref={ref}
+      component="div"
+      style={{
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        backdropFilter: 'blur(3px)',
+        touchAction: 'none',
+      }}
+      {...backdropProps}
+      key="background"
+    />
+  );
+});
 
 // 添加 displayName
 BackdropWrap.displayName = 'BackdropWrap';
@@ -269,7 +270,7 @@ export default function UserMetadataComponent({
       }
       return {
         url: link,
-        favicon: joinURL(link, 'favicon.ico'),
+        favicon: link,
       };
     });
     onChange(newLinks, 'links');
@@ -363,7 +364,6 @@ export default function UserMetadataComponent({
             {t('profile.editProfile')}
           </Button>
         ) : null}
-
         {editing && isMyself && isSupportAddress ? (
           <AddressEditor
             address={address}
@@ -388,7 +388,13 @@ export default function UserMetadataComponent({
                     }
                     return (
                       <Box key={k}>
-                        <Typography variant="caption" component="p" fontWeight={600} sx={{ mb: 0 }}>
+                        <Typography
+                          variant="caption"
+                          component="p"
+                          sx={{
+                            fontWeight: 600,
+                            mb: 0,
+                          }}>
                           {t(`profile.address.${k}`)}
                         </Typography>
                         <Typography variant="caption" component="span">
@@ -410,7 +416,6 @@ export default function UserMetadataComponent({
             icon={<LocationIcon {...iconSize} />}
           />
         )}
-
         <EditableField
           value={metadata.timezone || currentTimezone}
           onChange={(value) => onChange(value, 'timezone')}
@@ -428,7 +433,6 @@ export default function UserMetadataComponent({
             mode={mode}
           />
         </EditableField>
-
         <EditableField
           value={metadata.email ?? user?.email ?? ''}
           editable={editing}
@@ -477,7 +481,6 @@ export default function UserMetadataComponent({
             validateMsg.email = msg;
           }}
         />
-
         <EditableField
           value={phoneValue.phone}
           editable={editing}
@@ -519,15 +522,16 @@ export default function UserMetadataComponent({
             }}
           />
         </EditableField>
-
         <LinkPreviewInput editable={editing} links={links} onChange={handleLinksChange} />
         {editing && isMyself ? (
           <Box
-            display="flex"
-            gap={1}
             style={{ width: '100%' }}
-            justifyContent="flex-end"
-            flexDirection={mode === 'drawer' ? 'column' : 'row'}>
+            sx={{
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              flexDirection: mode === 'drawer' ? 'column' : 'row',
+            }}>
             <Button
               fullWidth={mode === 'drawer'}
               size="small"
@@ -573,12 +577,14 @@ export default function UserMetadataComponent({
           slots={{
             backdrop: BackdropWrap,
           }}
-          PaperProps={{
-            sx: {
-              boxShadow: '0px -2px 16px 0px rgba(0, 0, 0, 0.08)',
-              borderRadius: 1.5, // 保持跟 DID Wallet 一致
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
+          slotProps={{
+            paper: {
+              sx: {
+                boxShadow: '0px -2px 16px 0px rgba(0, 0, 0, 0.08)',
+                borderRadius: 1.5, // 保持跟 DID Wallet 一致
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+              },
             },
           }}>
           <Box
@@ -598,8 +604,8 @@ export default function UserMetadataComponent({
             />
           </Box>
           <Box
-            p={2}
             sx={{
+              p: 2,
               maxHeight: '500px',
               overflowY: 'auto',
             }}>

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

@@ -1,10 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import ListSubheader from '@mui/material/ListSubheader';
-import TextField from '@mui/material/TextField';
+import { MenuItem, Select, SelectChangeEvent, ListSubheader, TextField } from '@mui/material';
 import debounce from 'lodash/debounce';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { getTimezones } from './utils';
 
 const timezones = getTimezones();

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

@@ -10,8 +10,10 @@ import { useEffect, useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
 import { parseURL, joinURL } from 'ufo';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import {
+  KeyboardArrowDown as KeyboardArrowDownIcon,
+  KeyboardArrowUp as KeyboardArrowUpIcon,
+} from '@mui/icons-material';
 
 import { translations } from '../../libs/locales';
 import type { User, UserAddress, UserMetadata } from '../../../@types';
@@ -134,13 +136,21 @@ export default function UserBasicInfo({
         position: 'relative',
         ...(rest.sx ?? {}),
       }}>
-      <Box className="user-info" display="flex" flexDirection={isMobile ? 'row' : 'column'} gap={2}>
+      <Box
+        className="user-info"
+        sx={{
+          display: 'flex',
+          flexDirection: isMobile ? 'row' : 'column',
+          gap: 2,
+        }}>
         <Box
           className="user-avatar"
-          position="relative"
-          display="flex"
-          alignItems="center"
-          justifyContent="space-between">
+          sx={{
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
           <Avatar
             //  @ts-ignore
             src={user?.avatar}
@@ -241,7 +251,13 @@ export default function UserBasicInfo({
             </Box>
           ) : null}
           <Collapse in={expanded} timeout="auto">
-            <Typography component="p" color="text.secondary" fontSize="14px" mb={2}>
+            <Typography
+              component="p"
+              sx={{
+                color: 'text.secondary',
+                fontSize: '14px',
+                mb: 2,
+              }}>
               {t('profile.justForYou')}
             </Typography>
             <UserInfo user={user} isMySelf={isMyself} />

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

@@ -1,5 +1,5 @@
 import { Box, BoxProps, Typography } from '@mui/material';
-import VerifiedIcon from '@mui/icons-material/Verified';
+import { Verified as VerifiedIcon } from '@mui/icons-material';
 
 type TUserInfoItemProps = {
   data: {
@@ -32,7 +32,12 @@ export default function UserInfoItem({ data, verified, ...rest }: TUserInfoItemP
         {data.icon}
         {data.title}
       </Typography>
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
         <Typography
           sx={{
             color: 'text.secondary',

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

@@ -1,13 +1,9 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import Badge from '@mui/material/Badge';
-import Box from '@mui/material/Box';
+import { Box, Badge, Tooltip, type SvgIconProps } from '@mui/material';
 import styled from '@emotion/styled';
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { useCreation, useMemoizedFn, useInterval, useUnmount } from 'ahooks';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Tooltip from '@mui/material/Tooltip';
 import { translate } from '@arcblock/ux/lib/Locale/util';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import { formatToDatetime } from '@arcblock/ux/lib/Util';
 import type { UserMetadata } from '../../../@types';
 import { DurationEnum, StatusEnum } from '../../../@types';
@@ -184,10 +180,12 @@ export default function UserStatus({
       <Tooltip title={tooltipTitle}>
         <Box
           className="status-icon"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          onClick={onOpenStatusSelector}>
+          onClick={onOpenStatusSelector}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
           {StatusIcon ? (
             <Suspense fallback={null}>
               <StatusIcon style={{ width: 16, height: 16 }} />

package/src/UserCenter/components/user-info/utils.ts

@@ -1,7 +1,12 @@
-import moment from 'moment-timezone';
 import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { DurationEnum, UserMetadata } from '../../../@types';
 
+// 扩展 dayjs 插件
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 const HOUR = 3600;
 const MINUTES_30 = 1800;
 const MINUTES_10 = 600;
@@ -9,19 +14,80 @@ const MINUTES_5 = 300;
 const MINUTES_1 = 60;
 const SECOND = 1;
 
-export const currentTimezone = moment.tz.guess();
+export const currentTimezone = dayjs.tz.guess();
+
+// 常用时区列表，作为兼容性 fallback
+const COMMON_TIMEZONES = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'Europe/Rome',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Asia/Hong_Kong',
+  'Asia/Singapore',
+  'Asia/Seoul',
+  'Asia/Kolkata',
+  'Australia/Sydney',
+  'Australia/Melbourne',
+  'Pacific/Auckland',
+  'America/Sao_Paulo',
+  'America/Mexico_City',
+  'Africa/Cairo',
+  'UTC',
+];
+
+// 获取时区列表的兼容性函数
+const getTimezoneList = () => {
+  // 优先使用现代 API
+  if (typeof Intl !== 'undefined' && Intl.supportedValuesOf) {
+    try {
+      return Intl.supportedValuesOf('timeZone');
+    } catch (error) {
+      console.warn('Intl.supportedValuesOf not supported, falling back to common timezones');
+    }
+  }
 
-export const getTimezones = () => {
-  const timezones = moment.tz.names();
+  // 尝试使用 Intl.DateTimeFormat 获取时区
+  if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
+    try {
+      // 使用 resolvedOptions 检测当前时区是否可用
+      const formatter = new Intl.DateTimeFormat('en', { timeZone: 'UTC' });
+      if (formatter.resolvedOptions().timeZone) {
+        return COMMON_TIMEZONES;
+      }
+    } catch (error) {
+      console.warn('Intl.DateTimeFormat timezone support limited');
+    }
+  }
 
-  const formattedTimezones = timezones.map((tz) => {
-    const offset = moment.tz(tz).utcOffset() / 60; // 计算 UTC 偏移 (小时)
-    const hours = Math.floor(offset);
-    const minutes = (offset % 1) * 60;
-    const label = `GMT${hours >= 0 ? '+' : ''}${hours}:${minutes === 30 ? '30' : '00'}`;
+  // 最后的 fallback
+  return COMMON_TIMEZONES;
+};
 
-    return { label, value: tz };
-  });
+export const getTimezones = () => {
+  const timezones = getTimezoneList();
+
+  const formattedTimezones = timezones
+    .map((tz) => {
+      try {
+        const offset = dayjs.tz(dayjs(), tz).utcOffset() / 60; // 计算 UTC 偏移 (小时)
+        const hours = Math.floor(offset);
+        const minutes = (offset % 1) * 60;
+        const label = `GMT${hours >= 0 ? '+' : ''}${hours}:${minutes === 30 ? '30' : '00'}`;
+
+        return { label, value: tz };
+      } catch (error) {
+        // 如果时区不支持，跳过
+        console.warn(`Timezone ${tz} not supported, skipping`);
+        return null;
+      }
+    })
+    .filter((tz): tz is { label: string; value: string } => tz !== null); // 类型守卫
 
   return formattedTimezones
     .sort((a, b) => {

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

@@ -177,8 +177,10 @@ export default function WebhookItem({
             checkUrl();
           }}
           error={!!currentState.error}
-          InputProps={{
-            endAdornment: <InputAdornment position="end">{inputAdornment}</InputAdornment>,
+          slotProps={{
+            input: {
+              endAdornment: <InputAdornment position="end">{inputAdornment}</InputAdornment>,
+            },
           }}
         />
 

package/src/UserSessions/components/user-sessions.tsx

@@ -243,7 +243,7 @@ export default function UserSessions({
       },
     });
   });
-  const customButtons: ReactElement[] = [];
+  const customButtons: ReactElement<any>[] = [];
   if (showAction) {
     customButtons.push(
       <Tooltip

package/src/common/domain-warning.jsx

@@ -1,13 +1,6 @@
 import { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-
+import { Box, Typography, Button, Dialog, DialogActions, DialogContent } from '@mui/material';
 import { useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { joinURL } from 'ufo';
@@ -67,7 +60,7 @@ const ONE_MONTH = 1000 * 60 * 60 * 24 * 30;
 
 const DASHBOARD_DOMAIN = '.well-known/service/admin/domains';
 
-export default function DomainWarning({ locale, session }) {
+export default function DomainWarning({ locale = 'en', session = {} }) {
   const user = session?.user;
   const isMobile = useMobile();
 
@@ -183,8 +176,3 @@ DomainWarning.propTypes = {
   locale: PropTypes.string,
   session: PropTypes.object,
 };
-
-DomainWarning.defaultProps = {
-  locale: 'en',
-  session: {},
-};