@arcblock/ux 2.13.13 → 2.13.15

package/lib/SharedBridge/need-storage-access-api-dialog.js

@@ -0,0 +1,212 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography, Chip, List, ListItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import externalLinkIcon from '@iconify-icons/tabler/external-link';
+import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
+import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
+import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { useEffect } from 'react';
+import { getDIDMotifInfo } from '@arcblock/did-motif';
+import { translate } from '../Locale/util';
+import { getDIDColor, isEthereumDid } from '../Util';
+import { DIDConnectFooter } from '../DIDConnect';
+const translations = {
+  en: {
+    allow: 'Allow',
+    dataUsage: 'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
+    title: 'Cross-site authorization request',
+    clickAllow: ({
+      allowButton
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["You only need to click the ", allowButton, " button above, and you will not see this request again."]
+      });
+    },
+    reason: ({
+      site
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["For a better login experience, we need to apply for the storage permission of the ", site, " site."]
+      });
+    },
+    afterAllow: {
+      title: 'After authorization, you will enjoy:',
+      list1: 'More convenient login experience',
+      list2: 'Faster access speed'
+    }
+  },
+  zh: {
+    allow: '允许',
+    dataUsage: '您的数据仅用于身份认证，不会被收集或用于其他用途。',
+    title: '跨站授权请求',
+    clickAllow: ({
+      allowButton
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\u60A8\u53EA\u9700\u8981\u70B9\u51FB\u5C4F\u5E55\u4E0A\u65B9\u7684 ", allowButton, " \u6309\u94AE\uFF0C\u540E\u7EED\u5C06\u4E0D\u4F1A\u518D\u770B\u5230\u8FD9\u4E2A\u8BF7\u6C42\u3002"]
+      });
+    },
+    reason: ({
+      site
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\u4E3A\u4E86\u8BA9\u60A8\u83B7\u5F97\u66F4\u597D\u7684\u767B\u5F55\u4F53\u9A8C\uFF0C\u6211\u4EEC\u9700\u8981\u7533\u8BF7 ", site, " \u7AD9\u70B9\u5B58\u50A8\u6743\u9650\u3002"]
+      });
+    },
+    afterAllow: {
+      title: '授权后，您将享受：',
+      list1: '更便捷的登录体验',
+      list2: '更快的访问速度'
+    }
+  }
+};
+export default function NeedStorageAccessApiDialog({
+  locale = 'en',
+  origin,
+  host,
+  setColor
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const currentAppColor = useCreation(() => {
+    const did = window.blocklet.appPid;
+    const isEthDid = isEthereumDid(did);
+    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+    if (isEthDid) {
+      return getDIDColor(did);
+    }
+    return didMotifInfo.color;
+  }, []);
+  useEffect(() => {
+    setColor(currentAppColor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentAppColor]);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      backgroundColor: 'background.default',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      position: 'relative',
+      maxWidth: '100%',
+      transition: 'width 0.2s ease-in-out',
+      margin: 'auto',
+      p: 3,
+      pb: 0,
+      gap: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Typography, {
+      component: "h1",
+      variant: "h4",
+      sx: {
+        fontWeight: 700,
+        fontFamily: 'Lexend',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: lockOutlineIcon,
+        fontSize: 28,
+        sx: {
+          color: 'warning.main'
+        }
+      }), t('title')]
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        children: t('reason', {
+          site: /*#__PURE__*/_jsx(Chip, {
+            clickable: true,
+            component: "a",
+            href: origin,
+            label: host,
+            size: "small",
+            deleteIcon: /*#__PURE__*/_jsx(Icon, {
+              icon: externalLinkIcon
+            }),
+            onDelete: () => {},
+            target: "_blank"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        children: t('clickAllow', {
+          allowButton: /*#__PURE__*/_jsx(Chip, {
+            label: t('allow'),
+            size: "small",
+            color: "success"
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mt: 2
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            mb: 0.5
+          },
+          children: [/*#__PURE__*/_jsx(Box, {
+            component: Icon,
+            icon: checkCircleIcon,
+            fontSize: 24,
+            sx: {
+              color: 'success.main'
+            }
+          }), t('afterAllow.title')]
+        }), /*#__PURE__*/_jsxs(List, {
+          dense: true,
+          sx: {
+            py: 0,
+            pl: 2
+          },
+          children: [/*#__PURE__*/_jsxs(ListItem, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.8
+            },
+            children: [/*#__PURE__*/_jsx(Box, {
+              component: Icon,
+              icon: rocketLaunchRoundedIcon,
+              fontSize: 20,
+              sx: {
+                color: 'success.main'
+              }
+            }), t('afterAllow.list1')]
+          }), /*#__PURE__*/_jsxs(ListItem, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.8
+            },
+            children: [/*#__PURE__*/_jsx(Box, {
+              component: Icon,
+              icon: rocketLaunchRoundedIcon,
+              fontSize: 20,
+              sx: {
+                color: 'success.main'
+              }
+            }), t('afterAllow.list2')]
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "div",
+        variant: "body2",
+        color: "grey.700",
+        children: t('dataUsage')
+      })]
+    }), /*#__PURE__*/_jsx(DIDConnectFooter, {
+      currentAppColor: currentAppColor
+    })]
+  });
+}

package/lib/Theme/index.d.ts

@@ -1,5 +1,5 @@
-import { CreateMUIStyled, Theme } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import type { CreateMUIStyled, Theme } from '@mui/material';
+import { useTheme } from '@mui/material';
 export * from './theme';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };

package/lib/Theme/index.js

@@ -1,4 +1,4 @@
-import { styled as muiStyled, useTheme } from '@mui/material/styles';
+import { styled as muiStyled, useTheme } from '@mui/material';
 export * from './theme';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };

package/lib/Util/iframe.d.ts

@@ -0,0 +1,5 @@
+export declare function getCallbackAction(id: string, action: string): string;
+export declare function callIframe(iframe: HTMLIFrameElement, action: string): Promise<{
+    value: any;
+    action: string;
+}>;

package/lib/Util/iframe.js

@@ -0,0 +1,24 @@
+export function getCallbackAction(id, action) {
+  return `callback_${action}_${id}`;
+}
+
+// eslint-disable-next-line require-await
+export async function callIframe(iframe, action) {
+  const callbackAction = getCallbackAction(iframe.dataset.id, action);
+  const promise = new Promise(resolve => {
+    const handleMessage = ({
+      data
+    }) => {
+      if (data.action === callbackAction) {
+        window.removeEventListener('message', handleMessage);
+        resolve(data);
+      }
+    };
+    window.addEventListener('message', handleMessage);
+  });
+  iframe?.contentWindow?.postMessage({
+    action,
+    callback: callbackAction
+  }, '*');
+  return promise;
+}

package/lib/Util/index.d.ts

