@arcblock/ux 2.13.27 → 2.13.29

package/src/RelativeTime/index.tsx

@@ -55,6 +55,7 @@ export interface RelativeTimeProps {
   tz?: string;
   relativeRange?: number;
   enableTooltip?: boolean;
+  showUTCPrefix?: boolean;
 }
 
 function useRelativeTime({
@@ -144,13 +145,17 @@ function UTCChip({
   sign,
   hoursOffset,
   setIsUtc,
+  showUTCPrefix = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
   sign: string;
   hoursOffset: number;
   setIsUtc: (data: any) => void;
+  showUTCPrefix?: boolean;
 }) {
+  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+
   return (
     <Box
       component="span"
@@ -161,10 +166,11 @@ function UTCChip({
         fontSize: '0.8rem',
         borderColor: 'divider',
         borderRadius: '20px',
-        padding: '0px 8px',
+        padding: '4px 8px',
+        lineHeight: 1,
       }}
       onClick={() => setIsUtc((r: any) => !r)}>
-      {`${translations[locale].utc}: ${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
+      {`${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
     </Box>
   );
 }
@@ -179,6 +185,7 @@ export default function RelativeTime({
   tz,
   relativeRange,
   enableTooltip = true,
+  showUTCPrefix = true,
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
@@ -212,7 +219,14 @@ export default function RelativeTime({
             ·
           </Box>
 
-          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
         </Box>
       </Tooltip>
     );
@@ -226,7 +240,14 @@ export default function RelativeTime({
         </Box>
 
         {type === 'utc' && (
-          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
         )}
       </Box>
     </Tooltip>

package/src/SessionUser/components/un-login.tsx

@@ -27,7 +27,7 @@ import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
 import { getFederatedEnabled, getMaster } from '../../Util/federated';
-import LoginButton from '../../LoginButton';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
 
 export interface UnLoginProps {
   session: Session;
@@ -70,7 +70,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   const loginAppName = loginApp?.appName || 'DID Connect';
   const loginAppLogo = joinURL(
     loginApp?.appUrl || '/',
-    loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80'
+    loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`
   );
 
   useEffect(() => {
@@ -105,34 +105,26 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
 
   return (
     <>
-      <LoginButton
-        locale={locale}
+      <IconButton
+        ref={userAnchorRef}
+        data-cy="sessionManager-login"
+        className="arc-session-user-unlogin"
+        size="medium"
         onClick={_onLogin}
-        render={({ onClick }) => {
-          return (
-            <IconButton
-              ref={userAnchorRef}
-              data-cy="sessionManager-login"
-              className="arc-session-user-unlogin"
-              size="medium"
-              onClick={onClick}
-              aria-label="Login button">
-              {isFirstLoading ? (
-                <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
-                  <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
-                </Box>
-              ) : (
-                <Icon
-                  icon={UserIcon}
-                  fontSize={size}
-                  color={dark ? '#fff' : 'inherit'}
-                  style={{ transform: 'scale(1.25)' }}
-                />
-              )}
-            </IconButton>
-          );
-        }}
-      />
+        aria-label="Login button">
+        {isFirstLoading ? (
+          <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
+            <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
+          </Box>
+        ) : (
+          <Icon
+            icon={UserIcon}
+            fontSize={size}
+            color={dark ? '#fff' : 'inherit'}
+            style={{ transform: 'scale(1.25)' }}
+          />
+        )}
+      </IconButton>
       <Popper
         open={currentState.open}
         anchorEl={userAnchorRef.current}

package/src/SharedBridge/index.tsx

@@ -1,119 +1,113 @@
 import { Box } from '@mui/material';
 import type { SxProps } from '@mui/material';
-import React, { memo, useEffect, useId, useRef } from 'react';
+import { forwardRef, memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
 import { withQuery } from 'ufo';
 import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
 
 import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
 import { Locale } from '../type';
-import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { DIDConnectContainer } from '../DIDConnect';
 
-const SharedBridge = memo(function SharedBridge({
-  src,
-  onClick,
-  onLoad,
-  sx,
-  iframeRef,
-  locale = 'en',
-  ...rest
-}: {
-  src: string;
-  onClick: (data: { action: string; value: boolean; visitorId?: string }) => void;
-  onLoad: () => void;
-  sx?: SxProps;
-  iframeRef?: React.RefObject<HTMLIFrameElement>;
-  locale?: Locale;
-}) {
-  const _iframeRef = useRef<HTMLIFrameElement>(null);
-  const refId = useId();
-  const dataId = `shared-bridge_${refId}`;
-  const currentState = useReactive<{
-    hasInited?: boolean;
-    open: boolean;
-    hasStorageAccess: boolean;
-    origin: string;
-    host: string;
-  }>({
-    hasInited: undefined,
-    open: false,
-    hasStorageAccess: false,
-    get origin() {
-      try {
-        return new URL(src).origin;
-      } catch (error) {
-        return src;
-      }
-    },
-    get host() {
-      try {
-        return new URL(src).host;
-      } catch (error) {
-        return src;
-      }
+const SharedBridge = forwardRef(
+  (
+    {
+      src,
+      onClick,
+      onLoad = noop,
+      sx,
+      locale = 'en',
+      ...rest
+    }: {
+      src: string;
+      onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
+      onLoad?: () => void;
+      sx?: SxProps;
+      locale?: Locale;
     },
-  });
+    ref
+  ) => {
+    const targetIframeRef = useRef<HTMLIFrameElement>(null);
+    const refId = useId();
+    const dataId = `shared-bridge_${refId}`;
+    const currentState = useReactive<{
+      hasInited?: boolean;
+      open: boolean;
+      hasStorageAccess: boolean;
+      origin: string;
+      host: string;
+      containerEl: HTMLDivElement | null;
+    }>({
+      hasInited: undefined,
+      open: false,
+      hasStorageAccess: false,
+      containerEl: null,
+      get origin() {
+        try {
+          return new URL(src).origin;
+        } catch (error) {
+          return src;
+        }
+      },
+      get host() {
+        try {
+          return new URL(src).host;
+        } catch (error) {
+          return src;
+        }
+      },
+    });
 
-  const targetIframeRef = iframeRef ?? _iframeRef;
+    useEffect(() => {
+      async function handleMessage(event: MessageEvent) {
+        const { data } = event;
+        if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
+          currentState.open = false;
 
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const { data } = event;
-      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
-        currentState.open = false;
+          if (!data.value) {
+            onClick(data);
+            return;
+          }
 
-        if (!data.value) {
-          onClick(data);
-          return;
+          const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
+          onClick({ ...data, visitorId });
+        } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
+          currentState.open = true;
         }
-
-        const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
-        onClick({ ...data, visitorId });
-      } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
-        currentState.open = true;
       }
-    }
 
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClick, dataId, targetIframeRef?.current]);
+      window.addEventListener('message', handleMessage);
+      return () => {
+        window.removeEventListener('message', handleMessage);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClick, dataId, targetIframeRef?.current]);
 
-  const handleLoad = useMemoizedFn(() => {
-    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
-      currentState.hasStorageAccess = value;
-      currentState.hasInited = true;
+    const handleLoad = useMemoizedFn(() => {
+      callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
+        currentState.hasStorageAccess = value;
+        currentState.hasInited = true;
+      });
+      // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
+      setTimeout(() => {
+        if (currentState.hasInited === undefined) {
+          currentState.hasInited = false;
+        }
+      }, 1000);
+      onLoad();
     });
-    setTimeout(() => {
-      if (currentState.hasInited === undefined) {
-        currentState.hasInited = false;
-      }
-    }, 1000);
-    onLoad();
-  });
-
-  if (currentState.hasInited === false) {
-    return null;
-  }
 
-  if (currentState.hasStorageAccess) {
-    return null;
-  }
-
-  return (
-    <>
-      <DIDConnectContainer popup hideCloseButton open={currentState.open}>
-        <NeedStorageAccessApiDialog locale={locale} origin={currentState.origin} host={currentState.host} />
-      </DIDConnectContainer>
+    useImperativeHandle(ref, () => ({
+      callIframe(action: string) {
+        return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
+      },
+    }));
+    return (
       <Box
         {...rest}
         component="iframe"
         ref={targetIframeRef}
         onLoad={handleLoad}
-        title="shared-bridge"
         data-id={dataId}
         src={withQuery(src, { id: dataId })}
         sx={mergeSx(
@@ -125,13 +119,13 @@ const SharedBridge = memo(function SharedBridge({
             width: '100%',
             height: '100%',
             cursor: 'pointer',
-            opacity: 0,
+            backgroundColor: 'transparent',
           },
           sx
         )}
       />
-    </>
-  );
-});
+    );
+  }
+);
 
-export default SharedBridge;
+export default memo(SharedBridge);

package/src/Tabs/index.tsx

@@ -46,7 +46,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         },
         '.MuiTabs-flexContainer': {
           borderRadius: '100vw',
-          backgroundColor: 'grey.200',
+          backgroundColor: 'grey.100',
           padding: 0.5,
           display: 'inline-flex',
           columnGap: 0.25,
@@ -65,7 +65,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
           textTransform: 'capitalize',
           transition: 'background-color 0.2s ease',
           '&.Mui-selected, &:hover': {
-            backgroundColor: 'white',
+            backgroundColor: 'action.selected',
             borderColor: 'grey.100',
             color: 'grey.A700',
           },

package/src/Theme/theme-provider.tsx

@@ -1,13 +1,20 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles, PaletteMode } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, Theme, useTheme } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, Theme, ThemeOptions, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig, type UserThemeOptions } from './theme';
+import {
+  createTheme,
+  getDefaultThemePrefer,
+  isTheme,
+  isUxTheme,
+  lazyCreateDefaultTheme,
+  type UxThemeOptions,
+} from './theme';
 
 const defaultTheme = createTheme();
 
@@ -15,6 +22,7 @@ const defaultTheme = createTheme();
 export interface ColorSchemeContextType {
   mode: PaletteMode;
   toggleMode: () => void;
+  changeMode: (mode: PaletteMode) => void;
   prefer?: Prefer;
 }
 
@@ -102,7 +110,7 @@ function DarkSchemeStyles({ className }: { className?: string }) {
   return null;
 }
 
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 
 interface BaseThemeProviderProps {
@@ -113,7 +121,7 @@ interface BaseThemeProviderProps {
   darkSchemeClass?: string;
 }
 
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -144,7 +152,7 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
   disableBlockletTheme?: boolean;
 }
 
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -153,14 +161,21 @@ function ColorSchemeProvider({
   ...rest
 }: ThemeProviderProps) {
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
+  const parentTheme = useTheme();
 
   const _themeInput = useMemo(() => {
-    let result: UserThemeOptions = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    let result: UxThemeOptions = {};
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
 
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = { ...themeInput(getThemeConfig()) };
+        const baseTheme = createBaseTheme();
+
+        if (isUxTheme(parentTheme)) {
+          result = { ...themeInput(parentTheme, { mode }) };
+        } else {
+          result = { ...themeInput(baseTheme, { mode }) };
+        }
       } else {
         result = { ...themeInput };
       }
@@ -170,7 +185,7 @@ function ColorSchemeProvider({
     set(result, 'mode', mode);
 
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
 
   const theme = useMemo(() => {
     return createTheme({ ..._themeInput, disableBlockletTheme });
@@ -183,13 +198,24 @@ function ColorSchemeProvider({
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
 
+  const changeMode = useCallback(
+    (newMode: PaletteMode) => {
+      if (mode !== newMode) {
+        setMode(newMode);
+        localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+      }
+    },
+    [mode, setMode]
+  );
+
   const colorSchemeValue = useMemo(
     () => ({
       mode,
       toggleMode,
+      changeMode,
       prefer,
     }),
-    [mode, prefer, toggleMode]
+    [mode, prefer, toggleMode, changeMode]
   );
 
   useEffect(() => {

package/src/Theme/theme.ts

@@ -20,6 +20,11 @@ export function isTheme(obj: any): obj is Theme {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj: any): obj is Theme {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -107,26 +112,26 @@ export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   return BLOCKLET_THEME_LIGHT;
 }
 
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
   disableBlockletTheme?: boolean;
 }
 
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode: PaletteMode) {
-  let config: Partial<Theme> | null = null;
+export function lazyCreateDefaultTheme(mode: PaletteMode) {
+  let theme: Theme | null = null;
 
   return () => {
-    if (config) return config;
+    if (theme) return theme;
 
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {}) as Partial<Theme>;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
 
-    return config;
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
 // 主要处理 overrides
-const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UserThemeOptions) => {
-  const result: UserThemeOptions = {
+const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UxThemeOptions) => {
+  const result: UxThemeOptions = {
     palette,
     components: {
       ...overrides,
@@ -138,7 +143,7 @@ const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }:
   return result;
 };
 
-const defaultUserThemeOptions: UserThemeOptions = {
+const defaultUxThemeOptions: UxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -166,13 +171,13 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => {
+export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce<UserThemeOptions>(
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce<UxThemeOptions>(
     (acc, curr) =>
-      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)),
-    normalizeUserThemeOptions(defaultUserThemeOptions)
+      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)),
+    normalizeUserThemeOptions(defaultUxThemeOptions)
   );
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
@@ -195,6 +200,7 @@ export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);

package/lib/LoginButton/index.d.ts

@@ -1,12 +0,0 @@
-import { Locale } from '../type';
-type LoginButtonProps = {
-    onClick: (options?: {
-        openMode?: 'popup' | 'window';
-    }) => void;
-    render: (options: {
-        onClick: () => void;
-    }) => React.ReactNode;
-    locale?: Locale;
-};
-export default function LoginButton({ onClick, render, locale }: LoginButtonProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export {};

package/lib/LoginButton/index.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { joinURL } from 'ufo';
-import { useRef, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-import SharedBridge from '../SharedBridge';
-import { setVisitorId } from '../Util';
-import { getFederatedEnabled, getMaster } from '../Util/federated';
-import { callIframe } from '../Util/iframe';
-export default function LoginButton({
-  onClick,
-  render,
-  locale
-}) {
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const sharedBridgeRef = useRef(null);
-  const [hasStorageAccess, setHasStorageAccess] = useState(false);
-  const browser = useBrowser();
-  const handleClick = useMemoizedFn(() => {
-    if (hasStorageAccess) {
-      onClick({
-        openMode: 'popup'
-      });
-    } else {
-      onClick();
-    }
-  });
-  const handleLoad = useMemoizedFn(async () => {
-    const {
-      value: visitorId
-    } = await callIframe(sharedBridgeRef.current, 'getVisitorId');
-    if (visitorId) {
-      setHasStorageAccess(true);
-      setVisitorId(visitorId);
-    }
-  });
-  const handleClickBridge = useMemoizedFn(({
-    value,
-    visitorId
-  }) => {
-    if (visitorId) {
-      setVisitorId(visitorId);
-    }
-    if (value) {
-      onClick({
-        openMode: 'popup'
-      });
-    } else {
-      onClick();
-    }
-  });
-  if (browser.arcSphere || browser.wallet) {
-    return render({
-      onClick
-    });
-  }
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative'
-    },
-    children: [render({
-      onClick: handleClick
-    }), masterSite?.appUrl && federatedEnabled ? /*#__PURE__*/_jsx(SharedBridge, {
-      locale: locale,
-      iframeRef: sharedBridgeRef,
-      onLoad: handleLoad,
-      onClick: handleClickBridge,
-      src: joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')
-    }) : null]
-  });
-}