@arcblock/ux 3.1.30 → 3.1.31

package/lib/SessionUser/components/logged-in.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as r, Fragment as W } from "react/jsx-runtime";
-import { useRef as z, useEffect as j } from "react";
-import { useMemoizedFn as n, useCreation as T, useReactive as _ } from "ahooks";
+import { useRef as z, useEffect as T } from "react";
+import { useMemoizedFn as n, useCreation as _, useReactive as j } from "ahooks";
 import f from "@arcblock/bridge";
-import { Box as S, IconButton as H, Popper as N, ClickAwayListener as Q, Fade as V, Paper as q, Divider as k, MenuList as G, MenuItem as J } from "@mui/material";
+import { Box as k, IconButton as G, Popper as H, ClickAwayListener as N, Fade as Q, Paper as V, Divider as S, MenuList as q, MenuItem as J } from "@mui/material";
 import { Icon as K } from "@iconify/react";
 import X from "@iconify-icons/material-symbols/person-outline-rounded";
 import Y from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
@@ -15,33 +15,35 @@ import te from "../../Avatar/index.js";
 import { getUserAvatar as oe } from "../../Util/index.js";
 import ie from "./user-info.js";
 import { DASHBOARD_URL as ne, PROFILE_URL as ce } from "../../Util/constant.js";
-import ae from "../../SessionPermission/index.js";
-import { translations as le } from "../libs/translation.js";
+import le from "../../SessionPermission/index.js";
+import { translations as ae } from "../libs/translation.js";
 import { translate as se } from "../../Locale/util.js";
 import pe from "./did-space.js";
 import { mergeSx as ue } from "../../Util/style.js";
 import { createDebug as de } from "../../Util/logger.js";
