@arcblock/ux 2.13.13 → 2.13.14

package/src/SharedBridge/index.tsx

@@ -0,0 +1,123 @@
+import { Box } from '@mui/material';
+import type { SxProps } from '@mui/material';
+import React, { memo, useEffect, useId, useRef } from 'react';
+import { withQuery } from 'ufo';
+import { useMemoizedFn, useReactive } from 'ahooks';
+
+import { mergeSx } from '../Util/style';
+import { callIframe, getCallbackAction } from '../Util/iframe';
+import { Locale } from '../type';
+import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
+import { withContainer, withUxTheme } 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({
+    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 targetIframeRef = iframeRef ?? _iframeRef;
+
+  useEffect(() => {
+    async function handleMessage(event: MessageEvent) {
+      const { data } = event;
+      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
+        currentState.open = false;
+
+        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;
+      }
+    }
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onClick, dataId, targetIframeRef?.current]);
+
+  const DialogComponent = withUxTheme(withContainer(NeedStorageAccessApiDialog));
+
+  const handleLoad = useMemoizedFn(() => {
+    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
+      currentState.hasStorageAccess = value;
+    });
+    onLoad();
+  });
+
+  return currentState.hasStorageAccess ? null : (
+    <>
+      <DialogComponent
+        popup
+        locale={locale}
+        blocklet={window.blocklet}
+        open={currentState.open}
+        origin={currentState.origin}
+        host={currentState.host}
+        onClose={() => {}}
+      />
+      <Box
+        {...rest}
+        component="iframe"
+        ref={targetIframeRef}
+        onLoad={handleLoad}
+        title="shared-bridge"
+        data-id={dataId}
+        src={withQuery(src, { id: dataId })}
+        sx={mergeSx(
+          {
+            border: 0,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            cursor: 'pointer',
+          },
+          sx
+        )}
+      />
+    </>
+  );
+});
+
+export default SharedBridge;

package/src/SharedBridge/need-storage-access-api-dialog.tsx

@@ -0,0 +1,171 @@
+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 { Locale } from '../type';
+import { translate } from '../Locale/util';
+import { getDIDColor, isEthereumDid } from '../Util';
+import { DIDConnectFooter } from '../DIDConnect';
+
+const translations: Record<
+  Locale,
+  {
+    allow: string;
+    dataUsage: string;
+    title: string;
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => React.ReactNode;
+    reason: ({ site }: { site: React.ReactNode }) => React.ReactNode;
+    afterAllow: {
+      title: string;
+      list1: string;
+      list2: string;
+    };
+  }
+> = {
+  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 }: { allowButton: React.ReactNode }) => {
+      return <>You only need to click the {allowButton} button above, and you will not see this request again.</>;
+    },
+    reason: ({ site }) => {
+      return <>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 <>您只需要点击屏幕上方的 {allowButton} 按钮，后续将不会再看到这个请求。</>;
+    },
+    reason: ({ site }) => {
+      return <>为了让您获得更好的登录体验，我们需要申请 {site} 站点存储权限。</>;
+    },
+    afterAllow: {
+      title: '授权后，您将享受：',
+      list1: '更便捷的登录体验',
+      list2: '更快的访问速度',
+    },
+  },
+};
+
+export default function NeedStorageAccessApiDialog({
+  locale = 'en',
+  origin,
+  host,
+  setColor,
+}: {
+  locale?: Locale;
+  origin: string;
+  host: string;
+  setColor: (color: string) => void;
+}) {
+  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 (
+    <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,
+      }}>
+      <Typography
+        component="h1"
+        variant="h4"
+        sx={{
+          fontWeight: 700,
+          fontFamily: 'Lexend',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}>
+        <Box component={Icon} icon={lockOutlineIcon} fontSize={28} sx={{ color: 'warning.main' }} />
+        {t('title')}
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        {/* 不需要随意更改以下内容的格式化，否则会影响到 UI 的展示 */}
+        <Typography>
+          {t('reason', {
+            site: (
+              <Chip
+                clickable
+                component="a"
+                href={origin}
+                label={host}
+                size="small"
+                deleteIcon={<Icon icon={externalLinkIcon} />}
+                onDelete={() => {}}
+                target="_blank"
+              />
+            ),
+          })}
+        </Typography>
+        <Typography>
+          {t('clickAllow', {
+            allowButton: <Chip label={t('allow')} size="small" color="success" />,
+          })}
+        </Typography>
+        <Box sx={{ mt: 2 }}>
+          <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+            <Box component={Icon} icon={checkCircleIcon} fontSize={24} sx={{ color: 'success.main' }} />
+            {t('afterAllow.title')}
+          </Typography>
+          <List dense sx={{ py: 0, pl: 2 }}>
+            <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+              <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+              {t('afterAllow.list1')}
+            </ListItem>
+            <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+              <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+              {t('afterAllow.list2')}
+            </ListItem>
+          </List>
+        </Box>
+
+        <Typography component="div" variant="body2" color="grey.700">
+          {t('dataUsage')}
+        </Typography>
+      </Box>
+      <DIDConnectFooter currentAppColor={currentAppColor} />
+    </Box>
+  );
+}

package/src/Theme/index.ts

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

package/src/Util/iframe.ts

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

package/src/Util/index.ts

@@ -5,9 +5,12 @@ 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, { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
+import { getFederatedEnabled } from './federated';
 
 let dateTool: $TSFixMe | null = null;
 const IP_V4_REGEX = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/;
@@ -442,16 +445,74 @@ export const isUrl = (str: string) => {
   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: string | null) => {
   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);
   }
 };
 
@@ -540,6 +601,18 @@ export const cleanedObj = (obj: object) => {
   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: string, alpha = 1) {
+  const [r, g, b] = colorConvert.hex.rgb(hex);
+  // 返回 RGBA 格式
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * 依次对数组中的对象进行深度合并
  * @param objects - 需要合并的对象数组