@arcblock/ux 2.13.28 → 2.13.30

package/lib/SharedBridge/index.js

@@ -1,28 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } 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 NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { DIDConnectContainer } from '../DIDConnect';
-const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
+const SharedBridge = /*#__PURE__*/forwardRef(({
   src,
   onClick,
-  onLoad,
+  onLoad = noop,
   sx,
-  iframeRef,
   locale = 'en',
   ...rest
-}) {
-  const _iframeRef = useRef(null);
+}, ref) => {
+  const targetIframeRef = useRef(null);
   const refId = useId();
   const dataId = `shared-bridge_${refId}`;
   const currentState = useReactive({
     hasInited: undefined,
     open: false,
     hasStorageAccess: false,
+    containerEl: null,
     get origin() {
       try {
         return new URL(src).origin;
@@ -38,7 +37,6 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
       }
     }
   });
-  const targetIframeRef = iframeRef ?? _iframeRef;
   useEffect(() => {
     async function handleMessage(event) {
       const {
@@ -74,6 +72,7 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
       currentState.hasStorageAccess = value;
       currentState.hasInited = true;
     });
+    // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
     setTimeout(() => {
       if (currentState.hasInited === undefined) {
         currentState.hasInited = false;
@@ -81,43 +80,30 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
     }, 1000);
     onLoad();
   });
-  if (currentState.hasInited === false) {
-    return null;
-  }
-  if (currentState.hasStorageAccess) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DIDConnectContainer, {
-      popup: true,
-      hideCloseButton: true,
-      open: currentState.open,
-      children: /*#__PURE__*/_jsx(NeedStorageAccessApiDialog, {
-        locale: locale,
-        origin: currentState.origin,
-        host: currentState.host
-      })
-    }), /*#__PURE__*/_jsx(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',
-        opacity: 0
-      }, sx)
-    })]
+  useImperativeHandle(ref, () => ({
+    callIframe(action) {
+      return callIframe(targetIframeRef.current, action);
+    }
+  }));
+  return /*#__PURE__*/_jsx(Box, {
+    ...rest,
+    component: "iframe",
+    ref: targetIframeRef,
+    onLoad: handleLoad,
+    "data-id": dataId,
+    src: withQuery(src, {
+      id: dataId
+    }),
+    sx: mergeSx({
+      border: 0,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      backgroundColor: 'transparent'
+    }, sx)
   });
 });
-export default SharedBridge;
+export default /*#__PURE__*/memo(SharedBridge);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.28",
+  "version": "2.13.30",
   "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": "345a8363b59137fc5691b68e6295b87c9efb028a",
+  "gitHead": "8551352e0bc3feaf46352054993743794ee1f32f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.28",
-    "@arcblock/nft-display": "^2.13.28",
-    "@arcblock/react-hooks": "^2.13.28",
+    "@arcblock/icons": "^2.13.30",
+    "@arcblock/nft-display": "^2.13.30",
+    "@arcblock/react-hooks": "^2.13.30",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.28",
+    "@blocklet/theme": "^2.13.30",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

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

