@arcblock/ux 3.1.28 → 3.1.31

package/lib/package.json.js

@@ -0,0 +1,9 @@
+const e = "3.1.31", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+  version: e,
+  dependencies: s
+};
+export {
+  t as default,
+  s as dependencies,
+  e as version
+};

package/lib/withTracker/action/bind-wallet.d.ts

@@ -0,0 +1,14 @@
+import { LiteralUnion } from 'type-fest';
+export interface BindWalletEvent {
+    action: 'bindWalletSuccess' | 'bindWalletFailed';
+    provider: LiteralUnion<'wallet' | 'apple' | 'github' | 'google' | 'email' | 'twitter' | 'passkey', string>;
+}
+export interface BindWalletSuccessEvent extends BindWalletEvent {
+    action: 'bindWalletSuccess';
+    success: true;
+}
+export interface BindWalletFailedEvent extends BindWalletEvent {
+    action: 'bindWalletFailed';
+    success: false;
+    errorMessage: string;
+}

package/lib/withTracker/action/bind-wallet.js

@@ -0,0 +1 @@
+

package/lib/withTracker/action/login.d.ts

@@ -0,0 +1,15 @@
+import { LiteralUnion } from 'type-fest';
+export interface LoginEvent {
+    action: 'loginSuccess' | 'loginFailed';
+    provider: LiteralUnion<'wallet' | 'apple' | 'github' | 'google' | 'email' | 'twitter' | 'passkey', string>;
+    success: boolean;
+}
+export interface LoginSuccessEvent extends LoginEvent {
+    action: 'loginSuccess';
+    success: true;
+}
+export interface LoginFailedEvent extends LoginEvent {
+    action: 'loginFailed';
+    success: false;
+    errorMessage: string;
+}

package/lib/withTracker/action/login.js

@@ -0,0 +1 @@
+

package/lib/withTracker/action/pay.d.ts

@@ -0,0 +1,12 @@
+export interface PayEvent {
+    action: 'paySuccess' | 'payFailed';
+    checkoutSessionMode: string;
+    success: boolean;
+}
+export interface PaySuccessEvent extends PayEvent {
+    success: true;
+}
+export interface PayFailedEvent extends PayEvent {
+    success: false;
+    errorMessage: string;
+}

package/lib/withTracker/action/pay.js

@@ -0,0 +1 @@
+

package/lib/withTracker/action/switch-passport.d.ts

@@ -0,0 +1,18 @@
+export interface SwitchPassportEvent {
+    action: 'switchPassportSuccess' | 'switchPassportFailed';
+    success: boolean;
+}
+export interface SwitchPassportSuccessEvent extends SwitchPassportEvent {
+    success: true;
+    /**
+     *
+     * @example guest -> admin
+     * @type {string}
+     * @memberof SwitchPassportEvent
+     */
+    change: string;
+}
+export interface SwitchPassportFailedEvent extends SwitchPassportEvent {
+    success: false;
+    errorMessage: string;
+}

package/lib/withTracker/action/switch-passport.js

@@ -0,0 +1 @@
+

package/lib/withTracker/constant/index.d.ts

@@ -0,0 +1,3 @@
+export declare const GA_LAST_LOGIN_METHOD = "ga-last-login-method";
+export declare const GA_LAST_ROLE = "ga-last-role";
+export declare const GA_LAST_SOURCE_PROVIDER = "ga-last-source-provider";

package/lib/withTracker/constant/index.js

@@ -0,0 +1,6 @@
+const o = "ga-last-login-method", t = "ga-last-role", _ = "ga-last-source-provider";
+export {
+  o as GA_LAST_LOGIN_METHOD,
+  t as GA_LAST_ROLE,
+  _ as GA_LAST_SOURCE_PROVIDER
+};

package/lib/withTracker/env.d.ts

@@ -0,0 +1 @@
+export declare const googleAnalyticsMeasurementId: string;

package/lib/withTracker/env.js

@@ -0,0 +1,4 @@
+const e = window.blocklet?.GA_MEASUREMENT_ID || "";
+export {
+  e as googleAnalyticsMeasurementId
+};

package/lib/withTracker/index.d.ts

