@arcblock/ux 2.13.57 → 2.13.59

package/lib/DIDConnect/auth-apps/auth-apps-info.d.ts

@@ -0,0 +1,14 @@
+export type RequestAppInfo = {
+    appLogo: string;
+    appName: string;
+    appUrl: string;
+};
+export type CurrentAppInfo = {
+    appLogo: string;
+    appName: string;
+    appUrl: string;
+};
+export default function AuthApps({ requestAppInfo, currentAppInfo, }: {
+    requestAppInfo: RequestAppInfo;
+    currentAppInfo: CurrentAppInfo;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/auth-apps/auth-apps-info.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import Img from '../../Img';
+export default function AuthApps({
+  requestAppInfo,
+  currentAppInfo
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      textAlign: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Img, {
+        src: currentAppInfo.appLogo,
+        alt: "Server",
+        width: 48,
+        height: 48
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mx: 2,
+          display: 'flex',
+          alignItems: 'center',
+          '& .dot': {
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            bgcolor: 'divider',
+            mx: 0.5
+          }
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "dot"
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "dot"
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "dot"
+        })]
+      }), /*#__PURE__*/_jsx(Img, {
+        src: requestAppInfo.appLogo,
+        alt: requestAppInfo.appName,
+        width: 48,
+        height: 48
+      })]
+    }), /*#__PURE__*/_jsxs(Typography, {
+      sx: {
+        mb: 1,
+        fontSize: '1.2rem'
+      },
+      children: ["Authorize", ' ', /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          color: 'primary.main'
+        },
+        children: requestAppInfo.appName
+      })]
+    })]
+  });
+}

package/lib/DIDConnect/auth-apps/index.d.ts

