@blocklet/ui-react 3.0.20 → 3.0.22

package/lib/UserCenter/components/nft-preview.d.ts

@@ -0,0 +1,11 @@
+export interface NftInfo {
+    address: string;
+    data: Record<string, any>;
+    display: Record<string, any>;
+    issuer: string;
+}
+export default function NftPreview({ visible, onClose, nft, }: {
+    visible: boolean;
+    onClose: () => void;
+    nft: NftInfo | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCenter/components/nft-preview.js

@@ -0,0 +1,60 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "@mui/material/Modal";
+import r from "@emotion/styled";
+import a, { getNFTData as s } from "@arcblock/ux/lib/NFTDisplay";
+function f({
+  visible: e,
+  onClose: o,
+  nft: i
+}) {
+  return !e || !i ? null : /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(n, { open: e, onClose: o, children: /* @__PURE__ */ t(h, { onClick: o, children: /* @__PURE__ */ t(a, { data: s(i), address: i.address, inset: !0 }) }) }) });
+}
+const d = r.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+`, h = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  img,
+  object {
+    max-width: 90vw;
+    max-height: 75vh;
+  }
+
+  .nft-display--inset {
+    > .MuiBox-root,
+    .nft-display__loading {
+      width: 75vmin;
+      height: 75vmin;
+    }
+  }
+`;
+export {
+  f as default
+};

package/lib/UserCenter/components/nft.js

