@blocklet/ui-react 2.12.61 → 2.12.63

package/lib/UserCenter/components/danger-zone.js

@@ -0,0 +1,125 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box, Button, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useCreation, useMemoizedFn } from "ahooks";
+import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { LOGIN_PROVIDER } from "@blocklet/constant";
+import Toast from "@arcblock/ux/lib/Toast";
+import { translations } from "../libs/locales.js";
+import { client } from "../../libs/client.js";
+export default function DangerZone() {
+  const { confirmApi, confirmHolder } = useConfirm();
+  const { locale } = useLocaleContext();
+  const { session, connectApi } = useContext(SessionContext);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const isNeedVerify = useCreation(() => {
+    if (["true", true].includes(window?.blocklet?.ALLOW_SKIP_DESTROY_MYSELF_VERIFY)) {
+      return false;
+    }
+    const connectedAccounts = session?.user?.connectedAccounts || [];
+    const ALLOW_VERIFY_PROVIDERS = [LOGIN_PROVIDER.WALLET];
+    if (connectedAccounts.some((x) => ALLOW_VERIFY_PROVIDERS.includes(x.provider))) {
+      return true;
+    }
+    return false;
+  }, [session?.user]);
+  const handleVerify = useMemoizedFn(() => {
+    return new Promise((resolve, reject) => {
+      const userDid = session?.user?.did;
+      connectApi.open({
+        locale,
+        action: "destroy-myself",
+        forceConnected: true,
+        saveConnect: false,
+        autoConnect: false,
+        // 暂不允许使用 passkey 进行验证
+        passkeyBehavior: "none",
+        extraParams: {
+          removeUserDid: userDid
+        },
+        messages: {
+          title: t("destroyMyself.title"),
+          scan: t("destroyMyself.scan"),
+          confirm: t("destroyMyself.confirm"),
+          success: t("destroyMyself.success")
+        },
+        onSuccess: ({ result }, decrypt = (x) => x) => {
+          const decryptResult = decrypt(result);
+          resolve(decryptResult);
+        },
+        onClose: () => {
+          connectApi.close();
+          reject(new Error(t("destroyMyself.abort")));
+        }
+      });
+    });
+  });
+  const handleDeleteAccount = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t("dangerZone.deleteAccount"),
+      content: t("dangerZone.deleteAccountDescription"),
+      confirmButtonText: t("common.confirm"),
+      confirmButtonProps: {
+        color: "error"
+      },
+      cancelButtonText: t("common.cancel"),
+      async onConfirm(close) {
+        let result;
+        try {
+          if (isNeedVerify) {
+            result = await handleVerify();
+          } else if (client?.user?.destroyMyself instanceof Function) {
+            result = await client.user.destroyMyself();
+          } else {
+            Toast.error(t("notImplemented"));
+            return;
+          }
+          if (result?.did === session?.user?.did) {
+            session.logout(close);
+          } else {
+            Toast.error(t("destroyMyself.error"));
+          }
+        } catch (error) {
+          const errorMessage = error?.response?.data.error || error?.message || t("destroyMyself.error");
+          Toast.error(errorMessage);
+        }
+      }
+    });
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "h6",
+                sx: {
+                  fontSize: "0.875rem !important",
+                  fontWeight: "bold"
+                },
+                children: t("dangerZone.deleteAccount")
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("dangerZone.deleteAccountDescription") })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", color: "error", size: "small", onClick: handleDeleteAccount, children: t("dangerZone.delete") })
+        ]
+      }
+    ) }),
+    confirmHolder
+  ] });
+}

package/lib/UserCenter/components/settings.js

