@arcblock/ux 2.13.27 → 2.13.29

package/lib/SharedBridge/need-storage-access-api-dialog.d.ts

@@ -1,6 +0,0 @@
-import { Locale } from '../type';
-export default function NeedStorageAccessApiDialog({ locale, origin, host, }: {
-    locale?: Locale;
-    origin: string;
-    host: string;
-}): import("react/jsx-runtime").JSX.Element;

package/lib/SharedBridge/need-storage-access-api-dialog.js

@@ -1,191 +0,0 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, 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 } from 'ahooks';
-import { translate } from '../Locale/util';
-const translations = {
-  en: {
-    allow: 'Allow',
-    dataUsage: 'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
-    title: 'Cross-site authorization request',
-    clickAllow: ({
-      allowButton
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["You only need to click the ", allowButton, " button above, and you will not see this request again."]
-      });
-    },
-    reason: ({
-      site
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["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 /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["\u60A8\u53EA\u9700\u8981\u70B9\u51FB\u5C4F\u5E55\u4E0A\u65B9\u7684 ", allowButton, " \u6309\u94AE\uFF0C\u540E\u7EED\u5C06\u4E0D\u4F1A\u518D\u770B\u5230\u8FD9\u4E2A\u8BF7\u6C42\u3002"]
-      });
-    },
-    reason: ({
-      site
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["\u4E3A\u4E86\u8BA9\u60A8\u83B7\u5F97\u66F4\u597D\u7684\u767B\u5F55\u4F53\u9A8C\uFF0C\u6211\u4EEC\u9700\u8981\u7533\u8BF7 ", site, " \u7AD9\u70B9\u5B58\u50A8\u6743\u9650\u3002"]
-      });
-    },
-    afterAllow: {
-      title: '授权后，您将享受：',
-      list1: '更便捷的登录体验',
-      list2: '更快的访问速度'
-    }
-  }
-};
-export default function NeedStorageAccessApiDialog({
-  locale = 'en',
-  origin,
-  host
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  return /*#__PURE__*/_jsxs(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
-    },
-    children: [/*#__PURE__*/_jsxs(Typography, {
-      component: "h1",
-      variant: "h4",
-      sx: {
-        fontWeight: 700,
-        fontFamily: 'Lexend',
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1
-      },
-      children: [/*#__PURE__*/_jsx(Box, {
-        component: Icon,
-        icon: lockOutlineIcon,
-        fontSize: 28,
-        sx: {
-          color: 'warning.main'
-        }
-      }), t('title')]
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        children: t('reason', {
-          site: /*#__PURE__*/_jsx(Chip, {
-            clickable: true,
-            component: "a",
-            href: origin,
-            label: host,
-            size: "small",
-            deleteIcon: /*#__PURE__*/_jsx(Icon, {
-              icon: externalLinkIcon
-            }),
-            onDelete: () => {},
-            target: "_blank"
-          })
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t('clickAllow', {
-          allowButton: /*#__PURE__*/_jsx(Chip, {
-            label: t('allow'),
-            size: "small",
-            color: "success"
-          })
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          mt: 2
-        },
-        children: [/*#__PURE__*/_jsxs(Typography, {
-          sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            mb: 0.5
-          },
-          children: [/*#__PURE__*/_jsx(Box, {
-            component: Icon,
-            icon: checkCircleIcon,
-            fontSize: 24,
-            sx: {
-              color: 'success.main'
-            }
-          }), t('afterAllow.title')]
-        }), /*#__PURE__*/_jsxs(List, {
-          dense: true,
-          sx: {
-            py: 0,
-            pl: 2
-          },
-          children: [/*#__PURE__*/_jsxs(ListItem, {
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.8
-            },
-            children: [/*#__PURE__*/_jsx(Box, {
-              component: Icon,
-              icon: rocketLaunchRoundedIcon,
-              fontSize: 20,
-              sx: {
-                color: 'success.main'
-              }
-            }), t('afterAllow.list1')]
-          }), /*#__PURE__*/_jsxs(ListItem, {
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.8
-            },
-            children: [/*#__PURE__*/_jsx(Box, {
-              component: Icon,
-              icon: rocketLaunchRoundedIcon,
-              fontSize: 20,
-              sx: {
-                color: 'success.main'
-              }
-            }), t('afterAllow.list2')]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Typography, {
-        component: "div",
-        variant: "body2",
-        color: "grey.700",
-        children: t('dataUsage')
-      })]
-    })]
-  });
-}

package/src/LoginButton/index.tsx

@@ -1,73 +0,0 @@
-import { Box } from '@mui/material';
-import { joinURL } from 'ufo';
-import { useRef, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-
-import SharedBridge from '../SharedBridge';
-import { setVisitorId } from '../Util';
-import { getFederatedEnabled, getMaster } from '../Util/federated';
-import { callIframe } from '../Util/iframe';
-import { Locale } from '../type';
-
-type LoginButtonProps = {
-  onClick: (options?: { openMode?: 'popup' | 'window' }) => void;
-  render: (options: { onClick: () => void }) => React.ReactNode;
-  locale?: Locale;
-};
-
-export default function LoginButton({ onClick, render, locale }: LoginButtonProps) {
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const sharedBridgeRef = useRef<HTMLIFrameElement>(null);
-  const [hasStorageAccess, setHasStorageAccess] = useState(false);
-  const browser = useBrowser();
-
-  const handleClick = useMemoizedFn(() => {
-    if (hasStorageAccess) {
-      onClick({ openMode: 'popup' });
-    } else {
-      onClick();
-    }
-  });
-  const handleLoad = useMemoizedFn(async () => {
-    const { value: visitorId } = await callIframe(sharedBridgeRef.current as HTMLIFrameElement, 'getVisitorId');
-    if (visitorId) {
-      setHasStorageAccess(true);
-      setVisitorId(visitorId);
-    }
-  });
-  const handleClickBridge = useMemoizedFn(({ value, visitorId }) => {
-    if (visitorId) {
-      setVisitorId(visitorId);
-    }
-    if (value) {
-      onClick({ openMode: 'popup' });
-    } else {
-      onClick();
-    }
-  });
-
-  if (browser.arcSphere || browser.wallet) {
-    return render({ onClick });
-  }
-
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-      }}>
-      {render({ onClick: handleClick })}
-      {masterSite?.appUrl && federatedEnabled ? (
-        <SharedBridge
-          locale={locale}
-          iframeRef={sharedBridgeRef}
-          onLoad={handleLoad}
-          onClick={handleClickBridge}
-          src={joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')}
-        />
-      ) : null}
-    </Box>
-  );
-}

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

@@ -1,149 +0,0 @@
-import { Box, 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 } from 'ahooks';
-
-import { Locale } from '../type';
-import { translate } from '../Locale/util';
-import { DIDConnectFooter } from '../DIDConnect';
-
-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: 'Cross-site authorization request',
-    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => {
-      return <>You only need to click the {allowButton} button above, 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: '更快的访问速度',
-    },
-  },
-};
-
-export default function NeedStorageAccessApiDialog({
-  locale = 'en',
-  origin,
-  host,
-}: {
-  locale?: Locale;
-  origin: string;
-  host: string;
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  return (
-    <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,
-      }}>
-      <Typography
-        component="h1"
-        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={origin}
-                label={host}
-                size="small"
-                deleteIcon={<Icon icon={externalLinkIcon} />}
-                onDelete={() => {}}
-                target="_blank"
-              />
-            ),
-          })}
-        </Typography>
-        <Typography>
-          {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>
-  );
-}