@arcblock/ux 2.13.27 → 2.13.29

package/lib/SharedBridge/index.js

@@ -1,28 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import React, { memo, useEffect, useId, useRef } from 'react';
+import { forwardRef, memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
 import { withQuery } from 'ufo';
 import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
 import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
-import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { DIDConnectContainer } from '../DIDConnect';
-const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
+const SharedBridge = /*#__PURE__*/forwardRef(({
   src,
   onClick,
-  onLoad,
+  onLoad = noop,
   sx,
-  iframeRef,
   locale = 'en',
   ...rest
-}) {
-  const _iframeRef = useRef(null);
+}, ref) => {
+  const targetIframeRef = useRef(null);
   const refId = useId();
   const dataId = `shared-bridge_${refId}`;
   const currentState = useReactive({
     hasInited: undefined,
     open: false,
     hasStorageAccess: false,
+    containerEl: null,
     get origin() {
       try {
         return new URL(src).origin;
@@ -38,7 +37,6 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
       }
     }
   });
-  const targetIframeRef = iframeRef ?? _iframeRef;
   useEffect(() => {
     async function handleMessage(event) {
       const {
@@ -74,6 +72,7 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
       currentState.hasStorageAccess = value;
       currentState.hasInited = true;
     });
+    // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
     setTimeout(() => {
       if (currentState.hasInited === undefined) {
         currentState.hasInited = false;
@@ -81,43 +80,30 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
     }, 1000);
     onLoad();
   });
-  if (currentState.hasInited === false) {
-    return null;
-  }
-  if (currentState.hasStorageAccess) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DIDConnectContainer, {
-      popup: true,
-      hideCloseButton: true,
-      open: currentState.open,
-      children: /*#__PURE__*/_jsx(NeedStorageAccessApiDialog, {
-        locale: locale,
-        origin: currentState.origin,
-        host: currentState.host
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      ...rest,
-      component: "iframe",
-      ref: targetIframeRef,
-      onLoad: handleLoad,
-      title: "shared-bridge",
-      "data-id": dataId,
-      src: withQuery(src, {
-        id: dataId
-      }),
-      sx: mergeSx({
-        border: 0,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        cursor: 'pointer',
-        opacity: 0
-      }, sx)
-    })]
+  useImperativeHandle(ref, () => ({
+    callIframe(action) {
+      return callIframe(targetIframeRef.current, action);
+    }
+  }));
+  return /*#__PURE__*/_jsx(Box, {
+    ...rest,
+    component: "iframe",
+    ref: targetIframeRef,
+    onLoad: handleLoad,
+    "data-id": dataId,
+    src: withQuery(src, {
+      id: dataId
+    }),
+    sx: mergeSx({
+      border: 0,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      backgroundColor: 'transparent'
+    }, sx)
   });
 });
-export default SharedBridge;
+export default /*#__PURE__*/memo(SharedBridge);

package/lib/Tabs/index.js

@@ -41,7 +41,7 @@ function CardTabs({
       },
       '.MuiTabs-flexContainer': {
         borderRadius: '100vw',
-        backgroundColor: 'grey.200',
+        backgroundColor: 'grey.100',
         padding: 0.5,
         display: 'inline-flex',
         columnGap: 0.25,
@@ -60,7 +60,7 @@ function CardTabs({
         textTransform: 'capitalize',
         transition: 'background-color 0.2s ease',
         '&.Mui-selected, &:hover': {
-          backgroundColor: 'white',
+          backgroundColor: 'action.selected',
           borderColor: 'grey.100',
           color: 'grey.A700'
         }

package/lib/Theme/theme-provider.d.ts

@@ -1,15 +1,18 @@
 import PropTypes from 'prop-types';
 import { PaletteMode } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { Theme, ThemeOptions } from '@mui/material/styles';
 /** 颜色模式上下文类型 */
 export interface ColorSchemeContextType {
     mode: PaletteMode;
     toggleMode: () => void;
+    changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextType>;
 export declare function useColorScheme(): ColorSchemeContextType;
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
+    mode: PaletteMode;
+}) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 interface BaseThemeProviderProps {
     children?: React.ReactNode;

package/lib/Theme/theme-provider.js

@@ -7,7 +7,7 @@ import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig } from './theme';
+import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
 /** 颜色模式上下文类型 */
@@ -83,7 +83,7 @@ function DarkSchemeStyles({
   }
   return null;
 }
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -110,7 +110,7 @@ function BaseThemeProvider({
     })
   );
 }
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -119,14 +119,26 @@ function ColorSchemeProvider({
   ...rest
 }) {
   const [mode, setMode] = useState(() => resolveMode(prefer));
+  const parentTheme = useTheme();
   const _themeInput = useMemo(() => {
     let result = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = {
-          ...themeInput(getThemeConfig())
-        };
+        const baseTheme = createBaseTheme();
+        if (isUxTheme(parentTheme)) {
+          result = {
+            ...themeInput(parentTheme, {
+              mode
+            })
+          };
+        } else {
+          result = {
+            ...themeInput(baseTheme, {
+              mode
+            })
+          };
+        }
       } else {
         result = {
           ...themeInput
@@ -136,7 +148,7 @@ function ColorSchemeProvider({
     set(result, 'palette.mode', mode);
     set(result, 'mode', mode);
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
   const theme = useMemo(() => {
     return createTheme({
       ..._themeInput,
@@ -150,11 +162,18 @@ function ColorSchemeProvider({
     setMode(newMode);
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
+  const changeMode = useCallback(newMode => {
+    if (mode !== newMode) {
+      setMode(newMode);
+      localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+    }
+  }, [mode, setMode]);
   const colorSchemeValue = useMemo(() => ({
     mode,
     toggleMode,
+    changeMode,
     prefer
-  }), [mode, prefer, toggleMode]);
+  }), [mode, prefer, toggleMode, changeMode]);
   useEffect(() => {
     if (prefer) {
       setMode(resolveMode(prefer));

package/lib/Theme/theme.d.ts

@@ -9,6 +9,8 @@ import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 /** 是否是 MUI Theme 对象 */
 export declare function isTheme(obj: any): obj is Theme;
+/** 是否是 UX Theme 对象 */
+export declare function isUxTheme(obj: any): obj is Theme;
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
@@ -19,10 +21,10 @@ export declare function getDefaultThemePrefer(meta?: {
     };
 }): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export declare function lazyThemeConfig(mode: PaletteMode): () => Partial<Theme>;
-export declare const create: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
-export declare const createTheme: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
+export declare function lazyCreateDefaultTheme(mode: PaletteMode): () => Theme;
+export declare const create: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -20,6 +20,11 @@ export function isTheme(obj) {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj) {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -94,13 +99,13 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode) {
-  let config = null;
+export function lazyCreateDefaultTheme(mode) {
+  let theme = null;
   return () => {
-    if (config) return config;
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
-    return config;
+    if (theme) return theme;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
@@ -121,7 +126,7 @@ const normalizeUserThemeOptions = ({
   };
   return result;
 };
-const defaultUserThemeOptions = {
+const defaultUxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -151,8 +156,8 @@ const defaultUserThemeOptions = {
 // https://material-ui.com/customization/default-theme/
 export const create = (...args) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)), normalizeUserThemeOptions(defaultUxThemeOptions));
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
@@ -172,6 +177,7 @@ export const create = (...args) => {
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);

package/package.json

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

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

@@ -37,6 +37,7 @@ export default function DIDConnectContainer({
   appPid,
   slotProps,
   onClose = noop,
+  keepMounted = false,
 }: {
   // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
   popup?: boolean;
@@ -59,6 +60,7 @@ export default function DIDConnectContainer({
       sx?: SxProps;
     };
   };
+  keepMounted?: boolean;
 }) {
   const color = useCreation(() => {
     const did = appPid || window.blocklet.appPid;
@@ -96,7 +98,7 @@ export default function DIDConnectContainer({
     onClose();
   };
 
-  const showModal = debouncedOpen || open;
+  const showModal = debouncedOpen || open || keepMounted;
 
   const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
 
@@ -286,6 +288,7 @@ export default function DIDConnectContainer({
       slots={{
         backdrop: BackdropWrap,
       }}
+      keepMounted={keepMounted}
       className="did-connect__container-dialog"
       onClose={handleOnClose}
       PaperProps={{

package/src/DIDConnect/index.ts

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

package/src/DIDConnect/request-storage-access-api-dialog.tsx

@@ -0,0 +1,280 @@
+import { Box, Button, Typography, Chip, List, ListItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import externalLinkIcon from '@iconify-icons/tabler/external-link';
+import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
+import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
+import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import noop from 'lodash/noop';
+
+import { Locale } from '../type';
+import { translate } from '../Locale/util';
+import DIDConnectContainer from './did-connect-container';
+import CloseButton from '../CloseButton';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+
+type StorageAccessState = 'prompt' | 'granted' | 'denied';
+
+const translations: Record<
+  Locale,
+  {
+    allow: string;
+    dataUsage: string;
+    title: string;
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => React.ReactNode;
+    reason: ({ site }: { site: React.ReactNode }) => React.ReactNode;
+    afterAllow: {
+      title: string;
+      list1: string;
+      list2: string;
+    };
+  }
+> = {
+  en: {
+    allow: 'Allow',
+    dataUsage:
+      'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
+    title: 'Authorization Request',
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => {
+      return <>You only need to click the {allowButton} button below, and you will not see this request again.</>;
+    },
+    reason: ({ site }) => {
+      return <>For a better login experience, we need to apply for the storage permission of the {site} site.</>;
+    },
+    afterAllow: {
+      title: 'After authorization, you will enjoy:',
+      list1: 'More convenient login experience',
+      list2: 'Faster access speed',
+    },
+  },
+  zh: {
+    allow: '允许',
+    dataUsage: '您的数据仅用于身份认证，不会被收集或用于其他用途。',
+    title: '授权请求',
+    clickAllow: ({ allowButton }) => {
+      return <>您只需要点击下方的 {allowButton} 按钮，后续将不会再看到这个请求。</>;
+    },
+    reason: ({ site }) => {
+      return <>为了让您获得更好的登录体验，我们需要申请 {site} 站点存储权限。</>;
+    },
+    afterAllow: {
+      title: '授权后，您将享受：',
+      list1: '更便捷的登录体验',
+      list2: '更快的访问速度',
+    },
+  },
+};
+
+const RequestStorageAccessApiDialog = forwardRef(
+  (
+    {
+      locale = 'en',
+      src,
+      storageAccessState,
+      onHandle = noop,
+    }: {
+      locale?: Locale;
+      src: string;
+      storageAccessState: StorageAccessState;
+      onHandle: (data: { value: boolean; error?: Error }) => void;
+    },
+    ref
+  ) => {
+    const sharedBridgeRef = useRef<{ callIframe: (method: string) => Promise<any> }>(null);
+    const currentState = useReactive({
+      callback: noop,
+      open: false,
+      get origin() {
+        try {
+          return new URL(src).origin;
+        } catch (error) {
+          return src;
+        }
+      },
+      get host() {
+        try {
+          return new URL(src).host;
+        } catch (error) {
+          return src;
+        }
+      },
+    });
+    const t = useMemoizedFn((key, data = {}) => {
+      return translate(translations, key, locale, 'en', data);
+    });
+
+    const reset = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback = noop;
+    });
+
+    const open = useMemoizedFn(() => {
+      currentState.open = true;
+    });
+    const close = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+
+    const _requestStorageAccess = useMemoizedFn(
+      async (callback: (result: boolean, origin?: 'broswer' | 'system') => void) => {
+        const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
+        if (result.value) {
+          callback(true, 'broswer');
+        } else if (storageAccessState === undefined) {
+          // 用户未在当前网页交互过，此时必然需要进行一次弹窗
+          callback(false, 'system');
+        } else if (storageAccessState === 'denied') {
+          // 用户已经明确拒绝过跨站授权，直接弹窗
+          callback(false);
+        } else {
+          // NOTICE: 暂时保留这部分逻辑，后续可能会用上
+          // else if (
+          //   result.error?.name === 'NotAllowedError' &&
+          //   result.error?.message === 'requestStorageAccess not allowed'
+          // ) {
+          //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
+          //   currentState.open = true;
+          //   currentState.callback = callback;
+          // }
+          currentState.open = true;
+          currentState.callback = callback;
+        }
+      }
+    );
+    const requestStorageAccess = useMemoizedFn(() => {
+      return new Promise((resolve) => {
+        _requestStorageAccess((result, origin) => {
+          reset();
+          resolve({ value: result, origin });
+        });
+      });
+    });
+
+    const handleAllow = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+    const handleClose = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback(false, 'system');
+    });
+
+    useImperativeHandle(ref, () => ({
+      open,
+      close,
+      requestStorageAccess,
+    }));
+
+    return (
+      <DIDConnectContainer popup open={currentState.open} onClose={handleClose} keepMounted>
+        <Box
+          sx={{
+            backgroundColor: 'background.default',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            position: 'relative',
+            maxWidth: '100%',
+            transition: 'width 0.2s ease-in-out',
+            margin: 'auto',
+            p: 3,
+            gap: 2,
+          }}>
+          <CloseButton
+            onClose={handleClose}
+            sx={{
+              position: 'absolute',
+              right: 14,
+              top: 14,
+            }}
+          />
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+              fontFamily: 'Lexend',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}>
+            <Box component={Icon} icon={lockOutlineIcon} fontSize={28} sx={{ color: 'warning.main' }} />
+            {t('title')}
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {/* 不需要随意更改以下内容的格式化，否则会影响到 UI 的展示 */}
+            <Typography>
+              {t('reason', {
+                site: (
+                  <Chip
+                    clickable
+                    component="a"
+                    href={currentState.origin}
+                    label={currentState.host}
+                    size="small"
+                    deleteIcon={<Icon icon={externalLinkIcon} />}
+                    onDelete={() => {}}
+                    target="_blank"
+                  />
+                ),
+              })}
+            </Typography>
+            <Typography component="div">
+              {t('clickAllow', {
+                allowButton: <Chip label={t('allow')} size="small" color="success" />,
+              })}
+            </Typography>
+            <Box sx={{ mt: 2 }}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                <Box component={Icon} icon={checkCircleIcon} fontSize={24} sx={{ color: 'success.main' }} />
+                {t('afterAllow.title')}
+              </Typography>
+              <List dense sx={{ py: 0, pl: 2 }}>
+                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+                  {t('afterAllow.list1')}
+                </ListItem>
+                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+                  {t('afterAllow.list2')}
+                </ListItem>
+              </List>
+            </Box>
+
+            <Typography component="div" variant="body2" color="grey.700">
+              {t('dataUsage')}
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={handleAllow}
+                sx={{ minWidth: 100, letterSpacing: 1 }}>
+                {t('allow')}
+              </Button>
+              <SharedBridge
+                ref={sharedBridgeRef}
+                onClick={({ value, visitorId }) => {
+                  if (visitorId) setVisitorId(visitorId);
+
+                  currentState.callback(value, 'broswer');
+                }}
+                locale={locale}
+                src={src}
+                sx={{
+                  zIndex: 1,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </DIDConnectContainer>
+    );
+  }
+);
+
+export default memo(RequestStorageAccessApiDialog);