@arcblock/ux 2.13.13 → 2.13.14

package/src/DIDConnect/with-container.tsx

@@ -0,0 +1,307 @@
+import { forwardRef, memo, useRef, useState } from 'react';
+import { Dialog, DialogContent, useMediaQuery, Box, Backdrop, SwipeableDrawer, Drawer } from '@mui/material';
+import { useDebounce, useMemoizedFn } from 'ahooks';
+import { useBrowser } from '@arcblock/react-hooks';
+import colorConvert from 'color-convert';
+
+import { useTheme } from '../Theme';
+import { mergeSx } from '../Util/style';
+import { hexToRgba } from '../Util';
+import { Locale } from '../type';
+
+const BackdropWrap = memo(
+  forwardRef((backdropProps, ref) => {
+    return (
+      <Backdrop
+        open
+        ref={ref}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.6)',
+          backdropFilter: 'blur(3px)',
+          touchAction: 'none',
+        }}
+        {...backdropProps}
+        key="background"
+      />
+    );
+  })
+);
+
+export default function withContainer(Component: React.ComponentType<any>) {
+  function WithContainerComponent({
+    popup = false,
+    open = false,
+    hideCloseButton = false,
+    ...rest
+  }: {
+    // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
+    popup?: boolean;
+    open?: boolean;
+    hideCloseButton?: boolean;
+    onClose: () => void;
+    blocklet?: any;
+    origin?: string;
+    host?: string;
+    locale?: Locale;
+  }) {
+    const [color, setColor] = useState('#fff');
+
+    const drawerDragger = useRef(null);
+    const browser = useBrowser();
+    // 屏宽小于 sm 且在 mobile 设备中全屏显示 dialog (PC 端屏宽小于 sm 的情况正常弹窗, 不全屏显示)
+    const matchSm = useMediaQuery('(max-width:640px)');
+    let openVariant = 'page';
+    if (popup) {
+      openVariant = 'dialog';
+      if (matchSm && browser.mobile.any) {
+        openVariant = 'drawer';
+      }
+    }
+
+    const theme = useTheme();
+
+    // 兼容 did-react 版本中存在的 responsive prop, responsive=true 则让 dialog 始终保持 open 状态, 否则遵循外部传入的 open prop
+    const isOpen = open;
+
+    const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
+    const debouncedShow = useDebounce(isOpen, {
+      wait: leavingScreenDelay,
+    });
+
+    const removeMagicToken = useMemoizedFn(() => {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (searchParams.get('magicToken')) {
+        searchParams.delete('magicToken');
+      }
+      window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
+    });
+
+    // eslint-disable-next-line no-unused-vars
+    const handleOnClose = (e: React.MouseEvent<HTMLElement>, reason: string) => {
+      if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
+      removeMagicToken();
+      rest?.onClose();
+    };
+
+    const showModal = debouncedShow || isOpen;
+
+    const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
+
+    const hslColor = colorConvert.hex.hsl(color);
+
+    const [h, s, l] = hslColor;
+    const percentageList = [0, 30, 60, 30, 0, 30, 60, 30];
+    const maxPercentage = Math.max(...percentageList);
+    const minPercentage = Math.min(...percentageList);
+    let useAlpha = false;
+    if ((l * (100 + maxPercentage)) / 100 > 100 || (l * (100 + minPercentage)) / 100 < 0) {
+      // 超出范围，使用 alpha 通道变化
+      useAlpha = true;
+    }
+    const colorList = percentageList.map((percentageItem) => {
+      let finalL = (l * (100 + percentageItem)) / 100;
+      let finalAlpha = 0.6;
+      if (useAlpha) {
+        finalAlpha = (0.5 * (100 + percentageItem)) / 100;
+      } else {
+        finalL = (l * (100 + percentageItem)) / 100;
+      }
+      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+    });
+    const background = `linear-gradient(45deg, ${colorList.join(', ')})`;
+    const colorListGlow = percentageList.map((percentageItem) => {
+      let finalL = (l * (100 + percentageItem)) / 100;
+      let finalAlpha = 0.2;
+      if (useAlpha) {
+        finalAlpha = (0.3 * (100 + percentageItem)) / 100;
+      } else {
+        finalL = (l * (100 + percentageItem)) / 100;
+      }
+      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+    });
+
+    const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
+
+    const glowStyle = {
+      overflow: 'visible',
+      '&::before, &::after': {
+        content: '""',
+        position: 'absolute',
+        top: '-3px',
+        right: '-3px',
+        bottom: '-3px',
+        left: '-3px',
+        background,
+        backgroundSize: '300% 300%',
+        backgroundRepeat: 'no-repeat',
+        animation: 'glowRotate 10s linear infinite',
+        borderRadius: '14px !important',
+        zIndex: 0,
+      },
+      '&::after': {
+        background: backgroundGlow,
+        filter: 'blur(15px)',
+      },
+
+      '@keyframes glowRotate': {
+        '0%': {
+          backgroundPosition: '0 0',
+        },
+        '50%': {
+          backgroundPosition: '100% 0',
+        },
+        '100%': {
+          backgroundPosition: '0 0',
+        },
+      },
+    };
+
+    const wrapOnClose = useMemoizedFn(() => {
+      removeMagicToken();
+      rest?.onClose();
+    });
+
+    if (openVariant === 'page') {
+      return (
+        <Box
+          className="did-connect__container-page"
+          sx={mergeSx(glowStyle, {
+            borderRadius: 1,
+            position: 'relative',
+            zIndex: 1,
+          })}>
+          <Box
+            sx={{
+              border: `1px solid ${hexToRgba(color, 0.1)}`,
+              m: '-1px',
+              position: 'relative',
+              borderRadius: '12px',
+              zIndex: 2,
+              overflow: 'hidden',
+            }}>
+            <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
+          </Box>
+        </Box>
+      );
+    }
+
+    if (openVariant === 'drawer') {
+      return (
+        <DrawerComponent
+          className="did-connect__container-drawer"
+          disableSwipeToOpen
+          open={isOpen}
+          anchor="bottom"
+          drawerDragger={drawerDragger.current}
+          // @ts-ignore
+          onClose={handleOnClose}
+          slots={{
+            backdrop: BackdropWrap,
+          }}
+          PaperProps={{
+            sx: {
+              borderRadius: 3, // 保持跟 DID Wallet 一致
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              p: '2px',
+              animation: 'glowBreathe 7s linear infinite',
+              '.did-connect__root': {
+                backgroundColor: 'transparent',
+              },
+              overflow: 'hidden',
+              '@keyframes glowBreathe': {
+                '0%, 100%': {
+                  boxShadow: `
+                      inset 0 0 7px ${hexToRgba(color, 0.3)},
+                      inset 0 0 12px ${hexToRgba(color, 0.3)}`,
+                },
+                '50%': {
+                  boxShadow: `
+                      inset 0 0 18px ${hexToRgba(color, 0.7)},
+                      inset 0 0 24px ${hexToRgba(color, 0.5)}`,
+                },
+              },
+            },
+          }}>
+          {hideCloseButton ? null : (
+            <Box
+              ref={drawerDragger}
+              sx={{
+                px: 1,
+                pt: 2,
+                m: 'auto',
+                mt: -1,
+                mb: -2,
+                zIndex: 2,
+              }}>
+              <Box
+                sx={{
+                  width: '48px',
+                  height: '4px',
+                  borderRadius: '100vw',
+                  backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                }}
+              />
+            </Box>
+          )}
+          <Box
+            sx={{
+              touchAction: 'none',
+              maxWidth: '100%',
+              width: 500,
+              height: 'auto',
+            }}>
+            {/* HACK: 由于 MUI 文档中描述 使用 keepMounted: false 可能会造成问题，所以采用下面的方案进行 HACK */}
+            {/* https://mui.com/material-ui/react-drawer/#keep-mounted */}
+            {showModal ? (
+              <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
+            ) : null}
+          </Box>
+        </DrawerComponent>
+      );
+    }
+
+    return (
+      <Dialog
+        open={isOpen}
+        slots={{
+          backdrop: BackdropWrap,
+        }}
+        className="did-connect__container-dialog"
+        onClose={handleOnClose}
+        PaperProps={{
+          sx: {
+            // 避免样式被 server 中的定义覆盖
+            '&.MuiPaper-rounded': {
+              borderRadius: '12px !important',
+            },
+            position: 'relative',
+            ...glowStyle,
+          },
+        }}>
+        <DialogContent
+          sx={{
+            maxWidth: 'calc(100vw - 18px)',
+            maxHeight: 'calc(100vh - 18px)',
+            p: '0px !important',
+            height: 'auto',
+            backgroundColor: 'background.default',
+            borderRadius: '12px !important',
+            zIndex: 1,
+          }}>
+          {showModal ? (
+            <Component
+              {...rest}
+              onClose={wrapOnClose}
+              setColor={setColor}
+              hideCloseButton={hideCloseButton}
+              mode={openVariant}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return WithContainerComponent;
+}

package/src/DIDConnect/with-ux-theme.tsx

@@ -0,0 +1,22 @@
+import { createTheme, useTheme } from '@mui/material';
+import { DID_CONNECT_THEME_LIGHT, DID_CONNECT_THEME_DARK } from '@blocklet/theme';
+import { ThemeProvider } from '../Theme';
+
+// DID Connect 使用自己的 Theme 配置，不受 Blocklet theme 影响
+const themeLight = createTheme(DID_CONNECT_THEME_LIGHT);
+const themeDark = createTheme(DID_CONNECT_THEME_DARK);
+
+export default function withUxTheme(Component: React.ComponentType<any>) {
+  function WithUxThemeComponent(props: any) {
+    const { palette } = useTheme();
+    const theme = palette.mode === 'dark' ? themeDark : themeLight;
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Component {...props} />
+      </ThemeProvider>
+    );
+  }
+
+  return WithUxThemeComponent;
+}

package/src/Dialog/confirm.jsx

@@ -15,6 +15,7 @@ import Dialog from './dialog';
  *   children?: React.ReactNode,
  *   showCancelButton?: true | false,
  *   showCloseButton?: true | false,
+ *   showConfirmButton?: true | false,
  *   fullScreen?: false | true,
  *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
  *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
@@ -35,6 +36,7 @@ export default function Confirm({
   onCancel,
   showCloseButton,
   showCancelButton,
+  showConfirmButton,
   fullScreen,
   confirmButton,
   cancelButton,
@@ -81,29 +83,33 @@ export default function Confirm({
         },
       }}
       actions={
-        <>
-          {showCancelButton && (
-            <Button
-              onClick={(e) => {
-                e.stopPropagation();
-                onCancel(e, 'closeButton');
-              }}
-              color="primary"
-              {...cancelButton.props}>
-              {cancelButton.text}
-            </Button>
-          )}
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              onConfirm(e);
-            }}
-            color="primary"
-            autoFocus
-            {...confirmButton.props}>
-            {confirmButton.text}
-          </Button>
-        </>
+        showCancelButton || showConfirmButton ? (
+          <>
+            {showCancelButton && (
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancel(e, 'closeButton');
+                }}
+                color="primary"
+                {...cancelButton.props}>
+                {cancelButton.text}
+              </Button>
+            )}
+            {showConfirmButton && (
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onConfirm(e);
+                }}
+                color="primary"
+                autoFocus
+                {...confirmButton.props}>
+                {confirmButton.text}
+              </Button>
+            )}
+          </>
+        ) : null
       }>
       {children}
     </Dialog>
