@blocklet/ui-react 3.3.10 → 3.4.0

package/lib/UserSessions/components/user-sessions.js

@@ -1,6 +1,6 @@
-import { jsx as n, jsxs as s, Fragment as A } from "react/jsx-runtime";
-import $ from "@arcblock/ux/lib/Datatable";
-import { useReactive as z, useMemoizedFn as v, useMount as J, useRequest as K, useCreation as w } from "ahooks";
+import { jsx as n, jsxs as s, Fragment as k } from "react/jsx-runtime";
+import K from "@arcblock/ux/lib/Datatable";
+import { useReactive as z, useMemoizedFn as v, useMount as $, useRequest as J, useCreation as w } from "ahooks";
 import { translate as X } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as O } from "@arcblock/ux/lib/Locale/context";
 import T from "@arcblock/ux/lib/RelativeTime";
@@ -9,30 +9,30 @@ import { getVisitorId as Y } from "@arcblock/ux/lib/Util";
 import { useConfirm as Z } from "@arcblock/ux/lib/Dialog";
 import _ from "@arcblock/ux/lib/DID";
 import ee from "p-queue";
-import { Box as d, Typography as a, CircularProgress as te, useMediaQuery as oe, Tooltip as ne, Button as k, RadioGroup as re, FormControlLabel as B, Radio as C } from "@mui/material";
+import { Box as d, Typography as a, CircularProgress as te, useMediaQuery as oe, Tooltip as ne, Button as P, RadioGroup as re, FormControlLabel as B, Radio as C } from "@mui/material";
 import { memo as ie, useEffect as se } from "react";
