@arcblock/ux 3.1.28 → 3.1.31

package/src/UserCard/use-follow.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import isNil from 'lodash/isNil';
+
+import type { AxiosError } from 'axios';
+import { BlockletSDK } from '@blocklet/js-sdk';
+import Toast from '../Toast';
+import type { User } from './types';
+
+export const formatAxiosError = (err: AxiosError) => {
+  const { response } = err;
+
+  if (response) {
+    return `Request failed: ${response.status} ${response.statusText}: ${JSON.stringify(response.data)}`;
+  }
+
+  return err.message;
+};
+
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({
+  user,
+  t,
+  isMySelf,
+  visible,
+}: {
+  user: User;
+  t: (k: string) => string;
+  isMySelf: boolean;
+  visible: boolean;
+}) {
+  const [followed, setFollowed] = useState(false);
+
+  const userDid = useMemo(() => user?.did, [user]);
+
+  // 判断 user 对象中 isFollowing 值是否有效，有isFollowed字段并且值不为 undefined 或 null
+  // 如果为 true 则不需要通过 api 查询，直接使用 user.isFollowing 值
+  // 如果为 false 则需要通过 api 查询，并设置 user.isFollowing 值
+  const hasFollowedField = useMemo(() => {
+    return Object.prototype.hasOwnProperty.call(user, 'isFollowing') && !isNil((user as any).isFollowing);
+  }, [user]);
+
+  const client = useMemo(() => {
+    let _client: BlockletSDK | null = null;
+    try {
+      _client = new BlockletSDK();
+    } catch (error) {
+      console.error('Failed to initialize BlockletSDK:', error);
+      _client = null;
+    }
+    return _client;
+  }, []);
+
+  const isFollowingUser = useMemoizedFn(async () => {
+    if (!client) {
+      setFollowed(false);
+      return;
+    }
+    try {
+      if (isMySelf) {
+        setFollowed(true);
+        return;
+      }
+      const res = await client.user.isFollowingUser({ userDid });
+      setFollowed(res);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
+    if (!client || (isMySelf && followUserDid === userDid)) {
+      return;
+    }
+    try {
+      await client.user.followUser({ userDid: followUserDid });
+      Toast.success(t('follow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
+    if (!client || (isMySelf && unfollowUserDid === userDid)) {
+      return;
+    }
+    try {
+      await client.user.unfollowUser({ userDid: unfollowUserDid });
+      Toast.success(t('unfollow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+
+  useEffect(() => {
+    // 如果 user 对象中已经存在了 isFollowing 字段，则不进行查询
+    if (visible && userDid && !isMySelf && !!client && !hasFollowedField) {
+      isFollowingUser();
+    }
+  }, [isFollowingUser, userDid, isMySelf, client, hasFollowedField, visible]);
+
+  // 如果 user 对象中已经存在了 isFollowing 字段，则直接设置 followed 状态
+  useEffect(() => {
+    if (hasFollowedField) {
+      setFollowed((user as any)?.isFollowing || false);
+    }
+  }, [hasFollowedField, user]);
+
+  return {
+    followed,
+    followUser,
+    unfollowUser,
+  };
+}

package/src/Util/index.ts

@@ -15,8 +15,10 @@ import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import semver from 'semver';
 
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
+import pkg from '../../package.json';
 import type { $TSFixMe, Locale } from '../type';
 import { getFederatedEnabled } from './federated';
 
@@ -658,3 +660,68 @@ export function hexToRgba(hex: string, alpha = 1) {
   // 返回 RGBA 格式
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
+
+// 获取 server 的版本号
+export const getServerVersion = () => {
+  return window.blocklet?.serverVersion || '';
+};
+
+// 获取 UX 包版本号
+export const getUxPackageVersion = () => {
+  return pkg.version || '';
+};
+
+export const getJsSdkVersion = () => {
+  // 从 package.json 的 dependencies 中获取 @blocklet/js-sdk 的版本
+  const jsSdkVersion = pkg.dependencies?.['@blocklet/js-sdk'];
+  if (!jsSdkVersion) {
+    return '';
+  }
+  // 移除版本前缀符号 (^, ~, >=, 等)
+  return jsSdkVersion.replace(/^[\^~>=<]+/, '');
+};
+
+/**
+ * 比较两个版本号，version1 是否大于等于 version2
+ * @param {*} version1
+ * @param {*} version2
+ * @returns boolean
+ */
+export const compareVersions = (version1: string, version2: string) => {
+  const getDateVersion = (version: string) => {
+    const match = version.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
+    return match ? match[1] : version;
+  };
+
+  const dateVersion1 = getDateVersion(version1);
+  const dateVersion2 = getDateVersion(version2);
+
+  // 如果基础版本相同，但完整版本不同（意味着有额外部分），返回false
+  if (dateVersion1 === dateVersion2 && version1 !== version2) {
+    return false;
+  }
+
+  // 其他情况正常比较
+  return semver.gte(dateVersion1, dateVersion2);
+};
+
+/**
+ * 是否支持用户的 follow 关系
+ * 通过 server 的版本和 ux 的版本共同决定
+ */
+export const isSupportFollow = () => {
+  const serverVersion = getServerVersion();
+  const uxVersion = getUxPackageVersion();
+  const jsSdkVersion = getJsSdkVersion();
+
+  if (!serverVersion || !uxVersion || !jsSdkVersion) {
+    return false;
+  }
+  // UX 包支持
+  const uxVersionSupport = compareVersions(uxVersion, '3.1.29');
+  // 服务端接口实现支持
+  const serverVersionSupport = compareVersions(serverVersion, '1.16.49-beta-20250822-070545-6d3344cc');
+  // SDK 接口实现支持
+  const jsSdkVersionSupport = compareVersions(jsSdkVersion, '1.16.49-beta-20250822-070545-6d3344cc');
+  return uxVersionSupport && serverVersionSupport && jsSdkVersionSupport;
+};

package/src/withTracker/action/bind-wallet.tsx

@@ -0,0 +1,17 @@
+import type { 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/src/withTracker/action/login.tsx

@@ -0,0 +1,18 @@
+import type { 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/src/withTracker/action/pay.tsx

@@ -0,0 +1,14 @@
+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/src/withTracker/action/switch-passport.tsx

@@ -0,0 +1,20 @@
+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/src/withTracker/constant/index.tsx

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

package/src/withTracker/env.tsx

@@ -0,0 +1 @@
+export const googleAnalyticsMeasurementId: string = window.blocklet?.GA_MEASUREMENT_ID || '';

package/src/withTracker/index.tsx

@@ -1,29 +1,26 @@
 import { useLocation } from 'react-router-dom';
 import { useMount, useDeepCompareEffect } from 'ahooks';
 import ReactGA from 'react-ga4';
+import { googleAnalyticsMeasurementId } from './env';
 
+if (googleAnalyticsMeasurementId) {
+  ReactGA.initialize(googleAnalyticsMeasurementId);
+}
+
+export { ReactGA };
 export default <P extends object>(WrappedComponent: React.ComponentType<P>) => {
-  const trackingId = window.blocklet?.GA_MEASUREMENT_ID || '';
   const trackPage = (page: string, title = document.title) => {
-    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
-      return;
-    }
-
-    if (trackingId) {
+    if (googleAnalyticsMeasurementId) {
       ReactGA.send({ hitType: 'pageview', page, title });
     }
   };
 
   const trackEvent = (category: string, action: string, label: string, value: number) => {
-    if (trackingId) {
+    if (googleAnalyticsMeasurementId) {
       ReactGA.event({ category, action, label, value, transport: 'beacon' });
     }
   };
 
-  if (trackingId) {
-    ReactGA.initialize(trackingId);
-  }
-
   // @ts-ignore
   window.trackPage = trackPage;
   // @ts-ignore

package/lib/UserCard/Cards/name-only.d.ts

@@ -1,5 +0,0 @@
-import { UserCardProps, User } from '../types';
-declare function NameOnlyCard(props: Omit<UserCardProps, 'user'> & {
-    user: User;
-}): import("react/jsx-runtime").JSX.Element;
-export default NameOnlyCard;

package/lib/UserCard/Cards/name-only.js

@@ -1,13 +0,0 @@
-import { jsxs as o, Fragment as i, jsx as n } from "react/jsx-runtime";
-import { Typography as m } from "@mui/material";
-import { renderAvatar as d } from "../components.js";
-function c(a) {
-  const { user: r, avatarSize: t = 48, onAvatarClick: e } = a;
-  return /* @__PURE__ */ o(i, { children: [
-    d(r, t, a.avatarProps, e),
-    /* @__PURE__ */ n(m, { variant: "body1", children: r.fullName || r.email || r.did })
-  ] });
-}
-export {
-  c as default
-};

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

@@ -1,17 +0,0 @@
-import { Typography } from '@mui/material';
-import { UserCardProps, User } from '../types';
-import { renderAvatar } from '../components';
-
-// 详细卡片模式下的NameOnly渲染组件
-function NameOnlyCard(props: Omit<UserCardProps, 'user'> & { user: User }) {
-  const { user, avatarSize = 48, onAvatarClick } = props;
-
-  return (
-    <>
-      {renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick)}
-      <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
-    </>
-  );
-}
-
-export default NameOnlyCard;