@@ -37,6 +37,7 @@ export default function DIDConnectContainer({
   appPid,
   slotProps,
   onClose = noop,
+  keepMounted = false,
 }: {
   // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
   popup?: boolean;
@@ -59,6 +60,7 @@ export default function DIDConnectContainer({
       sx?: SxProps;
     };
   };
+  keepMounted?: boolean;
 }) {
   const color = useCreation(() => {
     const did = appPid || window.blocklet.appPid;
@@ -96,7 +98,7 @@ export default function DIDConnectContainer({
     onClose();
   };
 
-  const showModal = debouncedOpen || open;
+  const showModal = debouncedOpen || open || keepMounted;
 
   const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
 
@@ -286,6 +288,7 @@ export default function DIDConnectContainer({
       slots={{
         backdrop: BackdropWrap,
       }}
+      keepMounted={keepMounted}
       className="did-connect__container-dialog"
       onClose={handleOnClose}
       PaperProps={{

package/src/DIDConnect/index.ts

@@ -6,3 +6,4 @@ export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
 export { default as DIDConnectLogo } from './did-connect-logo';
 export { default as DIDConnectContainer } from './did-connect-container';
+export { default as RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';

package/src/DIDConnect/request-storage-access-api-dialog.tsx

@@ -0,0 +1,280 @@
+import { Box, Button, 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 { useMemoizedFn, useReactive } from 'ahooks';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import noop from 'lodash/noop';
+
+import { Locale } from '../type';
+import { translate } from '../Locale/util';
+import DIDConnectContainer from './did-connect-container';
+import CloseButton from '../CloseButton';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+
+type StorageAccessState = 'prompt' | 'granted' | 'denied';
+
+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: 'Authorization Request',
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => {
+      return <>You only need to click the {allowButton} button below, 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: '更快的访问速度',
+    },
+  },
+};
+
+const RequestStorageAccessApiDialog = forwardRef(
+  (
+    {
+      locale = 'en',
+      src,
+      storageAccessState,
+      onHandle = noop,
+    }: {
+      locale?: Locale;
+      src: string;
+      storageAccessState: StorageAccessState;
+      onHandle: (data: { value: boolean; error?: Error }) => void;
+    },
+    ref
+  ) => {
+    const sharedBridgeRef = useRef<{ callIframe: (method: string) => Promise<any> }>(null);
+    const currentState = useReactive({
+      callback: noop,
+      open: 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 t = useMemoizedFn((key, data = {}) => {
+      return translate(translations, key, locale, 'en', data);
+    });
+
+    const reset = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback = noop;
+    });
+
+    const open = useMemoizedFn(() => {
+      currentState.open = true;
+    });
+    const close = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+
+    const _requestStorageAccess = useMemoizedFn(
+      async (callback: (result: boolean, origin?: 'broswer' | 'system') => void) => {
+        const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
+        if (result.value) {
+          callback(true, 'broswer');
+        } else if (storageAccessState === undefined) {
+          // 用户未在当前网页交互过，此时必然需要进行一次弹窗
+          callback(false, 'system');
+        } else if (storageAccessState === 'denied') {
+          // 用户已经明确拒绝过跨站授权，直接弹窗
+          callback(false);
+        } else {
+          // NOTICE: 暂时保留这部分逻辑，后续可能会用上
+          // else if (
+          //   result.error?.name === 'NotAllowedError' &&
+          //   result.error?.message === 'requestStorageAccess not allowed'
+          // ) {
+          //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
+          //   currentState.open = true;
+          //   currentState.callback = callback;
+          // }
+          currentState.open = true;
+          currentState.callback = callback;
+        }
+      }
+    );
+    const requestStorageAccess = useMemoizedFn(() => {
+      return new Promise((resolve) => {
+        _requestStorageAccess((result, origin) => {
+          reset();
+          resolve({ value: result, origin });
+        });
+      });
+    });
+
+    const handleAllow = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+    const handleClose = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback(false, 'system');
+    });
+
+    useImperativeHandle(ref, () => ({
+      open,
+      close,
+      requestStorageAccess,
+    }));
+
+    return (
+      <DIDConnectContainer popup open={currentState.open} onClose={handleClose} keepMounted>
+        <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,
+            gap: 2,
+          }}>
+          <CloseButton
+            onClose={handleClose}
+            sx={{
+              position: 'absolute',
+              right: 14,
+              top: 14,
+            }}
+          />
+          <Typography
+            component="div"
+            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={currentState.origin}
+                    label={currentState.host}
+                    size="small"
+                    deleteIcon={<Icon icon={externalLinkIcon} />}
+                    onDelete={() => {}}
+                    target="_blank"
+                  />
+                ),
+              })}
+            </Typography>
+            <Typography component="div">
+              {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>
+
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={handleAllow}
+                sx={{ minWidth: 100, letterSpacing: 1 }}>
+                {t('allow')}
+              </Button>
+              <SharedBridge
+                ref={sharedBridgeRef}
+                onClick={({ value, visitorId }) => {
+                  if (visitorId) setVisitorId(visitorId);
+
+                  currentState.callback(value, 'broswer');
+                }}
+                locale={locale}
+                src={src}
+                sx={{
+                  zIndex: 1,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </DIDConnectContainer>
+    );
+  }
+);
+
+export default memo(RequestStorageAccessApiDialog);

package/src/RelativeTime/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Tooltip } from '@mui/material';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -56,6 +56,7 @@ export interface RelativeTimeProps {
   relativeRange?: number;
   enableTooltip?: boolean;
   showUTCPrefix?: boolean;
+  disableUTC?: boolean;
 }
 
 function useRelativeTime({
@@ -154,7 +155,17 @@ function UTCChip({
   setIsUtc: (data: any) => void;
   showUTCPrefix?: boolean;
 }) {
-  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+  const prefix = useMemo(() => {
+    if (showUTCPrefix) {
+      if (isUtc) {
+        return '';
+      }
+
+      return `${translations[locale].utc}: `;
+    }
+
+    return '';
+  }, [locale, showUTCPrefix, isUtc]);
 
   return (
     <Box
@@ -186,6 +197,7 @@ export default function RelativeTime({
   relativeRange,
   enableTooltip = true,
   showUTCPrefix = true,
+  disableUTC = false,
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
@@ -202,7 +214,7 @@ export default function RelativeTime({
   if (type === 'all') {
     return (
       <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
-        <Box display="flex" alignItems="center" gap={0.5} width="max-content" {...rest}>
+        <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
           </Box>
@@ -215,18 +227,22 @@ export default function RelativeTime({
             {relativeString}
           </Box>
 
-          <Box component="span" sx={{ color: 'inherit' }}>
-            ·
-          </Box>
+          {!disableUTC && (
+            <>
+              <Box component="span" sx={{ color: 'inherit' }}>
+                ·
+              </Box>
 
-          <UTCChip
-            locale={locale}
-            isUtc={isUtc}
-            sign={sign}
-            hoursOffset={hoursOffset}
-            setIsUtc={setIsUtc}
-            showUTCPrefix={showUTCPrefix}
-          />
+              <UTCChip
+                locale={locale}
+                isUtc={isUtc}
+                sign={sign}
+                hoursOffset={hoursOffset}
+                setIsUtc={setIsUtc}
+                showUTCPrefix={showUTCPrefix}
+              />
+            </>
+          )}
         </Box>
       </Tooltip>
     );
@@ -234,12 +250,12 @@ export default function RelativeTime({
 
   return (
     <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
-      <Box display="flex" alignItems="center" gap={1} width="max-content">
+      <Box display="inline-flex" alignItems="center" gap={1}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>
 
-        {type === 'utc' && (
+        {type === 'utc' && !disableUTC && (
           <UTCChip
             locale={locale}
             isUtc={isUtc}

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}