@blocklet/ui-react 2.12.62 → 2.12.64

package/lib/@types/index.d.ts

@@ -1,9 +1,14 @@
 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 = {
     provider: keyof typeof OAUTH_PROVIDER;

package/lib/UserCenter/components/danger-zone.d.ts

@@ -0,0 +1 @@
+export default function DangerZone(): import("react").JSX.Element;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.62",
+  "version": "2.12.64",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,10 +34,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.41",
     "@abtnode/util": "^1.16.41",
-    "@arcblock/bridge": "^2.12.62",
-    "@arcblock/react-hooks": "^2.12.62",
-    "@arcblock/ws": "^1.19.18",
-    "@blocklet/did-space-react": "^1.0.41",
+    "@arcblock/bridge": "^2.12.64",
+    "@arcblock/react-hooks": "^2.12.64",
+    "@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",
@@ -93,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "30267c6d2ad1fdc5ce8c13c6d2323c8b7c58ee65"
+  "gitHead": "535a7ce33f7325f00aab13b8812123cafc5788c7"
 }

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/UserCenter/components/danger-zone.tsx

@@ -0,0 +1,136 @@
+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';
+import { client } from '../../libs/client';
+import type { SessionContext as TSessionContext } from '../../@types';
+
+export default function DangerZone() {
+  const { confirmApi, confirmHolder } = useConfirm();
+
+  const { locale } = useLocaleContext();
+  const { session, connectApi } = useContext<TSessionContext>(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<{ did: string }>((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 }: { result: string }, decrypt = (x: string) => x) => {
+          const decryptResult = decrypt(result) as unknown as { did: string };
+          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: () => void) {
+        let result;
+        try {
+          if (isNeedVerify) {
+            result = await handleVerify();
+            // TODO: 等 js-sdk 新版后，就有这个方法，可以删除注释
+            // @ts-ignore
+          } else if (client?.user?.destroyMyself instanceof Function) {
+            // @ts-ignore
+            result = await client.user.destroyMyself();
+          } else {
+            Toast.error(t('notImplemented'));
+            return;
+          }
+          if (result?.did === session?.user?.did) {
+            // TODO: 前端执行退出等清理操作
+            session.logout(close);
+          } else {
+            Toast.error(t('destroyMyself.error'));
+          }
+        } catch (error: any) {
+          const errorMessage = error?.response?.data.error || error?.message || t('destroyMyself.error');
+          Toast.error(errorMessage);
+        }
+      },
+    });
+  });
+
+  return (
+    <>
+      <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            justifyContent: 'space-between',
+          }}>
+          <Box>
+            <Typography
+              variant="h6"
+              sx={{
+                fontSize: '0.875rem !important',
+                fontWeight: 'bold',
+              }}>
+              {t('dangerZone.deleteAccount')}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {t('dangerZone.deleteAccountDescription')}
+            </Typography>
+          </Box>
+          <Button variant="contained" color="error" size="small" onClick={handleDeleteAccount}>
+            {t('dangerZone.delete')}
+          </Button>
+        </Box>
+      </Box>
+      {confirmHolder}
+    </>
+  );
+}

package/src/UserCenter/components/settings.tsx

@@ -4,6 +4,7 @@ import type { BoxProps } 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';
@@ -13,6 +14,7 @@ import { User, UserCenterTab } from '../../@types';
 import { UserSessions } from '../../UserSessions';
 import ThirdPartyLogin from './third-party-login';
 import ConfigProfile from './config-profile';
+import DangerZone from './danger-zone';
 
 export default function Settings({
   user,
@@ -68,6 +70,14 @@ export default function Settings({
         value: 'session',
         content: <UserSessions user={user} showUser={false} />,
       },
+      {
+        label: t('dangerZone.title'),
+        value: 'dangerZone',
+        content: <DangerZone />,
+        sx: {
+          borderColor: 'error.main',
+        },
+      },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
 
@@ -97,14 +107,17 @@ export default function Settings({
         <Box
           id={tab.value}
           key={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
+          )}>
           <Typography
             sx={{
               color: colors.foregroundsFgBase,

package/src/UserCenter/libs/locales.ts

@@ -99,6 +99,12 @@ export const translations = {
       title: '通用设置',
       locale: '偏好语言',
     },
+    dangerZone: {
+      title: '危险操作',
+      deleteAccount: '删除账户',
+      deleteAccountDescription: '删除账户后，您将无法使用该账户登录，您的数据将从平台中完全删除，不可恢复。',
+      delete: '删除',
+    },
     userStatus: {
       Online: '在线',
       Meeting: '开会中',
@@ -154,6 +160,16 @@ export const translations = {
         invalidPostalCode: '邮政编码格式不正确',
       },
     },
+    destroyMyself: {
+      title: '删除账户',
+      scan: '删除账户后，您将无法使用该账户登录，您的数据将从平台中完全删除，不可恢复。',
+      confirm: '确认删除',
+      cancel: '取消',
+      success: '删除账户成功',
+      abort: '取消删除账户',
+      error: '删除账户失败',
+    },
+    notImplemented: '操作未实现',
   },
   en: {
     settings: 'Settings',
@@ -255,6 +271,13 @@ 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',
@@ -311,5 +334,15 @@ export const translations = {
         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',
   },
 };