@arcblock/ux 2.13.28 → 2.13.30

package/src/SharedBridge/index.tsx

@@ -1,119 +1,113 @@
 import { Box } from '@mui/material';
 import type { SxProps } 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 { Locale } from '../type';
-import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { DIDConnectContainer } 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<{
-    hasInited?: boolean;
-    open: boolean;
-    hasStorageAccess: boolean;
-    origin: string;
-    host: string;
-  }>({
-    hasInited: undefined,
-    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 SharedBridge = forwardRef(
+  (
+    {
+      src,
+      onClick,
+      onLoad = noop,
+      sx,
+      locale = 'en',
+      ...rest
+    }: {
+      src: string;
+      onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
+      onLoad?: () => void;
+      sx?: SxProps;
+      locale?: Locale;
     },
-  });
+    ref
+  ) => {
+    const targetIframeRef = useRef<HTMLIFrameElement>(null);
+    const refId = useId();
+    const dataId = `shared-bridge_${refId}`;
+    const currentState = useReactive<{
+      hasInited?: boolean;
+      open: boolean;
+      hasStorageAccess: boolean;
+      origin: string;
+      host: string;
+      containerEl: HTMLDivElement | null;
+    }>({
+      hasInited: undefined,
+      open: false,
+      hasStorageAccess: false,
+      containerEl: null,
+      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;
 
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const { data } = event;
-      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
-        currentState.open = false;
+          if (!data.value) {
+            onClick(data);
+            return;
+          }
 
-        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;
         }
-
-        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]);
+      window.addEventListener('message', handleMessage);
+      return () => {
+        window.removeEventListener('message', handleMessage);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClick, dataId, targetIframeRef?.current]);
 
-  const handleLoad = useMemoizedFn(() => {
-    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
-      currentState.hasStorageAccess = value;
-      currentState.hasInited = true;
+    const handleLoad = useMemoizedFn(() => {
+      callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
+        currentState.hasStorageAccess = value;
+        currentState.hasInited = true;
+      });
+      // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
+      setTimeout(() => {
+        if (currentState.hasInited === undefined) {
+          currentState.hasInited = false;
+        }
+      }, 1000);
+      onLoad();
     });
-    setTimeout(() => {
-      if (currentState.hasInited === undefined) {
-        currentState.hasInited = false;
-      }
-    }, 1000);
-    onLoad();
-  });
-
-  if (currentState.hasInited === false) {
-    return null;
-  }
 
-  if (currentState.hasStorageAccess) {
-    return null;
-  }
-
-  return (
-    <>
-      <DIDConnectContainer popup hideCloseButton open={currentState.open}>
-        <NeedStorageAccessApiDialog locale={locale} origin={currentState.origin} host={currentState.host} />
-      </DIDConnectContainer>
+    useImperativeHandle(ref, () => ({
+      callIframe(action: string) {
+        return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
+      },
+    }));
+    return (
       <Box
         {...rest}
         component="iframe"
         ref={targetIframeRef}
         onLoad={handleLoad}
-        title="shared-bridge"
         data-id={dataId}
         src={withQuery(src, { id: dataId })}
         sx={mergeSx(
@@ -125,13 +119,13 @@ const SharedBridge = memo(function SharedBridge({
             width: '100%',
             height: '100%',
             cursor: 'pointer',
-            opacity: 0,
+            backgroundColor: 'transparent',
           },
           sx
         )}
       />
-    </>
-  );
-});
+    );
+  }
+);
 
-export default SharedBridge;
+export default memo(SharedBridge);

package/lib/LoginButton/index.d.ts

