@blocklet/ui-react 2.13.70 → 3.0.1

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

@@ -1,78 +1,61 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
-import { Icon } from "@iconify/react";
-import { Box, Backdrop, useMediaQuery, SwipeableDrawer, Typography, Tooltip } from "@mui/material";
-import styled from "@emotion/styled";
-import { joinURL } from "ufo";
-import Button from "@arcblock/ux/lib/Button";
-import PhoneInput, {
-  validatePhoneNumber,
-  getDialCodeByCountry,
-  getCountryNameByCountry,
-  detectCountryFromPhone
-} from "@arcblock/ux/lib/PhoneInput";
-import cloneDeep from "lodash/cloneDeep";
-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, forwardRef, useEffect, lazy } from "react";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import isEmail from "validator/lib/isEmail";
-import isPostalCode from "validator/lib/isPostalCode";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useBrowser } from "@arcblock/react-hooks";
-import Clock from "@arcblock/ux/lib/UserCard/Content/clock";
-import { translations } from "../../libs/locales.js";
-import EditableField, { commonInputStyle, inputFieldStyle } from "../editable-field.js";
-import { LinkPreviewInput } from "./link-preview-input.js";
-import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from "./utils.js";
-import { TimezoneSelect } from "./timezone-select.js";
-import AddressEditor from "./address.js";
-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 = {
+import { jsxs as x, Fragment as A, jsx as a } from "react/jsx-runtime";
+import { lazy as P, memo as mo, createElement as ho, useState as H, useRef as fo, useEffect as so, useMemo as Q } from "react";
+import { Icon as yo } from "@iconify/react";
+import { Backdrop as xo, Box as f, useMediaQuery as bo, SwipeableDrawer as uo, Typography as S, Tooltip as go } from "@mui/material";
+import Co from "@emotion/styled";
+import O from "@arcblock/ux/lib/Button";
+import U, { detectCountryFromPhone as Y, getCountryNameByCountry as vo, validatePhoneNumber as wo, getDialCodeByCountry as ko } from "@arcblock/ux/lib/PhoneInput";
+import k from "lodash/cloneDeep";
+import Eo from "lodash/omit";
+import { mergeSx as Io } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER as _ } from "@arcblock/ux/lib/Util/constant";
+import { useReactive as E, useCreation as I, useMemoizedFn as zo } from "ahooks";
+import { translate as Po } from "@arcblock/ux/lib/Locale/util";
+import Vo from "validator/lib/isEmail";
+import q from "validator/lib/isPostalCode";
+import { useLocaleContext as Bo } from "@arcblock/ux/lib/Locale/context";
+import { useBrowser as Lo } from "@arcblock/react-hooks";
+import No from "@arcblock/ux/lib/UserCard/Content/clock";
+import { translations as jo } from "../../libs/locales.js";
+import g, { inputFieldStyle as Ao, commonInputStyle as So } from "../editable-field.js";
+import { LinkPreviewInput as Oo } from "./link-preview-input.js";
+import { defaultButtonStyle as J, currentTimezone as R, primaryButtonStyle as Ro } from "./utils.js";
+import { TimezoneSelect as Do } from "./timezone-select.js";
+import Wo from "./address.js";
+const To = P(() => import("@arcblock/icons/lib/Location")), Fo = P(() => import("@arcblock/icons/lib/Timezone")), Mo = P(() => import("@arcblock/icons/lib/Email")), $o = P(() => import("@arcblock/icons/lib/Phone")), z = {
   width: 20,
   height: 20
-};
-const bioMaxLength = 200;
-const BackdropWrap = memo(
-  forwardRef(function BackdropWrap2(backdropProps, ref) {
-    return /* @__PURE__ */ createElement(
-      Backdrop,
-      {
-        ref,
-        component: "div",
-        style: {
-          backgroundColor: "rgba(0, 0, 0, 0.6)",
-          backdropFilter: "blur(3px)",
-          touchAction: "none"
-        },
-        ...backdropProps,
-        key: "background"
-      }
-    );
-  })
-);
-BackdropWrap.displayName = "BackdropWrap";
-export default function UserMetadataComponent({
-  isMyself,
-  user,
-  onSave,
-  isMobile
+}, K = 200, X = mo(function({
+  ref: o,
+  ...V
+}) {
+  return /* @__PURE__ */ ho(
+    xo,
+    {
+      ref: o,
+      component: "div",
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(3px)",
+        touchAction: "none"
+      },
+      ...V,
+      key: "background"
+    }
+  );
+});
+X.displayName = "BackdropWrap";
+function se({
+  isMyself: m,
+  user: o,
+  onSave: V,
+  isMobile: b
 }) {
-  const [editable, setEditable] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const drawerDragger = useRef(null);
-  const browser = useBrowser();
-  const isMobileView = useMediaQuery("(max-width:640px)") || browser.mobile.any;
-  const validateMsg = useReactive({
+  var $, G;
+  const [Z, B] = H(!1), [oo, C] = H(!1), eo = fo(null), no = Lo(), u = bo("(max-width:640px)") || no.mobile.any, p = E({
     email: "",
     phone: ""
-  });
-  const addressValidateMsg = useReactive({
+  }), s = E({
     country: "",
     province: "",
     city: "",
@@ -80,33 +63,20 @@ export default function UserMetadataComponent({
     line2: "",
     postalCode: ""
   });
-  useEffect(() => {
-    if (!isMobileView) {
-      setVisible(false);
-    }
-  }, [isMobileView]);
-  const phoneVerified = useCreation(() => {
-    return user?.phoneVerified ?? false;
-  }, [user?.phoneVerified]);
-  const emailVerified = useCreation(() => {
-    return user?.emailVerified ?? false;
-  }, [user?.emailVerified]);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const metadata = useReactive(
-    user?.metadata ? cloneDeep(user.metadata) : {
-      joinedAt: user?.createdAt,
-      email: user?.email,
+  so(() => {
+    u || C(!1);
+  }, [u]);
+  const D = I(() => (o == null ? void 0 : o.phoneVerified) ?? !1, [o == null ? void 0 : o.phoneVerified]), W = I(() => (o == null ? void 0 : o.emailVerified) ?? !1, [o == null ? void 0 : o.emailVerified]), { locale: L } = Bo(), c = zo((n, i = {}) => Po(jo, n, L, "en", i)), l = E(
+    o != null && o.metadata ? k(o.metadata) : {
+      joinedAt: o == null ? void 0 : o.createdAt,
+      email: o == null ? void 0 : o.email,
       phone: {
         country: "cn",
-        phoneNumber: user?.phone ?? ""
+        phoneNumber: (o == null ? void 0 : o.phone) ?? ""
       }
     }
-  );
-  const address = useReactive(
-    user?.address ? cloneDeep(user.address) : {
+  ), r = E(
+    o != null && o.address ? k(o.address) : {
       country: "",
       province: "",
       city: "",
@@ -114,269 +84,208 @@ export default function UserMetadataComponent({
       line2: "",
       postalCode: ""
     }
-  );
-  const isSupportAddress = useCreation(() => {
-    return !!user?.address;
-  }, [user?.address?.country]);
-  const defaultCountry = useMemo(() => {
-    if (user?.address?.country) {
-      return user.address.country;
-    }
-    return locale === "zh" ? "cn" : "us";
-  }, [user?.address?.country, locale]);
-  const phoneValue = useCreation(() => {
-    const phone = metadata.phone ?? user?.phone ?? {
-      country: defaultCountry,
+  ), to = I(() => !!(o != null && o.address), [($ = o == null ? void 0 : o.address) == null ? void 0 : $.country]), y = Q(() => {
+    var n;
+    return (n = o == null ? void 0 : o.address) != null && n.country ? o.address.country : L === "zh" ? "cn" : "us";
+  }, [(G = o == null ? void 0 : o.address) == null ? void 0 : G.country, L]), N = I(() => {
+    const n = l.phone ?? (o == null ? void 0 : o.phone) ?? {
+      country: y,
       phone: ""
     };
-    if (phone && typeof phone === "string") {
-      const detectedCountry = detectCountryFromPhone(phone);
+    if (n && typeof n == "string")
       return {
-        country: detectedCountry || defaultCountry,
-        phone
+        country: Y(n) || y,
+        phone: n
       };
-    }
-    if (phone && typeof phone === "object") {
-      const { country: phoneCountry = "", phoneNumber = "" } = phone;
-      const detectedCountry = !phoneCountry ? detectCountryFromPhone(phoneNumber) || "" : phoneCountry;
+    if (n && typeof n == "object") {
+      const { country: i = "", phoneNumber: t = "" } = n;
       return {
-        country: detectedCountry,
-        phone: phoneNumber || ""
+        country: i || Y(t) || "",
+        phone: t || ""
       };
     }
     return {
-      country: defaultCountry,
+      country: y,
       phone: ""
     };
-  }, [metadata.phone, user?.phone, defaultCountry]);
-  const onChange = (v, field) => {
-    metadata[field] = v;
-  };
-  const onAddressChange = (field, value) => {
-    address[field] = value;
-    if (field === "city") {
-      onChange(value, "location");
-    }
-    if (field === "postalCode") {
-      addressValidateMsg.postalCode = value && !isPostalCode(value, "any") ? t("profile.address.invalidPostalCode") : "";
-    } else {
-      addressValidateMsg[field] = "";
-    }
-  };
-  const onEdit = () => {
-    if (!isMobileView) {
-      setEditable(true);
-    } else {
-      setVisible(true);
-    }
-  };
-  const onCancel = () => {
-    const defaultMetadata = cloneDeep(user?.metadata) ?? {};
-    if (defaultMetadata) {
-      Object.keys(metadata).forEach((key) => {
-        const k = key;
-        metadata[k] = defaultMetadata[k];
-      });
-    }
-    const defaultAddress = cloneDeep(user?.address) ?? {};
-    if (defaultAddress) {
-      Object.keys(address).forEach((key) => {
-        const k = key;
-        address[k] = defaultAddress[k];
-      });
-    }
-    [validateMsg, addressValidateMsg].forEach((o) => {
-      Object.keys(o).forEach((key) => {
-        o[key] = "";
-      });
+  }, [l.phone, o == null ? void 0 : o.phone, y]), h = (n, i) => {
+    l[i] = n;
+  }, io = (n, i) => {
+    r[n] = i, n === "city" && h(i, "location"), n === "postalCode" ? s.postalCode = i && !q(i, "any") ? c("profile.address.invalidPostalCode") : "" : s[n] = "";
+  }, T = () => {
+    u ? C(!0) : B(!0);
+  }, F = () => {
+    const n = k(o == null ? void 0 : o.metadata) ?? {};
+    n && Object.keys(l).forEach((t) => {
+      const e = t;
+      l[e] = n[e];
     });
-    if (!isMobileView) {
-      setEditable(false);
-    } else {
-      setVisible(false);
-    }
-  };
-  const links = useMemo(() => {
-    const defaultLinks = metadata?.links?.map((link) => link.url) || [""];
-    return defaultLinks.length > 0 ? defaultLinks : [""];
-  }, [metadata.links]);
-  const handleLinksChange = (values) => {
-    const newLinks = values.map((link) => {
-      if (!link) {
-        return {
-          url: link
-        };
-      }
-      const targetLink = metadata.links?.find((l) => l.url === link);
-      if (targetLink) {
+    const i = k(o == null ? void 0 : o.address) ?? {};
+    i && Object.keys(r).forEach((t) => {
+      const e = t;
+      r[e] = i[e];
+    }), [p, s].forEach((t) => {
+      Object.keys(t).forEach((e) => {
+        t[e] = "";
+      });
+    }), u ? C(!1) : B(!1);
+  }, ao = Q(() => {
+    var i;
+    const n = ((i = l == null ? void 0 : l.links) == null ? void 0 : i.map((t) => t.url)) || [""];
+    return n.length > 0 ? n : [""];
+  }, [l.links]), lo = (n) => {
+    const i = n.map((t) => {
+      var d;
+      if (!t)
         return {
-          ...targetLink,
-          url: link
+          url: t
         };
-      }
-      return {
-        url: link,
-        favicon: joinURL(link, "favicon.ico")
+      const e = (d = l.links) == null ? void 0 : d.find((v) => v.url === t);
+      return e ? {
+        ...e,
+        url: t
+      } : {
+        url: t,
+        favicon: t
       };
     });
-    onChange(newLinks, "links");
-  };
-  const handleSave = () => {
-    Object.keys(metadata).forEach((key) => {
-      const k = key;
-      const value = metadata[k];
-      if (value && typeof value === "string") {
-        metadata[k] = value.trim();
-      }
-      if (k === "bio") {
-        metadata[k] = metadata[k]?.slice(0, bioMaxLength);
-      }
-      if (k === "timezone") {
-        metadata[k] = value || currentTimezone;
-      }
-      if (k === "phone" && value && typeof value === "object") {
-        const phoneInput = value;
-        const dialCode = getDialCodeByCountry(phoneInput.country);
-        const phoneWithoutCode = phoneInput.phoneNumber?.replace(new RegExp(`^\\+${dialCode}`), "") || "";
-        const hasActualPhoneNumber = phoneWithoutCode?.trim().length > 0;
-        metadata[k] = {
-          country: phoneInput.country,
-          ...hasActualPhoneNumber ? { phoneNumber: phoneInput.phoneNumber } : {}
+    h(i, "links");
+  }, ro = () => {
+    if (Object.keys(l).forEach((i) => {
+      var d, v;
+      const t = i, e = l[t];
+      if (e && typeof e == "string" && (l[t] = e.trim()), t === "bio" && (l[t] = (d = l[t]) == null ? void 0 : d.slice(0, K)), t === "timezone" && (l[t] = e || R), t === "phone" && e && typeof e == "object") {
+        const w = e, co = ko(w.country), j = ((v = w.phoneNumber) == null ? void 0 : v.replace(new RegExp(`^\\+${co}`), "")) || "", po = (j == null ? void 0 : j.trim().length) > 0;
+        l[t] = {
+          country: w.country,
+          ...po ? { phoneNumber: w.phoneNumber } : {}
         };
       }
-    });
-    if (address.postalCode && !isPostalCode(address.postalCode, "any")) {
-      addressValidateMsg.postalCode = t("profile.address.invalidPostalCode");
-    }
-    if ([validateMsg, addressValidateMsg].some((o) => Object.values(o).some((e) => e))) {
+    }), r.postalCode && !q(r.postalCode, "any") && (s.postalCode = c("profile.address.invalidPostalCode")), [p, s].some((i) => Object.values(i).some((t) => t)))
       return;
-    }
-    const newAddress = omit(address, "detailedAddress");
-    if (!newAddress.country) {
-      newAddress.country = defaultCountry;
-    }
-    onSave({ metadata, address: newAddress });
-    setEditable(false);
-    setVisible(false);
-  };
-  const renderEdit = (editing, mode = "self") => {
-    return /* @__PURE__ */ jsxs(
-      MetadataInfo,
+    const n = Eo(r, "detailedAddress");
+    n.country || (n.country = y), V({ metadata: l, address: n }), B(!1), C(!1);
+  }, M = (n, i = "self") => {
+    var t;
+    return /* @__PURE__ */ x(
+      Go,
       {
         pt: 2,
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
         alignItems: "flex-start",
-        gap: !isMobile ? "16px" : "4px",
+        gap: b ? "4px" : "16px",
         children: [
-          /* @__PURE__ */ jsx(
-            EditableField,
+          /* @__PURE__ */ a(
+            g,
             {
-              value: metadata.bio ?? "",
-              onChange: (value) => onChange(value, "bio"),
-              editable: editing,
+              value: l.bio ?? "",
+              onChange: (e) => h(e, "bio"),
+              editable: n,
               placeholder: "Bio",
               component: "textarea",
-              inline: false,
+              inline: !1,
               rows: 3,
-              label: t("profile.bio"),
-              maxLength: bioMaxLength,
+              label: c("profile.bio"),
+              maxLength: K,
               style: {
-                ...editing ? { marginBottom: 8 } : {}
+                ...n ? { marginBottom: 8 } : {}
               }
             }
           ),
-          !editing && isMyself ? /* @__PURE__ */ jsx(
-            Button,
+          !n && m ? /* @__PURE__ */ a(
+            O,
             {
-              size: isMobile ? "small" : "large",
+              size: b ? "small" : "large",
               variant: "outlined",
               sx: {
-                ...defaultButtonStyle,
-                mb: !isMobile ? 2 : "4px",
-                mt: !isMobile ? 2 : "4px",
-                height: !isMobile ? "40px" : "32px"
+                ...J,
+                mb: b ? "4px" : 2,
+                mt: b ? "4px" : 2,
+                height: b ? "32px" : "40px"
               },
-              onClick: onEdit,
-              fullWidth: true,
-              children: t("profile.editProfile")
+              onClick: T,
+              fullWidth: !0,
+              children: c("profile.editProfile")
             }
           ) : null,
-          editing && isMyself && isSupportAddress ? /* @__PURE__ */ jsx(
-            AddressEditor,
+          n && m && to ? /* @__PURE__ */ a(
+            Wo,
             {
-              address,
-              errors: addressValidateMsg,
-              handleChange: onAddressChange,
-              defaultCountry
+              address: r,
+              errors: s,
+              handleChange: io,
+              defaultCountry: y
             }
-          ) : /* @__PURE__ */ jsx(
-            EditableField,
+          ) : /* @__PURE__ */ a(
+            g,
             {
-              value: metadata.location ?? user?.address?.city ?? "",
-              onChange: (value) => onChange(value, "location"),
-              editable: editing,
+              value: l.location ?? ((t = o == null ? void 0 : o.address) == null ? void 0 : t.city) ?? "",
+              onChange: (e) => h(e, "location"),
+              editable: n,
               placeholder: "Location",
-              label: t("profile.location"),
-              tooltip: isMyself && (address.line1 || address.line2) ? /* @__PURE__ */ jsx(Fragment, { children: ["line1", "line2"].map((k) => {
-                const value = address[k];
-                if (!value) {
-                  return null;
-                }
-                return /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", fontWeight: 600, sx: { mb: 0 }, children: t(`profile.address.${k}`) }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", children: address[k] })
-                ] }, k);
-              }) }) : null,
+              label: c("profile.location"),
+              tooltip: m && (r.line1 || r.line2) ? /* @__PURE__ */ a(A, { children: ["line1", "line2"].map((e) => r[e] ? /* @__PURE__ */ x(f, { children: [
+                /* @__PURE__ */ a(
+                  S,
+                  {
+                    variant: "caption",
+                    component: "p",
+                    sx: {
+                      fontWeight: 600,
+                      mb: 0
+                    },
+                    children: c(`profile.address.${e}`)
+                  }
+                ),
+                /* @__PURE__ */ a(S, { variant: "caption", component: "span", children: r[e] })
+              ] }, e) : null) }) : null,
               renderValue: () => {
-                const countryName = address?.country ? getCountryNameByCountry(address?.country) : "";
-                const fullLocation = [countryName, address.province, address.city || metadata.location || ""].filter(Boolean).join(" ");
-                return /* @__PURE__ */ jsx(Typography, { component: "span", children: fullLocation });
+                const d = [r != null && r.country ? vo(r == null ? void 0 : r.country) : "", r.province, r.city || l.location || ""].filter(Boolean).join(" ");
+                return /* @__PURE__ */ a(S, { component: "span", children: d });
               },
-              icon: /* @__PURE__ */ jsx(LocationIcon, { ...iconSize })
+              icon: /* @__PURE__ */ a(To, { ...z })
             }
           ),
-          /* @__PURE__ */ jsx(
-            EditableField,
+          /* @__PURE__ */ a(
+            g,
             {
-              value: metadata.timezone || currentTimezone,
-              onChange: (value) => onChange(value, "timezone"),
-              editable: editing,
+              value: l.timezone || R,
+              onChange: (e) => h(e, "timezone"),
+              editable: n,
               placeholder: "timezone",
-              icon: /* @__PURE__ */ jsx(TimezoneIcon, { ...iconSize }),
-              label: t("profile.timezone"),
-              renderValue: (value) => {
-                return /* @__PURE__ */ jsx(Clock, { value });
-              },
-              children: /* @__PURE__ */ jsx(
-                TimezoneSelect,
+              icon: /* @__PURE__ */ a(Fo, { ...z }),
+              label: c("profile.timezone"),
+              renderValue: (e) => /* @__PURE__ */ a(No, { value: e }),
+              children: /* @__PURE__ */ a(
+                Do,
                 {
-                  value: metadata.timezone || currentTimezone,
-                  onChange: (value) => onChange(value, "timezone"),
-                  disabled: !editing,
-                  mode
+                  value: l.timezone || R,
+                  onChange: (e) => h(e, "timezone"),
+                  disabled: !n,
+                  mode: i
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx(
-            EditableField,
+          /* @__PURE__ */ a(
+            g,
             {
-              value: metadata.email ?? user?.email ?? "",
-              editable: editing,
-              hidePreview: !isMyself,
-              disabled: user?.sourceProvider === LOGIN_PROVIDER.EMAIL,
-              canEdit: !emailVerified,
-              verified: emailVerified,
+              value: l.email ?? (o == null ? void 0 : o.email) ?? "",
+              editable: n,
+              hidePreview: !m,
+              disabled: (o == null ? void 0 : o.sourceProvider) === _.EMAIL,
+              canEdit: !W,
+              verified: W,
               placeholder: "Email",
-              icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
-              label: /* @__PURE__ */ jsxs(Fragment, { children: [
-                t("profile.email"),
-                user?.sourceProvider === LOGIN_PROVIDER.EMAIL ? /* @__PURE__ */ jsx(Tooltip, { title: t("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ jsx(
-                  Box,
+              icon: /* @__PURE__ */ a(Mo, { ...z }),
+              label: /* @__PURE__ */ x(A, { children: [
+                c("profile.email"),
+                (o == null ? void 0 : o.sourceProvider) === _.EMAIL ? /* @__PURE__ */ a(go, { title: c("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ a(
+                  f,
                   {
-                    component: Icon,
+                    component: yo,
                     icon: "mdi:info-outline",
                     sx: {
                       verticalAlign: "middle",
@@ -385,45 +294,40 @@ export default function UserMetadataComponent({
                   }
                 ) }) : null
               ] }),
-              onChange: (value) => onChange(value, "email"),
-              errorMsg: validateMsg.email,
-              renderValue: (value) => isMyself ? /* @__PURE__ */ jsx(
+              onChange: (e) => h(e, "email"),
+              errorMsg: p.email,
+              renderValue: (e) => m ? /* @__PURE__ */ a(
                 "a",
                 {
-                  href: `mailto:${value}`,
+                  href: `mailto:${e}`,
                   style: {
                     color: "inherit",
                     textDecoration: "none"
                   },
-                  children: value
+                  children: e
                 }
               ) : null,
-              onValueValidate: (value) => {
-                let msg = "";
-                if (!!value && !isEmail(value)) {
-                  msg = t("profile.emailInvalid");
-                }
-                validateMsg.email = msg;
+              onValueValidate: (e) => {
+                let d = "";
+                e && !Vo(e) && (d = c("profile.emailInvalid")), p.email = d;
               }
             }
           ),
-          /* @__PURE__ */ jsx(
-            EditableField,
+          /* @__PURE__ */ a(
+            g,
             {
-              value: phoneValue.phone,
-              editable: editing,
-              hidePreview: !isMyself,
-              canEdit: !phoneVerified,
-              verified: phoneVerified,
+              value: N.phone,
+              editable: n,
+              hidePreview: !m,
+              canEdit: !D,
+              verified: D,
               placeholder: "Phone",
-              icon: /* @__PURE__ */ jsx(PhoneIcon, { ...iconSize }),
-              onChange: (value) => onChange(value, "phone"),
-              label: t("profile.phone"),
-              renderValue: () => {
-                return isMyself ? /* @__PURE__ */ jsx(PhoneInput, { value: phoneValue, preview: true }) : null;
-              },
-              children: /* @__PURE__ */ jsx(
-                PhoneInput,
+              icon: /* @__PURE__ */ a($o, { ...z }),
+              onChange: (e) => h(e, "phone"),
+              label: c("profile.phone"),
+              renderValue: () => m ? /* @__PURE__ */ a(U, { value: N, preview: !0 }) : null,
+              children: /* @__PURE__ */ a(
+                U,
                 {
                   variant: "outlined",
                   className: "editable-field",
@@ -431,21 +335,15 @@ export default function UserMetadataComponent({
                     sx: { backgroundColor: "transparent" },
                     placeholder: "Phone"
                   },
-                  value: phoneValue,
-                  error: !!validateMsg.phone,
-                  helperText: validateMsg.phone,
-                  sx: mergeSx(inputFieldStyle, !validateMsg.phone ? commonInputStyle : {}),
-                  onChange: (value) => {
-                    const isValid = validatePhoneNumber(value.phone, value.country);
-                    if (!isValid) {
-                      validateMsg.phone = t("profile.phoneInvalid");
-                    } else {
-                      validateMsg.phone = "";
-                    }
-                    onChange(
+                  value: N,
+                  error: !!p.phone,
+                  helperText: p.phone,
+                  sx: Io(Ao, p.phone ? {} : So),
+                  onChange: (e) => {
+                    wo(e.phone, e.country) ? p.phone = "" : p.phone = c("profile.phoneInvalid"), h(
                       {
-                        country: value.country,
-                        phoneNumber: value.phone
+                        country: e.country,
+                        phoneNumber: e.phone
                       },
                       "phone"
                     );
@@ -454,43 +352,45 @@ export default function UserMetadataComponent({
               )
             }
           ),
-          /* @__PURE__ */ jsx(LinkPreviewInput, { editable: editing, links, onChange: handleLinksChange }),
-          editing && isMyself ? /* @__PURE__ */ jsxs(
-            Box,
+          /* @__PURE__ */ a(Oo, { editable: n, links: ao, onChange: lo }),
+          n && m ? /* @__PURE__ */ x(
+            f,
             {
-              display: "flex",
-              gap: 1,
               style: { width: "100%" },
-              justifyContent: "flex-end",
-              flexDirection: mode === "drawer" ? "column" : "row",
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end",
+                flexDirection: i === "drawer" ? "column" : "row"
+              },
               children: [
-                /* @__PURE__ */ jsx(
-                  Button,
+                /* @__PURE__ */ a(
+                  O,
                   {
-                    fullWidth: mode === "drawer",
+                    fullWidth: i === "drawer",
                     size: "small",
                     variant: "outlined",
-                    sx: { ...defaultButtonStyle, minWidth: "54px" },
-                    onClick: onCancel,
-                    children: t("common.cancel")
+                    sx: { ...J, minWidth: "54px" },
+                    onClick: F,
+                    children: c("common.cancel")
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  Button,
+                /* @__PURE__ */ a(
+                  O,
                   {
-                    fullWidth: mode === "drawer",
+                    fullWidth: i === "drawer",
                     size: "small",
-                    disabled: !!validateMsg.email || !!validateMsg.phone,
+                    disabled: !!p.email || !!p.phone,
                     variant: "outlined",
                     sx: {
-                      ...primaryButtonStyle,
+                      ...Ro,
                       minWidth: "54px",
                       "&.Mui-disabled": {
                         backgroundColor: "rgba(0, 0, 0, 0.12)"
                       }
                     },
-                    onClick: handleSave,
-                    children: t("common.save")
+                    onClick: ro,
+                    children: c("common.save")
                   }
                 )
               ]
@@ -500,43 +400,45 @@ export default function UserMetadataComponent({
       }
     );
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderEdit(editable),
-    isMobileView && /* @__PURE__ */ jsxs(
-      SwipeableDrawer,
+  return /* @__PURE__ */ x(A, { children: [
+    M(Z),
+    u && /* @__PURE__ */ x(
+      uo,
       {
         sx: {
           zIndex: 9999
         },
-        disableSwipeToOpen: true,
-        onOpen: onEdit,
-        open: visible,
+        disableSwipeToOpen: !0,
+        onOpen: T,
+        open: oo,
         anchor: "bottom",
-        onClose: onCancel,
+        onClose: F,
         slots: {
-          backdrop: BackdropWrap
+          backdrop: X
         },
-        PaperProps: {
-          sx: {
-            boxShadow: "0px -2px 16px 0px rgba(0, 0, 0, 0.08)",
-            borderRadius: 1.5,
-            // 保持跟 DID Wallet 一致
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0
+        slotProps: {
+          paper: {
+            sx: {
+              boxShadow: "0px -2px 16px 0px rgba(0, 0, 0, 0.08)",
+              borderRadius: 1.5,
+              // 保持跟 DID Wallet 一致
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0
+            }
           }
         },
         children: [
-          /* @__PURE__ */ jsx(
-            Box,
+          /* @__PURE__ */ a(
+            f,
             {
-              ref: drawerDragger,
+              ref: eo,
               sx: {
                 padding: "16px 32px",
                 margin: "-8px auto -16px",
                 zIndex: 1
               },
-              children: /* @__PURE__ */ jsx(
-                Box,
+              children: /* @__PURE__ */ a(
+                f,
                 {
                   sx: {
                     width: "48px",
@@ -548,15 +450,15 @@ export default function UserMetadataComponent({
               )
             }
           ),
-          /* @__PURE__ */ jsx(
-            Box,
+          /* @__PURE__ */ a(
+            f,
             {
-              p: 2,
               sx: {
+                p: 2,
                 maxHeight: "500px",
                 overflowY: "auto"
               },
-              children: renderEdit(true, "drawer")
+              children: M(!0, "drawer")
             }
           )
         ]
@@ -564,7 +466,7 @@ export default function UserMetadataComponent({
     )
   ] });
 }
-const MetadataInfo = styled(Box)`
+const Go = Co(f)`
   width: 100%;
 
   .MuiOutlinedInput-root {
@@ -602,3 +504,6 @@ const MetadataInfo = styled(Box)`
     }
   }
 `;
+export {
+  se as default
+};