-import { mergeSx as P } from "@arcblock/ux/lib/Util/style";
-import ae from "../../hooks/use-mobile.js";
-import le from "./user-session-info.js";
-import { client as M } from "../../libs/client.js";
-import { translations as ce } from "../libs/locales.js";
-import { ip2Region as de } from "../libs/utils.js";
-const W = (p) => new S(p, {
+import { getBlockletSDK as ae } from "@blocklet/js-sdk";
+import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
+import le from "../../hooks/use-mobile.js";
+import ce from "./user-session-info.js";
+import { translations as de } from "../libs/locales.js";
+import { ip2Region as pe } from "../libs/utils.js";
+const D = (p) => new S(p, {
   // eslint-disable-next-line no-useless-escape
   browser: [[/(ArcWallet)\/([\w\.]+)/i], [S.BROWSER.NAME, S.BROWSER.VERSION]]
-}).getResult(), D = {
+}).getResult(), W = {
   display: "flex",
   justifyContent: "flex-end",
   textAlign: "right"
-}, pe = new ee({ concurrency: 1 }), ue = ie(({ userSession: p, isMobile: h = !1 }) => {
+}, ue = new ee({ concurrency: 1 }), me = ie(({ userSession: p, isMobile: h = !1 }) => {
   const l = z({
     loading: !0,
     ipRegion: ""
   }), { t: f } = O();
   return se(() => {
-    pe.add(async () => {
+    ue.add(async () => {
       try {
-        l.ipRegion = await de(p.lastLoginIp);
+        l.ipRegion = await pe(p.lastLoginIp);
       } finally {
         l.loading = !1;
       }
@@ -47,17 +47,17 @@ const W = (p) => new S(p, {
         gap: 1,
         flexWrap: "wrap"
       },
-      children: l.ipRegion ? /* @__PURE__ */ s(A, { children: [
+      children: l.ipRegion ? /* @__PURE__ */ s(k, { children: [
         /* @__PURE__ */ n(a, { variant: "body2", children: l.ipRegion }),
         /* @__PURE__ */ n(a, { variant: "body2", color: "grey", children: p.lastLoginIp || f("unknown") })
-      ] }) : /* @__PURE__ */ s(A, { children: [
+      ] }) : /* @__PURE__ */ s(k, { children: [
         /* @__PURE__ */ n(a, { children: p.lastLoginIp || f("unknown") }),
         l.loading ? /* @__PURE__ */ n(a, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(te, { size: 12, color: "inherit" }) }) : null
       ] })
     }
   );
 });
-function Pe({
+function Me({
   user: p,
   showAction: h = !0,
   showUser: l = !0,
@@ -65,7 +65,7 @@ function Pe({
   showOffline: I = !1,
   showAppPid: j = !1
 }) {
-  const r = z({
+  const L = ae(), r = z({
     status: "online",
     page: 1,
     pageSize: 10
@@ -73,7 +73,7 @@ function Pe({
     online: 0,
     expired: 0,
     offline: 0
-  }), y = Y(), { locale: b } = O(), m = ae({ key: "md" }), H = oe((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: E } = Z(), t = v((e, o = {}) => X(ce, e, b, "en", o)), F = v(async () => {
+  }), y = Y(), { locale: b } = O(), m = le({ key: "md" }), H = oe((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: E } = Z(), t = v((e, o = {}) => X(de, e, b, "en", o)), F = v(async () => {
     const e = await f({
       page: r.page,
       pageSize: r.pageSize,
@@ -84,7 +84,7 @@ function Pe({
       list: e?.list || []
     };
   });
-  J(async () => {
+  $(async () => {
     const e = await f({
       page: 1,
       pageSize: 1,
@@ -98,12 +98,12 @@ function Pe({
     });
     u.offline = o?.paging?.total || 0;
   });
-  const c = K(F, {
+  const c = J(F, {
     refreshDeps: [r.status, r.page, r.pageSize]
   }), i = w(() => c.data?.list || [], [c.data?.list]), N = w(() => {
     const e = r.status;
     return e === "online" ? u[e] <= 1 : u[e] === 0;
-  }, [i, y]), x = w(() => P({}, m ? D : {}), [m]), U = v(({ visitorId: e }) => {
+  }, [i, y]), x = w(() => M({}, m ? W : {}), [m]), U = v(({ visitorId: e }) => {
     R.open({
       title: t("logoutThisSession"),
       content: t("logoutThisSessionConfirm"),
@@ -113,7 +113,7 @@ function Pe({
       },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await M.user.logout({
+        await L.user.logout({
           visitorId: e,
           includeFederated: !0
         });
@@ -135,15 +135,15 @@ function Pe({
       },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await M.user.logout({
+        await L.user.logout({
           status: r.status,
           visitorId: y,
           includeFederated: !0
         }), r.page = 1, c.refresh(), R.close();
       }
     });
-  }), L = [];
-  h && L.push(
+  }), A = [];
+  h && A.push(
     /* @__PURE__ */ n(
       ne,
       {
@@ -151,7 +151,7 @@ function Pe({
           type: t(r.status)
         }),
         children: /* @__PURE__ */ n(
-          k,
+          P,
           {
             sx: { ml: 0.5 },
             size: "small",
@@ -186,7 +186,7 @@ function Pe({
       name: "platform",
       options: {
         customBodyRenderLite: (e) => {
-          const o = i[e], g = W(o?.ua);
+          const o = i[e], g = D(o?.ua);
           return /* @__PURE__ */ n(d, { sx: x, children: [g.os?.name, g.os?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
@@ -196,7 +196,7 @@ function Pe({
       name: "deviceType",
       options: {
         customBodyRenderLite: (e) => {
-          const o = i[e], g = W(o?.ua);
+          const o = i[e], g = D(o?.ua);
           return /* @__PURE__ */ n(d, { sx: x, children: [g.browser?.name, g.browser?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
@@ -227,7 +227,7 @@ function Pe({
       options: {
         customBodyRenderLite: (e) => {
           const o = i[e];
-          return /* @__PURE__ */ n(d, { sx: P({ minWidth: 150, maxWidth: 250 }, m ? D : {}), children: /* @__PURE__ */ n(le, { sessionUser: o.user, user: p }) });
+          return /* @__PURE__ */ n(d, { sx: M({ minWidth: 150, maxWidth: 250 }, m ? W : {}), children: /* @__PURE__ */ n(ce, { sessionUser: o.user, user: p }) });
         }
       }
     },
@@ -257,7 +257,7 @@ function Pe({
       options: {
         customBodyRenderLite: (e) => {
           const o = i[e];
-          return /* @__PURE__ */ n(ue, { userSession: o, isMobile: m });
+          return /* @__PURE__ */ n(me, { userSession: o, isMobile: m });
         }
       }
     },
@@ -268,7 +268,7 @@ function Pe({
         customBodyRenderLite: (e) => {
           const o = i[e];
           return /* @__PURE__ */ n(d, { sx: x, children: /* @__PURE__ */ n(
-            k,
+            P,
             {
               sx: {
                 whiteSpace: "nowrap",
@@ -337,13 +337,13 @@ function Pe({
       children: [
         E,
         /* @__PURE__ */ n(
-          $,
+          K,
           {
             count: c.data?.total || 0,
             locale: b,
             data: i,
             columns: Q,
-            customButtons: L,
+            customButtons: A,
             options: q,
             loading: c.loading,
             className: "pc-user-sessions-table",
@@ -414,5 +414,5 @@ function Pe({
   );
 }
 export {
-  Pe as default
+  Me as default
 };

package/lib/blocklets.d.ts

@@ -11,7 +11,7 @@ export function getLocalizedNavigation({ navigation, locale, defaultLocale, sect
     }>;
     locale: string;
     defaultLocale: string;
-    section?: "footer" | "header" | undefined;
+    section?: "header" | "footer" | undefined;
 }): any[];
 export function formatNavigation(navigation: any): any;
 export function parseNavigation(navigation: any): {

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

@@ -11,7 +11,7 @@ declare function HeaderAddons({ formattedBlocklet, addons, showDomainWarningDial
 declare namespace HeaderAddons {
     namespace propTypes {
         export let formattedBlocklet: PropTypes.Validator<object>;
-        export let addons: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        export let addons: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { SessionManagerProps as sessionManagerProps };
         export let showDomainWarningDialog: PropTypes.Requireable<boolean>;
     }

package/lib/common/org-switch/create.js

@@ -1,14 +1,10 @@
-import { jsxs as m, jsx as o, Fragment as w } from "react/jsx-runtime";
+import { jsxs as m, jsx as r, Fragment as w } from "react/jsx-runtime";
 import { useState as f } from "react";
 import l from "prop-types";
-import { useMemoizedFn as S, useReactive as B } from "ahooks";
+import { useMemoizedFn as B, useReactive as D } from "ahooks";
 import g from "lodash/noop";
-import D from "@arcblock/ux/lib/Dialog";
-import E from "@mui/material/CircularProgress";
-import L from "@mui/material/DialogContentText";
-import h from "@mui/material/Typography";
-import y from "@mui/material/TextField";
-import O from "@mui/material/Alert";
+import E from "@arcblock/ux/lib/Dialog";
+import { Typography as h, TextField as y, DialogContentText as L, Alert as O, CircularProgress as S } from "@mui/material";
 import W from "@arcblock/ux/lib/Toast";
 import v from "@arcblock/ux/lib/Button";
 import { translate as j } from "@arcblock/ux/lib/Locale/util";
@@ -16,36 +12,36 @@ import { formatAxiosError as k } from "../../UserCenter/libs/utils.js";
 import z from "./use-org.js";
 import A from "./locales.js";
 function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
-  const [i, c] = f(!1), [p, r] = f(""), { createOrg: b } = z(), t = S((e, a = {}) => j(A, e, T, "en", a)), n = B({
+  const [i, c] = f(!1), [u, o] = f(""), { createOrg: b } = z(), t = B((e, a = {}) => j(A, e, T, "en", a)), n = D({
     name: "",
     description: ""
   }), x = async () => {
     const e = n.name.trim();
     if (!e) {
-      r(t("nameEmpty"));
+      o(t("nameEmpty"));
       return;
     }
     if (e.length > 25) {
-      r(t("nameTooLong", { length: 25 }));
+      o(t("nameTooLong", { length: 25 }));
       return;
     }
     const a = n.description.trim();
     if (a.length > 255) {
-      r(t("descriptionTooLong", { length: 25 }));
+      o(t("descriptionTooLong", { length: 25 }));
       return;
     }
-    r(""), c(!0);
+    o(""), c(!0);
     try {
       await b({ name: e, description: a }), C();
-    } catch (u) {
-      console.error(u);
-      const d = k(u);
-      r(d), W.error(d);
+    } catch (d) {
+      console.error(d);
+      const p = k(d);
+      o(p), W.error(p);
     } finally {
       c(!1);
     }
   }, F = /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ o(h, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ o(
+    /* @__PURE__ */ r(h, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ r(
       y,
       {
         label: t("mutate.name"),
@@ -57,12 +53,12 @@ function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
         autoFocus: !0,
         value: n.name,
         onChange: (e) => {
-          r(""), n.name = e.target.value;
+          o(""), n.name = e.target.value;
         },
         disabled: i
       }
     ) }),
-    /* @__PURE__ */ o(h, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ o(
+    /* @__PURE__ */ r(h, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ r(
       y,
       {
         label: t("mutate.description"),
@@ -73,7 +69,7 @@ function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
         fullWidth: !0,
         value: n.description,
         onChange: (e) => {
-          r(""), n.description = e.target.value;
+          o(""), n.description = e.target.value;
         },
         disabled: i,
         multiline: !0,
@@ -82,7 +78,7 @@ function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
     ) })
   ] });
   return /* @__PURE__ */ m(
-    D,
+    E,
     {
       title: t("mutate.title", { mode: t("create") }),
       fullWidth: !0,
@@ -90,7 +86,7 @@ function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
       onClose: s,
       showCloseButton: !1,
       actions: /* @__PURE__ */ m(w, { children: [
-        /* @__PURE__ */ o(v, { onClick: s, color: "inherit", children: t("cancel") }),
+        /* @__PURE__ */ r(v, { onClick: s, color: "inherit", children: t("cancel") }),
         /* @__PURE__ */ m(
           v,
           {
@@ -101,15 +97,15 @@ function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
             variant: "contained",
             autoFocus: !0,
             children: [
-              i && /* @__PURE__ */ o(E, { size: 16 }),
+              i && /* @__PURE__ */ r(S, { size: 16 }),
               t("create")
             ]
           }
         )
       ] }),
       children: [
-        /* @__PURE__ */ o(L, { component: "div", children: F }),
-        !!p && /* @__PURE__ */ o(O, { severity: "error", style: { width: "100%", margin: 0 }, children: p })
+        /* @__PURE__ */ r(L, { component: "div", children: F }),
+        !!u && /* @__PURE__ */ r(O, { severity: "error", style: { width: "100%", margin: 0 }, children: u })
       ]
     }
   );

package/lib/common/org-switch/use-org.js

@@ -1,11 +1,11 @@
-import { useMemoizedFn as e } from "ahooks";
+import { useMemoizedFn as n } from "ahooks";
 import i from "@arcblock/ux/lib/Toast";
-import { client as n } from "../../libs/client.js";
-import { formatAxiosError as m } from "../../UserCenter/libs/utils.js";
-function d(a) {
-  const c = e(async ({ search: t, page: r = 1, pageSize: o = 20 }) => {
+import { getBlockletSDK as m } from "@blocklet/js-sdk";
+import { formatAxiosError as p } from "../../UserCenter/libs/utils.js";
+function w(c) {
+  const e = m(), a = n(async ({ search: t, page: r = 1, pageSize: o = 20 }) => {
     try {
-      return await n.user.getOrgs({ search: t, page: r, pageSize: o });
+      return await e.user.getOrgs({ search: t, page: r, pageSize: o });
     } catch (s) {
       return console.error(s), {
         orgs: [],
@@ -16,32 +16,32 @@ function d(a) {
         }
       };
     }
-  }), u = e(async ({ name: t, description: r }) => {
+  }), u = n(async ({ name: t, description: r }) => {
     try {
-      return (await n.user.createOrg({ name: t, description: r })).data;
+      return (await e.user.createOrg({ name: t, description: r })).data;
     } catch (o) {
-      return console.error(o), i.error(m(o)), null;
+      return console.error(o), i.error(p(o)), null;
     }
-  }), g = e(async (t) => {
+  }), g = n(async (t) => {
     try {
-      return await n.user.getOrg(t);
+      return await e.user.getOrg(t);
     } catch (r) {
-      return a.logout(), console.error(r), null;
+      return c.logout(), console.error(r), null;
     }
-  }), l = e(async (t) => {
+  }), l = n(async (t) => {
     try {
-      const r = await n.user.getRole(t);
+      const r = await e.user.getRole(t);
       return r.orgId ? await g(r.orgId) : null;
     } catch (r) {
       return console.error(r), null;
     }
   });
   return {
-    getOrgs: c,
+    getOrgs: a,
     createOrg: u,
     getCurrentOrg: l
   };
 }
 export {
-  d as default
+  w as default
 };

package/lib/hooks/use-follow.js

@@ -1,47 +1,47 @@
 import { useState as p, useEffect as F } from "react";
 import { useMemoizedFn as n } from "ahooks";
 import c from "@arcblock/ux/lib/Toast";
-import { client as l } from "../libs/client.js";
+import { getBlockletSDK as U } from "@blocklet/js-sdk";
 import { formatAxiosError as u } from "../UserCenter/libs/utils.js";
-function E({
-  userDid: o,
+function _({
+  userDid: r,
   t: a,
   isMySelf: e
 }) {
-  const [i, f] = p(!1), t = n(async () => {
+  const l = U(), [i, f] = p(!1), s = n(async () => {
     try {
       if (e) {
         f(!0);
         return;
       }
-      const r = await l.user.isFollowingUser({ userDid: o });
-      f(r);
-    } catch (r) {
-      console.error(r);
+      const o = await l.user.isFollowingUser({ userDid: r });
+      f(o);
+    } catch (o) {
+      console.error(o);
     }
-  }), m = n(async (r = o) => {
-    if (!(e && r === o))
+  }), m = n(async (o = r) => {
+    if (!(e && o === r))
       try {
-        await l.user.followUser({ userDid: r }), c.success(a("profile.follow_success")), t();
-      } catch (s) {
-        console.error(s), c.error(u(s));
+        await l.user.followUser({ userDid: o }), c.success(a("profile.follow_success")), s();
+      } catch (t) {
+        console.error(t), c.error(u(t));
       }
-  }), w = n(async (r = o) => {
-    if (!(e && r === o))
+  }), w = n(async (o = r) => {
+    if (!(e && o === r))
       try {
-        await l.user.unfollowUser({ userDid: r }), c.success(a("profile.unfollow_success")), t();
-      } catch (s) {
-        console.error(s), c.error(u(s));
+        await l.user.unfollowUser({ userDid: o }), c.success(a("profile.unfollow_success")), s();
+      } catch (t) {
+        console.error(t), c.error(u(t));
       }
   });
   return F(() => {
-    o && !e && t();
-  }, [t, o, e]), {
+    r && !e && s();
+  }, [s, r, e]), {
     followed: i,
     followUser: m,
     unfollowUser: w
   };
 }
 export {
-  E as default
+  _ as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.3.10",
+  "version": "3.4.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,11 +35,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.17.7",
     "@abtnode/util": "^1.17.7",
-    "@arcblock/bridge": "3.3.10",
-    "@arcblock/icons": "3.3.10",
-    "@arcblock/react-hooks": "3.3.10",
-    "@arcblock/ws": "^1.27.16",
-    "@blocklet/did-space-react": "^1.2.13",
+    "@arcblock/bridge": "3.4.0",
+    "@arcblock/icons": "3.4.0",
+    "@arcblock/react-hooks": "3.4.0",
+    "@arcblock/ws": "^1.28.1",
+    "@blocklet/did-space-react": "^1.2.14",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -82,7 +82,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.3.10",
+    "@arcblock/did-connect-react": "3.4.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -96,5 +96,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "6c98492b766cb7f7486f3a81f3d4e4b0936af163"
+  "gitHead": "bbf3a178a14a767aef0da795ea31abe8dfb858c1"
 }

package/src/Dashboard/app-shell/badges/app-badge-default.tsx

@@ -1,8 +1,7 @@
-import { Box, Skeleton, styled, Typography } from '@mui/material';
+import { Box, BoxProps, Skeleton, styled, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { TBox } from '@arcblock/ux/lib/MuiWrap';
 import { Link } from 'react-router-dom';
-import { BoxProps } from '@mui/material/Box';
 
 export const isExternal = (to: string = ''): boolean => {
   return to.startsWith('http:') || to.startsWith('https:');

package/src/Notifications/utils.ts

@@ -2,7 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import DOMPurify from 'dompurify';
 import { Link, toTextList, getLink as getLinkUtil } from '@abtnode/util/lib/notification-preview/highlight';
 import { isSameAddr } from '@abtnode/util/lib/notification-preview/func';
-import { client } from '../libs/client';
+import { getBlockletSDK } from '@blocklet/js-sdk';
 
 /**
  * 通知对象的活动目标接口
@@ -192,6 +192,7 @@ export const getActivityLink = (
 
 const getUserProfileUrl = async (did: string, locale: string) => {
   try {
+    const client = getBlockletSDK();
     const profileUrl = await client.user.getProfileUrl({ did, locale });
     return profileUrl;
   } catch (error) {

package/src/UserCenter/components/config-inviter.tsx

@@ -1,8 +1,8 @@
 import { Box, TextField } from '@mui/material';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import Toast from '@arcblock/ux/lib/Toast';
+import { getBlockletSDK } from '@blocklet/js-sdk';
 
-import { client } from '../../libs/client';
 import { User } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
 
@@ -11,6 +11,7 @@ export default function ConfigInviter({ user }: { user: User }) {
     inviter: user?.inviter,
     loading: false,
   });
+  const client = getBlockletSDK();
 
   const handleChange = useMemoizedFn(async (e) => {
     try {

package/src/UserCenter/components/config-profile.tsx

@@ -4,9 +4,9 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import { getBlockletSDK } from '@blocklet/js-sdk';
 
 import { translations } from '../libs/locales';
-import { client } from '../../libs/client';
 import { User } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
 
@@ -17,6 +17,7 @@ const languages = [
 
 export default function ConfigProfile({ user, onSave }: { user: User; onSave: (type: 'profile') => void }) {
   const { locale, changeLocale } = useLocaleContext();
+  const client = getBlockletSDK();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });

package/src/UserCenter/components/nft-preview.tsx

@@ -1,4 +1,4 @@
-import Modal from '@mui/material/Modal';
+import { Modal } from '@mui/material';
 import styled from '@emotion/styled';
 import NFTDisplay, { getNFTData } from '@arcblock/ux/lib/NFTDisplay';
 

package/src/UserCenter/components/notification.tsx

@@ -11,12 +11,12 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AxiosError } from 'axios';
 import DID from '@arcblock/ux/lib/DID';
+import { getBlockletSDK } from '@blocklet/js-sdk';
 
 import { translations } from '../libs/locales';
 import WebhookItem from './webhook-item';
 import { User, WebhookItemData } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
-import { client } from '../../libs/client';
 
 function NotificationItem({
   title = undefined,
@@ -64,6 +64,7 @@ function NotificationItem({
 
 export default function Notification({ user, isMobile }: { user: User; isMobile: boolean }) {
   const { locale } = useLocaleContext();
+  const client = getBlockletSDK();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });

package/src/UserCenter/components/privacy.tsx

@@ -6,9 +6,9 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
+import { getBlockletSDK } from '@blocklet/js-sdk';
 
 import { translations } from '../libs/locales';
-import { client } from '../../libs/client';
 import { formatAxiosError } from '../libs/utils';
 
 type PrivacyConfig = {
@@ -25,6 +25,7 @@ export default function Privacy({
   configList: PrivacyConfig[];
   onSave: (type: 'privacy') => void;
 }) {
+  const client = getBlockletSDK();
   const [dataList, setDataList] = useState(configList);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {