@arcblock/ux 2.13.13 → 2.13.14

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.13",
+  "version": "2.13.14",
   "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": "b9f48199169b641a2d3277806501471a56dd496d",
   "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.14",
+    "@arcblock/nft-display": "^2.13.14",
+    "@arcblock/react-hooks": "^2.13.14",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.13",
+    "@blocklet/theme": "^2.13.14",
     "@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/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>
+  );
+}