@@ -1,12 +0,0 @@
-import { Locale } from '../type';
-type LoginButtonProps = {
-    onClick: (options?: {
-        openMode?: 'popup' | 'window';
-    }) => void;
-    render: (options: {
-        onClick: () => void;
-    }) => React.ReactNode;
-    locale?: Locale;
-};
-export default function LoginButton({ onClick, render, locale }: LoginButtonProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export {};

package/lib/LoginButton/index.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { joinURL } from 'ufo';
-import { useRef, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-import SharedBridge from '../SharedBridge';
-import { setVisitorId } from '../Util';
-import { getFederatedEnabled, getMaster } from '../Util/federated';
-import { callIframe } from '../Util/iframe';
-export default function LoginButton({
-  onClick,
-  render,
-  locale
-}) {
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const sharedBridgeRef = useRef(null);
-  const [hasStorageAccess, setHasStorageAccess] = useState(false);
-  const browser = useBrowser();
-  const handleClick = useMemoizedFn(() => {
-    if (hasStorageAccess) {
-      onClick({
-        openMode: 'popup'
-      });
-    } else {
-      onClick();
-    }
-  });
-  const handleLoad = useMemoizedFn(async () => {
-    const {
-      value: visitorId
-    } = await callIframe(sharedBridgeRef.current, 'getVisitorId');
-    if (visitorId) {
-      setHasStorageAccess(true);
-      setVisitorId(visitorId);
-    }
-  });
-  const handleClickBridge = useMemoizedFn(({
-    value,
-    visitorId
-  }) => {
-    if (visitorId) {
-      setVisitorId(visitorId);
-    }
-    if (value) {
-      onClick({
-        openMode: 'popup'
-      });
-    } else {
-      onClick();
-    }
-  });
-  if (browser.arcSphere || browser.wallet) {
-    return render({
-      onClick
-    });
-  }
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative'
-    },
-    children: [render({
-      onClick: handleClick
-    }), masterSite?.appUrl && federatedEnabled ? /*#__PURE__*/_jsx(SharedBridge, {
-      locale: locale,
-      iframeRef: sharedBridgeRef,
-      onLoad: handleLoad,
-      onClick: handleClickBridge,
-      src: joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')
-    }) : null]
-  });
-}

package/lib/SharedBridge/need-storage-access-api-dialog.d.ts

@@ -1,6 +0,0 @@
-import { Locale } from '../type';
-export default function NeedStorageAccessApiDialog({ locale, origin, host, }: {
-    locale?: Locale;
-    origin: string;
-    host: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,191 +0,0 @@
-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 { useMemoizedFn } from 'ahooks';
-import { translate } from '../Locale/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: '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
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  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,
-      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')
-      })]
-    })]
-  });
-}

package/src/LoginButton/index.tsx

@@ -1,73 +0,0 @@
-import { Box } from '@mui/material';
-import { joinURL } from 'ufo';
-import { useRef, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-
-import SharedBridge from '../SharedBridge';
-import { setVisitorId } from '../Util';
-import { getFederatedEnabled, getMaster } from '../Util/federated';
-import { callIframe } from '../Util/iframe';
-import { Locale } from '../type';
-
-type LoginButtonProps = {
-  onClick: (options?: { openMode?: 'popup' | 'window' }) => void;
-  render: (options: { onClick: () => void }) => React.ReactNode;
-  locale?: Locale;
-};
-
-export default function LoginButton({ onClick, render, locale }: LoginButtonProps) {
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const sharedBridgeRef = useRef<HTMLIFrameElement>(null);
-  const [hasStorageAccess, setHasStorageAccess] = useState(false);
-  const browser = useBrowser();
-
-  const handleClick = useMemoizedFn(() => {
-    if (hasStorageAccess) {
-      onClick({ openMode: 'popup' });
-    } else {
-      onClick();
-    }
-  });
-  const handleLoad = useMemoizedFn(async () => {
-    const { value: visitorId } = await callIframe(sharedBridgeRef.current as HTMLIFrameElement, 'getVisitorId');
-    if (visitorId) {
-      setHasStorageAccess(true);
-      setVisitorId(visitorId);
-    }
-  });
-  const handleClickBridge = useMemoizedFn(({ value, visitorId }) => {
-    if (visitorId) {
-      setVisitorId(visitorId);
-    }
-    if (value) {
-      onClick({ openMode: 'popup' });
-    } else {
-      onClick();
-    }
-  });
-
-  if (browser.arcSphere || browser.wallet) {
-    return render({ onClick });
-  }
-
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-      }}>
-      {render({ onClick: handleClick })}
-      {masterSite?.appUrl && federatedEnabled ? (
-        <SharedBridge
-          locale={locale}
-          iframeRef={sharedBridgeRef}
-          onLoad={handleLoad}
-          onClick={handleClickBridge}
-          src={joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')}
-        />
-      ) : null}
-    </Box>
-  );
-}