@arcblock/ux 2.13.12 → 2.13.14

package/src/Colors/themes/default.ts

@@ -1,54 +1,8 @@
+import { BLOCKLET_THEME_LIGHT, type Theme } from '@blocklet/theme';
+
 /**
- * 默认 colors, ABT 系列
- *
- * - colors object 结构是在 mui theme#palette object 基础上调整后的结构
- * - 色值在 mui default theme 基础上将 figma 中常用的 colors 进行覆盖
- * - 扩展一些常用色值 (如 DID 系列)
- * - figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
+ * @deprecated 请使用 MUI theme 对象替代
  */
-const colors = {
-  common: {
-    black: '#000',
-    white: '#fff',
-  },
-  primary: { main: '#3773F2', contrastText: '#fff' }, // override
-  secondary: { main: '#16CED1', contrastText: '#fff' }, // override
-  error: { main: '#F16E6E', contrastText: '#fff' }, // override
-  warning: { main: '#DE9E37', contrastText: '#fff' }, // override
-  info: { main: '#0775F8', contrastText: '#fff' }, // override
-  success: { main: '#34BE74', contrastText: '#fff' }, // override
-  grey: {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#eeeeee',
-    300: '#e0e0e0',
-    400: '#bdbdbd',
-    500: '#9e9e9e',
-    600: '#757575',
-    700: '#616161',
-    800: '#424242',
-    900: '#212121',
-    A100: '#d5d5d5',
-    A200: '#aaaaaa',
-    A400: '#303030',
-    A700: '#616161',
-  },
-  text: {
-    primary: 'rgba(0, 0, 0, 0.87)',
-    secondary: 'rgba(0, 0, 0, 0.54)',
-    disabled: 'rgba(0, 0, 0, 0.38)',
-    hint: 'rgba(0, 0, 0, 0.38)',
-  },
-  divider: 'rgba(0, 0, 0, 0.12)',
-  background: {
-    default: '#fff',
-  },
-  // 扩展色值, 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
-  did: {
-    primary: '#4598FA',
-    secondary: '#49C3AD',
-  },
-  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
-};
+const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
 
 export default colors;

package/src/Colors/themes/did-connect.ts

