@arcblock/ux 2.13.20 → 2.13.23

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

@@ -0,0 +1,320 @@
+import { forwardRef, memo, useRef } from 'react';
+import { useBrowser } from '@arcblock/react-hooks';
+import { Backdrop, Box, Dialog, DialogContent, Drawer, SwipeableDrawer, SxProps, useMediaQuery } from '@mui/material';
+import { useCreation, useDebounce } from 'ahooks';
+import colorConvert from 'color-convert';
+import { getDIDMotifInfo } from '@arcblock/did-motif';
+import noop from 'lodash/noop';
+
+import { useTheme } from '../Theme';
+import { mergeSx } from '../Util/style';
+import { getDIDColor, hexToRgba, isEthereumDid } from '../Util';
+import DIDConnectFooter from './did-connect-footer';
+
+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 DIDConnectContainer({
+  open = false,
+  popup = false,
+  hideCloseButton = false,
+  children,
+  appPid,
+  slotProps,
+  onClose = noop,
+}: {
+  // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
+  popup?: boolean;
+  open?: boolean;
+  hideCloseButton?: boolean;
+  children: React.ReactNode;
+  onClose?: () => void;
+  appPid?: string;
+  slotProps?: {
+    footer?: {
+      sx?: SxProps;
+    };
+    containerPage?: {
+      sx?: SxProps;
+    };
+    containerDrawer?: {
+      sx?: SxProps;
+    };
+    containerDialog?: {
+      sx?: SxProps;
+    };
+  };
+}) {
+  const color = useCreation(() => {
+    const did = appPid || window.blocklet.appPid;
+    const isEthDid = isEthereumDid(did);
+    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+    if (isEthDid) {
+      return getDIDColor(did);
+    }
+
+    return didMotifInfo.color;
+  }, []);
+
+  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();
+
+  const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
+  const debouncedOpen = useDebounce(open, {
+    wait: leavingScreenDelay,
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  const handleOnClose = (e: React.MouseEvent<HTMLElement>, reason: string) => {
+    if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
+    onClose();
+  };
+
+  const showModal = debouncedOpen || open;
+
+  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',
+      },
+    },
+  };
+
+  if (openVariant === 'page') {
+    return (
+      <Box
+        className="did-connect__container-page"
+        sx={mergeSx(
+          {
+            borderRadius: 1,
+            position: 'relative',
+            zIndex: 1,
+            backgroundColor: 'background.default',
+          },
+          glowStyle,
+          slotProps?.containerPage?.sx
+        )}>
+        <Box
+          sx={{
+            border: `1px solid ${hexToRgba(color, 0.1)}`,
+            m: '-1px',
+            position: 'relative',
+            borderRadius: '12px',
+            zIndex: 2,
+            overflow: 'hidden',
+            backgroundColor: 'background.default',
+          }}>
+          {children}
+          <DIDConnectFooter currentAppColor={color} sx={mergeSx({ mx: 0 }, slotProps?.footer?.sx)} />
+        </Box>
+      </Box>
+    );
+  }
+
+  if (openVariant === 'drawer') {
+    return (
+      <DrawerComponent
+        className="did-connect__container-drawer"
+        disableSwipeToOpen
+        open={open}
+        anchor="bottom"
+        drawerDragger={drawerDragger.current}
+        // @ts-ignore
+        onClose={handleOnClose}
+        slots={{
+          backdrop: BackdropWrap,
+        }}
+        PaperProps={{
+          sx: mergeSx(
+            {
+              backgroundColor: 'background.default',
+              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)}`,
+                },
+              },
+            },
+            slotProps?.containerDrawer?.sx
+          ),
+        }}>
+        {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',
+            backgroundColor: 'background.default',
+          }}>
+          {/* HACK: 由于 MUI 文档中描述 使用 keepMounted: false 可能会造成问题，所以采用下面的方案进行 HACK */}
+          {/* https://mui.com/material-ui/react-drawer/#keep-mounted */}
+          {showModal ? children : null}
+          <DIDConnectFooter currentAppColor={color} sx={mergeSx({ mx: 0 }, slotProps?.footer?.sx)} />
+        </Box>
+      </DrawerComponent>
+    );
+  }
+
+  return (
+    <Dialog
+      open={open}
+      slots={{
+        backdrop: BackdropWrap,
+      }}
+      className="did-connect__container-dialog"
+      onClose={handleOnClose}
+      PaperProps={{
+        sx: mergeSx(
+          {
+            // 避免样式被 server 中的定义覆盖
+            '&.MuiPaper-rounded': {
+              borderRadius: '12px !important',
+            },
+            position: 'relative',
+            backgroundColor: 'background.default',
+          },
+          glowStyle,
+          slotProps?.containerDialog?.sx
+        ),
+      }}>
+      <DialogContent
+        sx={{
+          maxWidth: 'calc(100vw - 18px)',
+          maxHeight: 'calc(100vh - 18px)',
+          p: '0px !important',
+          height: 'auto',
+          borderRadius: '12px !important',
+          zIndex: 1,
+          backgroundColor: 'background.default',
+        }}>
+        {showModal ? children : null}
+        <DIDConnectFooter currentAppColor={color} sx={mergeSx({ mx: 0 }, slotProps?.footer?.sx)} />
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,40 +1,46 @@
-import { Box, useMediaQuery } from '@mui/material';
+import { Box, SxProps, useMediaQuery } from '@mui/material';
 
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
+import { mergeSx } from '../Util/style';
 
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
+  sx,
 }: {
   currentAppInfo?: any;
   currentAppColor?: string;
+  sx?: SxProps;
 }) {
   const isSmallView = useMediaQuery('(max-width:640px)');
 
   return (
     <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 1,
-        fontSize: 12,
-        backgroundColor: hexToRgba(currentAppColor, 0.08),
-        // 需要保持跟 .did-connect__root 的规则一样
-        mx: isSmallView ? -2 : -3,
-        px: isSmallView ? 2 : 3,
-        py: 1.5,
-        // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
-        overflow: 'auto',
-        '&::-webkit-scrollbar': {
-          display: 'none', // 隐藏滚动条 (Webkit 浏览器)
+      sx={mergeSx(
+        {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: 1,
+          fontSize: 12,
+          backgroundColor: hexToRgba(currentAppColor, 0.08),
+          // 需要保持跟 .did-connect__root 的规则一样
+          mx: isSmallView ? -2 : -3,
+          px: isSmallView ? 2 : 3,
+          py: 1.5,
+          // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
+          overflow: 'auto',
+          '&::-webkit-scrollbar': {
+            display: 'none', // 隐藏滚动条 (Webkit 浏览器)
+          },
+          '-ms-overflow-style': 'none', // 隐藏滚动条 (IE 浏览器)
+          'scrollbar-width': 'none', // 隐藏滚动条 (Firefox)
         },
-        '-ms-overflow-style': 'none', // 隐藏滚动条 (IE 浏览器)
-        'scrollbar-width': 'none', // 隐藏滚动条 (Firefox)
-      }}
+        sx
+      )}
       className="did-connect__footer">
       <AppInfoItem
         appInfo={currentAppInfo}

package/src/DIDConnect/index.ts

@@ -5,3 +5,4 @@ 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';

package/src/NavMenu/products.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, BoxProps, Grid } from '@mui/material';
+import { Box, BoxProps, Grid, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -26,6 +26,7 @@ import DidWalletSvg from './images/did-wallet.svg?react';
 import DidNameServiceSvg from './images/did-name-service.svg?react';
 import VCSvg from './images/vc.svg?react';
 import DidConnectSvg from './images/did-connect.svg?react';
+import PaymentKitPng from './images/payment-kit.png';
 
 const translations = {
   en: {
@@ -54,6 +55,9 @@ const translations = {
       alKit: {
         description: 'Boost apps with AI',
       },
+      paymentKit: {
+        description: 'Effortless Crypto & Card Payments',
+      },
       blockletStore: {
         description: 'Discover & deploy apps',
       },
@@ -118,6 +122,9 @@ const translations = {
       alKit: {
         description: 'AI 赋能应用',
       },
+      paymentKit: {
+        description: '便捷的加密货币和银行卡支付',
+      },
       blockletStore: {
         description: '发现和部署应用程序',
       },
@@ -189,6 +196,7 @@ export interface ProductsProps extends BoxProps {
 
 export default function Products({ className, isOpen, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
+  const { palette } = useTheme();
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { locale = 'en' } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
@@ -229,7 +237,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
                 </Link>
               ),
               description: t('products.aigne.description'),
-              icon: <AigneSvg />,
+              icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
             },
             {
               label: (
@@ -269,6 +277,15 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
               description: t('products.alKit.description'),
               icon: <AIKitSvg />,
             },
+            {
+              label: (
+                <Link to={`https://www.blocklet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Payment Kit
+                </Link>
+              ),
+              description: t('products.paymentKit.description'),
+              icon: <img src={PaymentKitPng} alt="Payment Kit" />,
+            },
           ],
           [
             {
@@ -332,7 +349,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
             {
               label: (
                 <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}
+                  to={`https://www.blocklet.io/${locale}/blocklet-server`}
                   target="_blank"
                   rel="noreferrer noopener">
                   Blocklet Server
@@ -418,7 +435,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         ],
       },
     ];
-  }, [t, locale]);
+  }, [t, locale, palette]);
 
   return (
     <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>

package/src/NavMenu/style.ts

@@ -128,7 +128,8 @@ export const NavMenuItem = styled('li', {
       width: '32px',
       height: '32px',
       marginRight: '16px',
-      border: '1px solid #eff1f5',
+      border: '1px solid',
+      borderColor: theme.palette.grey[200],
       borderRadius: '4px',
       color: theme.palette.grey[500],
     },

package/src/PhoneInput/index.tsx

@@ -200,7 +200,8 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone, country);
+    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
+    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
     const canDial = allowDial && isValid;
 
     return (

package/src/SessionUser/components/quick-login-item.tsx

@@ -41,18 +41,18 @@ export default function QuickLoginItem({
         borderRadius: 1,
         p: 2,
         transition: 'background-color 0.5s',
+        bgcolor: 'background.paper',
         '&:hover, &:active': {
-          backgroundColor: 'grey.100',
+          backgroundColor: 'action.hover',
         },
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: 'grey.200',
+          backgroundColor: 'action.hover',
         },
         width: '100%',
-        backgroundColor: 'white',
       }}
       onClick={onClick}>
       <Box

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

@@ -159,7 +159,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                 maxWidth: '90vw',
                 borderColor: 'divider',
                 border: '0 !important',
-                boxShadow: `0px 8px 16px 0px ${palette.grey[200]}, 0px 0px 0px 1px ${palette.grey[200]}`,
+                boxShadow: 4,
               }}>
               <Box
                 sx={{
@@ -167,7 +167,8 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                   alignItems: 'center',
                   gap: 1,
                   p: 2,
-                  borderBottom: '1px solid #eee',
+                  borderBottom: '1px solid',
+                  borderColor: 'divider',
                 }}>
                 {loginAppLogo && !currentState.loadAppLogoError ? (
                   <img
@@ -213,8 +214,9 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                           overflow: 'hidden',
                           position: 'relative',
                           p: 0,
+                          bgcolor: 'background.paper',
                           '&:hover': {
-                            backgroundColor: `${palette.grey[200]} !important`,
+                            bgcolor: `${palette.action.hover} !important`,
                           },
                         }}
                         onClick={() => {
@@ -239,7 +241,6 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                           sx={{
                             mx: 2,
                             my: '0px !important',
-                            borderColor: '#e4e4e7',
                           }}
                         />
                       ) : null}