@@ -0,0 +1,24 @@
+import type { UserPublicInfo } from '@blocklet/js-sdk';
+import { type RequestAppInfo, type CurrentAppInfo } from './auth-apps-info';
+/**
+ * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
+ */
+export default function AuthApps({ session, requestAppInfo, currentAppInfo, children, userInfo, hideSwitchConnect, hideAuthorize, hideCancel, notThisText, authorizeText, connectText, cancelText, useAnotherText, onConnect, onAuthorize, onSwitchConnect, onCancel, }: {
+    session: any;
+    requestAppInfo: RequestAppInfo;
+    currentAppInfo: CurrentAppInfo;
+    children?: React.ReactNode;
+    userInfo?: UserPublicInfo;
+    hideSwitchConnect?: boolean;
+    hideAuthorize?: boolean;
+    hideCancel?: boolean;
+    notThisText?: string;
+    authorizeText?: string;
+    connectText?: string;
+    cancelText?: string;
+    useAnotherText?: string;
+    onConnect?: (done: () => void) => void;
+    onAuthorize?: (done: () => void) => void;
+    onSwitchConnect?: (done: () => void) => void;
+    onCancel?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/auth-apps/index.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, CircularProgress, Link, Stack, Typography } from '@mui/material';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import DIDConnectContainer from '../did-connect-container';
+import AuthAppsInfo from './auth-apps-info';
+import Center from '../../Center';
+import LandingPage from '../landing-page';
+import { translate } from '../../Locale/util';
+import { useLocaleContext } from '../../Locale/context';
+import UserCard from '../../UserCard';
+import { CardType, InfoType } from '../../UserCard/types';
+const translations = {
+  en: {
+    notThis: 'Not this?',
+    useAnother: 'Use another',
+    authorize: 'Authorize',
+    connect: 'Connect',
+    cancel: 'Cancel'
+  },
+  zh: {
+    notThis: '不是这个？',
+    useAnother: '使用其他',
+    authorize: '授权',
+    connect: 'Connect',
+    cancel: '取消'
+  }
+};
+
+/**
+ * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
+ */
+export default function AuthApps({
+  session,
+  requestAppInfo,
+  currentAppInfo,
+  children,
+  userInfo,
+  hideSwitchConnect = false,
+  hideAuthorize = false,
+  hideCancel = false,
+  notThisText,
+  authorizeText,
+  connectText,
+  cancelText,
+  useAnotherText,
+  onConnect = noop,
+  onAuthorize = noop,
+  onSwitchConnect = noop,
+  onCancel = noop
+}) {
+  const currentState = useReactive({
+    loading: false
+  });
+  const {
+    locale = 'en'
+  } = useLocaleContext() || {};
+  const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+  const handleCloseLoading = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+  const handleConnect = useMemoizedFn(() => {
+    currentState.loading = true;
+    onConnect?.(handleCloseLoading);
+  });
+  const handleSwitchConnect = useMemoizedFn(() => {
+    currentState.loading = true;
+    onSwitchConnect?.(handleCloseLoading);
+  });
+  const handleAuthorize = useMemoizedFn(() => {
+    currentState.loading = true;
+    onAuthorize?.(handleCloseLoading);
+  });
+  const handleCancel = useMemoizedFn(() => {
+    onCancel?.();
+  });
+  if (session.loading || !session.initialized) {
+    return /*#__PURE__*/_jsx(Center, {
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    });
+  }
+  const user = userInfo ?? session?.user;
+  return /*#__PURE__*/_jsx(LandingPage, {
+    did: window.blocklet?.appPid,
+    standalone: true,
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: {
+        width: 420,
+        maxWidth: '100%'
+      },
+      children: /*#__PURE__*/_jsx(DIDConnectContainer, {
+        hideCloseButton: true,
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            p: {
+              xs: 2,
+              lg: 3,
+              xl: 4
+            },
+            pt: {
+              xs: 3,
+              xl: 4
+            },
+            bgcolor: 'background.paper'
+          },
+          children: [/*#__PURE__*/_jsx(AuthAppsInfo, {
+            requestAppInfo: requestAppInfo,
+            currentAppInfo: currentAppInfo
+          }), user ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(UserCard, {
+              user: user,
+              showDid: true,
+              cardType: CardType.Detailed,
+              infoType: InfoType.Minimal
+            }), /*#__PURE__*/_jsx(Box, {})]
+          }) : null, children, /*#__PURE__*/_jsx(Box, {
+            sx: {
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 2,
+              overflow: 'hidden',
+              my: 1
+            }
+          }), /*#__PURE__*/_jsxs(Stack, {
+            direction: "row",
+            spacing: 2,
+            children: [!hideCancel ? /*#__PURE__*/_jsx(Button, {
+              color: "inherit",
+              variant: "outlined",
+              size: "large",
+              fullWidth: true,
+              onClick: handleCancel,
+              sx: {
+                color: 'grey.500'
+              },
+              children: cancelText || t('cancel')
+            }) : null, user && !hideAuthorize ? /*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              size: "large",
+              fullWidth: true,
+              onClick: handleAuthorize,
+              disabled: currentState.loading,
+              children: [currentState.loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 20,
+                sx: {
+                  mr: 1
+                }
+              }) : null, authorizeText || t('authorize')]
+            }) : /*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              size: "large",
+              fullWidth: true,
+              disabled: currentState.loading,
+              onClick: handleConnect,
+              children: [currentState.loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 20,
+                sx: {
+                  mr: 1
+                }
+              }) : null, connectText || t('connect')]
+            })]
+          }), hideSwitchConnect || !user ? null : /*#__PURE__*/_jsx(Box, {
+            sx: {
+              textAlign: 'center'
+            },
+            children: /*#__PURE__*/_jsxs(Typography, {
+              variant: "body2",
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 1
+              },
+              children: [notThisText || t('notThis'), " ", /*#__PURE__*/_jsx(Link, {
+                underline: "hover",
+                onClick: handleSwitchConnect,
+                sx: {
+                  cursor: 'pointer'
+                },
+                children: useAnotherText || t('useAnother')
+              })]
+            })
+          })]
+        })
+      })
+    })
+  });
+}

package/lib/DIDConnect/index.d.ts

@@ -7,3 +7,5 @@ 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/lib/DIDConnect/index.js

@@ -6,4 +6,5 @@ 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 RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';
+export { default as AuthApps } from './auth-apps';

package/lib/DIDConnect/landing-page.d.ts