@@ -117,6 +123,7 @@ Confirm.propTypes = {
   onCancel: PropTypes.func.isRequired,
   children: PropTypes.node,
   showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,
   fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
@@ -133,6 +140,7 @@ Confirm.propTypes = {
 
 Confirm.defaultProps = {
   showCancelButton: true,
+  showConfirmButton: true,
   showCloseButton: true,
   fullScreen: false,
   confirmButton: {

package/src/Dialog/use-confirm.jsx

@@ -19,6 +19,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
     loading: false,
     showCancelButton: true,
     showCloseButton: true,
+    showConfirmButton: true,
     confirmButtonText: 'Confirm',
     confirmButtonProps: {},
     cancelButtonText: 'Cancel',
@@ -43,6 +44,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.onCancel = params.onCancel || noop;
     state.showCloseButton = params.showCloseButton ?? true;
     state.showCancelButton = params.showCancelButton ?? true;
+    state.showConfirmButton = params.showConfirmButton ?? true;
     if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
     if (params.confirmButtonProps) state.confirmButtonProps = params.confirmButtonProps;
     if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
@@ -62,6 +64,9 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.confirmButtonProps = {};
     state.cancelButtonText = 'Cancel';
     state.cancelButtonProps = {};
+    state.showConfirmButton = true;
+    state.showCancelButton = true;
+    state.showCloseButton = true;
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -130,6 +135,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
       }}
       showCloseButton={state.showCloseButton}
       showCancelButton={state.showCancelButton}
+      showConfirmButton={state.showConfirmButton}
       cancelButton={{
         text: state.cancelButtonText,
         props: {

package/src/Locale/util.ts

@@ -2,8 +2,13 @@ import get from 'lodash/get';
 import type { Locale, Translations } from '../type';
 
 /* eslint-disable no-prototype-builtins */
-export const replace = (template: string, data: Record<string, any>) =>
-  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+export const replace = (template: string | Function, data: Record<string, any>) => {
+  if (typeof template === 'function') {
+    return template(data);
+  }
+
+  return template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+};
 
 export const translate = (
   translations: Translations,

package/src/LoginButton/index.tsx

@@ -0,0 +1,73 @@
+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>
+  );
+}

package/src/SessionUser/components/un-login.tsx

@@ -27,6 +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';
 
 export interface UnLoginProps {
   session: Session;
@@ -43,7 +44,6 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   });
   const searchParams = new URLSearchParams(window.location.search);
   const browser = useBrowser();
-
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
   const currentState = useReactive({
@@ -55,17 +55,18 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
-  const _onLogin = useMemoizedFn(() => {
+
+  const _onLogin = useMemoizedFn(({ openMode } = {}) => {
     if (isFirstLoading) {
       return;
     }
-    session.login(onLogin);
+    session.login(onLogin, { openMode });
   });
 
   const blocklet = window?.blocklet;
   const federatedEnabled = getFederatedEnabled(blocklet);
-  const master = getMaster(blocklet);
-  const loginApp = federatedEnabled && master ? master : blocklet;
+  const masterSite = getMaster(blocklet);
+  const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
   const loginAppName = loginApp?.appName || 'DID Connect';
   const loginAppLogo = joinURL(
     loginApp?.appUrl || '/',
@@ -104,28 +105,34 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
 
   return (
     <>
-      <Box>
-        <IconButton
-          ref={userAnchorRef}
-          onClick={_onLogin}
-          data-cy="sessionManager-login"
-          className="arc-session-user-unlogin"
-          size="medium"
-          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>
-      </Box>
+      <LoginButton
+        locale={locale}
+        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>
+          );
+        }}
+      />
       <Popper
         open={currentState.open}
         anchorEl={userAnchorRef.current}