@@ -1,35 +1,84 @@
-import { jsxs as c, jsx as e, Fragment as h } from "react/jsx-runtime";
-import { Box as a, Skeleton as f, Typography as u, Pagination as y } from "@mui/material";
-import { useMemoizedFn as w, useReactive as k, useRequest as C, useCreation as b } from "ahooks";
-import F from "axios";
-import z from "@arcblock/ux/lib/NFTDisplay";
-import N from "@arcblock/ux/lib/Empty";
-import { WELLKNOWN_SERVICE_PATH_PREFIX as P } from "@abtnode/constant";
-import { translate as R } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
-import { translations as E } from "../libs/locales.js";
-function q({ user: l }) {
-  const { locale: g } = j(), d = w((s, r = {}) => R(E, s, g, "en", r)), t = k({
+import { jsxs as l, jsx as o, Fragment as R } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { Box as s, Skeleton as w, Typography as F, alpha as C, Stack as j, IconButton as f, Pagination as T } from "@mui/material";
+import { useMemoizedFn as L, useReactive as _, useRequest as A, useCreation as D } from "ahooks";
+import H from "axios";
+import { Icon as h } from "@iconify/react";
+import W, { getNFTData as O } from "@arcblock/ux/lib/NFTDisplay";
+import U from "@arcblock/ux/lib/Empty";
+import { WELLKNOWN_SERVICE_PATH_PREFIX as B } from "@abtnode/constant";
+import { translate as M } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as V } from "@arcblock/ux/lib/Locale/context";
+import { joinURL as v } from "ufo";
+import X from "@arcblock/ux/lib/SocialShare";
+import { translations as $ } from "../libs/locales.js";
+import q from "./nft-preview.js";
+const J = (a) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.6)",
+  opacity: 0,
+  transition: "opacity 0.3s ease-in-out",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1,
+  "& .mask-item": {
+    backgroundColor: C(a.palette.background.paper, 0.9),
+    color: "text.primary",
+    "&:hover": {
+      backgroundColor: C(a.palette.background.paper, 1)
+    }
+  }
+}), P = "https://main.abtnetwork.io/explorer";
+function ce({ user: a }) {
+  const { locale: N } = V(), u = L((t, e = {}) => M($, t, N, "en", e)), [n, g] = y({
+    visible: !1,
+    nft: null
+  }), [p, x] = y({
+    anchorEl: null,
+    props: null
+  }), S = (t) => {
+    const e = v(P, "assets", t);
+    window.open(e, "_blank");
+  }, z = (t, e) => {
+    let i = "";
+    typeof e.data?.value == "string" ? i = JSON.parse(e.data?.value)?.domain : i = e.data?.value?.domain, x({
+      anchorEl: t,
+      props: {
+        title: i ? `Hey, I just won an NFT at the ${i} event!` : "Hey, I just won an NFT!",
+        url: v(P, "assets", e.address)
+      }
+    });
+  }, E = (t) => {
+    g({
+      visible: !0,
+      nft: t
+    });
+  }, r = _({
     page: 1,
     size: 20
-  }), p = C(
-    async (s = t) => (await F.get(`${P}/ocap/listAssets`, {
+  }), k = A(
+    async (t = r) => (await H.get(`${B}/ocap/listAssets`, {
       params: {
-        ownerAddress: l.did,
-        ...s
+        ownerAddress: a.did,
+        ...t
       }
     })).data,
     {
-      defaultParams: [t],
-      refreshDeps: [l.did, t]
+      defaultParams: [r],
+      refreshDeps: [a.did, r]
     }
-  ), { loading: n, data: o } = p, i = o?.page ?? { cursor: 0, next: !1, total: 0 }, m = (s, r) => {
-    t.page = r, p.run(t);
-  }, x = b(() => {
-    if (n) {
-      const s = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((r) => /* @__PURE__ */ e(f, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, r));
-      return /* @__PURE__ */ c(
-        a,
+  ), { loading: c, data: d } = k, m = d?.page ?? { cursor: 0, next: !1, total: 0 }, b = (t, e) => {
+    r.page = e, k.run(r);
+  }, I = D(() => {
+    if (c) {
+      const t = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((e) => /* @__PURE__ */ o(w, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, e));
+      return /* @__PURE__ */ l(
+        s,
         {
           sx: {
             display: "flex",
@@ -37,9 +86,9 @@ function q({ user: l }) {
             gap: 2
           },
           children: [
-            /* @__PURE__ */ e(f, { width: "20%" }),
-            /* @__PURE__ */ e(
-              a,
+            /* @__PURE__ */ o(w, { width: "20%" }),
+            /* @__PURE__ */ o(
+              s,
               {
                 sx: {
                   display: "flex",
@@ -47,28 +96,28 @@ function q({ user: l }) {
                   gap: 2,
                   flexWrap: "nowrap"
                 },
-                children: s
+                children: t
               }
             )
           ]
         }
       );
     }
-    return /* @__PURE__ */ c(h, { children: [
-      /* @__PURE__ */ e(
-        u,
+    return /* @__PURE__ */ l(R, { children: [
+      /* @__PURE__ */ o(
+        F,
         {
           sx: {
             color: "grey.A700",
             fontWeight: 600,
             mb: 2.5
           },
-          children: d("common.nft")
+          children: u("common.nft")
         }
       ),
-      o?.assets?.length === 0 && !n && /* @__PURE__ */ e(a, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, children: /* @__PURE__ */ e(N, { children: d("common.noNFT") }) }),
-      /* @__PURE__ */ e(
-        a,
+      d?.assets?.length === 0 && !c && /* @__PURE__ */ o(s, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, children: /* @__PURE__ */ o(U, { children: u("common.noNFT") }) }),
+      /* @__PURE__ */ o(
+        s,
         {
           className: "nft-list-wrapper",
           sx: {
@@ -82,50 +131,114 @@ function q({ user: l }) {
             },
             gap: 2.5
           },
-          children: o?.assets?.map((s) => /* @__PURE__ */ e(
-            a,
+          children: d?.assets?.map((t) => /* @__PURE__ */ l(
+            s,
             {
               sx: {
                 flexShrink: 0,
                 width: { xs: 120, sm: 120, md: 120, lg: 166 },
-                height: { xs: 120, sm: 120, md: 120, lg: 166 }
+                height: { xs: 120, sm: 120, md: 120, lg: 166 },
+                position: "relative",
+                borderRadius: 1,
+                overflow: "hidden",
+                cursor: "pointer",
+                "&:hover .mask": {
+                  opacity: 1
+                }
               },
-              children: /* @__PURE__ */ e(
-                z,
-                {
-                  data: s.display,
-                  address: s.address,
-                  inset: !0,
-                  imageFilter: {
-                    imageFilter: "resize",
-                    w: "500",
-                    f: "webp"
+              children: [
+                /* @__PURE__ */ o(
+                  W,
+                  {
+                    data: O(t),
+                    address: t.address,
+                    inset: !0,
+                    imageFilter: {
+                      imageFilter: "resize",
+                      w: "500",
+                      f: "webp"
+                    }
                   }
-                }
-              )
+                ),
+                /* @__PURE__ */ o(s, { className: "mask", sx: J, children: /* @__PURE__ */ l(j, { direction: "row", spacing: 1, children: [
+                  /* @__PURE__ */ o(
+                    f,
+                    {
+                      size: "small",
+                      className: "mask-item",
+                      onClick: (e) => {
+                        e.stopPropagation(), S(t.address);
+                      },
+                      children: /* @__PURE__ */ o(h, { icon: "tabler:link", fontSize: 18 })
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    f,
+                    {
+                      size: "small",
+                      onClick: (e) => {
+                        e.stopPropagation(), z(e.currentTarget, t);
+                      },
+                      className: "mask-item",
+                      children: /* @__PURE__ */ o(h, { icon: "tabler:share-2", fontSize: 18 })
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    f,
+                    {
+                      size: "small",
+                      onClick: (e) => {
+                        e.stopPropagation(), E(t);
+                      },
+                      className: "mask-item",
+                      children: /* @__PURE__ */ o(h, { icon: "tabler:eye", fontSize: 18 })
+                    }
+                  )
+                ] }) })
+              ]
             },
-            s.address
+            t.address
           ))
         }
       ),
-      i.next || t.page > 1 ? /* @__PURE__ */ e(
-        y,
+      m.next || r.page > 1 ? /* @__PURE__ */ o(
+        T,
         {
           sx: {
             display: "flex",
             justifyContent: "center",
             mt: 2
           },
-          page: t.page,
-          onChange: m,
-          count: Math.ceil(i.total / t.size),
+          page: r.page,
+          onChange: b,
+          count: Math.ceil(m.total / r.size),
           size: "small"
         }
-      ) : null
+      ) : null,
+      /* @__PURE__ */ o(
+        q,
+        {
+          visible: n.visible && !!n.nft,
+          nft: n.nft,
+          onClose: () => {
+            g({ visible: !1, nft: null });
+          }
+        }
+      ),
+      /* @__PURE__ */ o(
+        X,
+        {
+          anchorEl: p.anchorEl,
+          onClose: () => {
+            x({ anchorEl: null, props: null });
+          },
+          sharedProps: p.props || { title: "", url: "" }
+        }
+      )
     ] });
-  }, [n, i, t.page, t.size, m]);
-  return /* @__PURE__ */ e(a, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: x });
+  }, [c, m, r.page, r.size, b, p, n]);
+  return /* @__PURE__ */ o(s, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: I });
 }
 export {
-  q as default
+  ce as default
 };

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,23 +1,24 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { useState as v, useMemo as b } from "react";
-import { styled as L, Box as d, Typography as w, IconButton as C, Button as I, useTheme as k, FormControl as D, TextField as F } from "@mui/material";
-import { Remove as S, Add as B } from "@mui/icons-material";
-import { translate as E } from "@arcblock/ux/lib/Locale/util";
-import { useMemoizedFn as T } from "ahooks";
-import { useLocaleContext as U } from "@arcblock/ux/lib/Locale/context";
-import j from "@arcblock/icons/lib/Link";
-import { mergeSx as z } from "@arcblock/ux/lib/Util/style";
-import { withoutProtocol as M } from "ufo";
-import { isValidUrl as f } from "./utils.js";
-import { translations as P } from "../../libs/locales.js";
-import { inputFieldStyle as R, commonInputStyle as W } from "../editable-field.js";
-function _(e) {
-  return M(e);
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { useState as L, useMemo as w } from "react";
+import { styled as C, Box as d, Typography as x, IconButton as I, Button as k, useTheme as S, FormControl as D, TextField as F } from "@mui/material";
+import { Remove as B, Add as T } from "@mui/icons-material";
+import { translate as U } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as _ } from "ahooks";
+import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
+import E from "@arcblock/icons/lib/Link";
+import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
+import { withoutProtocol as j } from "ufo";
+import { isValidUrl as g } from "./utils.js";
+import { translations as A } from "../../libs/locales.js";
+import { inputFieldStyle as P, commonInputStyle as R } from "../editable-field.js";
+const h = 10;
+function W(e) {
+  return j(e);
 }
-function A({
+function N({
   value: e,
-  onChange: n,
-  errorMsg: i
+  onChange: i,
+  errorMsg: l
 }) {
   return /* @__PURE__ */ t(D, { fullWidth: !0, children: /* @__PURE__ */ t(
     F,
@@ -26,31 +27,31 @@ function A({
       value: e,
       onChange: (a) => {
         const c = a.target.value;
-        n(c);
+        i(c);
       },
       fullWidth: !0,
-      error: !!i,
-      helperText: i,
-      sx: z(R, i ? {} : W)
+      error: !!l,
+      helperText: l,
+      sx: M(P, l ? {} : R)
     }
   ) });
 }
-function V({ links: e = [], onChange: n }) {
-  const { locale: i } = U(), l = T((o, r = {}) => E(P, o, i, "en", r)), [a, c] = v([!1]), u = b(() => {
+function V({ links: e = [], onChange: i }) {
+  const { locale: l } = z(), n = _((o, r = {}) => U(A, o, l, "en", r)), [a, c] = L([!1]), f = w(() => {
     const o = e[e.length - 1];
-    return !f(o) || a.length > 0 && a[a.length - 1];
-  }, [a, e]), x = () => {
-    (e.length < 5 || !u) && n([...e, ""]);
-  }, g = (o) => {
-    const r = e.filter((p, h) => h !== o), s = a.filter((p, h) => h !== o);
-    c(s), n(r);
-  }, y = (o, r) => {
+    return !g(o) || a.length > 0 && a[a.length - 1];
+  }, [a, e]), y = () => {
+    (e.length < h || !f) && i([...e, ""]);
+  }, b = (o) => {
+    const r = e.filter((m, u) => u !== o), s = a.filter((m, u) => u !== o);
+    c(s), i(r);
+  }, v = (o, r) => {
     const s = [...e];
     s[o] = r;
-    const p = [...a];
-    p[o] = !!(r && !f(r)), c(p), n(s);
+    const m = [...a];
+    m[o] = !!(r && !g(r)), c(m), i(s);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     d,
     {
       sx: {
@@ -66,10 +67,10 @@ function V({ links: e = [], onChange: n }) {
               alignItems: "center",
               gap: 1
             },
-            children: /* @__PURE__ */ t(w, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: l("profile.socialMedia") })
+            children: /* @__PURE__ */ t(x, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: n("profile.socialMedia") })
           }
         ),
-        e.map((o, r) => /* @__PURE__ */ m(
+        e.map((o, r) => /* @__PURE__ */ p(
           d,
           {
             sx: {
@@ -79,25 +80,25 @@ function V({ links: e = [], onChange: n }) {
             },
             children: [
               /* @__PURE__ */ t(
-                A,
+                N,
                 {
                   value: o,
-                  onChange: (s) => y(r, s),
-                  errorMsg: a[r] ? l("profile.invalidURL") : ""
+                  onChange: (s) => v(r, s),
+                  errorMsg: a[r] ? n("profile.invalidURL") : ""
                 }
               ),
-              /* @__PURE__ */ t(C, { onClick: () => g(r), children: /* @__PURE__ */ t(S, { sx: { color: "text.secondary" } }) })
+              /* @__PURE__ */ t(I, { onClick: () => b(r), children: /* @__PURE__ */ t(B, { sx: { color: "text.secondary" } }) })
             ]
           },
           r
         )),
-        e.length < 5 && /* @__PURE__ */ m(
-          I,
+        e.length < h ? /* @__PURE__ */ p(
+          k,
           {
             fullWidth: !0,
             variant: "outlined",
-            disabled: u,
-            onClick: x,
+            disabled: f,
+            onClick: y,
             size: "small",
             sx: {
               height: "40px",
@@ -113,26 +114,26 @@ function V({ links: e = [], onChange: n }) {
               }
             },
             children: [
-              /* @__PURE__ */ t(B, {}),
+              /* @__PURE__ */ t(T, {}),
               " ",
-              /* @__PURE__ */ t("span", { children: l("profile.addLink") })
+              /* @__PURE__ */ t("span", { children: n("profile.addLink") })
             ]
           }
-        )
+        ) : /* @__PURE__ */ t(x, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.secondary" }, children: n("profile.maxLinkCount", { count: h }) })
       ]
     }
   );
 }
-function $({ link: e }) {
-  const i = k().palette.mode === "dark";
-  return e ? /* @__PURE__ */ t(j, { width: 20, height: 20, style: { filter: i ? "brightness(0) saturate(100%) invert(1)" : "none" } }) : null;
+function K({ link: e }) {
+  const l = S().palette.mode === "dark";
+  return e ? /* @__PURE__ */ t(E, { width: 20, height: 20, style: { filter: l ? "brightness(0) saturate(100%) invert(1)" : "none" } }) : null;
 }
-function oe({
+function ne({
   editable: e = !1,
-  links: n = [],
-  onChange: i
+  links: i = [],
+  onChange: l
 }) {
-  return e ? /* @__PURE__ */ t(V, { links: n, onChange: i }) : /* @__PURE__ */ t(
+  return e ? /* @__PURE__ */ t(V, { links: i, onChange: l }) : /* @__PURE__ */ t(
     d,
     {
       sx: {
@@ -141,7 +142,7 @@ function oe({
         flexDirection: "column",
         gap: 2
       },
-      children: n.map((l) => /* @__PURE__ */ m(
+      children: i.map((n) => /* @__PURE__ */ p(
         d,
         {
           sx: {
@@ -152,16 +153,16 @@ function oe({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ t($, { link: l }),
-            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(d, { component: "a", href: l, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: _(l) }) })
+            /* @__PURE__ */ t(K, { link: n }),
+            /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(d, { component: "a", href: n, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: W(n) }) })
           ]
         },
-        l
+        n
       ))
     }
   );
 }
-const q = L("span")`
+const O = C("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
@@ -180,5 +181,5 @@ const q = L("span")`
   }
 `;
 export {
-  oe as LinkPreviewInput
+  ne as LinkPreviewInput
 };

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

@@ -4,7 +4,7 @@ export declare const getTimezones: () => {
     label: string;
     value: string;
 }[];
-export declare const isValidUrl: (url: string) => boolean;
+export declare const isValidUrl: (url: string) => any;
 /**
  * 根据 duration 类型，计算出date range
  * @param status

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

@@ -1,10 +1,12 @@
+import g from "is-url";
+import { withHttps as A } from "ufo";
 import n from "dayjs";
-import T from "dayjs/plugin/timezone";
-import g from "dayjs/plugin/utc";
-import { DurationEnum as s } from "../../../@types/index.js";
-n.extend(g);
-n.extend(T);
-const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, M = n.tz.guess(), A = [
+import h from "dayjs/plugin/timezone";
+import k from "dayjs/plugin/utc";
+import { DurationEnum as i } from "../../../@types/index.js";
+n.extend(k);
+n.extend(h);
+const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, v = n.tz.guess(), b = [
   "America/New_York",
   "America/Chicago",
   "America/Denver",
@@ -26,7 +28,7 @@ const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, M = n.tz.guess(), A =
   "America/Mexico_City",
   "Africa/Cairo",
   "UTC"
-], h = () => {
+], C = () => {
   if (typeof Intl < "u" && Intl.supportedValuesOf)
     try {
       return Intl.supportedValuesOf("timeZone");
@@ -36,58 +38,58 @@ const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, M = n.tz.guess(), A =
   if (typeof Intl < "u" && Intl.DateTimeFormat)
     try {
       if (new Intl.DateTimeFormat("en", { timeZone: "UTC" }).resolvedOptions().timeZone)
-        return A;
+        return b;
     } catch {
       console.warn("Intl.DateTimeFormat timezone support limited");
     }
-  return A;
-}, I = () => h().map((e) => {
+  return b;
+}, w = () => C().map((e) => {
   try {
-    const t = n.tz(n(), e).utcOffset() / 60, a = Math.floor(t), i = t % 1 * 60;
-    return { label: `GMT${a >= 0 ? "+" : ""}${a}:${i === 30 ? "30" : "00"}`, value: e };
+    const o = n.tz(n(), e).utcOffset() / 60, a = Math.floor(o), s = o % 1 * 60;
+    return { label: `GMT${a >= 0 ? "+" : ""}${a}:${s === 30 ? "30" : "00"}`, value: e };
   } catch {
     return console.warn(`Timezone ${e} not supported, skipping`), null;
   }
-}).filter((e) => e !== null).sort((e, t) => {
-  const [a, i] = e.label.replace("GMT", "").split(":").map(Number), [c, b] = t.label.replace("GMT", "").split(":").map(Number), y = a * 60 + i;
-  return c * 60 + b - y;
+}).filter((e) => e !== null).sort((e, o) => {
+  const [a, s] = e.label.replace("GMT", "").split(":").map(Number), [c, y] = o.label.replace("GMT", "").split(":").map(Number), T = a * 60 + s;
+  return c * 60 + y - T;
 }).map((e) => ({
   label: `(${e.label}) ${e.value}`,
   value: e.value
-})), N = (o) => /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[a-zA-Z\d_]*)?$/.test(o), _ = (o) => {
-  let r = o?.dateRange?.map((t) => n(t)) ?? [];
+})), z = (t) => g(A(t)), U = (t) => {
+  let r = t?.dateRange?.map((o) => n(o)) ?? [];
   const e = n();
-  switch (o?.duration) {
-    case s.ThirtyMinutes:
+  switch (t?.duration) {
+    case i.ThirtyMinutes:
       r = [e, e.add(30, "minutes")];
       break;
-    case s.OneHour:
+    case i.OneHour:
       r = [e, e.add(1, "hour")];
       break;
-    case s.FourHours:
+    case i.FourHours:
       r = [e, e.add(4, "hours")];
       break;
-    case s.Today:
+    case i.Today:
       r = [e, e.endOf("day")];
       break;
-    case s.ThisWeek:
+    case i.ThisWeek:
       r = [e, e.endOf("week")];
       break;
-    case s.NoClear:
+    case i.NoClear:
       r = [e, e];
       break;
   }
-  return r.map((t) => t.toDate());
-}, E = (o) => {
+  return r.map((o) => o.toDate());
+}, B = (t) => {
   const r = n();
-  return r.isAfter(n(o[0])) && r.isBefore(n(o[1]));
-}, Z = (o) => {
-  const { duration: r, dateRange: e } = o ?? {};
-  return !r || !e ? !1 : r === s.NoClear || n(e?.[0]).isSame(n(e?.[1]));
-}, v = (o) => {
-  const r = n(), t = n(o).diff(r, "seconds"), a = (i) => i * 1e3;
-  return t >= u ? a(u) : t >= l ? a(l) : t >= m ? a(m) : t >= d ? a(d) : t >= f ? a(f) : t >= p ? a(p) : 0;
-}, w = {
+  return r.isAfter(n(t[0])) && r.isBefore(n(t[1]));
+}, D = (t) => {
+  const { duration: r, dateRange: e } = t ?? {};
+  return !r || !e ? !1 : r === i.NoClear || n(e?.[0]).isSame(n(e?.[1]));
+}, R = (t) => {
+  const r = n(), o = n(t).diff(r, "seconds"), a = (s) => s * 1e3;
+  return o >= u ? a(u) : o >= l ? a(l) : o >= m ? a(m) : o >= d ? a(d) : o >= f ? a(f) : o >= p ? a(p) : 0;
+}, x = {
   color: "text.primary",
   borderColor: "grey.100",
   backgroundColor: "background.default",
@@ -97,7 +99,7 @@ const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, M = n.tz.guess(), A =
   },
   py: 0.5,
   borderRadius: 1
-}, B = {
+}, $ = {
   color: "primary.contrastText",
   borderColor: "primary.main",
   backgroundColor: "primary.main",
@@ -109,13 +111,13 @@ const u = 3600, l = 1800, m = 600, d = 300, f = 60, p = 1, M = n.tz.guess(), A =
   borderRadius: 1
 };
 export {
-  M as currentTimezone,
-  w as defaultButtonStyle,
-  _ as getStatusDuration,
-  v as getTimeRemaining,
-  I as getTimezones,
-  Z as isNotClear,
-  N as isValidUrl,
-  E as isWithinTimeRange,
-  B as primaryButtonStyle
+  v as currentTimezone,
+  x as defaultButtonStyle,
+  U as getStatusDuration,
+  R as getTimeRemaining,
+  w as getTimezones,
+  D as isNotClear,
+  z as isValidUrl,
+  B as isWithinTimeRange,
+  $ as primaryButtonStyle
 };

package/lib/UserCenter/libs/locales.d.ts

@@ -158,6 +158,7 @@ export declare const translations: {
                 postalCode: string;
                 invalidPostalCode: string;
             };
+            maxLinkCount: string;
         };
         destroyMyself: {
             title: string;
@@ -330,6 +331,7 @@ export declare const translations: {
                 postalCode: string;
                 invalidPostalCode: string;
             };
+            maxLinkCount: string;
         };
         destroyMyself: {
             title: string;

package/lib/UserCenter/libs/locales.js

@@ -157,7 +157,8 @@ const e = {
         detailedAddress: "详细地址",
         postalCode: "邮政编码",
         invalidPostalCode: "邮政编码格式不正确"
-      }
+      },
+      maxLinkCount: "最多可添加 {count} 个社交链接"
     },
     destroyMyself: {
       title: "删除账户",
@@ -329,7 +330,8 @@ const e = {
         detailedAddress: "Detailed Address",
         postalCode: "Postal Code",
         invalidPostalCode: "Postal code is invalid"
-      }
+      },
+      maxLinkCount: "Up to {count} social links can be added"
     },
     destroyMyself: {
       title: "Delete Account",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "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.20",
-    "@arcblock/icons": "3.0.20",
-    "@arcblock/react-hooks": "3.0.20",
+    "@arcblock/bridge": "3.0.22",
+    "@arcblock/icons": "3.0.22",
+    "@arcblock/react-hooks": "3.0.22",
     "@arcblock/ws": "^1.20.15",
     "@blocklet/constant": "^1.16.45",
     "@blocklet/did-space-react": "^1.1.1",
@@ -90,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "09d1c4320e150a72604e31f2320537641f8f4464"
+  "gitHead": "21018768a5b825c02861281925afb54efdf0aa4c"
 }

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

@@ -0,0 +1,84 @@
+import Modal from '@mui/material/Modal';
+import styled from '@emotion/styled';
+import NFTDisplay, { getNFTData } from '@arcblock/ux/lib/NFTDisplay';
+
+export interface NftInfo {
+  address: string;
+  data: Record<string, any>;
+  display: Record<string, any>;
+  issuer: string;
+}
+
+export default function NftPreview({
+  visible,
+  onClose,
+  nft,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  nft: NftInfo | null;
+}) {
+  if (!visible || !nft) {
+    return null;
+  }
+
+  return (
+    <NftPreviewRoot>
+      {/* Preview Modal */}
+      <Modal open={visible} onClose={onClose}>
+        <ModalRoot onClick={onClose}>
+          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
+        </ModalRoot>
+      </Modal>
+    </NftPreviewRoot>
+  );
+}
+
+const NftPreviewRoot = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+`;
+
+const ModalRoot = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  img,
+  object {
+    max-width: 90vw;
+    max-height: 75vh;
+  }
+
+  .nft-display--inset {
+    > .MuiBox-root,
+    .nft-display__loading {
+      width: 75vmin;
+      height: 75vmin;
+    }
+  }
+`;

package/src/UserCenter/components/nft.tsx

@@ -1,21 +1,49 @@
-import { Box, Pagination, Skeleton, Typography } from '@mui/material';
+import { useState } from 'react';
+import { Box, Pagination, Skeleton, Typography, IconButton, Stack, alpha } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
 import axios from 'axios';
-import NFTDisplay from '@arcblock/ux/lib/NFTDisplay';
+import { Icon } from '@iconify/react';
+import NFTDisplay, { getNFTData } from '@arcblock/ux/lib/NFTDisplay';
 import Empty from '@arcblock/ux/lib/Empty';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translations } from '../libs/locales';
+import { joinURL } from 'ufo';
+import SocialShare from '@arcblock/ux/lib/SocialShare';
 import { User } from '../../@types';
+import { translations } from '../libs/locales';
+import NftPreview, { NftInfo } from './nft-preview';
 
-interface NftInfo {
-  address: string;
-  data: Record<string, any>;
-  display: Record<string, any>;
-  issuer: string;
+// 直接定义 SharedProps 类型
+interface SharedProps {
+  title: string;
+  url: string;
 }
 
+const maskStyle = (theme: any) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  opacity: 0,
+  transition: 'opacity 0.3s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1,
+  '& .mask-item': {
+    backgroundColor: alpha(theme.palette.background.paper, 0.9),
+    color: 'text.primary',
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.background.paper, 1),
+    },
+  },
+});
+
+const CHAIN_EXPLORER_URL = 'https://main.abtnetwork.io/explorer';
+
 interface ResponseData {
   assets: NftInfo[];
   code: string;
@@ -32,6 +60,45 @@ export default function Nft({ user }: { user: User }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+
+  const [previewProps, setPreviewProps] = useState<{ visible: boolean; nft: NftInfo | null }>({
+    visible: false,
+    nft: null,
+  });
+
+  const [shareProps, setShareProps] = useState<{ anchorEl: HTMLElement | null; props: SharedProps | null }>({
+    anchorEl: null,
+    props: null,
+  });
+
+  const handleLinkClick = (nftAddress: string) => {
+    const targetURL = joinURL(CHAIN_EXPLORER_URL, 'assets', nftAddress);
+    window.open(targetURL, '_blank');
+  };
+
+  const handleShareClick = (element: HTMLElement, nft: NftInfo) => {
+    let domain = '';
+    if (typeof nft.data?.value === 'string') {
+      domain = JSON.parse(nft.data?.value)?.domain;
+    } else {
+      domain = nft.data?.value?.domain;
+    }
+    setShareProps({
+      anchorEl: element,
+      props: {
+        title: domain ? `Hey, I just won an NFT at the ${domain} event!` : 'Hey, I just won an NFT!',
+        url: joinURL(CHAIN_EXPLORER_URL, 'assets', nft.address),
+      },
+    });
+  };
+
+  const handleViewClick = (nft: NftInfo) => {
+    setPreviewProps({
+      visible: true,
+      nft,
+    });
+  };
+
   const paging = useReactive<PaginationProps>({
     page: 1,
     size: 20,
@@ -123,9 +190,16 @@ export default function Nft({ user }: { user: User }) {
                 flexShrink: 0,
                 width: { xs: 120, sm: 120, md: 120, lg: 166 },
                 height: { xs: 120, sm: 120, md: 120, lg: 166 },
+                position: 'relative',
+                borderRadius: 1,
+                overflow: 'hidden',
+                cursor: 'pointer',
+                '&:hover .mask': {
+                  opacity: 1,
+                },
               }}>
               <NFTDisplay
-                data={item.display}
+                data={getNFTData(item)}
                 address={item.address}
                 inset
                 imageFilter={{
@@ -134,6 +208,37 @@ export default function Nft({ user }: { user: User }) {
                   f: 'webp',
                 }}
               />
+              <Box className="mask" sx={maskStyle}>
+                <Stack direction="row" spacing={1}>
+                  <IconButton
+                    size="small"
+                    className="mask-item"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleLinkClick(item.address);
+                    }}>
+                    <Icon icon="tabler:link" fontSize={18} />
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleShareClick(e.currentTarget, item);
+                    }}
+                    className="mask-item">
+                    <Icon icon="tabler:share-2" fontSize={18} />
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleViewClick(item);
+                    }}
+                    className="mask-item">
+                    <Icon icon="tabler:eye" fontSize={18} />
+                  </IconButton>
+                </Stack>
+              </Box>
             </Box>
           ))}
         </Box>
@@ -150,9 +255,25 @@ export default function Nft({ user }: { user: User }) {
             size="small"
           />
         ) : null}
+
+        <NftPreview
+          visible={previewProps.visible && !!previewProps.nft}
+          nft={previewProps.nft}
+          onClose={() => {
+            setPreviewProps({ visible: false, nft: null });
+          }}
+        />
+
+        <SocialShare
+          anchorEl={shareProps.anchorEl}
+          onClose={() => {
+            setShareProps({ anchorEl: null, props: null });
+          }}
+          sharedProps={shareProps.props || { title: '', url: '' }}
+        />
       </>
     );
-  }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
+  }, [loading, dataPage, paging.page, paging.size, handlePageChange, shareProps, previewProps]);
 
   return <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2, mb: 5 }}>{content}</Box>;
 }

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -11,6 +11,8 @@ import { isValidUrl } from './utils';
 import { translations } from '../../libs/locales';
 import { commonInputStyle, inputFieldStyle } from '../editable-field';
 
+const MAX_LINK_COUNT = 10;
+
 /**
  * 格式化链接显示
  * 对于 http/https 协议只显示域名，其他协议显示完整链接
@@ -67,7 +69,7 @@ function DynamicLinkForm({ links = [], onChange }: { links?: string[]; onChange:
   }, [errors, links]);
 
   const handleAddLink = () => {
-    if (links.length < 5 || !isLastError) {
+    if (links.length < MAX_LINK_COUNT || !isLastError) {
       onChange([...links, '']);
     }
   };
@@ -127,7 +129,7 @@ function DynamicLinkForm({ links = [], onChange }: { links?: string[]; onChange:
           </IconButton>
         </Box>
       ))}
-      {links.length < 5 && (
+      {links.length < MAX_LINK_COUNT ? (
         <Button
           fullWidth
           variant="outlined"
@@ -149,6 +151,10 @@ function DynamicLinkForm({ links = [], onChange }: { links?: string[]; onChange:
           }}>
           <AddIcon /> <span>{t('profile.addLink')}</span>
         </Button>
+      ) : (
+        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0, fontSize: '12px', color: 'text.secondary' }}>
+          {t('profile.maxLinkCount', { count: MAX_LINK_COUNT })}
+        </Typography>
       )}
     </Box>
   );

package/src/UserCenter/components/user-info/utils.ts

@@ -1,3 +1,5 @@
+import isUrl from 'is-url';
+import { withHttps } from 'ufo';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -104,9 +106,7 @@ export const getTimezones = () => {
 };
 
 export const isValidUrl = (url: string) => {
-  const urlPattern =
-    /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[a-zA-Z\d_]*)?$/;
-  return urlPattern.test(url);
+  return isUrl(withHttps(url)); // 补充协议后在进行验证是否是合法的url
 };
 
 /**

package/src/UserCenter/libs/locales.ts

@@ -160,6 +160,7 @@ export const translations = {
         postalCode: '邮政编码',
         invalidPostalCode: '邮政编码格式不正确',
       },
+      maxLinkCount: '最多可添加 {count} 个社交链接',
     },
     destroyMyself: {
       title: '删除账户',
@@ -335,6 +336,7 @@ export const translations = {
         postalCode: 'Postal Code',
         invalidPostalCode: 'Postal code is invalid',
       },
+      maxLinkCount: 'Up to {count} social links can be added',
     },
     destroyMyself: {
       title: 'Delete Account',