@@ -0,0 +1,14 @@
+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, description, actions, logo, logoSize, poweredBy, termsOfUse, standalone, }: LandingPageProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/lib/DIDConnect/landing-page.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, 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';
+export default function LandingPage({
+  did,
+  children,
+  title,
+  description,
+  actions,
+  logo,
+  logoSize = 50,
+  poweredBy,
+  termsOfUse,
+  standalone = false
+}) {
+  const blockletData = globalThis?.blocklet || globalThis?.env || {};
+  const {
+    palette
+  } = useTheme();
+  const isMd = useMediaQuery(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 = /*#__PURE__*/_jsx(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 = /*#__PURE__*/_jsx(Avatar, {
+        size: logoSize,
+        did: did,
+        src: logo,
+        variant: "rounded"
+      });
+    }
+  }
+  if (poweredBy === undefined) {
+    // eslint-disable-next-line no-param-reassign
+    poweredBy = /*#__PURE__*/_jsx(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 = /*#__PURE__*/_jsx(Box, {
+      sx: {
+        filter: 'blur(180px)',
+        display: 'flex'
+      },
+      children: /*#__PURE__*/_jsx(Avatar, {
+        size: 210,
+        did: did,
+        variant: "rounded"
+      })
+    });
+  }
+  const showChildren = Boolean(children);
+  let showInfo = !standalone;
+  if (isMd) {
+    showInfo = !showChildren;
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: '100vw',
+      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'
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        maxWidth: 1200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: [showInfo, content].filter(Boolean).length > 1 ? 'space-between' : 'center',
+        width: '100%',
+        margin: 'auto'
+      },
+      children: [showInfo ? /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1.5
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: logo
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h2",
+          sx: {
+            fontWeight: 'bold',
+            fontSize: {
+              sm: '2.25rem',
+              md: '2.75rem',
+              xl: '3.5rem'
+            }
+          },
+          children: title
+        }), description ? /*#__PURE__*/_jsx(Box, {
+          sx: {
+            mb: 2,
+            color: 'text.secondary'
+          },
+          children: description
+        }) : null, actions ? /*#__PURE__*/_jsx(Box, {
+          sx: {
+            mt: 8
+          },
+          children: actions
+        }) : null, termsOfUse ? /*#__PURE__*/_jsx(Box, {
+          sx: {
+            mt: -1,
+            color: 'grey'
+          },
+          children: termsOfUse
+        }) : null]
+      }) : null, content]
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: 'absolute',
+        zIndex: 10,
+        bottom: 10,
+        left: 10,
+        right: 10,
+        textAlign: 'center'
+      },
+      children: poweredBy
+    })]
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.57",
+  "version": "2.13.59",
   "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": "780e1e0d2465208e7f53d5ba23b5cb3f84a819ae",
+  "gitHead": "e00efa251020006bdc76353ef6c64212529ebddd",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.57",
-    "@arcblock/nft-display": "^2.13.57",
-    "@arcblock/react-hooks": "^2.13.57",
+    "@arcblock/icons": "^2.13.59",
+    "@arcblock/nft-display": "^2.13.59",
+    "@arcblock/react-hooks": "^2.13.59",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.57",
+    "@blocklet/theme": "^2.13.59",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/auth-apps/auth-apps-info.tsx

