@blocklet/ui-react 2.11.44 → 2.11.46

package/lib/common/domain-warning.d.ts

@@ -0,0 +1,17 @@
+declare function DomainWarning({ locale, session }: {
+    locale: any;
+    session: any;
+}): import("react").JSX.Element | null;
+declare namespace DomainWarning {
+    namespace propTypes {
+        let locale: any;
+        let session: any;
+    }
+    namespace defaultProps {
+        let locale_1: string;
+        export { locale_1 as locale };
+        let session_1: {};
+        export { session_1 as session };
+    }
+}
+export default DomainWarning;

package/lib/common/domain-warning.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import { useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { joinURL } from "ufo";
+import useMobile from "../hooks/use-mobile.js";
+const isAdmin = ["admin", "owner"];
+const isIpEcho = (hostname) => {
+  return hostname.endsWith(".ip.abtnet.io");
+};
+const isDidDomain = (hostname) => {
+  return hostname.endsWith(".did.abtnet.io");
+};
+const translations = {
+  en: {
+    guest: {
+      title: "Notice: You are using a temporary domain",
+      description: "You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to bind a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure."
+    },
+    owner: {
+      title: "Enhance Website Security",
+      description: "Dear administrator, we recommend binding your custom domain soon, which will:",
+      benefits1: "Automatically obtain HTTPS certificates to ensure secure data transmission",
+      benefits2: "Create an exclusive brand image and increase website credibility",
+      benefits3: "Get a shorter, more memorable access address",
+      benefits4: "Provide visitors with a more professional experience",
+      benefits5: "Domain binding takes just minutes to complete, taking your website to the next level!"
+    },
+    skip: "Remind Me Later",
+    bindDomain: "Bind Domain"
+  },
+  zh: {
+    guest: {
+      title: "\u6E29\u99A8\u63D0\u793A\uFF1A\u5F53\u524D\u4F7F\u7528\u7684\u662F\u4E34\u65F6\u57DF\u540D",
+      description: "\u60A8\u6B63\u5728\u901A\u8FC7\u4E34\u65F6\u57DF\u540D\u8BBF\u95EE\u672C\u7AD9\u70B9\u3002\u4E3A\u4E86\u83B7\u5F97\u66F4\u597D\u7684\u8BBF\u95EE\u4F53\u9A8C\uFF0C\u8BF7\u8054\u7CFB\u7AD9\u70B9\u7BA1\u7406\u5458\u7ED1\u5B9A\u81EA\u5B9A\u4E49\u57DF\u540D\u3002\u4F7F\u7528\u81EA\u5B9A\u4E49\u57DF\u540D\u4E0D\u4EC5\u8BBF\u95EE\u66F4\u4FBF\u6377\uFF0C\u8FD8\u80FD\u786E\u4FDD\u60A8\u7684\u8BBF\u95EE\u66F4\u52A0\u5B89\u5168\u3002"
+    },
+    owner: {
+      title: "\u63D0\u5347\u7F51\u7AD9\u5B89\u5168\u6027\u4E0E\u4E13\u4E1A\u5EA6",
+      description: "\u5C0A\u656C\u7684\u7BA1\u7406\u5458\uFF0C\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u7ED1\u5B9A\u81EA\u5B9A\u4E49\u57DF\u540D\uFF0C\u8FD9\u6837\u53EF\u4EE5\uFF1A",
+      benefits1: "\u81EA\u52A8\u83B7\u53D6 HTTPS \u8BC1\u4E66\uFF0C\u786E\u4FDD\u6570\u636E\u4F20\u8F93\u5B89\u5168",
+      benefits2: "\u6253\u9020\u4E13\u5C5E\u54C1\u724C\u5F62\u8C61\uFF0C\u63D0\u5347\u7F51\u7AD9\u53EF\u4FE1\u5EA6",
+      benefits3: "\u83B7\u5F97\u66F4\u7B80\u77ED\u3001\u6613\u8BB0\u7684\u8BBF\u95EE\u5730\u5740",
+      benefits4: "\u4E3A\u8BBF\u5BA2\u63D0\u4F9B\u66F4\u4E13\u4E1A\u7684\u8BBF\u95EE\u4F53\u9A8C",
+      benefits5: "\u53EA\u9700\u51E0\u5206\u949F\u5373\u53EF\u5B8C\u6210\u57DF\u540D\u7ED1\u5B9A\uFF0C\u8BA9\u60A8\u7684\u7F51\u7AD9\u66F4\u4E0A\u4E00\u5C42\u697C\uFF01"
+    },
+    skip: "\u7A0D\u540E\u63D0\u9192",
+    bindDomain: "\u7ED1\u5B9A\u57DF\u540D"
+  }
+};
+const ONE_MONTH = 1e3 * 60 * 60 * 24 * 30;
+const DASHBOARD_DOMAIN = ".well-known/service/admin/domains";
+export default function DomainWarning({ locale, session }) {
+  const user = session?.user;
+  const isMobile = useMobile();
+  const [open, setOpen] = useState(() => {
+    const skip = window.localStorage.getItem("domain-warning-skip");
+    if (!skip)
+      return true;
+    const now = +/* @__PURE__ */ new Date();
+    const skipTime = +new Date(skip);
+    return now - skipTime > ONE_MONTH;
+  });
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const host = useMemo(() => {
+    try {
+      const { hostname } = new URL(window.location.href);
+      return hostname;
+    } catch (error) {
+      return "";
+    }
+  }, []);
+  const benefits = useMemo(
+    () => [
+      t("owner.benefits1"),
+      t("owner.benefits2"),
+      t("owner.benefits3"),
+      t("owner.benefits4"),
+      t("owner.benefits5")
+    ],
+    [t]
+  );
+  const handleSkip = useCallback(() => {
+    window.localStorage.setItem("domain-warning-skip", (/* @__PURE__ */ new Date()).toISOString());
+    setOpen(false);
+  }, []);
+  const handleDomainConfig = useCallback(() => {
+    const adminUrl = joinURL(window.location.origin, DASHBOARD_DOMAIN);
+    if (adminUrl.startsWith("http")) {
+      window.open(adminUrl, "_blank");
+    }
+    setOpen(false);
+  }, []);
+  const isOwner = user?.role && isAdmin.includes(user.role);
+  if (window.location.href.includes(DASHBOARD_DOMAIN)) {
+    return null;
+  }
+  if (isMobile) {
+    return null;
+  }
+  if (!isIpEcho(host) && !isDidDomain(host)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open, disableEscapeKeyDown: true, fullWidth: true, maxWidth: "sm", onClose: () => setOpen(false), children: [
+    /* @__PURE__ */ jsxs(DialogContent, { sx: { padding: "20px !important" }, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            fontSize: "20px",
+            fontWeight: "500"
+          },
+          children: isOwner ? t("owner.title") : t("guest.title")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            marginTop: "20px",
+            fontSize: "14px",
+            color: "#9397A1"
+          },
+          children: isOwner ? t("owner.description") : t("guest.description")
+        }
+      ),
+      isOwner && /* @__PURE__ */ jsx(Box, { component: "ul", children: benefits.map((benefit) => /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "li",
+          sx: {
+            fontSize: "14px",
+            color: "#9397A1"
+          },
+          children: benefit
+        },
+        benefit
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogActions, { sx: { px: "12px !important" }, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: handleSkip, children: t("skip") }),
+      isOwner && /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleDomainConfig, children: t("bindDomain") })
+    ] })
+  ] });
+}
+DomainWarning.propTypes = {
+  locale: PropTypes.string,
+  session: PropTypes.object
+};
+DomainWarning.defaultProps = {
+  locale: "en",
+  session: {}
+};