package/src/SessionUser/components/user-info.tsx

@@ -1,4 +1,4 @@
-import { alpha, Box, Chip, Typography, useTheme } from '@mui/material';
+import { alpha, Box, Chip, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
 import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';

package/src/SharedBridge/index.tsx

@@ -8,7 +8,7 @@ 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';
+import { DIDConnectContainer } from '../DIDConnect';
 
 const SharedBridge = memo(function SharedBridge({
   src,
@@ -82,8 +82,6 @@ const SharedBridge = memo(function SharedBridge({
     // 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;
@@ -107,15 +105,9 @@ const SharedBridge = memo(function SharedBridge({
 
   return (
     <>
-      <DialogComponent
-        popup
-        locale={locale}
-        blocklet={window.blocklet}
-        open={currentState.open}
-        origin={currentState.origin}
-        host={currentState.host}
-        onClose={() => {}}
-      />
+      <DIDConnectContainer popup hideCloseButton open={currentState.open}>
+        <NeedStorageAccessApiDialog locale={locale} origin={currentState.origin} host={currentState.host} />
+      </DIDConnectContainer>
       <Box
         {...rest}
         component="iframe"

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

@@ -4,13 +4,10 @@ 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 { useMemoizedFn } from 'ahooks';
 
 import { Locale } from '../type';
 import { translate } from '../Locale/util';
-import { getDIDColor, isEthereumDid } from '../Util';
 import { DIDConnectFooter } from '../DIDConnect';
 
 const translations: Record<
@@ -67,31 +64,14 @@ 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
@@ -105,7 +85,6 @@ export default function NeedStorageAccessApiDialog({
         transition: 'width 0.2s ease-in-out',
         margin: 'auto',
         p: 3,
-        pb: 0,
         gap: 2,
       }}>
       <Typography
@@ -165,7 +144,6 @@ export default function NeedStorageAccessApiDialog({
           {t('dataUsage')}
         </Typography>
       </Box>
-      <DIDConnectFooter currentAppColor={currentAppColor} />
     </Box>
   );
 }

package/src/Theme/index.ts

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