@@ -4,6 +4,7 @@ import { Box, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import colors from "@arcblock/ux/lib/Colors/themes/temp";
 import { translations } from "../libs/locales.js";
 import Notification from "./notification.js";
@@ -11,6 +12,7 @@ import Privacy from "./privacy.js";
 import { UserSessions } from "../../UserSessions/index.js";
 import ThirdPartyLogin from "./third-party-login/index.js";
 import ConfigProfile from "./config-profile.js";
+import DangerZone from "./danger-zone.js";
 export default function Settings({
   user,
   settings,
@@ -58,6 +60,14 @@ export default function Settings({
         label: t("sessionManagement"),
         value: "session",
         content: /* @__PURE__ */ jsx(UserSessions, { user, showUser: false })
+      },
+      {
+        label: t("dangerZone.title"),
+        value: "dangerZone",
+        content: /* @__PURE__ */ jsx(DangerZone, {}),
+        sx: {
+          borderColor: "error.main"
+        }
       }
     ].filter(Boolean);
   }, [user, privacyConfigList]);
@@ -86,14 +96,17 @@ export default function Settings({
         Box,
         {
           id: tab.value,
-          sx: {
-            border: `1px solid ${colors.dividerColor}`,
-            borderRadius: 2,
-            p: 2,
-            "&:last-child": {
-              mb: 5
-            }
-          },
+          sx: mergeSx(
+            {
+              border: `1px solid ${colors.dividerColor}`,
+              borderRadius: 2,
+              p: 2,
+              "&:last-child": {
+                mb: 5
+              }
+            },
+            tab.sx
+          ),
           children: [
             /* @__PURE__ */ jsx(
               Typography,

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -143,7 +143,7 @@ export default function UserBasicInfo({
                           bottom: 0,
                           left: 0,
                           right: 0,
-                          height: "50%",
+                          height: "25%",
                           backgroundColor: "rgba(0, 0, 0, 0.3)",
                           display: "flex",
                           justifyContent: "center",

package/lib/UserCenter/libs/locales.d.ts

@@ -97,6 +97,12 @@ export declare const translations: {
             title: string;
             locale: string;
         };
+        dangerZone: {
+            title: string;
+            deleteAccount: string;
+            deleteAccountDescription: string;
+            delete: string;
+        };
         userStatus: {
             Online: string;
             Meeting: string;
@@ -152,6 +158,16 @@ export declare const translations: {
                 invalidPostalCode: string;
             };
         };
+        destroyMyself: {
+            title: string;
+            scan: string;
+            confirm: string;
+            cancel: string;
+            success: string;
+            abort: string;
+            error: string;
+        };
+        notImplemented: string;
     };
     en: {
         settings: string;
@@ -251,6 +267,12 @@ export declare const translations: {
             title: string;
             locale: string;
         };
+        dangerZone: {
+            title: string;
+            deleteAccount: string;
+            deleteAccountDescription: string;
+            delete: string;
+        };
         userStatus: {
             Online: string;
             Meeting: string;
@@ -307,5 +329,15 @@ export declare const translations: {
                 invalidPostalCode: string;
             };
         };
+        destroyMyself: {
+            title: string;
+            scan: string;
+            confirm: string;
+            cancel: string;
+            success: string;
+            abort: string;
+            error: string;
+        };
+        notImplemented: string;
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -97,6 +97,12 @@ export const translations = {
       title: "\u901A\u7528\u8BBE\u7F6E",
       locale: "\u504F\u597D\u8BED\u8A00"
     },
+    dangerZone: {
+      title: "\u5371\u9669\u64CD\u4F5C",
+      deleteAccount: "\u5220\u9664\u8D26\u6237",
+      deleteAccountDescription: "\u5220\u9664\u8D26\u6237\u540E\uFF0C\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528\u8BE5\u8D26\u6237\u767B\u5F55\uFF0C\u60A8\u7684\u6570\u636E\u5C06\u4ECE\u5E73\u53F0\u4E2D\u5B8C\u5168\u5220\u9664\uFF0C\u4E0D\u53EF\u6062\u590D\u3002",
+      delete: "\u5220\u9664"
+    },
     userStatus: {
       Online: "\u5728\u7EBF",
       Meeting: "\u5F00\u4F1A\u4E2D",
@@ -151,7 +157,17 @@ export const translations = {
         postalCode: "\u90AE\u653F\u7F16\u7801",
         invalidPostalCode: "\u90AE\u653F\u7F16\u7801\u683C\u5F0F\u4E0D\u6B63\u786E"
       }
-    }
+    },
+    destroyMyself: {
+      title: "\u5220\u9664\u8D26\u6237",
+      scan: "\u5220\u9664\u8D26\u6237\u540E\uFF0C\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528\u8BE5\u8D26\u6237\u767B\u5F55\uFF0C\u60A8\u7684\u6570\u636E\u5C06\u4ECE\u5E73\u53F0\u4E2D\u5B8C\u5168\u5220\u9664\uFF0C\u4E0D\u53EF\u6062\u590D\u3002",
+      confirm: "\u786E\u8BA4\u5220\u9664",
+      cancel: "\u53D6\u6D88",
+      success: "\u5220\u9664\u8D26\u6237\u6210\u529F",
+      abort: "\u53D6\u6D88\u5220\u9664\u8D26\u6237",
+      error: "\u5220\u9664\u8D26\u6237\u5931\u8D25"
+    },
+    notImplemented: "\u64CD\u4F5C\u672A\u5B9E\u73B0"
   },
   en: {
     settings: "Settings",
@@ -251,6 +267,12 @@ export const translations = {
       title: "Common Settings",
       locale: "Preferred language"
     },
+    dangerZone: {
+      title: "Danger Zone",
+      deleteAccount: "Delete Account",
+      deleteAccountDescription: "Delete account will make you unable to login with this account, your data will be completely deleted from the platform and cannot be recovered.",
+      delete: "Delete"
+    },
     userStatus: {
       Online: "Online",
       Meeting: "In a Meeting",
@@ -306,6 +328,16 @@ export const translations = {
         postalCode: "Postal Code",
         invalidPostalCode: "Postal code is invalid"
       }
-    }
+    },
+    destroyMyself: {
+      title: "Delete Account",
+      scan: "Delete account will make you unable to login with this account, your data will be completely deleted from the platform and cannot be recovered.",
+      confirm: "Confirm delete",
+      cancel: "Cancel",
+      success: "Delete account successfully",
+      abort: "Delete account aborted",
+      error: "Delete account failed"
+    },
+    notImplemented: "This action is not implemented"
   }
 };

package/lib/common/notification-addon.js

@@ -4,18 +4,29 @@ import PropTypes from "prop-types";
 import { useCallback, useEffect } from "react";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { IconButton } from "@mui/material";
+import { useSnackbar } from "notistack";
 import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
 import { useCreation } from "ahooks";
-import { EVENTS } from "@abtnode/constant";
+import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX } from "@abtnode/constant";
+import { joinURL, withQuery } from "ufo";
 import { useListenWsClient } from "./ws.js";
+import NotificationSnackbar from "../Notifications/Snackbar.js";
+import { compareVersions } from "../utils.js";
+const viewAllUrl = joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "user", "notifications");
+const getNotificationLink = (notification) => {
+  return withQuery(viewAllUrl, {
+    id: notification.id,
+    severity: notification.severity || "all",
+    componentDid: notification.source === "system" ? "system" : notification.componentDid || "all"
+  });
+};
 export default function NotificationAddon({ session = {} }) {
   const { unReadCount, user, setUnReadCount } = session;
   const userDid = useCreation(() => user?.did, [user]);
-  const viewAllUrl = useCreation(() => {
-    const { navigation } = window.blocklet ?? {};
-    const notification = navigation?.find((x) => x.id === "/userCenter/notification");
-    return notification?.link;
-  });
+  const { enqueueSnackbar } = useSnackbar();
+  const serverVersion = useCreation(() => {
+    return window.blocklet?.serverVersion;
+  }, []);
   const wsClient = useListenWsClient("user");
   const listenEvent = useCreation(
     () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
@@ -31,15 +42,27 @@ export default function NotificationAddon({ session = {} }) {
       const { receiver: notificationReceiver } = receivers[0] ?? {};
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
+        const isCompatible = compareVersions(serverVersion, "1.16.42-beta-20250407");
+        if (notification.source === "component" && isCompatible) {
+          const link = getNotificationLink(notification);
+          const { severity, description } = notification || {};
+          const disableAutoHide = ["error", "warning"].includes(severity) || notification.sticky;
+          enqueueSnackbar(description, {
+            variant: severity,
+            autoHideDuration: disableAutoHide ? null : 5e3,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            content: (key) => /* @__PURE__ */ jsx(NotificationSnackbar, { viewAllUrl: link, keyId: key, notification })
+          });
+        }
       }
     },
-    [userDid, setUnReadCount]
+    [userDid, setUnReadCount, enqueueSnackbar, serverVersion]
   );
   const readListenCallback = useCallback(
     (data) => {
       const { receiver, readCount } = data ?? {};
       if (receiver === userDid) {
-        setUnReadCount((x) => x - readCount <= 0 ? 0 : x - readCount);
+        setUnReadCount((x) => Math.max(x - readCount, 0));
       }
     },
     [userDid, setUnReadCount]

package/lib/utils.d.ts

@@ -7,3 +7,4 @@ export function isIconifyString(str: any): boolean;
 export function matchPath(path: any): any;
 export function matchPaths(paths?: any[]): number;
 export function splitNavColumns(items: any, options?: {}): never[][];
+export function compareVersions(version1: any, version2: any): any;

package/lib/utils.js

@@ -1,3 +1,5 @@
+import semver from 'semver';
+
 export const mapRecursive = (array, fn, childrenKey = 'children') => {
   return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
@@ -151,3 +153,27 @@ export const splitNavColumns = (items, options = {}) => {
 
   return result;
 };
+
+/**
+ * 比较两个版本号，用于判断版本号是否兼容
+ * @param {*} version1
+ * @param {*} version2
+ * @returns 0: 版本相同, -1: version1 < version2, 1: version1 > version2
+ */
+export const compareVersions = (version1, version2) => {
+  const getDateVersion = (version) => {
+    const match = version.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
+    return match ? match[1] : version;
+  };
+
+  const dateVersion1 = getDateVersion(version1);
+  const dateVersion2 = getDateVersion(version2);
+
+  // 如果基础版本相同，但完整版本不同（意味着有额外部分），返回false
+  if (dateVersion1 === dateVersion2 && version1 !== version2) {
+    return false;
+  }
+
+  // 其他情况正常比较
+  return semver.gte(dateVersion1, dateVersion2);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.61",
+  "version": "2.12.63",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,30 +33,36 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.41",
-    "@arcblock/bridge": "^2.12.61",
-    "@arcblock/react-hooks": "^2.12.61",
-    "@arcblock/ws": "^1.19.18",
-    "@blocklet/did-space-react": "^1.0.41",
+    "@abtnode/util": "^1.16.41",
+    "@arcblock/bridge": "^2.12.63",
+    "@arcblock/react-hooks": "^2.12.63",
+    "@arcblock/ws": "^1.19.19",
+    "@blocklet/constant": "^1.16.42-beta-20250408-072924-4b6a877a",
+    "@blocklet/did-space-react": "^1.0.43",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.0",
     "ahooks": "^3.7.10",
     "axios": "^1.7.5",
     "clsx": "^2.1.0",
     "core-js": "^3.25.5",
     "dayjs": "^1.11.5",
+    "dompurify": "^3.2.1",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.37",
+    "notistack": "^2.0.5",
     "p-all": "^5.0.0",
     "p-queue": "^6.6.2",
     "p-wait-for": "^5.0.2",
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
+    "semver": "^7.6.3",
     "type-fest": "^4.22.0",
     "ua-parser-js": "^1.0.37",
     "ufo": "^1.5.3",
@@ -81,11 +87,12 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ba8229f0a4a824a565e04056b78130c75b5bae14"
+  "gitHead": "47f8ac34d544cb600e084266ceb722989476f287"
 }

package/src/@types/index.ts

@@ -1,10 +1,15 @@
 import type { Axios } from 'axios';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
 import { OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import type { CloseConnect, OpenConnect } from '@arcblock/did-connect/lib/types';
 
 export type SessionContext = {
   session: Session;
   api: Axios;
+  connectApi: {
+    open: OpenConnect;
+    close: CloseConnect;
+  };
 };
 
 export type OAuthAccount = {

package/src/@types/shims.d.ts

@@ -7,6 +7,7 @@ declare module '@arcblock/ux/lib/ErrorBoundary';
 declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
 declare module '@abtnode/constant';
+declare module '@abtnode/util/lib/notification-preview/*';
 
 declare module 'is-url';