package/lib/common/header-addons.d.ts

@@ -1,6 +1,7 @@
-declare function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }: {
+declare function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }: {
     formattedBlocklet: any;
     addons: any;
+    showDomainWarning: any;
     sessionManagerProps: any;
 }): import("react").FunctionComponentElement<{
     children?: import("react").ReactNode | undefined;
@@ -10,6 +11,7 @@ declare namespace HeaderAddons {
         export let formattedBlocklet: any;
         export let addons: any;
         export { SessionManagerProps as sessionManagerProps };
+        export let showDomainWarning: any;
     }
     namespace defaultProps {
         let addons_1: null;
@@ -17,6 +19,8 @@ declare namespace HeaderAddons {
         export namespace sessionManagerProps {
             let showRole: boolean;
         }
+        let showDomainWarning_1: boolean;
+        export { showDomainWarning_1 as showDomainWarning };
     }
 }
 export default HeaderAddons;

package/lib/common/header-addons.js

@@ -11,11 +11,12 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { SessionManagerProps } from "../types.js";
 import { getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
 import NotificationAddon from "./notification-addon.js";
+import DomainWarning from "./domain-warning.js";
 const hasNotification = () => {
   const navigations = window?.blocklet?.navigation ?? [];
   return !!navigations.find((n) => n.id === "/userCenter/notification");
 };
-export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
+export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
@@ -68,12 +69,12 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
     return addonsArray;
   };
   const renderedAddons = renderAddons();
-  const addonList = createElement(
-    Fragment,
-    null,
-    ...Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]
-  );
-  return addonList;
+  const nodes = Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons];
+  const mergedNodes = [
+    showDomainWarning ? /* @__PURE__ */ jsx(DomainWarning, { session: sessionCtx?.session, locale }) : null,
+    ...nodes
+  ].filter(Boolean);
+  return createElement(Fragment, null, ...mergedNodes);
 }
 HeaderAddons.propTypes = {
   formattedBlocklet: PropTypes.object.isRequired,
@@ -81,11 +82,13 @@ HeaderAddons.propTypes = {
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps
+  sessionManagerProps: SessionManagerProps,
+  showDomainWarning: PropTypes.bool
 };
 HeaderAddons.defaultProps = {
   addons: null,
   sessionManagerProps: {
     showRole: true
-  }
+  },
+  showDomainWarning: true
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.44",
+  "version": "2.11.46",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.38",
-    "@arcblock/bridge": "^2.11.44",
-    "@arcblock/react-hooks": "^2.11.44",
+    "@arcblock/bridge": "^2.11.46",
+    "@arcblock/react-hooks": "^2.11.46",
     "@arcblock/ws": "^1.19.9",
     "@blocklet/did-space-react": "^1.0.16",
     "@iconify-icons/logos": "^1.2.36",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ac208031ad00b2175432f4af61978bfcf2b48d88"
+  "gitHead": "289036b9e8092ce23314bece14c61c6ae8a7c757"
 }