-const me = (e) => {
+import { GA_LAST_ROLE as me } from "../../withTracker/constant/index.js";
+const fe = (e) => {
   const c = new URL(window.location.href);
   return c.searchParams.set("inviter", e), c.toString();
 }, g = de("did-connect");
-function We({
+function Te({
   session: e,
   onBindWallet: c = h,
-  isBlocklet: a = !0,
+  isBlocklet: l = !0,
   locale: u = "en",
   size: b = 24,
   popperType: I = "click",
   sx: y,
   ...R
 }) {
-  const l = n((t, o = {}) => se(le, t, u, "en", o)), C = T(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), P = z(null), d = _({
+  const a = n((t, o = {}) => se(ae, t, u, "en", o)), C = _(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), P = z(null), d = j({
     open: !1
   }), i = n((t = !d.open) => {
     d.open = t;
-  }), B = I === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, D = oe(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), L = e.useOAuth(), O = typeof e.usePasskey == "function" ? e.usePasskey() : null, v = n(({ inArcSphere: t = !1 } = {}) => {
+  }), L = I === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, B = oe(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), D = e.useOAuth(), O = typeof e.usePasskey == "function" ? e.usePasskey() : null, v = n(({ inArcSphere: t = !1 } = {}) => {
+    localStorage.setItem(me, e?.user?.role);
     const o = {};
-    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? O.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? L.switchOAuthPassport(e.user) : e.switchPassport(h, o);
+    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? O.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? D.switchOAuthPassport(e.user) : e.switchPassport(h, o);
   }), x = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((F) => {
     const A = {};
     o && e.user.sourceAppPid && (A.sourceAppPid = e.user.sourceAppPid);
@@ -56,16 +58,16 @@ function We({
   })), w = n(({ inArcSphere: t = !1 } = {}) => {
     const o = {};
     t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(h, o);
-  }), M = n(() => {
-    i(!1), e.logout();
   }), E = n(() => {
+    i(!1), e.logout();
+  }), M = n(() => {
     i(!1), e.bindWallet(c);
   }), U = n(() => {
     i(!1);
-    const t = me(e.user.did);
-    ee(t), re.success(l("inviteCopied"));
+    const t = fe(e.user.did);
+    ee(t), re.success(a("inviteCopied"));
   });
-  return j(() => {
+  return T(() => {
     f.registerBlocklet("callSwitchPassport", () => {
       g("bridge registerBlocklet: callSwitchPassport"), v({ inArcSphere: !0 });
     }), f.registerBlocklet("callSwitchDid", () => {
@@ -74,7 +76,7 @@ function We({
       g("bridge registerBlocklet: callSwitchProfile"), w({ inArcSphere: !0 });
     });
   }, []), /* @__PURE__ */ s(
-    S,
+    k,
     {
       sx: ue(
         {
@@ -88,19 +90,19 @@ function We({
       ...R,
       children: [
         /* @__PURE__ */ r(
-          H,
+          G,
           {
             ref: P,
             size: "medium",
             "data-cy": "sessionManager-logout-popup",
             className: "arc-session-user-logged-in",
             "aria-label": "User info button",
-            ...B,
-            children: /* @__PURE__ */ r(te, { variant: "circle", did: e.user.did, src: D, size: b, shape: "circle" })
+            ...L,
+            children: /* @__PURE__ */ r(te, { variant: "circle", did: e.user.did, src: B, size: b, shape: "circle" })
           }
         ),
         /* @__PURE__ */ r(
-          N,
+          H,
           {
             open: d.open,
             anchorEl: P.current,
@@ -110,13 +112,13 @@ function We({
               zIndex: 1600
             },
             children: ({ TransitionProps: t }) => /* @__PURE__ */ r(
-              Q,
+              N,
               {
                 onClickAway: (o) => {
                   o.preventDefault(), o.stopPropagation(), i(!1);
                 },
-                children: /* @__PURE__ */ r(V, { ...t, timeout: 350, children: /* @__PURE__ */ s(
-                  q,
+                children: /* @__PURE__ */ r(Q, { ...t, timeout: 350, children: /* @__PURE__ */ s(
+                  V,
                   {
                     variant: "outlined",
                     sx: {
@@ -129,22 +131,22 @@ function We({
                         ie,
                         {
                           locale: u,
-                          isBlocklet: a,
+                          isBlocklet: l,
                           session: e,
                           onSwitchPassport: v,
                           onSwitchAccount: x,
                           onSwitchProfile: w,
-                          onBindWallet: E
+                          onBindWallet: M
                         }
                       ),
-                      /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
-                      /* @__PURE__ */ s(G, { sx: { p: 0 }, children: [
-                        a ? /* @__PURE__ */ s(W, { children: [
-                          /* @__PURE__ */ r(ae, { session: e, children: /* @__PURE__ */ r(
+                      /* @__PURE__ */ r(S, { sx: { m: "0 !important" } }),
+                      /* @__PURE__ */ s(q, { sx: { p: 0 }, children: [
+                        l ? /* @__PURE__ */ s(W, { children: [
+                          /* @__PURE__ */ r(le, { session: e, children: /* @__PURE__ */ r(
                             p,
                             {
                               icon: Y,
-                              title: l("dashboard"),
+                              title: a("dashboard"),
                               component: "a",
                               href: ne,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
@@ -154,7 +156,7 @@ function We({
                             p,
                             {
                               icon: X,
-                              title: l("profile"),
+                              title: a("profile"),
                               component: "a",
                               href: ce,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
@@ -164,23 +166,23 @@ function We({
                             p,
                             {
                               icon: $,
-                              title: l("invite"),
+                              title: a("invite"),
                               component: "div",
                               onClick: U,
                               sx: { display: "block", color: "inherit" }
                             }
                           ),
-                          /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
+                          /* @__PURE__ */ r(S, { sx: { m: "0 !important" } }),
                           /* @__PURE__ */ r(pe, { session: e, locale: u })
                         ] }) : null,
                         /* @__PURE__ */ r(
                           p,
                           {
                             icon: Z,
-                            title: l("logout"),
+                            title: a("logout"),
                             component: "div",
                             sx: { color: "error.main" },
-                            onClick: M,
+                            onClick: E,
                             "data-cy": "sessionManager-logout-trigger"
                           }
                         )
@@ -199,9 +201,9 @@ function We({
 function p({
   icon: e,
   title: c,
-  ...a
+  ...l
 }) {
-  return /* @__PURE__ */ r(S, { ...a, sx: { p: 0.5, ...a?.sx }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(k, { ...l, sx: { p: 0.5, ...l?.sx }, children: /* @__PURE__ */ s(
     J,
     {
       sx: {
@@ -222,5 +224,5 @@ function p({
   ) });
 }
 export {
-  We as default
+  Te as default
 };

package/lib/package.json.js

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

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.30",
+  "version": "3.1.31",
   "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": "a51fede74e5eca679ff40a8c62d96bae09210f04",
+  "gitHead": "a904bcfb38156f7cdff5b2134c126b19d528f4b2",
   "dependencies": {
-    "@arcblock/bridge": "3.1.30",
+    "@arcblock/bridge": "3.1.31",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.30",
-    "@arcblock/nft-display": "3.1.30",
-    "@arcblock/react-hooks": "3.1.30",
+    "@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.30",
+    "@blocklet/theme": "3.1.31",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

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/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