@blocklet/ui-react 3.2.13 → 3.2.15

package/lib/Dashboard/index.d.ts

@@ -14,7 +14,7 @@ declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddon
         showRole: boolean;
         onLogout: () => void;
     } | undefined;
-    links?: any[] | undefined;
+    links?: never[] | undefined;
     showDomainWarningDialog?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Dashboard {
@@ -22,7 +22,7 @@ declare namespace Dashboard {
         export { BlockletMetaProps as meta };
         export let fallbackUrl: PropTypes.Requireable<string>;
         export let invalidPathFallback: PropTypes.Requireable<(...args: any[]) => any>;
-        export let headerAddons: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        export let headerAddons: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { SessionManagerProps as sessionManagerProps };
         export let links: PropTypes.Requireable<NonNullable<any[] | ((...args: any[]) => any) | null | undefined>>;
         export let showDomainWarningDialog: PropTypes.Requireable<boolean>;

package/lib/Footer/links.d.ts

@@ -4,7 +4,7 @@ import { default as PropTypes } from 'prop-types';
  */
 declare function Links({ links, flowLayout, columns, ...rest }: {
     [x: string]: any;
-    links?: any[] | undefined;
+    links?: never[] | undefined;
     flowLayout?: boolean | undefined;
     columns: any;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,36 +1,40 @@
-import { jsxs as y, Fragment as L, jsx as t } from "react/jsx-runtime";
-import { lazy as I, memo as re, createElement as ie, useState as D, useRef as ae, useEffect as le, useMemo as F } from "react";
-import { Icon as de } from "@iconify/react";
-import { Backdrop as ce, Box as m, useMediaQuery as se, SwipeableDrawer as pe, Typography as N, Tooltip as me } from "@mui/material";
-import ue from "@emotion/styled";
-import j from "@arcblock/ux/lib/Button";
-import T, { detectCountryFromPhone as M, getCountryNameByCountry as he, validatePhoneNumber as fe, getDialCodeByCountry as ye } from "@arcblock/ux/lib/PhoneInput";
+import { jsxs as y, Fragment as B, jsx as t } from "react/jsx-runtime";
+import { memo as te, createElement as re, useState as R, useRef as ie, useEffect as ae, useMemo as D } from "react";
+import { Icon as le } from "@iconify/react";
+import { Backdrop as de, Box as m, useMediaQuery as ce, SwipeableDrawer as pe, Typography as L, Tooltip as se } from "@mui/material";
+import me from "@emotion/styled";
+import N from "@arcblock/ux/lib/Button";
+import F, { detectCountryFromPhone as T, getCountryNameByCountry as ue, validatePhoneNumber as he, getDialCodeByCountry as fe } from "@arcblock/ux/lib/PhoneInput";
 import v from "lodash/cloneDeep";
-import xe from "lodash/omit";
-import { mergeSx as be } from "@arcblock/ux/lib/Util/style";
-import { LOGIN_PROVIDER as $ } from "@arcblock/ux/lib/Util/constant";
-import { useReactive as w, useCreation as k, useMemoizedFn as ge } from "ahooks";
-import { translate as Ce } from "@arcblock/ux/lib/Locale/util";
-import ve from "validator/lib/isEmail";
-import G from "validator/lib/isPostalCode";
-import { useLocaleContext as we } from "@arcblock/ux/lib/Locale/context";
-import { useBrowser as ke } from "@arcblock/react-hooks";
-import Ee from "@arcblock/ux/lib/UserCard/Content/clock";
-import { translations as Ie } from "../../libs/locales.js";
-import g, { inputFieldStyle as ze, commonInputStyle as Pe } from "../editable-field.js";
-import { LinkPreviewInput as Ve } from "./link-preview-input.js";
-import { defaultButtonStyle as H, primaryButtonStyle as Be } from "./utils.js";
-import { TimezoneSelect as Le } from "./timezone-select.js";
-import Ne from "./address.js";
-const je = I(() => import("@arcblock/icons/lib/Location")), Ae = I(() => import("@arcblock/icons/lib/Timezone")), Se = I(() => import("@arcblock/icons/lib/Email")), Oe = I(() => import("@arcblock/icons/lib/Phone")), E = {
+import ye from "lodash/omit";
+import { mergeSx as xe } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER as M } from "@arcblock/ux/lib/Util/constant";
+import { useReactive as w, useCreation as k, useMemoizedFn as be } from "ahooks";
+import { translate as ge } from "@arcblock/ux/lib/Locale/util";
+import Ce from "validator/lib/isEmail";
+import $ from "validator/lib/isPostalCode";
+import { useLocaleContext as ve } from "@arcblock/ux/lib/Locale/context";
+import { useBrowser as we } from "@arcblock/react-hooks";
+import ke from "@arcblock/ux/lib/UserCard/Content/clock";
+import Ee from "@arcblock/icons/lib/Email";
+import Ie from "@arcblock/icons/lib/Phone";
+import Pe from "@arcblock/icons/lib/Timezone";
+import ze from "@arcblock/icons/lib/Location";
+import { translations as Ve } from "../../libs/locales.js";
+import g, { inputFieldStyle as Be, commonInputStyle as Le } from "../editable-field.js";
+import { LinkPreviewInput as Ne } from "./link-preview-input.js";
+import { defaultButtonStyle as G, primaryButtonStyle as je } from "./utils.js";
+import { TimezoneSelect as Ae } from "./timezone-select.js";
+import Se from "./address.js";
+const E = {
   width: 20,
   height: 20
-}, Q = 200, U = re(function({
+}, H = 200, Q = te(function({
   ref: r,
-  ...z
+  ...I
 }) {
-  return /* @__PURE__ */ ie(
-    ce,
+  return /* @__PURE__ */ re(
+    de,
     {
       ref: r,
       component: "div",
@@ -39,19 +43,19 @@ const je = I(() => import("@arcblock/icons/lib/Location")), Ae = I(() => import(
         backdropFilter: "blur(3px)",
         touchAction: "none"
       },
-      ...z,
+      ...I,
       key: "background"
     }
   );
 });
-U.displayName = "BackdropWrap";
-function co({
-  isMyself: s,
+Q.displayName = "BackdropWrap";
+function mo({
+  isMyself: p,
   user: r,
-  onSave: z,
+  onSave: I,
   isMobile: x
 }) {
-  const [Y, P] = D(!1), [_, C] = D(!1), q = ae(null), J = ke(), b = se("(max-width:640px)") || J.mobile.any, c = w({
+  const [U, P] = R(!1), [Y, C] = R(!1), _ = ie(null), q = we(), b = ce("(max-width:640px)") || q.mobile.any, c = w({
     email: "",
     phone: ""
   }), u = w({
@@ -62,10 +66,10 @@ function co({
     line2: "",
     postalCode: ""
   });
-  le(() => {
+  ae(() => {
     b || C(!1);
   }, [b]);
-  const A = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), S = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: V } = we(), d = ge((o, n = {}) => Ce(Ie, o, V, "en", n)), a = w(
+  const j = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), A = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: z } = ve(), d = be((o, n = {}) => ge(Ve, o, z, "en", n)), a = w(
     r?.metadata ? v(r.metadata) : {
       joinedAt: r?.createdAt,
       email: r?.email,
@@ -83,20 +87,20 @@ function co({
       line2: "",
       postalCode: ""
     }
-  ), K = k(() => !!r?.address, [r?.address?.country]), h = F(() => r?.address?.country ? r.address.country : V === "zh" ? "cn" : "us", [r?.address?.country, V]), B = k(() => {
+  ), J = k(() => !!r?.address, [r?.address?.country]), h = D(() => r?.address?.country ? r.address.country : z === "zh" ? "cn" : "us", [r?.address?.country, z]), V = k(() => {
     const o = a.phone ?? r?.phone ?? {
       country: h,
       phone: ""
     };
     if (o && typeof o == "string")
       return {
-        country: M(o) || h,
+        country: T(o) || h,
         phone: o
       };
     if (o && typeof o == "object") {
       const { country: n = "", phoneNumber: e = "" } = o;
       return {
-        country: n || M(e) || "",
+        country: n || T(e) || "",
         phone: e || ""
       };
     }
@@ -104,13 +108,13 @@ function co({
       country: h,
       phone: ""
     };
-  }, [a.phone, r?.phone, h]), p = (o, n) => {
+  }, [a.phone, r?.phone, h]), s = (o, n) => {
     a[n] = o;
-  }, X = (o, n) => {
-    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !G(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
-  }, O = () => {
+  }, K = (o, n) => {
+    l[o] = n, o === "city" && s(n, "location"), o === "postalCode" ? u.postalCode = n && !$(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
+  }, S = () => {
     b ? C(!0) : P(!0);
-  }, W = () => {
+  }, O = () => {
     const o = v(r?.metadata) ?? {};
     o && Object.keys(a).forEach((e) => {
       const i = e;
@@ -125,10 +129,10 @@ function co({
         e[i] = "";
       });
     }), b ? C(!1) : P(!1);
-  }, Z = F(() => {
+  }, X = D(() => {
     const o = a?.links?.map((n) => n.url) || [""];
     return o.length > 0 ? o : [""];
-  }, [a.links]), ee = (o) => {
+  }, [a.links]), Z = (o) => {
     const n = o.map((e) => {
       if (!e)
         return {
@@ -143,23 +147,23 @@ function co({
         favicon: e
       };
     });
-    p(n, "links");
-  }, oe = () => {
+    s(n, "links");
+  }, ee = () => {
     if (Object.keys(a).forEach((n) => {
       const e = n, i = a[e];
-      if (i && typeof i == "string" && (a[e] = i.trim()), e === "bio" && (a[e] = a[e]?.slice(0, Q)), e === "timezone" && (a[e] = i || ""), e === "phone" && i && typeof i == "object") {
-        const f = i, ne = ye(f.country), te = (f.phoneNumber?.replace(new RegExp(`^\\+${ne}`), "") || "")?.trim().length > 0;
+      if (i && typeof i == "string" && (a[e] = i.trim()), e === "bio" && (a[e] = a[e]?.slice(0, H)), e === "timezone" && (a[e] = i || ""), e === "phone" && i && typeof i == "object") {
+        const f = i, oe = fe(f.country), ne = (f.phoneNumber?.replace(new RegExp(`^\\+${oe}`), "") || "")?.trim().length > 0;
         a[e] = {
           country: f.country,
-          ...te ? { phoneNumber: f.phoneNumber } : {}
+          ...ne ? { phoneNumber: f.phoneNumber } : {}
         };
       }
-    }), l.postalCode && !G(l.postalCode, "any") && (u.postalCode = d("profile.address.invalidPostalCode")), [c, u].some((n) => Object.values(n).some((e) => e)))
+    }), l.postalCode && !$(l.postalCode, "any") && (u.postalCode = d("profile.address.invalidPostalCode")), [c, u].some((n) => Object.values(n).some((e) => e)))
       return;
-    const o = xe(l, "detailedAddress");
-    o.country || (o.country = h), z({ metadata: a, address: o }), P(!1), C(!1);
-  }, R = (o, n = "self") => /* @__PURE__ */ y(
-    We,
+    const o = ye(l, "detailedAddress");
+    o.country || (o.country = h), I({ metadata: a, address: o }), P(!1), C(!1);
+  }, W = (o, n = "self") => /* @__PURE__ */ y(
+    Oe,
     {
       pt: 2,
       display: "flex",
@@ -172,54 +176,54 @@ function co({
           g,
           {
             value: a.bio ?? "",
-            onChange: (e) => p(e, "bio"),
+            onChange: (e) => s(e, "bio"),
             editable: o,
             placeholder: "Bio",
             component: "textarea",
             inline: !1,
             rows: 3,
             label: d("profile.bio"),
-            maxLength: Q,
+            maxLength: H,
             style: {
               ...o ? { marginBottom: 8 } : {}
             }
           }
         ),
-        !o && s ? /* @__PURE__ */ t(
-          j,
+        !o && p ? /* @__PURE__ */ t(
+          N,
           {
             size: x ? "small" : "large",
             variant: "outlined",
             sx: {
-              ...H,
+              ...G,
               mb: x ? "4px" : 2,
               mt: x ? "4px" : 2,
               height: x ? "32px" : "40px"
             },
-            onClick: O,
+            onClick: S,
             fullWidth: !0,
             children: d("profile.editProfile")
           }
         ) : null,
-        o && s && K ? /* @__PURE__ */ t(
-          Ne,
+        o && p && J ? /* @__PURE__ */ t(
+          Se,
           {
             address: l,
             errors: u,
-            handleChange: X,
+            handleChange: K,
             defaultCountry: h
           }
         ) : /* @__PURE__ */ t(
           g,
           {
             value: a.location ?? r?.address?.city ?? "",
-            onChange: (e) => p(e, "location"),
+            onChange: (e) => s(e, "location"),
             editable: o,
             placeholder: "Location",
             label: d("profile.location"),
-            tooltip: s && (l.line1 || l.line2) ? /* @__PURE__ */ t(L, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
+            tooltip: p && (l.line1 || l.line2) ? /* @__PURE__ */ t(B, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
               /* @__PURE__ */ t(
-                N,
+                L,
                 {
                   variant: "caption",
                   component: "p",
@@ -230,30 +234,30 @@ function co({
                   children: d(`profile.address.${e}`)
                 }
               ),
-              /* @__PURE__ */ t(N, { variant: "caption", component: "span", children: l[e] })
+              /* @__PURE__ */ t(L, { variant: "caption", component: "span", children: l[e] })
             ] }, e) : null) }) : null,
             renderValue: () => {
-              const i = [l?.country ? he(l?.country) : "", l.province, l.city || a.location || ""].filter(Boolean).join(" ");
-              return /* @__PURE__ */ t(N, { component: "span", children: i });
+              const i = [l?.country ? ue(l?.country) : "", l.province, l.city || a.location || ""].filter(Boolean).join(" ");
+              return /* @__PURE__ */ t(L, { component: "span", children: i });
             },
-            icon: /* @__PURE__ */ t(je, { ...E })
+            icon: /* @__PURE__ */ t(ze, { ...E })
           }
         ),
         /* @__PURE__ */ t(
           g,
           {
             value: a.timezone || "",
-            onChange: (e) => p(e, "timezone"),
+            onChange: (e) => s(e, "timezone"),
             editable: o,
             placeholder: "timezone",
-            icon: /* @__PURE__ */ t(Ae, { ...E }),
+            icon: /* @__PURE__ */ t(Pe, { ...E }),
             label: d("profile.timezone"),
-            renderValue: (e) => /* @__PURE__ */ t(Ee, { value: e }),
+            renderValue: (e) => /* @__PURE__ */ t(ke, { value: e }),
             children: /* @__PURE__ */ t(
-              Le,
+              Ae,
               {
                 value: a.timezone ?? "",
-                onChange: (e) => p(e, "timezone"),
+                onChange: (e) => s(e, "timezone"),
                 disabled: !o,
                 mode: n
               }
@@ -265,18 +269,18 @@ function co({
           {
             value: a.email ?? r?.email ?? "",
             editable: o,
-            hidePreview: !s,
-            disabled: r?.sourceProvider === $.EMAIL,
-            canEdit: !S,
-            verified: S,
+            hidePreview: !p,
+            disabled: r?.sourceProvider === M.EMAIL,
+            canEdit: !A,
+            verified: A,
             placeholder: "Email",
-            icon: /* @__PURE__ */ t(Se, { ...E }),
-            label: /* @__PURE__ */ y(L, { children: [
+            icon: /* @__PURE__ */ t(Ee, { ...E }),
+            label: /* @__PURE__ */ y(B, { children: [
               d("profile.email"),
-              r?.sourceProvider === $.EMAIL ? /* @__PURE__ */ t(me, { title: d("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ t(
+              r?.sourceProvider === M.EMAIL ? /* @__PURE__ */ t(se, { title: d("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ t(
                 m,
                 {
-                  component: de,
+                  component: le,
                   icon: "mdi:info-outline",
                   sx: {
                     verticalAlign: "middle",
@@ -285,9 +289,9 @@ function co({
                 }
               ) }) : null
             ] }),
-            onChange: (e) => p(e, "email"),
+            onChange: (e) => s(e, "email"),
             errorMsg: c.email,
-            renderValue: (e) => s ? /* @__PURE__ */ t(
+            renderValue: (e) => p ? /* @__PURE__ */ t(
               "a",
               {
                 href: `mailto:${e}`,
@@ -300,25 +304,25 @@ function co({
             ) : null,
             onValueValidate: (e) => {
               let i = "";
-              e && !ve(e) && (i = d("profile.emailInvalid")), c.email = i;
+              e && !Ce(e) && (i = d("profile.emailInvalid")), c.email = i;
             }
           }
         ),
         /* @__PURE__ */ t(
           g,
           {
-            value: B.phone,
+            value: V.phone,
             editable: o,
-            hidePreview: !s,
-            canEdit: !A,
-            verified: A,
+            hidePreview: !p,
+            canEdit: !j,
+            verified: j,
             placeholder: "Phone",
-            icon: /* @__PURE__ */ t(Oe, { ...E }),
-            onChange: (e) => p(e, "phone"),
+            icon: /* @__PURE__ */ t(Ie, { ...E }),
+            onChange: (e) => s(e, "phone"),
             label: d("profile.phone"),
-            renderValue: () => s ? /* @__PURE__ */ t(T, { value: B, preview: !0 }) : null,
+            renderValue: () => p ? /* @__PURE__ */ t(F, { value: V, preview: !0 }) : null,
             children: /* @__PURE__ */ t(
-              T,
+              F,
               {
                 variant: "outlined",
                 className: "editable-field",
@@ -326,12 +330,12 @@ function co({
                   sx: { backgroundColor: "transparent" },
                   placeholder: "Phone"
                 },
-                value: B,
+                value: V,
                 error: !!c.phone,
                 helperText: c.phone,
-                sx: be(ze, c.phone ? {} : Pe),
+                sx: xe(Be, c.phone ? {} : Le),
                 onChange: (e) => {
-                  fe(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
+                  he(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), s(
                     {
                       country: e.country,
                       phoneNumber: e.phone
@@ -343,8 +347,8 @@ function co({
             )
           }
         ),
-        /* @__PURE__ */ t(Ve, { editable: o, links: Z, onChange: ee }),
-        o && s ? /* @__PURE__ */ y(
+        /* @__PURE__ */ t(Ne, { editable: o, links: X, onChange: Z }),
+        o && p ? /* @__PURE__ */ y(
           m,
           {
             style: { width: "100%" },
@@ -356,31 +360,31 @@ function co({
             },
             children: [
               /* @__PURE__ */ t(
-                j,
+                N,
                 {
                   fullWidth: n === "drawer",
                   size: "small",
                   variant: "outlined",
-                  sx: { ...H, minWidth: "54px" },
-                  onClick: W,
+                  sx: { ...G, minWidth: "54px" },
+                  onClick: O,
                   children: d("common.cancel")
                 }
               ),
               /* @__PURE__ */ t(
-                j,
+                N,
                 {
                   fullWidth: n === "drawer",
                   size: "small",
                   disabled: !!c.email || !!c.phone,
                   variant: "outlined",
                   sx: {
-                    ...Be,
+                    ...je,
                     minWidth: "54px",
                     "&.Mui-disabled": {
                       backgroundColor: "rgba(0, 0, 0, 0.12)"
                     }
                   },
-                  onClick: oe,
+                  onClick: ee,
                   children: d("common.save")
                 }
               )
@@ -390,8 +394,8 @@ function co({
       ]
     }
   );
-  return /* @__PURE__ */ y(L, { children: [
-    R(Y),
+  return /* @__PURE__ */ y(B, { children: [
+    W(U),
     b && /* @__PURE__ */ y(
       pe,
       {
@@ -399,12 +403,12 @@ function co({
           zIndex: 9999
         },
         disableSwipeToOpen: !0,
-        onOpen: O,
-        open: _,
+        onOpen: S,
+        open: Y,
         anchor: "bottom",
-        onClose: W,
+        onClose: O,
         slots: {
-          backdrop: U
+          backdrop: Q
         },
         slotProps: {
           paper: {
@@ -421,7 +425,7 @@ function co({
           /* @__PURE__ */ t(
             m,
             {
-              ref: q,
+              ref: _,
               sx: {
                 padding: "16px 32px",
                 margin: "-8px auto -16px",
@@ -448,7 +452,7 @@ function co({
                 maxHeight: "500px",
                 overflowY: "auto"
               },
-              children: R(!0, "drawer")
+              children: W(!0, "drawer")
             }
           )
         ]
@@ -456,7 +460,7 @@ function co({
     )
   ] });
 }
-const We = ue(m)`
+const Oe = me(m)`
   width: 100%;
 
   .MuiOutlinedInput-root {
@@ -495,5 +499,5 @@ const We = ue(m)`
   }
 `;
 export {
-  co as default
+  mo as default
 };

package/lib/UserCenter/components/user-info/user-basic-info.d.ts

@@ -11,4 +11,4 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     onlyProfile?: boolean;
     refreshProfile: () => void;
     isShowSocialActions?: boolean;
-} & BoxProps): import("react/jsx-runtime").JSX.Element | null;
+} & BoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -56,10 +56,7 @@ function Rt({
       }
   }, b = () => {
     w(!d);
-  };
-  if (!t)
-    return null;
-  const E = async (i) => {
+  }, E = async (i) => {
     if (!o)
       return;
     const { metadata: e, address: B } = i;

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

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.2.13",
+  "version": "3.2.15",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,14 +33,13 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@abtnode/constant": "1.17.4",
-    "@abtnode/util": "1.17.4",
-    "@arcblock/bridge": "3.2.13",
-    "@arcblock/icons": "3.2.13",
-    "@arcblock/react-hooks": "3.2.13",
-    "@arcblock/ws": "^1.27.14",
-    "@blocklet/constant": "1.17.4",
-    "@blocklet/did-space-react": "^1.2.9",
+    "@abtnode/constant": "^1.17.5",
+    "@abtnode/util": "^1.17.5",
+    "@arcblock/bridge": "3.2.15",
+    "@arcblock/icons": "3.2.15",
+    "@arcblock/react-hooks": "3.2.15",
+    "@arcblock/ws": "^1.27.15",
+    "@blocklet/did-space-react": "^1.2.10",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -71,7 +70,7 @@
   "peerDependencies": {
     "@arcblock/did-connect-react": "^3.1.0",
     "@arcblock/ux": "^3.1.0",
-    "@blocklet/js-sdk": "^1.16.46",
+    "@blocklet/js-sdk": "^1.17.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.2.0",
@@ -83,7 +82,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.13",
+    "@arcblock/did-connect-react": "3.2.15",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -91,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "2d0b666c40b2ba155594522f69dc122a658cb41a"
+  "gitHead": "b58ce4d5e4db14f8ece4a980206521ea8c0d6909"
 }

package/src/UserCenter/components/user-info/metadata.tsx

@@ -16,7 +16,7 @@ import omit from 'lodash/omit';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import { useMemo, useRef, useState, memo, useEffect, lazy } from 'react';
+import { useMemo, useRef, useState, memo, useEffect } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import isEmail from 'validator/lib/isEmail';
 import isPostalCode from 'validator/lib/isPostalCode';
@@ -24,6 +24,11 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useBrowser } from '@arcblock/react-hooks';
 import Clock from '@arcblock/ux/lib/UserCard/Content/clock';
 
+import EmailIcon from '@arcblock/icons/lib/Email';
+import PhoneIcon from '@arcblock/icons/lib/Phone';
+import TimezoneIcon from '@arcblock/icons/lib/Timezone';
+import LocationIcon from '@arcblock/icons/lib/Location';
+
 import { translations } from '../../libs/locales';
 import type { User, UserAddress, UserMetadata, UserPhoneProps } from '../../../@types';
 import EditableField, { commonInputStyle, inputFieldStyle } from '../editable-field';
@@ -32,11 +37,6 @@ import { defaultButtonStyle, primaryButtonStyle } from './utils';
 import { TimezoneSelect } from './timezone-select';
 import AddressEditor from './address';
 
-const LocationIcon = lazy(() => import('@arcblock/icons/lib/Location'));
-const TimezoneIcon = lazy(() => import('@arcblock/icons/lib/Timezone'));
-const EmailIcon = lazy(() => import('@arcblock/icons/lib/Email'));
-const PhoneIcon = lazy(() => import('@arcblock/icons/lib/Phone'));
-
 const iconSize = {
   width: 20,
   height: 20,

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -94,10 +94,6 @@ export default function UserBasicInfo({
     setExpanded(!expanded);
   };
 
-  if (!user) {
-    return null;
-  }
-
   const onSave = async (v: { metadata: UserMetadata; address: UserAddress }) => {
     if (!isMyself) {
       return;