@@ -1,3 +1,4 @@
+import Cookies from 'js-cookie';
 import { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import type { $TSFixMe, Locale } from '../type';
 declare let dateTool: $TSFixMe | null;
@@ -14,7 +15,7 @@ export declare function getCookieOptions(expireInDays?: number | {
     returnDomain?: boolean;
     sameSite?: Cookies.CookieAttributes['sameSite'];
     secure?: boolean;
-}): import("js-cookie").CookieAttributes;
+}): Cookies.CookieAttributes;
 export declare const getColor: (props: $TSFixMe) => any;
 export declare const getBackground: (props: $TSFixMe) => any;
 /**
@@ -76,6 +77,7 @@ export declare const sleep: (time?: number) => Promise<void>;
 export declare const isUrl: (str: string) => boolean;
 export declare const getVisitorId: () => string | null;
 export declare const setVisitorId: (value: string | null) => void;
+export declare const ensureVisitorId: () => void;
 export declare const getDIDColor: (did: string) => any;
 type NestedTranslation = {
     [key: string]: string | NestedTranslation;
@@ -93,6 +95,13 @@ export declare const getTranslation: (translations: TranslationsObject, locale:
 }) => string;
 export declare const lazyRetry: (fn: () => Promise<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
 export declare const cleanedObj: (obj: object) => import("lodash").Dictionary<any>;
+/**
+ * 将十六进制颜色转换为 RGBA
+ * @param hex 十六进制颜色字符串 (例如: "#FF0000" 或 "FF0000")
+ * @param alpha 透明度值 (0-1 之间，默认为 1)
+ * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
+ */
+export declare function hexToRgba(hex: string, alpha?: number): string;
 /**
  * 依次对数组中的对象进行深度合并
  * @param objects - 需要合并的对象数组

package/lib/Util/index.js

@@ -5,8 +5,11 @@ import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
+import Cookies from 'js-cookie';
+import colorConvert from 'color-convert';
 import deepmerge from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
+import { getFederatedEnabled } from './federated';
 let dateTool = null;
 const IP_V4_REGEX = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/;
 // 常见顶级域名
@@ -360,15 +363,63 @@ export const sleep = (time = 0) => {
 export const isUrl = str => {
   return /^https?:\/\//.test(str);
 };
-const visitorIdKey = '__visitor_id';
+const visitorIdKey = 'vid';
+const visitorIdKeyLegacy = '__visitor_id';
 export const getVisitorId = () => {
-  return localStorage.getItem(visitorIdKey);
+  // FIXME: @zhanghan 短期内做一个兼容，确保在 migrate 前的请求能够携带正确的 vid
+  return Cookies.get(visitorIdKey) || localStorage.getItem(visitorIdKeyLegacy);
 };
 export const setVisitorId = value => {
   if (value === null) {
-    localStorage.removeItem(visitorIdKey);
+    Cookies.remove(visitorIdKey, {
+      sameSite: 'None',
+      secure: true
+    });
   } else {
-    localStorage.setItem(visitorIdKey, value);
+    Cookies.set(visitorIdKey, value, {
+      sameSite: 'None',
+      secure: true,
+      expires: 365
+    });
+  }
+};
+export const ensureVisitorId = () => {
+  let visitorId = localStorage.getItem(visitorIdKeyLegacy);
+  if (visitorId) {
+    localStorage.removeItem(visitorIdKeyLegacy);
+    setVisitorId(visitorId);
+  }
+  if (getVisitorId()) {
+    return;
+  }
+  if (!getFederatedEnabled()) {
+    try {
+      // 在支持 crypto.randomUUID 的环境中使用
+      if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+        visitorId = window.crypto.randomUUID();
+      } else {
+        // 在不支持 crypto.randomUUID 的环境中生成随机 ID
+        const randomValues = new Uint8Array(16);
+        if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
+          window.crypto.getRandomValues(randomValues);
+        } else {
+          // 降级方案：使用 Math.random 生成
+          for (let i = 0; i < 16; i++) {
+            randomValues[i] = Math.floor(Math.random() * 256);
+          }
+        }
+
+        // 转换为 UUID 格式
+        const hexArray = Array.from(randomValues).map(b => b.toString(16).padStart(2, '0'));
+        visitorId = [hexArray.slice(0, 4).join(''), hexArray.slice(4, 6).join(''), hexArray.slice(6, 8).join(''), hexArray.slice(8, 10).join(''), hexArray.slice(10, 16).join('')].join('-');
+      }
+    } catch (error) {
+      // 如果上述方法都失败，使用时间戳和随机数生成
+      visitorId = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+    }
+  }
+  if (visitorId) {
+    setVisitorId(visitorId);
   }
 };
 export const getDIDColor = did => {
@@ -429,6 +480,18 @@ export const cleanedObj = obj => {
   return omitBy(obj, isNil);
 };
 
+/**
+ * 将十六进制颜色转换为 RGBA
+ * @param hex 十六进制颜色字符串 (例如: "#FF0000" 或 "FF0000")
+ * @param alpha 透明度值 (0-1 之间，默认为 1)
+ * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
+ */
+export function hexToRgba(hex, alpha = 1) {
+  const [r, g, b] = colorConvert.hex.rgb(hex);
+  // 返回 RGBA 格式
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * 依次对数组中的对象进行深度合并
  * @param objects - 需要合并的对象数组

package/lib/hooks/use-blocklet-logo.d.ts

@@ -0,0 +1,8 @@
+import { type Breakpoint } from '@mui/material';
+import { type ThemeOptions } from '@blocklet/theme';
+export default function useBlockletLogo({ key, meta, theme: themeOverrides, square, }?: {
+    key?: number | Breakpoint;
+    meta?: any;
+    theme?: ThemeOptions;
+    square?: boolean;
+}): any;

package/lib/hooks/use-blocklet-logo.js

@@ -0,0 +1,31 @@
+import { useCreation } from 'ahooks';
+import { useTheme } from '../Theme';
+import useMobile from './use-mobile';
+export default function useBlockletLogo({
+  key = 'sm',
+  meta = {},
+  theme: themeOverrides = {},
+  square
+} = {}) {
+  const isMobileDevice = useMobile({
+    key
+  });
+  const theme = useTheme();
+  const mode = useCreation(() => {
+    return themeOverrides?.palette?.mode || theme.palette.mode;
+  }, [theme, themeOverrides]);
+  const finalAppLogo = useCreation(() => {
+    const {
+      appLogo,
+      appLogoDark,
+      appLogoRect,
+      appLogoRectDark
+    } = Object.assign({}, window.blocklet ?? {}, meta);
+    const isDark = mode === 'dark';
+    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
+    // 深色模式尽可能优先使用深色图标
+    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
+    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
+  }, [mode, meta, isMobileDevice, square]);
+  return finalAppLogo;
+}

package/lib/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { Breakpoint } from '@mui/material';
+export default function useMobile({ key }?: {
+    key?: number | Breakpoint;
+}): boolean;

package/lib/hooks/use-mobile.js

@@ -0,0 +1,7 @@
+import { useTheme, useMediaQuery } from '@mui/material';
+export default function useMobile({
+  key = 'sm'
+} = {}) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.13",
+  "version": "2.13.15",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "b098f3a884e8b34a1926479507b674d40ea58298",
+  "gitHead": "94d15cfb22e13272502bb40863c5b059cb13eab5",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.13",
-    "@arcblock/nft-display": "^2.13.13",
-    "@arcblock/react-hooks": "^2.13.13",
+    "@arcblock/icons": "^2.13.15",
+    "@arcblock/nft-display": "^2.13.15",
+    "@arcblock/react-hooks": "^2.13.15",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.13",
+    "@blocklet/theme": "^2.13.15",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
@@ -94,6 +94,7 @@
     "awesome-phonenumber": "^7.4.0",
     "axios": "^1.7.5",
     "base64-url": "^2.3.3",
+    "color-convert": "^3.0.1",
     "copy-to-clipboard": "^3.3.2",
     "core-js": "^3.25.5",
     "d3-geo": "^1.12.1",

package/src/Address/responsive-did-address.tsx

@@ -80,7 +80,17 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     }, [containerWidth, addressFullWidth]);
 
     return (
-      <Root as={component} ref={containerRef} style={style} className={className} size={size} inline={rest.inline}>
+      <Root
+        as={component}
+        ref={containerRef}
+        style={style}
+        className={className}
+        size={size}
+        {...(component === 'span'
+          ? {}
+          : {
+              inline: rest.inline,
+            })}>
         <StyledDidAddress
           style={{
             position: loading ? 'absolute' : 'static',

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

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

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>
+  );
+}