@arcblock/ux 2.13.28 → 2.13.29

package/lib/DIDConnect/did-connect-container.d.ts

@@ -1,5 +1,5 @@
 import { SxProps } from '@mui/material';
-export default function DIDConnectContainer({ open, popup, hideCloseButton, children, appPid, slotProps, onClose, }: {
+export default function DIDConnectContainer({ open, popup, hideCloseButton, children, appPid, slotProps, onClose, keepMounted, }: {
     popup?: boolean;
     open?: boolean;
     hideCloseButton?: boolean;
@@ -20,4 +20,5 @@ export default function DIDConnectContainer({ open, popup, hideCloseButton, chil
             sx?: SxProps;
         };
     };
+    keepMounted?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-container.js

@@ -30,7 +30,8 @@ export default function DIDConnectContainer({
   children,
   appPid,
   slotProps,
-  onClose = noop
+  onClose = noop,
+  keepMounted = false
 }) {
   const color = useCreation(() => {
     const did = appPid || window.blocklet.appPid;
@@ -63,7 +64,7 @@ export default function DIDConnectContainer({
     if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
     onClose();
   };
-  const showModal = debouncedOpen || open;
+  const showModal = debouncedOpen || open || keepMounted;
   const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
   const hslColor = colorConvert.hex.hsl(color);
   const [h, s, l] = hslColor;
@@ -237,6 +238,7 @@ export default function DIDConnectContainer({
     slots: {
       backdrop: BackdropWrap
     },
+    keepMounted: keepMounted,
     className: "did-connect__container-dialog",
     onClose: handleOnClose,
     PaperProps: {

package/lib/DIDConnect/index.d.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/lib/DIDConnect/index.js

@@ -5,4 +5,5 @@ 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';
-export { default as DIDConnectContainer } from './did-connect-container';
+export { default as DIDConnectContainer } from './did-connect-container';
+export { default as RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';

package/lib/DIDConnect/request-storage-access-api-dialog.d.ts

@@ -0,0 +1,12 @@
+import { Locale } from '../type';
+type StorageAccessState = 'prompt' | 'granted' | 'denied';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    locale?: Locale;
+    src: string;
+    storageAccessState: StorageAccessState;
+    onHandle: (data: {
+        value: boolean;
+        error?: Error;
+    }) => void;
+} & import("react").RefAttributes<unknown>>>;
+export default _default;

package/lib/DIDConnect/request-storage-access-api-dialog.js

@@ -0,0 +1,325 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 { translate } from '../Locale/util';
+import DIDConnectContainer from './did-connect-container';
+import CloseButton from '../CloseButton';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+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: 'Authorization Request',
+    clickAllow: ({
+      allowButton
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["You only need to click the ", allowButton, " button below, 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\u4E0B\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: '更快的访问速度'
+    }
+  }
+};
+const RequestStorageAccessApiDialog = /*#__PURE__*/forwardRef(({
+  locale = 'en',
+  src,
+  storageAccessState,
+  onHandle = noop
+}, ref) => {
+  const sharedBridgeRef = useRef(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 => {
+    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 /*#__PURE__*/_jsx(DIDConnectContainer, {
+    popup: true,
+    open: currentState.open,
+    onClose: handleClose,
+    keepMounted: true,
+    children: /*#__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,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(CloseButton, {
+        onClose: handleClose,
+        sx: {
+          position: 'absolute',
+          right: 14,
+          top: 14
+        }
+      }), /*#__PURE__*/_jsxs(Typography, {
+        component: "div",
+        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: currentState.origin,
+              label: currentState.host,
+              size: "small",
+              deleteIcon: /*#__PURE__*/_jsx(Icon, {
+                icon: externalLinkIcon
+              }),
+              onDelete: () => {},
+              target: "_blank"
+            })
+          })
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          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(Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            position: 'relative',
+            display: 'inline-block',
+            cursor: 'pointer'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "success",
+            onClick: handleAllow,
+            sx: {
+              minWidth: 100,
+              letterSpacing: 1
+            },
+            children: t('allow')
+          }), /*#__PURE__*/_jsx(SharedBridge, {
+            ref: sharedBridgeRef,
+            onClick: ({
+              value,
+              visitorId
+            }) => {
+              if (visitorId) setVisitorId(visitorId);
+              currentState.callback(value, 'broswer');
+            },
+            locale: locale,
+            src: src,
+            sx: {
+              zIndex: 1
+            }
+          })]
+        })
+      })]
+    })
+  });
+});
+export default /*#__PURE__*/memo(RequestStorageAccessApiDialog);

package/lib/SessionUser/components/un-login.js

@@ -14,7 +14,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 default function UnLogin({
   session,
   onLogin = noop,
@@ -56,7 +56,7 @@ export default function UnLogin({
   const masterSite = getMaster(blocklet);
   const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
   const loginAppName = loginApp?.appName || 'DID Connect';
-  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80');
+  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`);
   useEffect(() => {
     let timer;
 
@@ -88,42 +88,34 @@ export default function UnLogin({
     }
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(LoginButton, {
-      locale: locale,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      ref: userAnchorRef,
+      "data-cy": "sessionManager-login",
+      className: "arc-session-user-unlogin",
+      size: "medium",
       onClick: _onLogin,
-      render: ({
-        onClick
-      }) => {
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: userAnchorRef,
-          "data-cy": "sessionManager-login",
-          className: "arc-session-user-unlogin",
-          size: "medium",
-          onClick: onClick,
-          "aria-label": "Login button",
-          children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-            width: size,
-            height: size,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /*#__PURE__*/_jsx(CircularProgress, {
-              style: {
-                width: size - 4,
-                height: size - 4,
-                color: dark ? '#fff' : ''
-              }
-            })
-          }) : /*#__PURE__*/_jsx(Icon, {
-            icon: UserIcon,
-            fontSize: size,
-            color: dark ? '#fff' : 'inherit',
-            style: {
-              transform: 'scale(1.25)'
-            }
-          })
-        });
-      }
+      "aria-label": "Login button",
+      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
+        width: size,
+        height: size,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          style: {
+            width: size - 4,
+            height: size - 4,
+            color: dark ? '#fff' : ''
+          }
+        })
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: UserIcon,
+        fontSize: size,
+        color: dark ? '#fff' : 'inherit',
+        style: {
+          transform: 'scale(1.25)'
+        }
+      })
     }), /*#__PURE__*/_jsx(Popper, {
       open: currentState.open,
       anchorEl: userAnchorRef.current,

package/lib/SharedBridge/index.d.ts

@@ -1,16 +1,15 @@
 import type { SxProps } from '@mui/material';
-import React from 'react';
 import { Locale } from '../type';
-declare const SharedBridge: React.NamedExoticComponent<{
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
     src: string;
     onClick: (data: {
         action: string;
         value: boolean;
         visitorId?: string;
+        error?: Error;
     }) => void;
-    onLoad: () => void;
+    onLoad?: () => void;
     sx?: SxProps;
-    iframeRef?: React.RefObject<HTMLIFrameElement>;
     locale?: Locale;
-}>;
-export default SharedBridge;
+} & import("react").RefAttributes<unknown>>>;
+export default _default;

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.29",
   "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": "98e08de2a4ec51ae6181b57e2c6cf175eabd92ff",
   "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.29",
+    "@arcblock/nft-display": "^2.13.29",
+    "@arcblock/react-hooks": "^2.13.29",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.28",
+    "@blocklet/theme": "^2.13.29",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",