package/src/common/domain-warning.jsx

@@ -0,0 +1,190 @@
+import { useMemo, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { joinURL } from 'ufo';
+
+import useMobile from '../hooks/use-mobile';
+
+const isAdmin = ['admin', 'owner'];
+
+const isIpEcho = (hostname) => {
+  return hostname.endsWith('.ip.abtnet.io');
+};
+
+const isDidDomain = (hostname) => {
+  return hostname.endsWith('.did.abtnet.io');
+};
+
+const translations = {
+  en: {
+    guest: {
+      title: 'Notice: You are using a temporary domain',
+      description:
+        'You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to bind a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure.',
+    },
+    owner: {
+      title: 'Enhance Website Security',
+      description: 'Dear administrator, we recommend binding your custom domain soon, which will:',
+      benefits1: 'Automatically obtain HTTPS certificates to ensure secure data transmission',
+      benefits2: 'Create an exclusive brand image and increase website credibility',
+      benefits3: 'Get a shorter, more memorable access address',
+      benefits4: 'Provide visitors with a more professional experience',
+      benefits5: 'Domain binding takes just minutes to complete, taking your website to the next level!',
+    },
+    skip: 'Remind Me Later',
+    bindDomain: 'Bind Domain',
+  },
+  zh: {
+    guest: {
+      title: '温馨提示：当前使用的是临时域名',
+      description:
+        '您正在通过临时域名访问本站点。为了获得更好的访问体验，请联系站点管理员绑定自定义域名。使用自定义域名不仅访问更便捷，还能确保您的访问更加安全。',
+    },
+    owner: {
+      title: '提升网站安全性与专业度',
+      description: '尊敬的管理员，我们建议您尽快绑定自定义域名，这样可以：',
+      benefits1: '自动获取 HTTPS 证书，确保数据传输安全',
+      benefits2: '打造专属品牌形象，提升网站可信度',
+      benefits3: '获得更简短、易记的访问地址',
+      benefits4: '为访客提供更专业的访问体验',
+      benefits5: '只需几分钟即可完成域名绑定，让您的网站更上一层楼！',
+    },
+    skip: '稍后提醒',
+    bindDomain: '绑定域名',
+  },
+};
+
+const ONE_MONTH = 1000 * 60 * 60 * 24 * 30;
+
+const DASHBOARD_DOMAIN = '.well-known/service/admin/domains';
+
+export default function DomainWarning({ locale, session }) {
+  const user = session?.user;
+  const isMobile = useMobile();
+
+  const [open, setOpen] = useState(() => {
+    const skip = window.localStorage.getItem('domain-warning-skip');
+    if (!skip) return true;
+
+    const now = +new Date();
+    const skipTime = +new Date(skip);
+    return now - skipTime > ONE_MONTH;
+  });
+
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const host = useMemo(() => {
+    try {
+      const { hostname } = new URL(window.location.href);
+      return hostname;
+    } catch (error) {
+      return '';
+    }
+  }, []);
+
+  const benefits = useMemo(
+    () => [
+      t('owner.benefits1'),
+      t('owner.benefits2'),
+      t('owner.benefits3'),
+      t('owner.benefits4'),
+      t('owner.benefits5'),
+    ],
+    [t]
+  );
+
+  const handleSkip = useCallback(() => {
+    window.localStorage.setItem('domain-warning-skip', new Date().toISOString());
+    setOpen(false);
+  }, []);
+
+  const handleDomainConfig = useCallback(() => {
+    const adminUrl = joinURL(window.location.origin, DASHBOARD_DOMAIN);
+    if (adminUrl.startsWith('http')) {
+      window.open(adminUrl, '_blank');
+    }
+    setOpen(false);
+  }, []);
+
+  const isOwner = user?.role && isAdmin.includes(user.role);
+
+  if (window.location.href.includes(DASHBOARD_DOMAIN)) {
+    return null;
+  }
+
+  if (isMobile) {
+    return null;
+  }
+
+  if (!isIpEcho(host) && !isDidDomain(host)) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} disableEscapeKeyDown fullWidth maxWidth="sm" onClose={() => setOpen(false)}>
+      <DialogContent sx={{ padding: '20px !important' }}>
+        <Typography
+          sx={{
+            fontSize: '20px',
+            fontWeight: '500',
+          }}>
+          {isOwner ? t('owner.title') : t('guest.title')}
+        </Typography>
+        <Typography
+          sx={{
+            marginTop: '20px',
+            fontSize: '14px',
+            color: '#9397A1',
+          }}>
+          {isOwner ? t('owner.description') : t('guest.description')}
+        </Typography>
+
+        {isOwner && (
+          <Box component="ul">
+            {benefits.map((benefit) => (
+              <Typography
+                component="li"
+                key={benefit}
+                sx={{
+                  fontSize: '14px',
+                  color: '#9397A1',
+                }}>
+                {benefit}
+              </Typography>
+            ))}
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions sx={{ px: '12px !important' }}>
+        <Button onClick={handleSkip}>{t('skip')}</Button>
+
+        {isOwner && (
+          <Button variant="contained" onClick={handleDomainConfig}>
+            {t('bindDomain')}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+DomainWarning.propTypes = {
+  locale: PropTypes.string,
+  session: PropTypes.object,
+};
+
+DomainWarning.defaultProps = {
+  locale: 'en',
+  session: {},
+};

package/src/common/header-addons.jsx

@@ -12,6 +12,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { SessionManagerProps } from '../types';
 import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import NotificationAddon from './notification-addon';
+import DomainWarning from './domain-warning';
 
 const hasNotification = () => {
   const navigations = window?.blocklet?.navigation ?? [];
@@ -19,7 +20,7 @@ const hasNotification = () => {
 };
 
 // eslint-disable-next-line no-shadow
-export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
+export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
@@ -38,10 +39,12 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
     if (hasNotification()) {
       addonsArray.push(<NotificationAddon key="notification-addon" session={sessionCtx.session} />);
     }
+
     // 启用了多语言，且检测到了 locale context，且有多种语言可以切换
     if (enableLocale && locale && languages.length > 1) {
       addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
     }
+
     // 启用了连接钱包并且检测到了 session context
     if (enableConnect && sessionCtx) {
       const menu = [];
@@ -57,7 +60,9 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
           });
         });
       }
+
       addonsArray.push(<SessionBlocklet key="session-blocklet" session={sessionCtx.session} locale={locale} />);
+
       addonsArray.push(
         <SessionUser
           key="session-user"
@@ -69,20 +74,22 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
         />
       );
     }
-    // 在内置 addons 基础上定制 addons
+
     if (typeof addons === 'function') {
       addonsArray = addons(addonsArray) || [];
     }
+
     return addonsArray;
   };
 
   const renderedAddons = renderAddons();
-  const addonList = createElement(
-    Fragment,
-    null,
-    ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons])
-  );
-  return addonList;
+  const nodes = Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons];
+  const mergedNodes = [
+    showDomainWarning ? <DomainWarning session={sessionCtx?.session} locale={locale} /> : null,
+    ...nodes,
+  ].filter(Boolean);
+
+  return createElement(Fragment, null, ...mergedNodes);
 }
 
 HeaderAddons.propTypes = {
@@ -92,6 +99,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   sessionManagerProps: SessionManagerProps,
+  showDomainWarning: PropTypes.bool,
 };
 
 HeaderAddons.defaultProps = {
@@ -99,4 +107,5 @@ HeaderAddons.defaultProps = {
   sessionManagerProps: {
     showRole: true,
   },
+  showDomainWarning: true,
 };