@arcblock/ux 2.13.42 → 2.13.44

package/src/AnimationWaiter/index.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useRef } from 'react';
+import { Skeleton } from '@mui/material';
+
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
 import noop from 'lodash/noop';
 
-import lottieJson from './default-animation.json';
-import { styled } from '../Theme';
+import { styled, useTheme } from '../Theme';
 
 /**
  * 用于长时间等待的用的动画组件
@@ -35,9 +36,12 @@ export default function AnimationWaiter({
   increaseSpeed,
   ...rest
 }) {
+  const theme = useTheme();
   const [tipsId, setTipsId] = useState(0);
   const [currentSpeed, setCurrentSpeed] = useState(speed);
   const [messageId, setMessageId] = useState(0);
+  const [defaultAnimation, setDefaultAnimation] = useState(null);
+  const [isLoading, setIsLoading] = useState(!animationData);
   // 动画的开始时间
   const startTime = useRef(new Date().getTime());
 
@@ -46,6 +50,29 @@ export default function AnimationWaiter({
     message = [message];
   }
 
+  // 懒加载默认动画
+  useEffect(() => {
+    if (!animationData) {
+      setIsLoading(true);
+      const loadAnimation = async () => {
+        try {
+          const module = await (theme.palette.mode === 'dark'
+            ? import('./dark-animation.json')
+            : import('./default-animation.json'));
+
+          setDefaultAnimation(module.default || module);
+
+          setIsLoading(false);
+        } catch (error) {
+          console.error('Failed to load animation:', error);
+          setIsLoading(false);
+        }
+      };
+
+      loadAnimation();
+    }
+  }, [animationData, theme.palette.mode]);
+
   useEffect(() => {
     if (!message) {
       return;
@@ -122,16 +149,22 @@ export default function AnimationWaiter({
 
   return (
     <Container {...rest}>
-      <Lottie
-        loop
-        animationData={animationData || lottieJson}
-        play
-        speed={currentSpeed}
-        style={{
-          width: size,
-          height: size,
-        }}
-      />
+      {isLoading ? (
+        <div style={{ width: size, height: size, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Skeleton variant="rounded" width={size * 0.4} height={size * 0.4} />
+        </div>
+      ) : (
+        <Lottie
+          loop
+          animationData={animationData || defaultAnimation}
+          play
+          speed={currentSpeed}
+          style={{
+            width: size,
+            height: size,
+          }}
+        />
+      )}
       {message && (
         <div className="waiter-message">
           {message.map((text, index) => {
@@ -183,7 +216,7 @@ AnimationWaiter.propTypes = {
 
 AnimationWaiter.defaultProps = {
   animationData: null,
-  size: '',
+  size: 256,
   message: '',
   messageDuration: 5000,
   messageLoop: true,

package/src/Footer/index.tsx

@@ -75,7 +75,7 @@ const Container = styled('div', {
   shouldForwardProp: (prop) => prop !== 'dark',
 })<ContainerProps>`
   position: relative;
-  margin-top: 64px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
   padding: 24px 0 32px;
   border-top: 1px solid ${(props) => props.theme.palette.divider};
   box-sizing: border-box;

package/src/Img/index.jsx

@@ -127,6 +127,7 @@ function Img({
       data-id="2"
       ref={ref}
       style={outerStyle}
+      className="arcblock_ux_img-wrapper"
       {...rest}
       sx={mergeSx(
         {

package/src/SessionUser/components/session-user-item.tsx

@@ -47,6 +47,7 @@ const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
             <Avatar did={sessionItem.userDid} size={36} />
           </Box>
           <WalletOSIcon
+            color={palette.text.secondary}
             loading={sessionItem.__isDefault}
             provider={sessionItem?.extra?.provider}
             walletOS={sessionItem?.extra?.walletOS}

package/src/UserCard/Content/basic.tsx

@@ -1,4 +1,7 @@
-import { Typography, Box, Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import useTheme from '@mui/material/styles/useTheme';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
 import isArray from 'lodash/isArray';
@@ -10,7 +13,7 @@ import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
 import { joinURL, withoutProtocol } from 'ufo';
-import { Fragment, useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, cloneElement } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
@@ -31,6 +34,16 @@ function formatLinkDisplay(link: string): string {
   return withoutProtocol(link);
 }
 
+/**
+ * dark mode 下，转换 icon 颜色
+ */
+function convertIconColor(isDark: boolean) {
+  return isDark
+    ? {
+        filter: 'brightness(0) saturate(100%) invert(1)',
+      }
+    : {};
+}
 const iconSize = {
   width: 16,
   height: 16,
@@ -49,9 +62,11 @@ interface RenderItem {
 }
 
 function TimeZoneField({ value }: { value: string }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   return (
     <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
-      <TimezoneIcon {...iconSize} />
+      <TimezoneIcon {...iconSize} style={convertIconColor(isDark)} />
       <Clock value={value} variant="body2" color="grey.800" />
     </Box>
   );
@@ -59,6 +74,8 @@ function TimeZoneField({ value }: { value: string }) {
 
 function LinkField({ value }: { value: string }) {
   const [useFallback, setUseFallback] = useState(false);
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   const faviconUrl = useCreation(() => {
     try {
       const url = new URL(value);
@@ -82,7 +99,7 @@ function LinkField({ value }: { value: string }) {
           onError={handleImageError}
         />
       ) : (
-        <LinkIcon {...iconSize} />
+        <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
       )}
       <LineText variant="body2" color="grey.800">
         <Typography
@@ -102,9 +119,16 @@ function LinkField({ value }: { value: string }) {
 
 function BasicField({ field, value, children }: { field: string; value: string; children?: React.ReactNode }) {
   const Icon = IconMap[field as keyof typeof IconMap];
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const iconColor = convertIconColor(isDark);
   return (
     <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
-      {Icon ? <Icon {...iconSize} /> : <IconifyIcon icon={infoCircleIcon} {...iconSize} />}
+      {Icon ? (
+        <Icon {...iconSize} style={iconColor} />
+      ) : (
+        <IconifyIcon icon={infoCircleIcon} {...iconSize} {...iconColor} />
+      )}
       <LineText variant="body2" color="grey.800">
         {children ?? value}
       </LineText>

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -29,10 +29,12 @@ function TooltipAvatar({
   avatarProps,
   onAvatarClick,
 }: TooltipAvatarProps) {
-  const avatarElement = (
-    <Box display="inline-block">
-      {renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)}
-    </Box>
+  const avatarElement = renderAvatar(
+    user,
+    avatarSize,
+    avatarProps,
+    onAvatarClick,
+    shouldShowHoverCard || !!tooltipTitle
   );
   // 使用普通文本Tooltip
   if (tooltipTitle) {

package/src/UserCard/components.tsx

@@ -43,18 +43,20 @@ export const renderAvatar = (
 
   // 显示用户头像
   return (
-    <Avatar
-      size={avatarSize}
-      did={user.did}
-      variant="circle"
-      style={{
-        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
-      }}
-      onClick={onClick}
-      src={user.avatar}
-      alt={user.fullName || ''}
-      {...(avatarProps || {})}
-    />
+    <Box className="user-card__avatar" display="flex">
+      <Avatar
+        size={avatarSize}
+        did={user.did}
+        variant="circle"
+        style={{
+          cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
+        }}
+        onClick={onClick}
+        src={user.avatar}
+        alt={user.fullName || ''}
+        {...(avatarProps || {})}
+      />
+    </Box>
   );
 };
 

package/src/UserCard/index.tsx

@@ -71,10 +71,12 @@ function UserCard(props: UserCardProps) {
           shouldShowHoverCard={false}
           user={user!}
           avatarProps={props.popupAvatarProps}
-          shortenLabelProps={props.popupShortenLabelProps}
+          shortenLabelProps={props.popupShortenLabelProps || props.shortenLabelProps}
           renderFields={props.popupRenderFields}
           renderName={props.popupRenderName}
           infoType={props.popupInfoType || props.infoType}
+          didProps={props.popupDidProps || props.didProps}
+          showDid={props.popupShowDid || props.showDid}
         />
       </DialogContainer>
     );

package/src/UserCard/types.ts

@@ -116,6 +116,8 @@ export interface UserCardProps {
   showHoverCard?: boolean;
   showDid?: boolean;
   didProps?: Partial<DIDProps>;
+  popupDidProps?: Partial<DIDProps>;
+  popupShowDid?: boolean;
 
   avatarProps?: Partial<AvatarProps>;
   popupAvatarProps?: Partial<AvatarProps>;