@@ -0,0 +1,75 @@
+import { Box, Typography } from '@mui/material';
+import Img from '../../Img';
+
+export type RequestAppInfo = {
+  appLogo: string;
+  appName: string;
+  appUrl: string;
+};
+
+export type CurrentAppInfo = {
+  appLogo: string;
+  appName: string;
+  appUrl: string;
+};
+
+export default function AuthApps({
+  requestAppInfo,
+  currentAppInfo,
+}: {
+  requestAppInfo: RequestAppInfo;
+  currentAppInfo: CurrentAppInfo;
+}) {
+  return (
+    <Box
+      sx={{
+        textAlign: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 2,
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        {/* FIXME: @zhanghan 增加 hover 的效果 */}
+        <Img src={currentAppInfo.appLogo} alt="Server" width={48} height={48} />
+
+        <Box
+          sx={{
+            mx: 2,
+            display: 'flex',
+            alignItems: 'center',
+            '& .dot': {
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              bgcolor: 'divider',
+              mx: 0.5,
+            },
+          }}>
+          <Box className="dot" />
+          <Box className="dot" />
+          <Box className="dot" />
+        </Box>
+
+        {/* FIXME: @zhanghan 增加 hover 的效果 */}
+        <Img src={requestAppInfo.appLogo} alt={requestAppInfo.appName} width={48} height={48} />
+      </Box>
+
+      <Typography
+        sx={{
+          mb: 1,
+          fontSize: '1.2rem',
+        }}>
+        Authorize{' '}
+        <Box component="span" sx={{ color: 'primary.main' }}>
+          {requestAppInfo.appName}
+        </Box>
+      </Typography>
+    </Box>
+  );
+}

package/src/DIDConnect/auth-apps/index.tsx

@@ -0,0 +1,223 @@
+import { Box, Button, CircularProgress, Link, Stack, Typography } from '@mui/material';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
+
+import DIDConnectContainer from '../did-connect-container';
+import AuthAppsInfo, { type RequestAppInfo, type CurrentAppInfo } from './auth-apps-info';
+import Center from '../../Center';
+import LandingPage from '../landing-page';
+import { translate } from '../../Locale/util';
+import { useLocaleContext } from '../../Locale/context';
+import UserCard from '../../UserCard';
+import { CardType, InfoType } from '../../UserCard/types';
+
+const translations = {
+  en: {
+    notThis: 'Not this?',
+    useAnother: 'Use another',
+    authorize: 'Authorize',
+    connect: 'Connect',
+    cancel: 'Cancel',
+  },
+  zh: {
+    notThis: '不是这个？',
+    useAnother: '使用其他',
+    authorize: '授权',
+    connect: 'Connect',
+    cancel: '取消',
+  },
+};
+
+/**
+ * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
+ */
+export default function AuthApps({
+  session,
+  requestAppInfo,
+  currentAppInfo,
+  children,
+  userInfo,
+
+  hideSwitchConnect = false,
+  hideAuthorize = false,
+  hideCancel = false,
+
+  notThisText,
+  authorizeText,
+  connectText,
+  cancelText,
+  useAnotherText,
+
+  onConnect = noop,
+  onAuthorize = noop,
+  onSwitchConnect = noop,
+  onCancel = noop,
+}: {
+  session: any;
+  requestAppInfo: RequestAppInfo;
+  currentAppInfo: CurrentAppInfo;
+  children?: React.ReactNode;
+  userInfo?: UserPublicInfo;
+
+  hideSwitchConnect?: boolean;
+  hideAuthorize?: boolean;
+  hideCancel?: boolean;
+
+  notThisText?: string;
+  authorizeText?: string;
+  connectText?: string;
+  cancelText?: string;
+  useAnotherText?: string;
+
+  onConnect?: (done: () => void) => void;
+  onAuthorize?: (done: () => void) => void;
+  onSwitchConnect?: (done: () => void) => void;
+  onCancel?: () => void;
+}) {
+  const currentState = useReactive({
+    loading: false,
+  });
+  const { locale = 'en' } = useLocaleContext() || {};
+
+  const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+
+  const handleCloseLoading = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+  const handleConnect = useMemoizedFn(() => {
+    currentState.loading = true;
+    onConnect?.(handleCloseLoading);
+  });
+  const handleSwitchConnect = useMemoizedFn(() => {
+    currentState.loading = true;
+    onSwitchConnect?.(handleCloseLoading);
+  });
+  const handleAuthorize = useMemoizedFn(() => {
+    currentState.loading = true;
+    onAuthorize?.(handleCloseLoading);
+  });
+  const handleCancel = useMemoizedFn(() => {
+    onCancel?.();
+  });
+
+  if (session.loading || !session.initialized) {
+    return (
+      <Center>
+        <CircularProgress />
+      </Center>
+    );
+  }
+
+  const user = userInfo ?? session?.user;
+
+  return (
+    <LandingPage did={window.blocklet?.appPid} standalone>
+      <Box
+        sx={{
+          width: 420,
+          maxWidth: '100%',
+        }}>
+        <DIDConnectContainer hideCloseButton>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              p: {
+                xs: 2,
+                lg: 3,
+                xl: 4,
+              },
+              pt: {
+                xs: 3,
+                xl: 4,
+              },
+              bgcolor: 'background.paper',
+            }}>
+            <AuthAppsInfo requestAppInfo={requestAppInfo} currentAppInfo={currentAppInfo} />
+
+            {user ? (
+              <>
+                <UserCard user={user} showDid cardType={CardType.Detailed} infoType={InfoType.Minimal} />
+                <Box />
+              </>
+            ) : null}
+
+            {children}
+
+            <Box
+              sx={{
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 2,
+                overflow: 'hidden',
+                my: 1,
+              }}
+            />
+
+            <Stack direction="row" spacing={2}>
+              {!hideCancel ? (
+                <Button
+                  color="inherit"
+                  variant="outlined"
+                  size="large"
+                  fullWidth
+                  onClick={handleCancel}
+                  sx={{
+                    color: 'grey.500',
+                  }}>
+                  {cancelText || t('cancel')}
+                </Button>
+              ) : null}
+              {user && !hideAuthorize ? (
+                <Button
+                  variant="contained"
+                  size="large"
+                  fullWidth
+                  onClick={handleAuthorize}
+                  disabled={currentState.loading}>
+                  {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
+                  {authorizeText || t('authorize')}
+                </Button>
+              ) : (
+                <Button
+                  variant="contained"
+                  size="large"
+                  fullWidth
+                  disabled={currentState.loading}
+                  onClick={handleConnect}>
+                  {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
+                  {connectText || t('connect')}
+                </Button>
+              )}
+            </Stack>
+
+            {hideSwitchConnect || !user ? null : (
+              <Box sx={{ textAlign: 'center' }}>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 1,
+                  }}>
+                  {notThisText || t('notThis')} {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                  <Link
+                    underline="hover"
+                    onClick={handleSwitchConnect}
+                    sx={{
+                      cursor: 'pointer',
+                    }}>
+                    {useAnotherText || t('useAnother')}
+                  </Link>
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        </DIDConnectContainer>
+      </Box>
+    </LandingPage>
+  );
+}

package/src/DIDConnect/index.ts

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

@@ -0,0 +1,218 @@
+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,
+  description,
+  actions,
+  logo,
+  logoSize = 50,
+  poweredBy,
+  termsOfUse,
+  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: '100vw',
+        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>
+  );
+}