@arcblock/ux 3.1.32 → 3.1.33

package/lib/UserCard/Cards/social-actions.js

@@ -2,12 +2,12 @@ import { jsxs as m, jsx as s } from "react/jsx-runtime";
 import { useMemo as r } from "react";
 import { styled as C, Button as F, Box as M } from "@mui/material";
 import { useMemoizedFn as u } from "ahooks";
-import { joinURL as N } from "ufo";
+import { joinURL as z } from "ufo";
 import w from "lodash/noop";
-import { Icon as U } from "@iconify/react";
-import k from "@mui/icons-material/Notifications";
-import v from "@mui/icons-material/NotificationsOff";
-import z from "../use-follow.js";
+import { Icon as N } from "@iconify/react";
+import U from "@mui/icons-material/Notifications";
+import k from "@mui/icons-material/NotificationsOff";
+import v from "../use-follow.js";
 import { useLocaleContext as h } from "../../Locale/context.js";
 import { translate as g } from "../../Locale/util.js";
 import { isSupportFollow as L } from "../../Util/index.js";
@@ -43,17 +43,18 @@ function j({
       });
       return;
     }
-    window.open(N(l, `/chat/dm/${o?.did}`), "_blank");
+    window.open(z(l, `/chat/dm/${o?.did}`), "_blank");
   });
   return r(() => (typeof t == "boolean" ? !!t : t?.chat) && !!l, [t, l]) ? /* @__PURE__ */ m(
     x,
     {
       className: "user-card__social-actions-chat",
       variant: "outlined",
-      color: "inherit",
+      color: "primary",
+      size: "small",
       onClick: c,
       children: [
-        /* @__PURE__ */ s(U, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
+        /* @__PURE__ */ s(N, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
         e("chat")
       ]
     }
@@ -64,7 +65,7 @@ function B({
   showSocialActions: t,
   session: n
 }) {
-  const { locale: i } = h() || { locale: "en" }, e = u((b, y = {}) => g(_, b, i, "en", y)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = z({
+  const { locale: i } = h() || { locale: "en" }, e = u((y, b = {}) => g(_, y, i, "en", b)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = v({
     user: o,
     t: e,
     isMySelf: !1,
@@ -84,10 +85,11 @@ function B({
     {
       className: "user-card__social-actions-follow",
       variant: "outlined",
-      color: "inherit",
+      color: "primary",
+      size: "small",
       onClick: f,
       children: [
-        c ? /* @__PURE__ */ s(v, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }),
+        c ? /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(U, { sx: { fontSize: 14, mr: 0.5 } }),
         e(c ? "unfollow" : "follow")
       ]
     }

package/lib/UserCard/Content/minimal.js

@@ -1,28 +1,28 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { memo as u } from "react";
-import { Box as r, Typography as g } from "@mui/material";
-import { DID as y } from "../../DID/index.js";
-import C from "./tooltip-avatar.js";
-import { renderTopRight as b } from "../components.js";
-import S from "./shorten-label.js";
-import v from "../Cards/social-actions.js";
-function w({ ...a }) {
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { memo as g } from "react";
+import { useMediaQuery as y, Box as o, Typography as w, Divider as C } from "@mui/material";
+import { DID as S } from "../../DID/index.js";
+import b from "./tooltip-avatar.js";
+import { renderTopRight as v } from "../components.js";
+import W from "./shorten-label.js";
+import j from "../Cards/social-actions.js";
+function D({ ...s }) {
   const {
     user: e,
-    showDid: s,
-    didProps: l,
-    avatarSize: d,
-    shouldShowHoverCard: m,
-    renderCardContent: c,
-    renderTopRightContent: p,
-    topRightMaxWidth: f,
-    avatarProps: h,
-    shortenLabelProps: x,
-    renderName: n,
-    ...i
-  } = a;
-  return /* @__PURE__ */ o(
-    r,
+    showDid: d,
+    didProps: m,
+    avatarSize: c,
+    shouldShowHoverCard: p,
+    renderCardContent: f,
+    renderTopRightContent: a,
+    topRightMaxWidth: h,
+    avatarProps: x,
+    shortenLabelProps: u,
+    renderName: l,
+    ...n
+  } = s, r = y("(max-width:500px)");
+  return /* @__PURE__ */ i(
+    o,
     {
       className: "user-card__avatar-content",
       sx: {
@@ -31,33 +31,35 @@ function w({ ...a }) {
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ o(
-          r,
+        /* @__PURE__ */ i(
+          o,
           {
             sx: {
               display: "flex",
               justifyContent: "space-between",
-              alignItems: "center",
-              gap: 1,
+              flexDirection: r ? "column" : "row",
+              alignItems: r ? "flex-start" : "center",
+              gap: r ? 2 : 1,
               flex: 1,
-              minWidth: 0
+              minWidth: 0,
+              flexWrap: "wrap"
             },
             children: [
-              /* @__PURE__ */ o(r, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
+              /* @__PURE__ */ i(o, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
                 /* @__PURE__ */ t(
-                  C,
+                  b,
                   {
                     user: e,
-                    avatarSize: d,
-                    shouldShowHoverCard: m,
-                    renderCardContent: c,
-                    avatarProps: h,
-                    ...i
+                    avatarSize: c,
+                    shouldShowHoverCard: p,
+                    renderCardContent: f,
+                    avatarProps: x,
+                    ...n
                   }
                 ),
-                /* @__PURE__ */ o(r, { children: [
+                /* @__PURE__ */ i(o, { children: [
                   /* @__PURE__ */ t(
-                    g,
+                    w,
                     {
                       variant: "subtitle1",
                       className: "user-card__full-name-label",
@@ -68,11 +70,11 @@ function w({ ...a }) {
                         fontSize: 18,
                         lineHeight: 1.1
                       },
-                      children: n ? n(e) : /* @__PURE__ */ t(S, { sx: { fontWeight: 500 }, ...x, children: e.fullName || e.email || e.did })
+                      children: l ? l(e) : /* @__PURE__ */ t(W, { sx: { fontWeight: 500 }, ...u, children: e.fullName || e.email || e.did })
                     }
                   ),
-                  s && e.did ? /* @__PURE__ */ t(
-                    y,
+                  d && e.did ? /* @__PURE__ */ t(
+                    S,
                     {
                       did: e.did,
                       size: 14,
@@ -80,21 +82,22 @@ function w({ ...a }) {
                       compact: !0,
                       locale: "en",
                       sx: { lineHeight: 1.5 },
-                      ...l ?? {}
+                      ...m ?? {}
                     }
                   ) : null
                 ] })
               ] }),
-              /* @__PURE__ */ t(v, { showSocialActions: i.showSocialActions, user: e, session: i.session })
+              r ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
+              a ? null : /* @__PURE__ */ t(j, { showSocialActions: n.showSocialActions, user: e, session: n.session })
             ]
           }
         ),
-        b(p, f)
+        v(a, h)
       ]
     }
   );
 }
-const D = u(w);
+const P = g(D);
 export {
-  D as default
+  P as default
 };

package/lib/Util/index.js

@@ -1,16 +1,16 @@
 import { lazy as j } from "react";
-import u from "lodash/padStart";
+import l from "lodash/padStart";
 import { colors as w, getDIDMotifInfo as x } from "@arcblock/did-motif";
 import { mergeAllThemeOptions as Ke } from "@blocklet/theme";
 import I from "lodash/isNil";
 import E from "lodash/omitBy";
-import U from "p-retry";
+import v from "p-retry";
 import m from "js-cookie";
-import v from "color-convert";
+import O from "color-convert";
 import a from "dayjs";
 import "dayjs/locale/zh-cn";
-import F from "dayjs/plugin/utc";
-import O from "dayjs/plugin/timezone";
+import U from "dayjs/plugin/utc";
+import F from "dayjs/plugin/timezone";
 import A from "dayjs/plugin/relativeTime";
 import P from "dayjs/plugin/updateLocale";
 import R from "dayjs/plugin/localizedFormat";
@@ -18,15 +18,15 @@ import W from "semver";
 import { DID_PREFIX as L, BLOCKLET_SERVICE_PATH_PREFIX as C } from "./constant.js";
 import b from "../package.json.js";
 import { getFederatedEnabled as M } from "./federated.js";
-let l = null;
-const _ = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/, z = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]), B = /* @__PURE__ */ new Set(["uk", "au", "cn", "nz", "za", "in", "br", "mx", "fr", "it", "ca"]);
-function N(e) {
+let u = null;
+const _ = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/, z = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]), N = /* @__PURE__ */ new Set(["uk", "au", "cn", "nz", "za", "in", "br", "mx", "fr", "it", "ca"]);
+function B(e) {
   if (!e)
     return !1;
   const t = e.split(".");
   if (t.length < 2) return !1;
   const o = t[t.length - 2], n = t[t.length - 1];
-  return z.has(o) && B.has(n);
+  return z.has(o) && N.has(n);
 }
 function ye() {
   const { host: e } = window.location;
@@ -37,7 +37,7 @@ function ye() {
     return "";
   if (o.length > 2) {
     const n = o.slice(-2).join(".");
-    if (N(n))
+    if (B(n))
       return `.${o.slice(-3).join(".")}`;
   }
   return `.${o.slice(-2).join(".")}`;
@@ -51,7 +51,7 @@ function Ie(e) {
 function be(e = {}) {
   return new URLSearchParams(e).toString();
 }
-function Se(e = 1) {
+function De(e = 1) {
   let t = e;
   typeof t == "number" && (t = { expireInDays: t }), t.path === void 0 && (t.path = "/"), t.expireInDays || (t.expireInDays = 1);
   const o = {
@@ -64,7 +64,7 @@ function Se(e = 1) {
   };
   return (typeof window > "u" || t.domain || t.returnDomain === !1) && t.returnDomain === !1 && delete o.domain, o;
 }
-const De = (e) => e.color ? e.color : e.dark ? e.theme.palette.common.white : e.theme.palette.text.primary, ke = (e) => e.background ? e.background : e.dark ? e.theme.palette.common.black : e.theme.palette.common.white;
+const Se = (e) => e.color ? e.color : e.dark ? e.theme.palette.common.white : e.theme.palette.text.primary, ke = (e) => e.background ? e.background : e.dark ? e.theme.palette.common.black : e.theme.palette.common.white;
 function Ve(e, t, o = []) {
   const n = Object.assign({}, e), i = t.defaultProps || {};
   return Object.keys(i).forEach((r) => {
@@ -95,16 +95,16 @@ const Te = () => typeof Intl == "object" && typeof Intl.DateTimeFormat == "funct
   return o;
 }, xe = (e) => {
   const t = Math.round(e / 1e3), o = Math.floor(t / 3600), n = Math.floor((t - o * 3600) / 60), i = t % 60;
-  return `${u(o, 2, "0")}:${u(n, 2, "0")}:${u(i, 2, "0")}`;
+  return `${l(o, 2, "0")}:${l(n, 2, "0")}:${l(i, 2, "0")}`;
 };
 function X(e) {
-  l = e;
+  u = e;
 }
 function Ee() {
-  return l;
+  return u;
 }
-const S = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
-  if (l === null && (a.extend(R), a.extend(F), a.extend(O), a.extend(P), a.extend(A), a.updateLocale("zh-cn", {
+const D = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
+  if (u === null && (a.extend(R), a.extend(U), a.extend(F), a.extend(P), a.extend(A), a.updateLocale("zh-cn", {
     // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
     relativeTime: {
       future: "%s后",
@@ -123,25 +123,25 @@ const S = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
     }
   }), X(a)), I(t) || t === "")
     return "-";
-  let r = l(t);
+  let r = u(t);
   return n && (r = r.tz(n)), i && (r = r.utc()), typeof o < "u" && (r = r.locale(o)), r.format(e);
 };
-function Ue(e, { locale: t = "en", tz: o } = {}) {
-  return S("ll")(e, { locale: t, tz: o });
+function ve(e, { locale: t = "en", tz: o } = {}) {
+  return D("ll")(e, { locale: t, tz: o });
 }
-function ve(e, {
+function Oe(e, {
   locale: t = "en",
   tz: o,
   isUtc: n = !1,
   format: i = "lll"
 } = {}) {
-  return S(i)(e, { locale: t, tz: o, isUtc: n });
+  return D(i)(e, { locale: t, tz: o, isUtc: n });
 }
 function K() {
   const e = window?.ABT_DEV || window.ABT;
   return e && typeof e.open == "function" ? e : null;
 }
-function Fe({
+function Ue({
   webWalletUrl: e,
   action: t = "login",
   locale: o = "en",
@@ -163,7 +163,7 @@ function Fe({
         ...f
       }
     }), { type: "extension" };
-  const D = {
+  const S = {
     toolbar: "no",
     location: "no",
     status: "no",
@@ -173,7 +173,7 @@ function Fe({
     // iphone 8plus size
     width: 414,
     height: 736
-  }, k = `${e}?action=${t}&locale=${o}&url=${encodeURIComponent(n)}`, c = Object.assign({}, D, i), V = (s) => s.innerWidth || s.document.documentElement.clientWidth || s.document.body.clientWidth;
+  }, k = `${e}?action=${t}&locale=${o}&url=${encodeURIComponent(n)}`, c = Object.assign({}, S, i), V = (s) => s.innerWidth || s.document.documentElement.clientWidth || s.document.body.clientWidth;
   if (!("left" in c)) {
     const s = V(window.top || window), T = window.screenLeft || window.screenX;
     c.left = s + T - c.width;
@@ -185,7 +185,7 @@ function Fe({
   const $ = Object.keys(c).map((s) => `${s}=${c[s]}`).join(",");
   return window.open(k, "targetWindow", $), { type: "web" };
 }
-const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) => {
+const Fe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) => {
   const t = e.replace(L, "");
   return !!/^(0x)?[0-9a-f]{40}$/i.test(t);
 }, Q = (e, t) => {
@@ -263,7 +263,7 @@ const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) =
   let r;
   return t && (r = e[t]), (!r || typeof r != "string") && (r = e[n]), (!r || typeof r != "string") && (r = i), r;
 }, Me = (e) => j(
-  () => U(
+  () => v(
     async () => {
       try {
         return await e();
@@ -276,7 +276,7 @@ const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) =
   )
 ), _e = (e) => E(e, I);
 function ze(e, t = 1) {
-  const [o, n, i] = v.hex.rgb(e);
+  const [o, n, i] = O.hex.rgb(e);
   return `rgba(${o}, ${n}, ${i}, ${t})`;
 }
 const G = () => window.blocklet?.serverVersion || "", H = () => b.version, Z = () => (b.dependencies?.["@blocklet/js-sdk"]).replace(/^[\^~>=<]+/, ""), d = (e, t) => {
@@ -285,7 +285,9 @@ const G = () => window.blocklet?.serverVersion || "", H = () => b.version, Z = (
     return f ? f[1] : r;
   }, n = o(e), i = o(t);
   return n === i && e !== t ? !1 : W.gte(n, i);
-}, Be = () => {
+}, Ne = () => {
+  if (process.env.NODE_ENV === "development")
+    return !0;
   const e = G(), t = H(), o = Z();
   if (!e || !t || !o)
     return !1;
@@ -299,16 +301,16 @@ export {
   Ke as deepmergeAll,
   K as detectWalletExtension,
   We as ensureVisitorId,
-  Ue as formatToDate,
-  ve as formatToDatetime,
+  ve as formatToDate,
+  Oe as formatToDatetime,
   xe as formatUptime,
   ke as getBackground,
-  De as getColor,
-  Se as getCookieOptions,
+  Se as getColor,
+  De as getCookieOptions,
   $e as getCopyright,
   Le as getDIDColor,
   Ee as getDateTool,
-  Oe as getFontSize,
+  Fe as getFontSize,
   Z as getJsSdkVersion,
   G as getServerVersion,
   Te as getTimezone,
@@ -318,12 +320,12 @@ export {
   Y as getVisitorId,
   ze as hexToRgba,
   J as isEthereumDid,
-  Be as isSupportFollow,
-  N as isTwoSegmentTLD,
+  Ne as isSupportFollow,
+  B as isTwoSegmentTLD,
   Re as isUrl,
   Me as lazyRetry,
   Ve as mergeProps,
-  Fe as openWebWallet,
+  Ue as openWebWallet,
   Ie as parseQuery,
   ye as resolveRootDomain,
   X as setDateTool,

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.32", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+const e = "3.1.33", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.32",
+  "version": "3.1.33",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "8ec0dc442d3ca3f15ca233ac096af5163963fcb0",
+  "gitHead": "14bd43c4a02eb7617981ef48276f2fc493058240",
   "dependencies": {
-    "@arcblock/bridge": "3.1.32",
+    "@arcblock/bridge": "3.1.33",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.32",
-    "@arcblock/nft-display": "3.1.32",
-    "@arcblock/react-hooks": "3.1.32",
+    "@arcblock/icons": "3.1.33",
+    "@arcblock/nft-display": "3.1.33",
+    "@arcblock/react-hooks": "3.1.33",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.32",
+    "@blocklet/theme": "3.1.33",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/UserCard/Cards/social-actions.tsx

@@ -67,7 +67,7 @@ function Chat({
       session?.login(noop, {
         openMode: 'redirect',
         redirect: window.location.href,
-      }); // TODO: 需要确认使用是否正确
+      });
       return;
     }
     window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
@@ -87,7 +87,8 @@ function Chat({
     <ButtonWrapper
       className="user-card__social-actions-chat"
       variant="outlined"
-      color="inherit"
+      color="primary"
+      size="small"
       onClick={onNavigateToChat}>
       <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
       {t('chat')}
@@ -148,7 +149,8 @@ function Follow({
     <ButtonWrapper
       className="user-card__social-actions-follow"
       variant="outlined"
-      color="inherit"
+      color="primary"
+      size="small"
       onClick={handleFollowAction}>
       {followed ? (
         <NotificationsOffIcon sx={{ fontSize: 14, mr: 0.5 }} />

package/src/UserCard/Content/minimal.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Typography, Box } from '@mui/material';
+import { Typography, Box, useMediaQuery, Divider } from '@mui/material';
 import { DID } from '../../DID';
 import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
@@ -31,7 +31,7 @@ function MinimalContent({ ...props }: MinimalContentProps) {
     renderName,
     ...rest
   } = props;
-
+  const isSmallScreen = useMediaQuery('(max-width:500px)');
   return (
     <Box
       className="user-card__avatar-content"
@@ -44,10 +44,12 @@ function MinimalContent({ ...props }: MinimalContentProps) {
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: 1,
+          flexDirection: isSmallScreen ? 'column' : 'row',
+          alignItems: isSmallScreen ? 'flex-start' : 'center',
+          gap: isSmallScreen ? 2 : 1,
           flex: 1,
           minWidth: 0,
+          flexWrap: 'wrap',
         }}>
         <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1 }}>
           <TooltipAvatar
@@ -91,7 +93,10 @@ function MinimalContent({ ...props }: MinimalContentProps) {
             ) : null}
           </Box>
         </Box>
-        <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
+        {isSmallScreen ? <Divider sx={{ width: '100%' }} /> : null}
+        {!renderTopRightContent ? (
+          <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
+        ) : null}
       </Box>
       {renderTopRight(renderTopRightContent, topRightMaxWidth)}
     </Box>

package/src/Util/index.ts

@@ -710,6 +710,10 @@ export const compareVersions = (version1: string, version2: string) => {
  * 通过 server 的版本和 ux 的版本共同决定
  */
 export const isSupportFollow = () => {
+  // HACK: 本地开发时，为了测试方便，暂时放开限制
+  if (process.env.NODE_ENV === 'development') {
+    return true;
+  }
   const serverVersion = getServerVersion();
   const uxVersion = getUxPackageVersion();
   const jsSdkVersion = getJsSdkVersion();