@@ -1,3 +1,8 @@
+import type { Theme } from '@mui/material';
+
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 const colors = {
   background: {
     overlay: 'rgba(15, 23, 42, 0.5)',
@@ -10,7 +15,7 @@ const colors = {
   text: {
     primary: '#18181B',
     secondary: '#71717B',
-    disable: '#D4D4D8',
+    disabled: '#D4D4D8',
     hint: '#D4D4D8',
   },
   state: {
@@ -23,37 +28,39 @@ const colors = {
     main: '#2B7FFF',
     light: '#51A2FF',
     dark: '#155DFC',
+    contrastText: '#fff',
   },
   secondary: {
     main: '#615FFF',
     light: '#7C86FF',
     dark: '#4F39F6',
+    contrastText: '#fff',
   },
   error: {
     main: '#FB2C36',
     light: '#FF6467',
     dark: '#E7000B',
+    contrastText: '#fff',
   },
   warning: {
     main: '#FF6900',
     light: '#FF8904',
     dark: '#F54900',
+    contrastText: '#fff',
   },
   info: {
     main: '#2B7FFF',
     light: '#51A2FF',
     dark: '#155DFC',
+    contrastText: '#fff',
   },
   success: {
     main: '#00C950',
     light: '#05DF72',
     dark: '#00A63E',
+    contrastText: '#fff',
   },
-  divider: {
-    main: 'rgba(18, 22, 24, 0.06)',
-    light: '#F4F4F5',
-    dark: '#D4D4D5',
-  },
+  divider: 'rgba(18, 22, 24, 0.06)',
 };
 
 export default colors;

package/src/Colors/themes/temp.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 const colors = {
   textMuted: 'rgba(18, 22, 24, 0.36)',
   textSubtitle: 'rgba(18, 22, 24, 0.6)',

package/src/Config/config-provider.tsx

@@ -1,34 +1,33 @@
 import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
-import { type PaletteMode } from '@mui/material';
-import type { ThemeOptions } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { ThemeOptions, type PaletteMode } from '@mui/material';
+import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import set from 'lodash/set';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
 import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
-import { createTheme, useTheme } from '../Theme';
+import {
+  createTheme,
+  getDefaultThemePrefer,
+  lazyThemeConfig,
+  useTheme,
+  type UserThemeOptions,
+  type ThemeConfig,
+} from '../Theme';
 
 export interface ConfigContextType {
   mode: PaletteMode;
-  themeOptions: ThemeOptions;
+  themeOptions: UserThemeOptions;
   toggleMode: () => void;
 }
 
 const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
-const preferThemeModeKey = 'blocklet_theme_prefer';
-
-export function isThemeRecord(
-  theme: ThemeOptions | Record<PaletteMode, ThemeOptions>
-): theme is Record<PaletteMode, ThemeOptions> {
-  return 'light' in theme || 'dark' in theme;
-}
 
 export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
   prefer?: PaletteMode;
-  theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
+  theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
@@ -50,33 +49,21 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation,
 }: ConfigProviderProps) {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mode, setMode] = useState<PaletteMode>(() => {
     if (prefer) {
       return prefer;
     }
 
-    // 未启用暗色主题
-    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
-      return 'light';
-    }
-
-    // 本地缓存
-    const localPrefer = localStorage.getItem(preferThemeModeKey) as PaletteMode;
-    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
-      return localPrefer;
-    }
-
-    // 系统偏好
-    return prefersDarkMode ? 'dark' : 'light';
+    return getDefaultThemePrefer();
   });
 
   const _themeOptions = useMemo(() => {
     let result: ThemeOptions = {};
+    const getThemeConfig = lazyThemeConfig(mode);
 
     if (themeOptions) {
-      if (isThemeRecord(themeOptions)) {
-        result = themeOptions[mode] ? { ...themeOptions[mode] } : {};
+      if (typeof themeOptions === 'function') {
+        result = themeOptions(getThemeConfig());
       } else {
         result = { ...themeOptions };
       }
@@ -95,7 +82,7 @@ export function ConfigProvider({
   const toggleMode = useCallback(() => {
     const newMode = mode === 'light' ? 'dark' : 'light';
     setMode(newMode);
-    localStorage.setItem(preferThemeModeKey, newMode);
+    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
 
   const config = useMemo(

package/src/Config/theme-mode-toggle.tsx

@@ -15,7 +15,7 @@ export default function ThemeModeToggle() {
   }
 
   return (
-    <IconButton onClick={toggleMode} color="inherit">
+    <IconButton onClick={toggleMode}>
       {mode === 'light' ? <LightModeOutlinedIcon /> : <Brightness2OutlinedIcon />}
     </IconButton>
   );

package/src/DID/index.tsx

@@ -9,7 +9,6 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 import Address, { IDidAddressWrapper } from '../Address';
 import Avatar from '../Avatar';
-import { temp as colors } from '../Colors';
 import { DID_PREFIX } from '../Util/constant';
 
 import { HTMLDidAddressElement } from '../Address/did-address';
@@ -222,7 +221,7 @@ export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
                   flexShrink: 0,
                   cursor: 'pointer',
                   ml: 0.5,
-                  color: 'grey.500',
+                  color: 'text.secondary',
                 }}
               />
             ) : null}
@@ -290,7 +289,7 @@ export function DIDDialog({
           target="_blank"
           rel="noreferrer"
           sx={{
-            color: colors.foregroundsFgInteractive,
+            color: 'secondary.main',
             textDecoration: 'none',
             '&:hover': {
               textDecoration: 'underline',
@@ -371,7 +370,7 @@ export function DIDDialog({
         <Typography
           variant="body2"
           sx={{
-            color: colors.textSubtitle,
+            color: 'text.secondary',
             fontSize: '12px',
             mt: 1,
           }}>

package/src/DIDConnect/app-icon.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { joinURL } from 'ufo';
+import { SxProps } from '@mui/material';
+
+import Img from '../Img';
+import { isUrl } from '../Util';
+import DidAvatar from '../Avatar';
+
+type AppIconProps = {
+  appInfo: any;
+  size?: number;
+  sx?: SxProps;
+};
+
+export default function AppIcon({ appInfo, size = 32, ...rest }: AppIconProps) {
+  const [error, setError] = useState(false);
+  if (error || !(appInfo.appUrl || appInfo.appLogo)) {
+    return <DidAvatar did={appInfo.appPid} size={size} />;
+  }
+
+  let logoUrl = appInfo.appLogo || '';
+  if (!isUrl(logoUrl)) {
+    logoUrl = joinURL(appInfo.appUrl || '', logoUrl);
+  }
+
+  return (
+    <Img
+      src={logoUrl}
+      alt={appInfo.appName || 'Blocklet Icon'}
+      width={size}
+      height={size}
+      {...rest}
+      onError={() => setError(true)}
+    />
+  );
+}

package/src/DIDConnect/app-info-item.tsx

@@ -0,0 +1,82 @@
+import { Box, IconButton, SxProps, Tooltip, useMediaQuery } from '@mui/material';
+import CheckIcon from '@iconify-icons/material-symbols/check';
+import { Icon } from '@iconify/react';
+
+import DID from '../DID';
+import { mergeSx } from '../Util/style';
+import AppIcon from './app-icon';
+
+export default function AppInfoItem({
+  appInfo,
+  active = false,
+  appLogo = null,
+  sx,
+}: {
+  appInfo: any;
+  active?: boolean;
+  appLogo?: React.ReactNode;
+  sx?: SxProps;
+}) {
+  const isTinyView = useMediaQuery('(max-width:400px)');
+
+  return (
+    <Box
+      sx={mergeSx(
+        {
+          display: 'flex',
+          alignItems: 'center',
+          fontWeight: 600,
+          color: 'text.primary',
+
+          '& .app-info-content': {
+            paddingLeft: '8px',
+            overflow: 'hidden',
+          },
+
+          '& .app-info-name': {
+            maxWidth: '100%',
+            lineHeight: 'normal',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            fontSize: '12px',
+            color: 'text.primary',
+          },
+        },
+        sx
+      )}>
+      {appLogo || (
+        <Box
+          sx={{
+            borderRadius: 1,
+            overflow: 'hidden',
+            fontSize: 0,
+          }}>
+          <AppIcon appInfo={appInfo} />
+        </Box>
+      )}
+
+      <Box className="app-info-content">
+        <Tooltip title={appInfo.appName} placement="top">
+          <Box className="app-info-name">{appInfo.appName}</Box>
+        </Tooltip>
+        {appInfo.appPid && (
+          <DID
+            className="app-info-did"
+            did={appInfo.appPid}
+            sx={{ fontSize: '10px !important' }}
+            copyable={false}
+            startChars={isTinyView ? 6 : 8}
+            endChars={isTinyView ? 6 : 8}
+            size={12}
+          />
+        )}
+      </Box>
+      {active ? (
+        <IconButton size="small" color="success">
+          <Icon icon={CheckIcon} color="success" />
+        </IconButton>
+      ) : null}
+    </Box>
+  );
+}

package/src/DIDConnect/did-connect-footer.tsx

@@ -0,0 +1,51 @@
+import { Box, useMediaQuery } from '@mui/material';
+
+import PoweredBy from './powered-by';
+import AppInfoItem from './app-info-item';
+import AppIcon from './app-icon';
+import { getDIDColor, hexToRgba } from '../Util';
+
+export default function DIDConnectFooter({
+  currentAppInfo = globalThis.blocklet,
+  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
+}: {
+  currentAppInfo?: any;
+  currentAppColor?: string;
+}) {
+  const isSmallView = useMediaQuery('(max-width:640px)');
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 1,
+        fontSize: 12,
+        backgroundColor: hexToRgba(currentAppColor, 0.08),
+        // 需要保持跟 .did-connect__root 的规则一样
+        mx: isSmallView ? -2 : -3,
+        px: isSmallView ? 2 : 3,
+        py: 1.5,
+        // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
+        overflow: 'auto',
+        '&::-webkit-scrollbar': {
+          display: 'none', // 隐藏滚动条 (Webkit 浏览器)
+        },
+        '-ms-overflow-style': 'none', // 隐藏滚动条 (IE 浏览器)
+        'scrollbar-width': 'none', // 隐藏滚动条 (Firefox)
+      }}
+      className="did-connect__footer">
+      <AppInfoItem
+        appInfo={currentAppInfo}
+        appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
+        sx={{
+          flex: 1,
+          overflow: 'hidden',
+        }}
+      />
+
+      <PoweredBy sx={{ maxWidth: '100%', justifyContent: 'end' }} />
+    </Box>
+  );
+}

package/src/DIDConnect/did-connect-logo.tsx

@@ -0,0 +1,8 @@
+import DidBrandConnect from '@arcblock/icons/lib/DidBrandConnect';
+import { useTheme } from '@mui/material';
+
+export default function DidConnectLogo() {
+  const theme = useTheme();
+
+  return <DidBrandConnect style={{ filter: theme.palette.mode === 'dark' ? 'invert(1)' : 'none' }} />;
+}

package/src/DIDConnect/index.ts

@@ -0,0 +1,7 @@
+export { default as DIDConnectFooter } from './did-connect-footer';
+export { default as AppInfoItem } from './app-info-item';
+export { default as AppIcon } from './app-icon';
+export { default as PoweredBy } from './powered-by';
+export { default as withContainer } from './with-container';
+export { default as withUxTheme } from './with-ux-theme';
+export { default as DIDConnectLogo } from './did-connect-logo';

package/src/DIDConnect/powered-by.tsx

@@ -0,0 +1,48 @@
+import { Box, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import shieldCheckIcon from '@iconify-icons/mdi/shield-check';
+
+import DidConnectLogo from './did-connect-logo';
+import { mergeSx } from '../Util/style';
+
+export default function PoweredBy({ ...rest }) {
+  const { palette } = useTheme();
+
+  return (
+    <Box
+      {...rest}
+      sx={mergeSx(
+        {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'text.secondary',
+          gap: 0.5,
+          fontSize: 12,
+          fontFamily: 'Lexend',
+          whiteSpace: 'nowrap',
+        },
+        rest?.sx
+      )}>
+      <Icon icon={shieldCheckIcon} color={palette.success.main} />
+      Secured by
+      <Box
+        component="a"
+        href="https://www.didconnect.io/"
+        target="_blank"
+        rel="noopener"
+        sx={{
+          color: 'initial',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          textDecoration: 'none',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        }}>
+        <DidConnectLogo />
+      </Box>
+    </Box>
+  );
+}