@arcblock/ux 3.4.15 → 3.5.1

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

@@ -1,326 +0,0 @@
-import { 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';
-
-// eslint-disable-next-line react/require-default-props
-const BackdropWrap = memo(({ ref, ...backdropProps }: { ref?: React.Ref<unknown> }) => {
-  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 = undefined,
-  slotProps = undefined,
-  onClose = noop,
-  keepMounted = false,
-}: {
-  // 是否弹出显示, 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;
-    };
-  };
-  keepMounted?: boolean;
-}) {
-  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 || keepMounted;
-
-  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 = open
-    ? {
-        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: `3px 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,
-        }}
-        slotProps={{
-          paper: {
-            sx: mergeSx(
-              {
-                backgroundColor: 'background.default',
-                borderRadius: 3, // 保持跟 DID Wallet 一致
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                p: '2px',
-                '.did-connect__root': {
-                  backgroundColor: 'transparent',
-                },
-                overflow: 'hidden',
-                animation: open ? 'glowBreathe 7s linear infinite' : 'none',
-                '@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,
-      }}
-      keepMounted={keepMounted}
-      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,76 +0,0 @@
-import { Box, SxProps } from '@mui/material';
-import { useCreation, useSize } from 'ahooks';
-import { useRef } from 'react';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-
-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';
-import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
-
-export default function DIDConnectFooter({
-  currentAppInfo = globalThis.blocklet,
-  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
-  sx = {},
-}: {
-  currentAppInfo?: any;
-  currentAppColor?: string;
-  sx?: SxProps;
-}) {
-  // 使用当前应用的配置，不用跟随主站变化
-  const blocklet = globalThis?.blocklet;
-  const browser = useBrowser();
-  const rootRef = useRef<HTMLDivElement>(null);
-  const size = useSize(rootRef);
-  const isSmallView = useCreation(() => {
-    if (size) {
-      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
-    }
-    return true;
-  }, [size, size?.width]);
-
-  return (
-    <Box
-      ref={rootRef}
-      sx={mergeSx(
-        {
-          display: 'flex',
-          justifyContent: blocklet?.settings?.didConnect?.showAppInfo === false ? 'center' : 'space-between',
-          alignItems: 'center',
-          gap: 1,
-          fontSize: 12,
-          backgroundColor:
-            blocklet?.settings?.didConnect?.showDidColor === false ? 'grey.50' : hexToRgba(currentAppColor, 0.08),
-          // 需要保持跟 .did-connect__root 的规则一样
-          mx: -3,
-          // eslint-disable-next-line no-nested-ternary
-          px: isSmallView && browser.arcSphere ? 1 : 3,
-          py: 1.5,
-          // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
-          overflow: 'auto',
-          '&::-webkit-scrollbar': {
-            display: 'none', // 隐藏滚动条 (Webkit 浏览器)
-          },
-          '-ms-overflow-style': 'none', // 隐藏滚动条 (IE 浏览器)
-          'scrollbar-width': 'none', // 隐藏滚动条 (Firefox)
-        },
-        sx
-      )}
-      className="did-connect__footer">
-      {blocklet?.settings?.didConnect?.showAppInfo === false ? null : (
-        <AppInfoItem
-          appInfo={currentAppInfo}
-          appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
-          sx={{
-            flex: 1,
-            overflow: 'hidden',
-          }}
-        />
-      )}
-
-      <PoweredBy sx={{ maxWidth: '100%', justifyContent: 'end' }} />
-    </Box>
-  );
-}

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

@@ -1,8 +0,0 @@
-import { useTheme } from '@mui/material';
-import DIDLogo from '../DIDLogo';
-
-export default function DidConnectLogo() {
-  const theme = useTheme();
-
-  return <DIDLogo size={16} fontSize={36} name="connect" dark={theme.palette.mode === 'dark'} />;
-}

package/src/DIDConnect/icons/did-wallet-logo.tsx

@@ -1,18 +0,0 @@
-import { Box } from '@mui/material';
-
-type LogoSize = number | string;
-
-export default function DIDWalletLogo({
-  width = '100%',
-  height = '100%',
-  ...rest
-}: {
-  width?: LogoSize;
-  height?: LogoSize;
-  [key: string]: any;
-}) {
-  const didWalletLogo =
-    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI3ByZWZpeF9fY2xpcDApIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSJ1cmwoI3ByZWZpeF9fcGFpbnQwX2xpbmVhcikiLz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIwX2kpIj48cGF0aCBkPSJNMy41MiA3LjM2QTIuNTYgMi41NiAwIDAxNi4wOCA0LjhoMTkuODRhMi41NiAyLjU2IDAgMDEyLjU2IDIuNTZ2MTIuMTZhMi41NiAyLjU2IDAgMDEtMi41NiAyLjU2SDYuMDhhMi41NiAyLjU2IDAgMDEtMi41Ni0yLjU2VjcuMzZ6IiBmaWxsPSIjOUZDQkZGIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjFfZCkiPjxwYXRoIGQ9Ik0yLjU2IDkuMjhhMi41NiAyLjU2IDAgMDEyLjU2LTIuNTZoMjEuNzZhMi41NiAyLjU2IDAgMDEyLjU2IDIuNTZ2MTMuNmEyLjU2IDIuNTYgMCAwMS0yLjU2IDIuNTZINS4xMmEyLjU2IDIuNTYgMCAwMS0yLjU2LTIuNTZWOS4yOHoiIGZpbGw9InVybCgjcHJlZml4X19wYWludDFfbGluZWFyKSIvPjwvZz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIyX2QpIj48cGF0aCBkPSJNMCAyMi4zMmwzMi02LjE2VjMySDB2LTkuNjh6IiBmaWxsPSJ1cmwoI3ByZWZpeF9fcGFpbnQyX2xpbmVhcikiLz48L2c+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjUzNiA5LjI0OGg4LjI4OGMuNDA4IDAgLjc0LjMuNzQuNjcydjQuNjRjMCAuMzcxLS4zMzIuNjcyLS43NC42NzJINS41MzZjLS40MDggMC0uNzQtLjMtLjc0LS42NzJ2LS4wNGEuMTU4LjE1OCAwIDEwLS4zMTYgMHYuMDRjMCAuNTMuNDczLjk2IDEuMDU2Ljk2aDguMjg4Yy41ODMgMCAxLjA1Ni0uNDMgMS4wNTYtLjk2VjkuOTJjMC0uNTMtLjQ3My0uOTYtMS4wNTYtLjk2SDUuNTM2Yy0uNTgzIDAtMS4wNTYuNDMtMS4wNTYuOTZ2LjA0YS4xNTguMTU4IDAgMDAuMzE3IDB2LS4wNGMwLS4zNzEuMzMtLjY3Mi43MzktLjY3MnptLTEuMDIzIDQuNjM4YS4xMjcuMTI3IDAgMDAuMDg3LjAzNGgxLjI2N2MuNDcyIDAgLjgzLS4xMDcgMS4wNzYtLjMyMi4yNS0uMjE3LjM4MS0uNTQ4LjM5Ny0uOTkzYTExLjI4MSAxMS4yODEgMCAwMDAtLjczNGMtLjAxMi0uNDI2LS4xNDgtLjc1MS0uNDA2LS45NzUtLjI1OC0uMjI0LS42MjItLjMzNi0xLjA5LS4zMzZINC42YS4xMjcuMTI3IDAgMDAtLjA4Ny4wMzQuMTE3LjExNyAwIDAwLS4wMzMuMDg2djMuMTJjMCAuMDMyLjAxMS4wNi4wMzMuMDg2em0xLjc5NC0uODA2Yy0uMDk5LjEtLjI1My4xNDktLjQ2NC4xNDloLS41MDJWMTEuMjVoLjQ3OGMuMjEgMCAuMzY5LjA1MS40NzQuMTU0LjEwOC4xMDIuMTY2LjI2LjE3Mi40NzUuMDA2LjA5LjAxLjIwOC4wMS4zNTVzLS4wMDQuMjY3LS4wMS4zNmMtLjAwNi4yMjEtLjA1OS4zODMtLjE1OC40ODV6bTEuNjMuODA2YS4xMjcuMTI3IDAgMDAuMDg3LjAzNGguNjRhLjExNi4xMTYgMCAwMC4wODctLjAzNC4xMS4xMSAwIDAwLjAzOC0uMDg2di0zLjEyYS4xMS4xMSAwIDAwLS4wMzgtLjA4Ni4xMTYuMTE2IDAgMDAtLjA4Ni0uMDM0aC0uNjQxYS4xMjcuMTI3IDAgMDAtLjA4Ny4wMzQuMTE3LjExNyAwIDAwLS4wMzMuMDg2djMuMTJjMCAuMDMyLjAxMS4wNi4wMzMuMDg2em0xLjYzNy4wMzRhLjEyNy4xMjcgMCAwMS0uMDg2LS4wMzQuMTI4LjEyOCAwIDAxLS4wMzMtLjA4NnYtMy4xMmMwLS4wMzUuMDEtLjA2NC4wMzMtLjA4NmEuMTI3LjEyNyAwIDAxLjA4Ni0uMDM0aDEuMjQ0Yy40NjkgMCAuODMyLjExMiAxLjA5LjMzNi4yNTkuMjI0LjM5NC41NDkuNDA3Ljk3NGExMS4yNDQgMTEuMjQ0IDAgMDEwIC43MzVjLS4wMTYuNDQ1LS4xNDguNzc2LS4zOTcuOTkzLS4yNDUuMjE1LS42MDQuMzIyLTEuMDc2LjMyMkg5LjU3NHptMS4yNDQtLjY5MWMuMjEgMCAuMzY1LS4wNS40NjQtLjE0OS4wOTktLjEwMi4xNTItLjI2NC4xNTgtLjQ4NWE1LjUyIDUuNTIgMCAwMC4wMS0uMzZjMC0uMTQ3LS4wMDQtLjI2NS0uMDEtLjM1NS0uMDA2LS4yMTQtLjA2NC0uMzczLS4xNzItLjQ3NS0uMTA2LS4xMDMtLjI2My0uMTU0LS40NzQtLjE1NGgtLjQ3OHYxLjk3OGguNTAyem0yLjQ2OC0xLjM4MmEuMjg4LjI4OCAwIDAxLS4yODgtLjI4Ni4yODguMjg4IDAgMDEuNTc2IDBjMCAuMTU4LS4xMy4yODYtLjI4OC4yODZ6bTAgMS40OTVhLjI4OC4yODggMCAwMS0uMjg4LS4yODYuMjg4LjI4OCAwIDAxLjU3NiAwYzAgLjE1OC0uMTMuMjg3LS4yODguMjg3eiIgZmlsbD0iIzQ1OThGQSIvPjwvZz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQwX2xpbmVhciIgeDE9IjE2IiB5MT0iMCIgeDI9IjE2IiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNEY5REY2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEE3OUY4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQxX2xpbmVhciIgeDE9IjE2IiB5MT0iNi43MiIgeDI9IjE2IiB5Mj0iMjUuNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRUNFRkZGIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQyX2xpbmVhciIgeDE9IjE2IiB5MT0iMTkuMiIgeDI9IjE4LjQ4IiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9Ii4wMDciIHN0b3AtY29sb3I9IiM3N0IyRjYiLz48c3RvcCBvZmZzZXQ9Ii4wNTUiIHN0b3AtY29sb3I9IiM0RjlERjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NTk4RkEiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyMF9pIiB4PSIzLjUyIiB5PSIxLjgiIHdpZHRoPSIyNC45NiIgaGVpZ2h0PSIyMC4yOCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPjxmZU9mZnNldCBkeT0iLTMiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4yIDAiLz48ZmVCbGVuZCBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3ciLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjFfZCIgeD0iLTEuNDQiIHk9IjEuNzIiIHdpZHRoPSIzNC44OCIgaGVpZ2h0PSIyNi43MiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPjxmZU9mZnNldCBkeT0iLTEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMjIwNzY3IDAgMCAwIDAgMC40NzA4MDMgMCAwIDAgMCAwLjcwMTYwNSAwIDAgMCAwLjE4IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjJfZCIgeD0iLTUiIHk9IjExLjE2IiB3aWR0aD0iNDIiIGhlaWdodD0iMjUuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz48ZmVPZmZzZXQvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjE0MzgyIDAgMCAwIDAgMC4yMDUwNjUgMCAwIDAgMCAwLjUyMjYzNCAwIDAgMCAwLjI1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48Y2xpcFBhdGggaWQ9InByZWZpeF9fY2xpcDAiPjxyZWN0IHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgcng9IjYiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=';
-
-  return <Box component="img" width={width} height={height} alt="did-wallet-logo" {...rest} src={didWalletLogo} />;
-}

package/src/DIDConnect/icons/github-logo.tsx

@@ -1,17 +0,0 @@
-type LogoSize = number | string;
-
-export default function GithubLogo({
-  width = 24,
-  height = 24,
-  ...props
-}: {
-  width?: LogoSize;
-  height?: LogoSize;
-  [key: string]: any;
-}) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 250" width={width} height={height} {...props}>
-      <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08m7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622m10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403" />
-    </svg>
-  );
-}

package/src/DIDConnect/index.ts

@@ -1,11 +0,0 @@
-export { default as DIDConnectFooter } from './did-connect-footer';
-export { default as AppInfoItem } from './app-info-item';
-export { default as AppIcon } from './app-icon';
-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 RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';
-export { default as AuthApps } from './auth-apps';
-export type { RequestAppInfo, CurrentAppInfo } from './auth-apps/auth-apps-info';

package/src/DIDConnect/landing-page.tsx

@@ -1,218 +0,0 @@
-import { Box, Theme, Typography, useMediaQuery } from '@mui/material';
-import { isEthereumDid } from '@arcblock/did';
-import { getDIDMotifInfo } from '@arcblock/did-motif';
-import { useCreation } from 'ahooks';
-import { useTheme } from '../Theme';
-
-import PoweredByArcBlock from '../PoweredByArcBlock';
-import Avatar from '../Avatar';
-import { getDIDColor, hexToRgba } from '../Util';
-import useBlockletLogo from '../hooks/use-blocklet-logo';
-
-type LandingPageProps = {
-  did: string;
-  children: React.ReactNode;
-  title?: any;
-  description?: any;
-  actions?: any;
-  logo?: any;
-  logoSize?: number;
-  poweredBy?: any;
-  termsOfUse?: any;
-  standalone?: boolean;
-};
-
-export default function LandingPage({
-  did,
-  children,
-  title = undefined,
-  description = undefined,
-  actions = undefined,
-  logo = undefined,
-  logoSize = 50,
-  poweredBy = undefined,
-  termsOfUse = undefined,
-  standalone = false,
-}: LandingPageProps) {
-  const blockletData = globalThis?.blocklet || globalThis?.env || {};
-  const { palette } = useTheme();
-  const isMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
-  const appLogo = useBlockletLogo({
-    meta: blockletData,
-  });
-  const currentAppColor = useCreation(() => {
-    const _did = blockletData.appPid;
-    const isEthDid = isEthereumDid(_did);
-    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(_did);
-    if (isEthDid) {
-      return getDIDColor(_did);
-    }
-
-    return didMotifInfo.color;
-  }, [blockletData?.appPid]);
-
-  if (!did) {
-    return children;
-  }
-
-  if (title === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    title = blockletData.appName;
-  }
-  if (description === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    description = blockletData.appDescription;
-  }
-
-  if (logo === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    logo = appLogo || '';
-  }
-
-  if (typeof logo === 'string') {
-    if (logo) {
-      // eslint-disable-next-line no-param-reassign
-      logo = (
-        <Box
-          sx={{
-            height: logoSize,
-            maxHeight: logoSize,
-            objectFit: 'contain',
-          }}
-          component="img"
-          src={logo}
-          alt={`${blockletData.appName}'s logo`}
-        />
-      );
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      logo = <Avatar size={logoSize} did={did} src={logo} variant="rounded" />;
-    }
-  }
-
-  if (poweredBy === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    poweredBy = (
-      <PoweredByArcBlock
-        linkProps={{
-          color: palette.text.secondary,
-          sx: {
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          },
-        }}
-        showExtra={!isMd}
-        sx={{
-          textAlign: 'center',
-          fontSize: '12px',
-          color: 'text.secondary',
-        }}
-      />
-    );
-  }
-
-  let content = children;
-  if (!children && !isMd) {
-    content = (
-      <Box
-        sx={{
-          filter: 'blur(180px)',
-          display: 'flex',
-        }}>
-        {/* 这里只能使用 did-avatar，用于加强页面的层次感 */}
-        <Avatar size={210} did={did} variant="rounded" />
-      </Box>
-    );
-  }
-
-  const showChildren = Boolean(children);
-  let showInfo = !standalone;
-  if (isMd) {
-    showInfo = !showChildren;
-  }
-
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        minHeight: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        px: {
-          xs: 2,
-          sm: 4,
-          md: 8,
-        },
-        pt: {
-          xs: 2,
-          sm: 4,
-          md: 6,
-        },
-        pb: {
-          xs: 5,
-          md: 8,
-        },
-        background: `radial-gradient(circle at bottom right, ${hexToRgba(currentAppColor, 0.3)} 10%, ${palette.background.default} 50%)`,
-        position: 'relative',
-      }}>
-      <Box
-        sx={{
-          maxWidth: 1200,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: [showInfo, content].filter(Boolean).length > 1 ? 'space-between' : 'center',
-          width: '100%',
-          margin: 'auto',
-        }}>
-        {showInfo ? (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 1.5,
-            }}>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>{logo}</Box>
-            <Typography
-              variant="h2"
-              sx={{
-                fontWeight: 'bold',
-                fontSize: {
-                  sm: '2.25rem',
-                  md: '2.75rem',
-                  xl: '3.5rem',
-                },
-              }}>
-              {title}
-            </Typography>
-            {description ? (
-              <Box
-                sx={{
-                  mb: 2,
-                  color: 'text.secondary',
-                }}>
-                {description}
-              </Box>
-            ) : null}
-            {actions ? <Box sx={{ mt: 8 }}>{actions}</Box> : null}
-            {termsOfUse ? <Box sx={{ mt: -1, color: 'grey' }}>{termsOfUse}</Box> : null}
-          </Box>
-        ) : null}
-
-        {content}
-      </Box>
-      <Box
-        sx={{
-          position: 'absolute',
-          zIndex: 10,
-          bottom: 10,
-          left: 10,
-          right: 10,
-          textAlign: 'center',
-        }}>
-        {poweredBy}
-      </Box>
-    </Box>
-  );
-}