@@ -1,2 +1,4 @@
+import { default as ReactGA } from 'react-ga4';
+export { ReactGA };
 declare const _default: <P extends object>(WrappedComponent: React.ComponentType<P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/withTracker/index.js

@@ -1,22 +1,26 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useLocation as m } from "react-router-dom";
-import { useMount as f, useDeepCompareEffect as d } from "ahooks";
-import a from "react-ga4";
-const v = (i) => {
-  const n = window.blocklet?.GA_MEASUREMENT_ID || "", r = (o, e = document.title) => {
-    !process.env.NODE_ENV || process.env.NODE_ENV === "development" || n && a.send({ hitType: "pageview", page: o, title: e });
-  }, c = (o, e, t, p) => {
-    n && a.event({ category: o, action: e, label: t, value: p, transport: "beacon" });
+import { jsx as p } from "react/jsx-runtime";
+import { useLocation as f } from "react-router-dom";
+import { useMount as s, useDeepCompareEffect as u } from "ahooks";
+import r from "react-ga4";
+import { default as A } from "react-ga4";
+import { googleAnalyticsMeasurementId as n } from "./env.js";
+n && r.initialize(n);
+const h = (i) => {
+  const a = (o, t = document.title) => {
+    n && r.send({ hitType: "pageview", page: o, title: t });
+  }, c = (o, t, e, m) => {
+    n && r.event({ category: o, action: t, label: e, value: m, transport: "beacon" });
   };
-  return n && a.initialize(n), window.trackPage = r, window.trackEvent = c, function(e) {
-    const t = m();
-    return f(() => {
-      r(t.pathname);
-    }), d(() => {
-      r(t.pathname);
-    }, [t.pathname]), /* @__PURE__ */ s(i, { ...e });
+  return window.trackPage = a, window.trackEvent = c, function(t) {
+    const e = f();
+    return s(() => {
+      a(e.pathname);
+    }), u(() => {
+      a(e.pathname);
+    }, [e.pathname]), /* @__PURE__ */ p(i, { ...t });
   };
 };
 export {
-  v as default
+  A as ReactGA,
+  h as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.28",
+  "version": "3.1.31",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -45,6 +45,7 @@
     "@types/pako": "^2.0.3",
     "@types/react": "^19.1.8",
     "@types/react-helmet": "^6.1.11",
+    "@types/semver": "^7.7.0",
     "@types/webfontloader": "^1.6.38",
     "babel-jest": "29",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -67,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "8a62be8796c0ab9129b24a08ecc051d1ac23e0de",
+  "gitHead": "a904bcfb38156f7cdff5b2134c126b19d528f4b2",
   "dependencies": {
-    "@arcblock/bridge": "3.1.28",
+    "@arcblock/bridge": "3.1.31",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.28",
-    "@arcblock/nft-display": "3.1.28",
-    "@arcblock/react-hooks": "3.1.28",
-    "@blocklet/js-sdk": "^1.16.48",
-    "@blocklet/theme": "3.1.28",
+    "@arcblock/icons": "3.1.31",
+    "@arcblock/nft-display": "3.1.31",
+    "@arcblock/react-hooks": "3.1.31",
+    "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
+    "@blocklet/theme": "3.1.31",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -123,6 +124,7 @@
     "react-svg": "^16.3.0",
     "react-use": "^17.6.0",
     "rebound": "^0.1.0",
+    "semver": "^7.7.2",
     "topojson-client": "^3.1.0",
     "type-fest": "^4.41.0",
     "validator": "^13.15.15",

package/src/SessionUser/components/logged-in.tsx

@@ -33,6 +33,7 @@ import type { Locale, Session } from '../../type';
 import DidSpace from './did-space';
 import { mergeSx } from '../../Util/style';
 import { createDebug } from '../../Util/logger';
+import { GA_LAST_ROLE } from '../../withTracker/constant';
 
 const getInviteLink = (inviter: string) => {
   const url = new URL(window.location.href);
@@ -86,6 +87,7 @@ export default function LoggedIn({
   const oauth = session.useOAuth();
   const passkey = typeof session.usePasskey === 'function' ? session.usePasskey() : null;
   const handleSwitchPassport = useMemoizedFn(({ inArcSphere = false } = {}) => {
+    localStorage.setItem(GA_LAST_ROLE, session?.user?.role);
     const extraParams: Record<string, any> = {};
     if (inArcSphere) {
       if (session?.user?.sourceAppPid) {

package/src/UserCard/Cards/avatar-only.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserCardProps, InfoType, User } from '../types';
+import { UserCardProps, User } from '../types';
 import TooltipAvatar from '../Content/tooltip-avatar';
 
 interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
@@ -12,20 +12,6 @@ interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
 function AvatarOnlyCard(props: AvatarOnlyCardProps) {
   const { user, infoType, avatarSize = 48, shouldShowHoverCard = false, renderCardContent, ...rest } = props;
 
-  // 对于NameOnly类型使用普通Tooltip
-  if (infoType === InfoType.NameOnly) {
-    return (
-      <TooltipAvatar
-        user={user}
-        avatarSize={avatarSize}
-        shouldShowHoverCard={false}
-        renderCardContent={renderCardContent}
-        tooltipTitle={user.fullName || user.email || user.did}
-        {...rest}
-      />
-    );
-  }
-
   // 其他类型使用自定义Tooltip或无Tooltip
   return (
     <TooltipAvatar

package/src/UserCard/Cards/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { UserCardProps, InfoType, User } from '../types';
-import NameOnlyCard from './name-only';
+import { UserCardProps, User } from '../types';
 import BasicCard from './basic-info';
 
 interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
@@ -11,15 +10,7 @@ interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
 
 // DetailedCard组件，根据infoType选择不同的卡片组件进行渲染
 function DetailedCard({ ...props }: DetailedCardProps) {
-  const { infoType = InfoType.Minimal } = props;
-
-  // 根据信息类型选择合适的卡片组件
-  switch (infoType) {
-    case InfoType.NameOnly:
-      return <NameOnlyCard {...props} />;
-    default:
-      return <BasicCard {...props} />;
-  }
+  return <BasicCard {...props} />;
 }
 
 export default DetailedCard;

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

@@ -0,0 +1,196 @@
+import { useMemo } from 'react';
+import { Box, Button, styled } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { joinURL } from 'ufo';
+import noop from 'lodash/noop';
+import { Icon } from '@iconify/react';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+
+import useFollow from '../use-follow';
+import { User, UserCardProps } from '../types';
+import { useLocaleContext } from '../../Locale/context';
+import { translate } from '../../Locale/util';
+import { isSupportFollow } from '../../Util';
+
+type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session'> & {
+  user: User; // 当前卡片显示的用户，要与 session.user 区分开
+};
+
+const translations = {
+  zh: {
+    chat: '聊天',
+    follow: '关注',
+    unfollow: '取消关注',
+    follow_success: '关注成功',
+    unfollow_success: '取消关注成功',
+  },
+  en: {
+    chat: 'Chat',
+    follow: 'Follow',
+    unfollow: 'Unfollow',
+    follow_success: 'Follow success',
+    unfollow_success: 'Unfollow success',
+  },
+};
+
+const getDiscussKitMountPoint = () => {
+  const { componentMountPoints = [] } = window.blocklet || {};
+  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
+  return component?.mountPoint;
+};
+
+// chat: 1. showSocialActions.chat 为 true，2. 必须安装了 discuss kit
+function Chat({
+  user,
+  showSocialActions,
+  session,
+}: {
+  user: SocialActionsProps['user'];
+  showSocialActions: SocialActionsProps['showSocialActions'];
+  session: SocialActionsProps['session'];
+}) {
+  const { locale } = useLocaleContext() || { locale: 'en' };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const isLogin = useMemo(() => {
+    return !!session?.user?.did;
+  }, [session?.user?.did]);
+
+  // 获取 discuss kit 的挂载点
+  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);
+
+  const onNavigateToChat = useMemoizedFn(() => {
+    if (!isLogin) {
+      session?.login(noop, {
+        openMode: 'redirect',
+        redirect: window.location.href,
+      }); // TODO: 需要确认使用是否正确
+      return;
+    }
+    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
+  });
+
+  const showChat = useMemo(() => {
+    // boolean：直接使用原值；对象：取对应属性值
+    const chatEnabled = typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.chat;
+
+    return chatEnabled && !!discussKitMountPoint;
+  }, [showSocialActions, discussKitMountPoint]);
+
+  if (!showChat) {
+    return null;
+  }
+  return (
+    <ButtonWrapper
+      className="user-card__social-actions-chat"
+      variant="outlined"
+      color="inherit"
+      onClick={onNavigateToChat}>
+      <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
+      {t('chat')}
+    </ButtonWrapper>
+  );
+}
+
+// follow: 1. showSocialActions.follow 为 true
+function Follow({
+  user,
+  showSocialActions,
+  session,
+}: {
+  user: SocialActionsProps['user'];
+  showSocialActions: SocialActionsProps['showSocialActions'];
+  session: SocialActionsProps['session'];
+}) {
+  const { locale } = useLocaleContext() || { locale: 'en' };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const isLogin = useMemo(() => {
+    return !!session?.user?.did;
+  }, [session?.user?.did]);
+
+  const showFollow = useMemo(() => {
+    // boolean：直接使用原值；对象：取对应属性值
+    return typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.follow;
+  }, [showSocialActions]);
+
+  const { followed, followUser, unfollowUser } = useFollow({
+    user,
+    t,
+    isMySelf: false,
+    visible: !!showFollow,
+  });
+  const handleFollowAction = useMemoizedFn(() => {
+    if (!isLogin) {
+      session?.login(noop, {
+        openMode: 'redirect',
+        redirect: window.location.href,
+      });
+      return;
+    }
+    if (followed) {
+      unfollowUser(user.did);
+    } else {
+      followUser(user.did);
+    }
+  });
+
+  if (!showFollow) {
+    return null;
+  }
+
+  return (
+    <ButtonWrapper
+      className="user-card__social-actions-follow"
+      variant="outlined"
+      color="inherit"
+      onClick={handleFollowAction}>
+      {followed ? (
+        <NotificationsOffIcon sx={{ fontSize: 14, mr: 0.5 }} />
+      ) : (
+        <NotificationsIcon sx={{ fontSize: 14, mr: 0.5 }} />
+      )}
+      {followed ? t('unfollow') : t('follow')}
+    </ButtonWrapper>
+  );
+}
+
+// 社交操作组件
+// 按钮的显示逻辑
+// 通用逻辑： 1. user 和 session.user 不能是同一个用户, 2. 相关依赖支持，3. showSocialActions 为 true 或 为 object
+// 其他逻辑： 1. 如果 session 中没有用户信息，点击后需要重定向到登录页面
+function SocialActions({ showSocialActions, session, user }: SocialActionsProps) {
+  const isSameUser = useMemo(() => {
+    return session?.user?.did === user?.did;
+  }, [session?.user?.did, user?.did]);
+
+  const isSupportSocialActions = useMemo(() => {
+    return isSupportFollow();
+  }, []);
+
+  // 如果 session 中没有用户信息，或者 user 和 session.user 是同一个用户，则不显示社交操作
+  if (isSameUser || !isSupportSocialActions || !showSocialActions) {
+    return null;
+  }
+
+  return (
+    <Box className="user-card__social-actions" sx={{ display: 'flex', gap: 1 }}>
+      <Chat session={session} user={user} showSocialActions={showSocialActions} />
+      <Follow session={session} user={user} showSocialActions={showSocialActions} />
+    </Box>
+  );
+}
+
+export default SocialActions;
+
+export const ButtonWrapper = styled(Button)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-weight: 500;
+  border-color: ${({ theme }) => theme.palette.grey[300]};
+  line-height: 1.5;
+`;

package/src/UserCard/Content/minimal.tsx

@@ -5,6 +5,7 @@ import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
 import ShortenLabel from './shorten-label';
+import SocialActions from '../Cards/social-actions';
 
 interface MinimalContentProps extends UserCardProps {
   user: User;
@@ -42,44 +43,55 @@ function MinimalContent({ ...props }: MinimalContentProps) {
       <Box
         sx={{
           display: 'flex',
-          justifyContent: 'flex-start',
+          justifyContent: 'space-between',
           alignItems: 'center',
           gap: 1,
           flex: 1,
           minWidth: 0,
         }}>
-        <TooltipAvatar
-          user={user}
-          avatarSize={avatarSize}
-          shouldShowHoverCard={shouldShowHoverCard}
-          renderCardContent={renderCardContent}
-          avatarProps={avatarProps}
-          {...rest}
-        />
-        <Box>
-          <Typography
-            variant="subtitle1"
-            className="user-card__full-name-label"
-            noWrap
-            sx={{
-              fontWeight: 500,
-              color: 'text.primary',
-              fontSize: 18,
-              lineHeight: 1.1,
-            }}>
-            {renderName ? (
-              renderName(user)
-            ) : (
-              <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
-                {user.fullName || user.email || user.did}
-              </ShortenLabel>
-            )}
-          </Typography>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1 }}>
+          <TooltipAvatar
+            user={user}
+            avatarSize={avatarSize}
+            shouldShowHoverCard={shouldShowHoverCard}
+            renderCardContent={renderCardContent}
+            avatarProps={avatarProps}
+            {...rest}
+          />
+          <Box>
+            <Typography
+              variant="subtitle1"
+              className="user-card__full-name-label"
+              noWrap
+              sx={{
+                fontWeight: 500,
+                color: 'text.primary',
+                fontSize: 18,
+                lineHeight: 1.1,
+              }}>
+              {renderName ? (
+                renderName(user)
+              ) : (
+                <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
+                  {user.fullName || user.email || user.did}
+                </ShortenLabel>
+              )}
+            </Typography>
 
-          {showDid && user.did ? (
-            <DID did={user.did} size={14} copyable compact locale="en" sx={{ lineHeight: 1.5 }} {...(didProps ?? {})} />
-          ) : null}
+            {showDid && user.did ? (
+              <DID
+                did={user.did}
+                size={14}
+                copyable
+                compact
+                locale="en"
+                sx={{ lineHeight: 1.5 }}
+                {...(didProps ?? {})}
+              />
+            ) : null}
+          </Box>
         </Box>
+        <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
       </Box>
       {renderTopRight(renderTopRightContent, topRightMaxWidth)}
     </Box>

package/src/UserCard/UserCard.stories.jsx

@@ -5,6 +5,7 @@ export { default as DidControl } from './demo/didControl';
 export { default as TopRightContent } from './demo/topRightContent';
 export { default as CustomFooter } from './demo/customFooter';
 export { default as DidOnlyAvatar } from './demo/did-only-avatar';
+export { default as SocialActions } from './demo/socialActions';
 
 export default {
   title: 'Data Display/UserCard',

package/src/UserCard/index.tsx

@@ -6,6 +6,7 @@ import DetailedCard from './Cards';
 import DialogContainer from './Container/dialog';
 import CardContainer from './Container/card';
 import Avatar from '../Avatar';
+import SocialActions from './Cards/social-actions';
 import { getUserByDid, isUserDid } from './utils';
 
 // 创建仅显示名称首字母的头像
@@ -93,6 +94,9 @@ function UserCard(props: UserCardProps) {
           infoType={props.popupInfoType || props.infoType}
           didProps={props.popupDidProps || props.didProps}
           showDid={props.popupShowDid || props.showDid}
+          showSocialActions={
+            props.popupShowSocialActions === undefined ? props.showSocialActions : props.popupShowSocialActions
+          }
         />
       </DialogContainer>
     );
@@ -124,3 +128,5 @@ function UserCard(props: UserCardProps) {
 }
 
 export default UserCard;
+
+export { SocialActions };

package/src/UserCard/types.ts

@@ -3,6 +3,7 @@ import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
 import { AvatarProps } from '../Avatar';
 import { ShortenLabelProps } from './Content/shorten-label';
+import type { Session } from '../type';
 
 type UserPublicInfo = {
   avatar: string;
@@ -100,13 +101,17 @@ export enum CardType {
 
 // 信息类型
 export enum InfoType {
-  NameOnly = 'NameOnly', // 仅显示名称
   Minimal = 'Minimal', // 极简模式，显示头像、名称和DID
   Basic = 'Basic', // 基本信息模式
 }
 
+export type SocialActionProps = {
+  chat: boolean;
+  follow: boolean;
+};
 // 定义UserCard属性接口
 export interface UserCardProps {
+  session?: Session;
   user?: User;
   did?: string;
   cardType?: CardType;
@@ -146,6 +151,10 @@ export interface UserCardProps {
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth?: number;
 
+  // 社交按钮相关属性
+  showSocialActions?: SocialActionProps | boolean;
+  popupShowSocialActions?: SocialActionProps | boolean;
+
   // 自定义内容渲染函数
   renderCustomContent?: () => React.ReactNode;