@blocklet/ui-react 3.0.16 → 3.0.19

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

@@ -132,6 +132,7 @@ export type Session = {
     refresh: Function;
     useOAuth: Function;
     usePasskey: Function;
+    withSecondaryAuth: Function;
 };
 export type WebhookType = 'slack' | 'api';
 export type WebhookItemData = {

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

@@ -1 +1,3 @@
-export default function DangerZone(): import("react/jsx-runtime").JSX.Element;
+export default function DangerZone({ onDestroySelf }: {
+    onDestroySelf?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,80 +1,37 @@
-import { jsxs as l, Fragment as D, jsx as s } from "react/jsx-runtime";
-import { use as L } from "react";
-import { Box as a, Typography as p, Button as w } from "@mui/material";
-import { useLocaleContext as E } from "@arcblock/ux/lib/Locale/context";
-import { translate as I } from "@arcblock/ux/lib/Locale/util";
-import { useMemoizedFn as d, useCreation as R } from "ahooks";
-import { useConfirm as v } from "@arcblock/ux/lib/Dialog";
-import { SessionContext as S } from "@arcblock/did-connect/lib/Session";
-import { LOGIN_PROVIDER as _ } from "@blocklet/constant";
-import m from "@arcblock/ux/lib/Toast";
-import { translations as B } from "../libs/locales.js";
-import { client as y } from "../../libs/client.js";
-function N() {
-  const { confirmApi: g, confirmHolder: x } = v(), { locale: f } = E(), { session: n, connectApi: u } = L(S), e = d((r, o = {}) => I(B, r, f, "en", o)), h = R(() => {
-    if (["true", !0].includes(window?.blocklet?.ALLOW_SKIP_DESTROY_MYSELF_VERIFY))
-      return !1;
-    const r = n?.user?.connectedAccounts || [], o = [_.WALLET];
-    return !!r.some((t) => o.includes(t.provider));
-  }, [n?.user]), A = d(() => new Promise((r, o) => {
-    const t = n?.user?.did;
-    u.open({
-      locale: f,
-      action: "destroy-myself",
-      forceConnected: !0,
-      saveConnect: !1,
-      autoConnect: !1,
-      // 暂不允许使用 passkey 进行验证
-      passkeyBehavior: "none",
+import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { use as u } from "react";
+import { Box as s, Typography as c, Button as h } from "@mui/material";
+import { useLocaleContext as x } from "@arcblock/ux/lib/Locale/context";
+import { translate as g } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as l } from "ahooks";
+import { useConfirm as y } from "@arcblock/ux/lib/Dialog";
+import { SessionContext as v } from "@arcblock/did-connect/lib/Session";
+import w from "@arcblock/ux/lib/Toast";
+import { translations as C } from "../libs/locales.js";
+function S({ onDestroySelf: t = void 0 }) {
+  const { confirmHolder: m } = y(), { locale: d } = x(), { session: e } = u(v), r = l((n, i = {}) => g(C, n, d, "en", i)), p = l(async () => {
+    if (!t || typeof t != "function")
+      return;
+    const n = e.withSecondaryAuth(t, {
       extraParams: {
-        removeUserDid: t
-      },
-      messages: {
-        title: e("destroyMyself.title"),
-        scan: e("destroyMyself.scan"),
-        confirm: e("destroyMyself.confirm"),
-        success: e("destroyMyself.success")
-      },
-      // @ts-expect-error 该 did-connect 后端api 将结果塞在了 result 中，并做了加密，所以已经变成一个字符串了
-      onSuccess: ({ result: c }, C = (i) => i) => {
-        const i = C(c);
-        r(i);
-      },
-      onClose: () => {
-        u.close(), o(new Error(e("destroyMyself.abort")));
-      }
-    });
-  })), M = d(() => {
-    g.open({
-      title: e("dangerZone.deleteAccount"),
-      content: e("dangerZone.deleteAccountDescription"),
-      confirmButtonText: e("common.confirm"),
-      confirmButtonProps: {
-        color: "error"
-      },
-      cancelButtonText: e("common.cancel"),
-      async onConfirm(r) {
-        let o;
-        try {
-          if (h)
-            o = await A();
-          else if (y?.user?.destroyMyself instanceof Function)
-            o = await y.user.destroyMyself();
-          else {
-            m.error(e("notImplemented"));
-            return;
-          }
-          o?.did === n?.user?.did ? n.logout(r) : m.error(e("destroyMyself.error"));
-        } catch (t) {
-          const c = t?.response?.data.error || t?.message || e("destroyMyself.error");
-          m.error(c);
+        locale: d,
+        removeUserDid: e?.user?.did,
+        input: {
+          user: { did: e?.user?.did },
+          teamDid: window?.blocklet?.did
         }
-      }
+      },
+      operation: "destroySelf"
     });
+    try {
+      await n(), e.logout();
+    } catch (i) {
+      w.error(i?.message || r("destroyMyself.error"));
+    }
   });
-  return /* @__PURE__ */ l(D, { children: [
-    /* @__PURE__ */ s(a, { children: /* @__PURE__ */ l(
-      a,
+  return /* @__PURE__ */ a(f, { children: [
+    /* @__PURE__ */ o(s, { children: /* @__PURE__ */ a(
+      s,
       {
         sx: {
           display: "flex",
@@ -84,36 +41,36 @@ function N() {
           flexWrap: "wrap"
         },
         children: [
-          /* @__PURE__ */ l(a, { children: [
-            /* @__PURE__ */ s(
-              p,
+          /* @__PURE__ */ a(s, { children: [
+            /* @__PURE__ */ o(
+              c,
               {
                 variant: "h6",
                 sx: {
                   fontSize: "0.875rem !important",
                   fontWeight: "bold"
                 },
-                children: e("dangerZone.deleteAccount")
+                children: r("dangerZone.deleteAccount")
               }
             ),
-            /* @__PURE__ */ s(
-              p,
+            /* @__PURE__ */ o(
+              c,
               {
                 variant: "caption",
                 sx: {
                   color: "text.secondary"
                 },
-                children: e("dangerZone.deleteAccountDescription")
+                children: r("dangerZone.deleteAccountDescription")
               }
             )
           ] }),
-          /* @__PURE__ */ s(w, { variant: "contained", color: "error", size: "small", onClick: M, children: e("dangerZone.delete") })
+          /* @__PURE__ */ o(h, { variant: "contained", color: "error", size: "small", onClick: p, children: r("dangerZone.delete") })
         ]
       }
     ) }),
-    x
+    m
   ] });
 }
 export {
-  N as default
+  S as default
 };

package/lib/UserCenter/components/settings.d.ts

@@ -7,4 +7,5 @@ export default function Settings({ user, settings, onSave, isMobile, ...rest }:
         userCenterTabs: UserCenterTab[];
     };
     isMobile: boolean;
+    onDestroySelf?: () => void;
 } & BoxProps): import("react/jsx-runtime").JSX.Element;

package/lib/UserCenter/components/settings.js

@@ -1,82 +1,83 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useEffect as h } from "react";
-import { Box as i, Typography as v } from "@mui/material";
-import { useMemoizedFn as x, useCreation as f } from "ahooks";
-import { translate as b } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as y } from "@arcblock/ux/lib/Locale/context";
-import { mergeSx as C } from "@arcblock/ux/lib/Util/style";
-import S from "@arcblock/react-hooks/lib/useBrowser";
-import { translations as w } from "../libs/locales.js";
-import L from "./notification.js";
-import P from "./privacy.js";
-import T from "../../UserSessions/components/user-sessions.js";
-import B from "./third-party-login/index.js";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import { Box as s, Typography as v } from "@mui/material";
+import { ROLES as x } from "@abtnode/constant";
+import { useMemoizedFn as b, useCreation as l } from "ahooks";
+import { translate as S } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
+import { mergeSx as w } from "@arcblock/ux/lib/Util/style";
+import L from "@arcblock/react-hooks/lib/useBrowser";
+import { translations as P } from "../libs/locales.js";
+import D from "./notification.js";
+import T from "./privacy.js";
+import B from "../../UserSessions/components/user-sessions.js";
+import E from "./third-party-login/index.js";
 import M from "./config-profile.js";
-import U from "./danger-zone.js";
-import { client as W } from "../../libs/client.js";
-function O({
-  user: n,
-  settings: s,
-  onSave: a,
-  isMobile: l,
-  ...m
+import W from "./danger-zone.js";
+import { client as O } from "../../libs/client.js";
+function Y({
+  user: r,
+  settings: a,
+  onSave: m,
+  isMobile: c,
+  ...i
 }) {
-  const { locale: p } = y(), d = S().arcSphere, t = x((e, r = {}) => b(w, e, p, "en", r)), c = f(() => (s?.userCenterTabs || []).map((r) => ({
-    key: r.value,
-    name: r.label,
-    value: r.protected,
-    isPrivate: r.isPrivate
-  })), [s?.userCenterTabs]), u = f(() => [
+  const { locale: p } = C(), d = L().arcSphere, n = b((e, t = {}) => S(P, e, p, "en", t)), u = l(() => r.passports?.some((e) => e.role === x.OWNER), [r]), f = l(() => (a?.userCenterTabs || []).map((t) => ({
+    key: t.value,
+    name: t.label,
+    value: t.protected,
+    isPrivate: t.isPrivate
+  })), [a?.userCenterTabs]), g = l(() => [
     d ? void 0 : {
-      label: t("commonSetting.title"),
+      label: n("commonSetting.title"),
       value: "common",
-      content: /* @__PURE__ */ o(M, { user: n, onSave: a })
+      content: /* @__PURE__ */ o(M, { user: r, onSave: m })
     },
     {
-      label: t("notificationManagement"),
+      label: n("notificationManagement"),
       value: "notification",
-      content: /* @__PURE__ */ o(L, { user: n, isMobile: l })
+      content: /* @__PURE__ */ o(D, { user: r, isMobile: c })
     },
     {
-      label: t("thirdPartyLogin.title"),
+      label: n("thirdPartyLogin.title"),
       value: "thirdPartyLogin",
-      content: /* @__PURE__ */ o(B, { user: n })
+      content: /* @__PURE__ */ o(E, { user: r })
     },
     {
-      label: t("privacyManagement"),
+      label: n("privacyManagement"),
       value: "privacy",
-      content: /* @__PURE__ */ o(P, { configList: c, onSave: a })
+      content: /* @__PURE__ */ o(T, { configList: f, onSave: m })
     },
     {
-      label: t("sessionManagement"),
+      label: n("sessionManagement"),
       value: "session",
       content: /* @__PURE__ */ o(
-        T,
+        B,
         {
-          user: n,
+          user: r,
           showUser: !1,
-          getUserSessions: (e) => W.userSession.getMyLoginSessions({}, e)
+          getUserSessions: (e) => O.userSession.getMyLoginSessions({}, e)
         }
       )
     },
-    {
-      label: t("dangerZone.title"),
+    !u && i.onDestroySelf && typeof i.onDestroySelf == "function" ? {
+      label: n("dangerZone.title"),
       value: "dangerZone",
-      content: /* @__PURE__ */ o(U, {}),
+      content: /* @__PURE__ */ o(W, { onDestroySelf: i.onDestroySelf }),
       sx: {
         borderColor: "error.main"
       }
-    }
-  ].filter(Boolean), [n, c, l]);
-  return h(() => {
+    } : null
+  ].filter(Boolean), [r, f, c]);
+  return y(() => {
     const e = window.location.hash.slice(1);
     e && document.getElementById(e)?.scrollIntoView({ behavior: "smooth" });
   }, []), /* @__PURE__ */ o(
-    i,
+    s,
     {
-      ...m,
+      ...i,
       sx: {
-        ...m?.sx,
+        ...i?.sx,
         display: "flex",
         flexDirection: "column",
         gap: 2.5,
@@ -85,11 +86,11 @@ function O({
         },
         maxWidth: "100%"
       },
-      children: u.map((e) => e ? /* @__PURE__ */ g(
-        i,
+      children: g.map((e) => e ? /* @__PURE__ */ h(
+        s,
         {
           id: e.value,
-          sx: C(
+          sx: w(
             {
               border: "1px solid",
               borderColor: "divider",
@@ -113,7 +114,7 @@ function O({
               }
             ),
             /* @__PURE__ */ o(
-              i,
+              s,
               {
                 sx: {
                   mt: 2.5
@@ -129,5 +130,5 @@ function O({
   );
 }
 export {
-  O as default
+  Y as default
 };

package/lib/UserCenter/components/user-center.d.ts

@@ -1,5 +1,6 @@
 import { BoxProps } from '@mui/material';
-export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, embed, onlyProfile, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, embed, onlyProfile, // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
+onDestroySelf, }: {
     readonly children: any;
     readonly notLoginContent?: any;
     readonly currentTab: string;
@@ -13,4 +14,5 @@ export default function UserCenter({ children, notLoginContent, currentTab, cont
     readonly stickySidebar?: boolean;
     readonly embed?: boolean;
     readonly onlyProfile?: boolean;
+    readonly onDestroySelf?: () => void;
 }): import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCenter/components/user-center.js

@@ -1,24 +1,24 @@
 import { jsx as e, jsxs as f, Fragment as D } from "react/jsx-runtime";
-import { use as fe } from "react";
-import { Box as a, Typography as pe, CircularProgress as me, Divider as he } from "@mui/material";
+import { use as pe } from "react";
+import { Box as a, Typography as me, CircularProgress as he, Divider as xe } from "@mui/material";
 import { useMemoizedFn as y, useCreation as d, useRequest as Y } from "ahooks";
-import xe from "p-wait-for";
-import { SessionContext as ge } from "@arcblock/did-connect/lib/Session";
-import ve from "@arcblock/ux/lib/Tabs";
+import ge from "p-wait-for";
+import { SessionContext as ve } from "@arcblock/did-connect/lib/Session";
+import be from "@arcblock/ux/lib/Tabs";
 import M from "@arcblock/ux/lib/Empty";
-import be from "@arcblock/ux/lib/Button";
-import we from "@arcblock/ux/lib/Result";
-import { useConfirm as ye } from "@arcblock/ux/lib/Dialog";
-import { translate as Ce } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
-import { ErrorFallback as Pe } from "@arcblock/ux/lib/ErrorBoundary";
+import we from "@arcblock/ux/lib/Button";
+import ye from "@arcblock/ux/lib/Result";
+import { useConfirm as Ce } from "@arcblock/ux/lib/Dialog";
+import { translate as ke } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as Pe } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback as Se } from "@arcblock/ux/lib/ErrorBoundary";
 import { styled as oe } from "@arcblock/ux/lib/Theme";
-import Se from "lodash/cloneDeep";
-import { joinURL as C, getQuery as De, withoutTrailingSlash as Z, withQuery as $ } from "ufo";
+import De from "lodash/cloneDeep";
+import { joinURL as C, getQuery as Me, withoutTrailingSlash as Z, withQuery as $ } from "ufo";
 import { PROFILE_URL as k } from "@arcblock/ux/lib/Util/constant";
-import Me from "../../Footer/index.js";
+import Te from "../../Footer/index.js";
 import ee from "../../Header/index.js";
-import { translations as Te } from "../libs/locales.js";
+import { translations as We } from "../libs/locales.js";
 import re from "./user-info/user-basic-info.js";
 import "@mui/icons-material";
 import "@iconify/react";
@@ -30,14 +30,14 @@ import "@iconify-icons/material-symbols/settings-input-antenna-rounded";
 import "@arcblock/ux/lib/RelativeTime";
 import "@arcblock/ux/lib/UserCard/Content/shorten-label";
 import "./user-info/switch-role.js";
-import { formatBlockletInfo as We, getLink as T, getLocalizedNavigation as ze } from "../../blocklets.js";
-import Ae from "./passport.js";
-import Ue from "./settings.js";
+import { formatBlockletInfo as ze, getLink as T, getLocalizedNavigation as Ae } from "../../blocklets.js";
+import Ue from "./passport.js";
+import Le from "./settings.js";
 import { client as te } from "../../libs/client.js";
-import Le from "../../hooks/use-mobile.js";
-import { ConfigUserSpaceProvider as Be } from "../../contexts/config-user-space.js";
-import Fe from "./storage/index.js";
-import Re from "./nft.js";
+import Be from "../../hooks/use-mobile.js";
+import { ConfigUserSpaceProvider as Fe } from "../../contexts/config-user-space.js";
+import Re from "./storage/index.js";
+import Ie from "./nft.js";
 const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe(a)(({ theme: v }) => ({
   flex: 1,
   boxSizing: "border-box",
@@ -64,7 +64,7 @@ const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe
     }
   }
 }));
-function Sr({
+function Dr({
   children: v,
   notLoginContent: L = null,
   currentTab: h,
@@ -76,18 +76,19 @@ function Sr({
   userDid: P = void 0,
   stickySidebar: R = !1,
   embed: I = !1,
-  onlyProfile: w = !1
+  onlyProfile: w = !1,
   // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
+  onDestroySelf: le = void 0
 }) {
-  const { locale: x } = ke(), l = Le({ key: "md" }), g = y((r, o = {}) => Ce(Te, r, x, "en", o)), t = fe(ge)?.session, p = d(() => {
+  const { locale: x } = Pe(), l = Be({ key: "md" }), g = y((r, o = {}) => ke(We, r, x, "en", o)), t = pe(ve)?.session, p = d(() => {
     if (P)
       return P;
-    const r = window.location.href, o = De(r);
+    const r = window.location.href, o = Me(r);
     return o?.did ? Array.isArray(o.did) ? o.did[0] : o.did : t?.user?.did;
   }, [t?.user?.did, P]), i = d(() => t?.user ? p === t?.user?.did : !1, [p, t?.user?.did]), n = Y(
     // eslint-disable-next-line consistent-return
     async () => {
-      if (await xe(() => t?.initialized), i)
+      if (await ge(() => t?.initialized), i)
         return t.user;
       if (p)
         return te.user.getUserPublicInfo({ did: p });
@@ -101,7 +102,7 @@ function Sr({
       refreshDeps: [p, n.data, h],
       loadingDelay: 300
     }
-  ), { confirmHolder: H } = ye({
+  ), { confirmHolder: H } = Ce({
     fullScreen: l,
     sx: {
       ".MuiDialog-paper": {
@@ -122,9 +123,9 @@ function Sr({
       }
     }
   }), N = d(() => {
-    const r = Se(window.blocklet);
+    const r = De(window.blocklet);
     try {
-      return We(r);
+      return ze(r);
     } catch (o) {
       return console.error("Failed to format blocklet info", o, r), r;
     }
@@ -157,7 +158,7 @@ function Sr({
     ]), o;
   }, [i, x]), c = d(() => {
     const r = N?.navigation?.userCenter || [];
-    return (ze(r, x) || []).concat(_).map((u) => {
+    return (Ae(r, x) || []).concat(_).map((u) => {
       const X = u.value ?? u._rawLink ?? u.link ?? u.url;
       return {
         value: X,
@@ -169,21 +170,22 @@ function Sr({
         // icon: x.icon,
       };
     }).filter((u) => i || !u.isPrivate);
-  }, [N, n.data, m?.data, x, _, i]), s = d(() => c.find((r) => Z(r.value) === Z(h)), [c]), le = y((r) => {
+  }, [N, n.data, m?.data, x, _, i]), s = d(() => c.find((r) => Z(r.value) === Z(h)), [c]), de = y((r) => {
     const o = c.find((b) => b.value === r);
     o && (window.location.href = $(o.url, {
       did: i ? void 0 : p
     }));
   }), E = d(() => /* @__PURE__ */ e(
-    Ue,
+    Le,
     {
       user: n.data,
       settings: { userCenterTabs: c },
       onSave: async (r) => r === "privacy" ? (await m.runAsync(), m.data) : (r === "profile" && await t.refresh(), null),
-      isMobile: l
+      isMobile: l,
+      onDestroySelf: le
     }
-  ), [n.data, c, m.data, m.runAsync]), O = d(() => s && s?.value === z, [s]), q = d(() => s && s?.value === C(k, "/profile") || s?.value === W, [s]), de = d(() => s && s?.value === A, [s]), ce = t.useOAuth(), ue = t.usePasskey(), Q = y(() => {
-    t?.user?.sourceProvider === "passkey" ? ue.switchPassport(t.user) : ["google", "apple", "email", "github"].includes(t?.user?.sourceProvider ?? "") ? ce.switchOAuthPassport(t.user) : t && t.switchPassport();
+  ), [n.data, c, m.data, m.runAsync]), O = d(() => s && s?.value === z, [s]), q = d(() => s && s?.value === C(k, "/profile") || s?.value === W, [s]), ce = d(() => s && s?.value === A, [s]), ue = t.useOAuth(), fe = t.usePasskey(), Q = y(() => {
+    t?.user?.sourceProvider === "passkey" ? fe.switchPassport(t.user) : ["google", "apple", "email", "github"].includes(t?.user?.sourceProvider ?? "") ? ue.switchOAuthPassport(t.user) : t && t.switchPassport();
   }), S = d(() => q ? /* @__PURE__ */ f(
     a,
     {
@@ -195,7 +197,7 @@ function Sr({
       children: [
         i ? /* @__PURE__ */ f(a, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1.5, p: 2 }, children: [
           /* @__PURE__ */ e(
-            pe,
+            me,
             {
               sx: {
                 color: "text.primary",
@@ -205,12 +207,12 @@ function Sr({
               children: g("passport")
             }
           ),
-          /* @__PURE__ */ e(Ae, { user: n.data })
+          /* @__PURE__ */ e(Ue, { user: n.data })
         ] }) : null,
-        /* @__PURE__ */ e(Re, { user: n.data })
+        /* @__PURE__ */ e(Ie, { user: n.data })
       ]
     }
-  ) : O && i ? E : de && i ? /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(Fe, {}) }) : null, [O, q, n, i, R, E]), G = d(() => /* @__PURE__ */ e(
+  ) : O && i ? E : ce && i ? /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e(Re, {}) }) : null, [O, q, n, i, R, E]), G = d(() => /* @__PURE__ */ e(
     a,
     {
       sx: {
@@ -234,7 +236,7 @@ function Sr({
         alignItems: "center",
         flex: 1
       },
-      children: /* @__PURE__ */ e(me, {})
+      children: /* @__PURE__ */ e(he, {})
     }
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -247,11 +249,11 @@ function Sr({
       return null;
     if (n.error) {
       if (n.error?.response?.status === 404)
-        return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(we, { status: 404, description: g("noUserFound") }) });
+        return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(ye, { status: 404, description: g("noUserFound") }) });
       const b = {
         message: n.error.response?.data?.error || n.error.message || "error occurred"
       };
-      return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(Pe, { error: b }) });
+      return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(Se, { error: b }) });
     }
     return !p && !n.data ? L || /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ f(
       a,
@@ -265,7 +267,7 @@ function Sr({
         },
         children: [
           /* @__PURE__ */ e(M, { children: g("viewAfterLogin") }),
-          /* @__PURE__ */ e(be, { size: "small", variant: "contained", onClick: () => t.login(), children: g("loginNow") })
+          /* @__PURE__ */ e(we, { size: "small", variant: "contained", onClick: () => t.login(), children: g("loginNow") })
         ]
       }
     ) }) : I ? /* @__PURE__ */ f(U, { children: [
@@ -322,19 +324,20 @@ function Sr({
                 },
                 children: [
                   /* @__PURE__ */ e(
-                    ve,
+                    be,
                     {
                       orientation: "horizontal",
                       variant: "line",
                       tabs: c,
                       current: s?.value ?? h,
-                      onChange: le,
+                      onChange: de,
+                      enableTabClick: !0,
                       sx: {
                         mb: 2,
                         ".MuiTabs-flexContainer": {
                           gap: 3,
                           ".MuiButtonBase-root": {
-                            padding: l ? "16px 4px" : "40px 4px 32px 4px",
+                            padding: l ? "16px 4px" : "32px 4px 16px 4px",
                             fontSize: 16
                           },
                           ".MuiTab-root": {
@@ -365,7 +368,7 @@ function Sr({
           ]
         }
       ),
-      !l && /* @__PURE__ */ e(he, { orientation: "vertical", sx: { ml: 5 } }),
+      !l && /* @__PURE__ */ e(xe, { orientation: "vertical", sx: { ml: 5 } }),
       /* @__PURE__ */ e(
         re,
         {
@@ -424,7 +427,7 @@ function Sr({
           H
         ] }),
         ne ? null : /* @__PURE__ */ e(
-          Me,
+          Te,
           {
             bordered: !0,
             ...ae,
@@ -440,5 +443,5 @@ function Sr({
   );
 }
 export {
-  Sr as default
+  Dr as default
 };

package/lib/common/notification-addon.js

@@ -1,72 +1,72 @@
 import { jsx as i } from "react/jsx-runtime";
-import R from "prop-types";
-import { useMemo as O, useCallback as h, useEffect as _ } from "react";
-import { IconButton as $, Badge as g } from "@mui/material";
-import { useSnackbar as B } from "notistack";
-import D from "@arcblock/icons/lib/Notification";
+import O from "prop-types";
+import { useMemo as _, useCallback as h, useEffect as $ } from "react";
+import { IconButton as g, Badge as B } from "@mui/material";
+import { useSnackbar as D } from "notistack";
+import S from "@arcblock/icons/lib/Notification";
 import { useCreation as s } from "ahooks";
-import { WELLKNOWN_SERVICE_PATH_PREFIX as S, EVENTS as y } from "@abtnode/constant";
-import V from "@arcblock/react-hooks/lib/useBrowser";
-import { joinURL as x, withQuery as U } from "ufo";
+import { WELLKNOWN_SERVICE_PATH_PREFIX as V, EVENTS as y } from "@abtnode/constant";
+import x from "@arcblock/react-hooks/lib/useBrowser";
+import { joinURL as U, withQuery as I } from "ufo";
 import { useListenWsClient as j } from "./ws.js";
 import F from "../Notifications/Snackbar.js";
 import { compareVersions as H } from "../utils.js";
-const v = x(S, "user", "notifications"), K = (r) => U(v, {
+const b = U(V, "user", "notifications"), K = (r) => I(b, {
   id: r.id,
   severity: r.severity || "all",
   componentDid: r.source === "system" ? "system" : r.componentDid || "all"
 });
 function P({ session: r = {} }) {
-  const { unReadCount: b, user: w, setUnReadCount: n } = r, e = s(() => w?.did, [w]), { enqueueSnackbar: E } = B(), c = V(), k = O(() => c.arcSphere || c.wallet, [c]), N = s(() => window.blocklet?.serverVersion, []), t = j("user"), l = s(
+  const { unReadCount: c, user: w, setUnReadCount: n } = r, e = s(() => w?.did, [w]), { enqueueSnackbar: E } = D(), l = x(), k = _(() => l.arcSphere || l.wallet, [l]), N = s(() => window.blocklet?.serverVersion, []), t = j("user"), d = s(
     () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_CREATE}`,
     [e]
   ), u = s(
     () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_READ}`,
     [e]
-  ), d = h(
+  ), a = h(
     (o) => {
-      const { receivers: m } = o ?? {}, { receiver: f } = m[0] ?? {};
-      if (f === e) {
-        n((C) => C + 1);
-        const p = H(N, "1.16.42-beta-20250407");
-        if (!k && o.source === "component" && p) {
-          const C = K(o), { severity: T, description: I } = o || {}, L = ["error", "warning"].includes(T) || o.sticky;
-          E(I, {
+      const { receivers: f } = o ?? {}, { receiver: p } = f[0] ?? {};
+      if (p === e) {
+        n((v) => v + 1);
+        const C = H(N, "1.16.42-beta-20250407");
+        if (!k && o.source === "component" && C) {
+          const v = K(o), { severity: T, description: L } = o || {}, A = ["error", "warning"].includes(T) || o.sticky;
+          E(L, {
             variant: T,
-            autoHideDuration: L ? null : 5e3,
+            autoHideDuration: A ? null : 5e3,
             // eslint-disable-next-line react/no-unstable-nested-components
-            content: (A) => /* @__PURE__ */ i(F, { viewAllUrl: C, keyId: A, notification: o })
+            content: (R) => /* @__PURE__ */ i(F, { viewAllUrl: v, keyId: R, notification: o })
           });
         }
       }
     },
     [e, n, E, N, k]
-  ), a = h(
+  ), m = h(
     (o) => {
-      const { receiver: m, readCount: f } = o ?? {};
-      m === e && n((p) => Math.max(p - f, 0));
+      const { receiver: f, readCount: p } = o ?? {};
+      f === e && n((C) => Math.max(C - p, 0));
     },
     [e, n]
   );
-  return _(() => (t && (t.on(l, d), t.on(u, a)), () => {
-    t && (t.off(l, d), t.off(u, a));
-  }), [t, n, d, l, a, u]), !r.user || !v ? null : /* @__PURE__ */ i(
-    $,
+  return $(() => (t && (t.on(d, a), t.on(u, m)), () => {
+    t && (t.off(d, a), t.off(u, m));
+  }), [t, n, a, d, m, u]), !r.user || !b ? null : /* @__PURE__ */ i(
+    g,
     {
       size: "medium",
       variant: "outlined",
-      href: v,
+      href: I(b, { read: c <= 0 }),
       sx: {
         "&:hover": {
           borderRadius: "50%"
         }
       },
-      children: /* @__PURE__ */ i(g, { badgeContent: b, color: "error", invisible: b === 0, children: /* @__PURE__ */ i(D, { style: { width: "auto", height: 24 } }) })
+      children: /* @__PURE__ */ i(B, { badgeContent: c, color: "error", invisible: c === 0, children: /* @__PURE__ */ i(S, { style: { width: "auto", height: 24 } }) })
     }
   );
 }
 P.propTypes = {
-  session: R.object
+  session: O.object
 };
 export {
   P as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.16",
+  "version": "3.0.19",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.45",
     "@abtnode/util": "^1.16.45",
-    "@arcblock/bridge": "3.0.16",
-    "@arcblock/icons": "3.0.16",
-    "@arcblock/react-hooks": "3.0.16",
+    "@arcblock/bridge": "3.0.19",
+    "@arcblock/icons": "3.0.19",
+    "@arcblock/react-hooks": "3.0.19",
     "@arcblock/ws": "^1.20.15",
     "@blocklet/constant": "^1.16.45",
     "@blocklet/did-space-react": "^1.1.0",
@@ -90,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b7aaaae0a729d3f600eef2a7c7d479182e15fd4d"
+  "gitHead": "c7886f76502bc62236cc1dd28aa26c050a702d1c"
 }

package/src/@types/index.ts

@@ -151,6 +151,7 @@ export type Session = {
   refresh: Function;
   useOAuth: Function;
   usePasskey: Function;
+  withSecondaryAuth: Function;
 };
 
 export type WebhookType = 'slack' | 'api';

package/src/UserCenter/components/danger-zone.tsx

@@ -2,103 +2,45 @@ import { use } 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 { 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 type { ConnectProps } from '@arcblock/did-connect/lib/types';
 
 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();
+export default function DangerZone({ onDestroySelf = undefined }: { onDestroySelf?: () => void }) {
+  const { confirmHolder } = useConfirm();
 
   const { locale } = useLocaleContext();
-  const { session, connectApi } = use<TSessionContext>(SessionContext);
+  const { session } = use<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 handleRemoveMyself = useMemoizedFn(async () => {
+    if (!onDestroySelf || typeof onDestroySelf !== 'function') {
+      return;
+    }
 
-  const handleVerify = useMemoizedFn(() => {
-    return new Promise<{ did: string }>((resolve, reject) => {
-      const userDid = session?.user?.did;
-      connectApi.open({
-        locale: locale as ConnectProps['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'),
-        },
-        // @ts-expect-error 该 did-connect 后端api 将结果塞在了 result 中，并做了加密，所以已经变成一个字符串了
-        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 handle = session.withSecondaryAuth(onDestroySelf, {
+      extraParams: {
+        locale,
+        removeUserDid: session?.user?.did,
+        input: {
+          user: { did: session?.user?.did },
+          teamDid: window?.blocklet?.did,
         },
-      });
-    });
-  });
-
-  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();
-          } else if (client?.user?.destroyMyself instanceof Function) {
-            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);
-        }
       },
+      operation: 'destroySelf',
     });
+    try {
+      await handle();
+      session.logout();
+    } catch (error: any) {
+      Toast.error(error?.message || t('destroyMyself.error'));
+    }
   });
 
   return (
@@ -129,7 +71,7 @@ export default function DangerZone() {
               {t('dangerZone.deleteAccountDescription')}
             </Typography>
           </Box>
-          <Button variant="contained" color="error" size="small" onClick={handleDeleteAccount}>
+          <Button variant="contained" color="error" size="small" onClick={handleRemoveMyself}>
             {t('dangerZone.delete')}
           </Button>
         </Box>

package/src/UserCenter/components/settings.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { Box, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
+import { ROLES } from '@abtnode/constant';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -29,6 +30,7 @@ export default function Settings({
     userCenterTabs: UserCenterTab[];
   };
   isMobile: boolean;
+  onDestroySelf?: () => void;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const browser = useBrowser();
@@ -36,6 +38,11 @@ export default function Settings({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+
+  const isOwner = useCreation(() => {
+    return user.passports?.some((x) => x.role === ROLES.OWNER);
+  }, [user]);
+
   const privacyConfigList = useCreation(() => {
     const userCenterTabs = settings?.userCenterTabs || [];
     return userCenterTabs.map((item) => {
@@ -84,14 +91,16 @@ export default function Settings({
           />
         ),
       },
-      {
-        label: t('dangerZone.title'),
-        value: 'dangerZone',
-        content: <DangerZone />,
-        sx: {
-          borderColor: 'error.main',
-        },
-      },
+      !isOwner && rest.onDestroySelf && typeof rest.onDestroySelf === 'function'
+        ? {
+            label: t('dangerZone.title'),
+            value: 'dangerZone',
+            content: <DangerZone onDestroySelf={rest.onDestroySelf} />,
+            sx: {
+              borderColor: 'error.main',
+            },
+          }
+        : null,
     ].filter(Boolean);
   }, [user, privacyConfigList, isMobile]);
 

package/src/UserCenter/components/user-center.tsx

@@ -90,6 +90,7 @@ export default function UserCenter({
   stickySidebar = false,
   embed = false,
   onlyProfile = false, // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
+  onDestroySelf = undefined,
 }: {
   readonly children: any;
   readonly notLoginContent?: any;
@@ -105,6 +106,7 @@ export default function UserCenter({
   readonly stickySidebar?: boolean;
   readonly embed?: boolean;
   readonly onlyProfile?: boolean;
+  readonly onDestroySelf?: () => void;
 }) {
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: 'md' });
@@ -287,6 +289,7 @@ export default function UserCenter({
           return null;
         }}
         isMobile={isMobile}
+        onDestroySelf={onDestroySelf}
       />
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
@@ -523,12 +526,13 @@ export default function UserCenter({
                 tabs={userCenterTabs}
                 current={currentActiveTab?.value ?? currentTab}
                 onChange={handleChangeTab}
+                enableTabClick
                 sx={{
                   mb: 2,
                   '.MuiTabs-flexContainer': {
                     gap: 3,
                     '.MuiButtonBase-root': {
-                      padding: isMobile ? '16px 4px' : '40px 4px 32px 4px',
+                      padding: isMobile ? '16px 4px' : '32px 4px 16px 4px',
                       fontSize: 16,
                     },
                     '.MuiTab-root': {

package/src/common/notification-addon.jsx

@@ -107,7 +107,7 @@ export default function NotificationAddon({ session = {} }) {
     <IconButton
       size="medium"
       variant="outlined"
-      href={viewAllUrl}
+      href={withQuery(viewAllUrl, { read: unReadCount <= 0 })}
       sx={{
         '&:hover': {
           borderRadius: '50%',