@arcblock/ux 3.4.10 → 3.4.12

package/lib/DIDConnect/auth-apps/auth-apps-info.d.ts

@@ -8,7 +8,8 @@ export type CurrentAppInfo = {
     appName: string;
     appUrl: string;
 };
-export default function AuthAppsInfo({ requestAppInfo, currentAppInfo, }: {
+export default function AuthAppsInfo({ requestAppInfo, currentAppInfo, titlePrefix, }: {
     requestAppInfo: RequestAppInfo;
     currentAppInfo: CurrentAppInfo;
+    titlePrefix?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/auth-apps/auth-apps-info.js

@@ -1,9 +1,10 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { Box as e, Typography as l } from "@mui/material";
+import { Box as e, Typography as s } from "@mui/material";
 import o from "../../Img/index.js";
-function m({
+function p({
   requestAppInfo: a,
-  currentAppInfo: i
+  currentAppInfo: i,
+  titlePrefix: l = "Authorize"
 }) {
   return /* @__PURE__ */ r(
     e,
@@ -53,14 +54,14 @@ function m({
           }
         ),
         /* @__PURE__ */ r(
-          l,
+          s,
           {
             sx: {
               mb: 1,
               fontSize: "1.2rem"
             },
             children: [
-              "Authorize",
+              l,
               " ",
               /* @__PURE__ */ t(e, { component: "span", sx: { color: "primary.main" }, children: a.appName })
             ]
@@ -71,5 +72,5 @@ function m({
   );
 }
 export {
-  m as default
+  p as default
 };

package/lib/DIDConnect/auth-apps/index.d.ts

@@ -1,11 +1,11 @@
-import { BoxProps } from '@mui/material';
+import { BoxProps, ButtonProps } from '@mui/material';
 import { UserPublicInfo } from '@blocklet/js-sdk';
 import { Ref } from 'react';
 import { RequestAppInfo, CurrentAppInfo } from './auth-apps-info';
 /**
  * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
  */
-export default function AuthApps({ session, requestAppInfo, currentAppInfo, children, userInfo, hideSwitchConnect, hideAuthorize, hideCancel, hideButton, notThisText, authorizeText, connectText, cancelText, useAnotherText, slotProps, onConnect, onAuthorize, onSwitchConnect, onSwitchPassport, onCancel, ref, disableAuthorizeButton, }: {
+export default function AuthApps({ session, requestAppInfo, currentAppInfo, children, userInfo, hideSwitchConnect, hideAuthorize, hideCancel, hideButton, notThisText, authorizeText, connectText, cancelText, useAnotherText, slotProps, onConnect, onAuthorize, onSwitchConnect, onSwitchPassport, onCancel, ref, disableAuthorizeButton, titlePrefix, }: {
     session: any;
     requestAppInfo: RequestAppInfo;
     currentAppInfo: CurrentAppInfo;
@@ -24,6 +24,9 @@ export default function AuthApps({ session, requestAppInfo, currentAppInfo, chil
         root?: BoxProps;
         didConnectContainer?: object;
         contentContainer?: BoxProps;
+        connectButton?: ButtonProps;
+        authorizeButton?: ButtonProps;
+        cancelButton?: ButtonProps;
     };
     onConnect?: (done: () => void) => void;
     onAuthorize?: (done: () => void) => void;
@@ -34,4 +37,5 @@ export default function AuthApps({ session, requestAppInfo, currentAppInfo, chil
         closeLoading: () => void;
     }>;
     disableAuthorizeButton?: boolean;
+    titlePrefix?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/auth-apps/index.js

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as o, Fragment as p } from "react/jsx-runtime";
-import { CircularProgress as u, Box as d, Stack as G, Button as h, Typography as J, Link as K } from "@mui/material";
-import { useReactive as O, useMemoizedFn as r } from "ahooks";
+import { jsx as e, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import { CircularProgress as u, Box as d, Stack as K, Button as h, Typography as O, Link as Q } from "@mui/material";
+import { useReactive as V, useMemoizedFn as i } from "ahooks";
 import c from "lodash/noop";
-import { useImperativeHandle as Q } from "react";
-import V from "../did-connect-container.js";
-import X from "./auth-apps-info.js";
-import Y from "../../Center/index.js";
-import Z from "../landing-page.js";
-import { translate as _ } from "../../Locale/util.js";
-import { useLocaleContext as $ } from "../../Locale/context.js";
-import ee from "../../UserCard/index.js";
-import { InfoType as ne, CardType as oe } from "../../UserCard/types.js";
+import { useImperativeHandle as X } from "react";
+import Y from "../did-connect-container.js";
+import Z from "./auth-apps-info.js";
+import _ from "../../Center/index.js";
+import $ from "../landing-page.js";
+import { translate as P } from "../../Locale/util.js";
+import { useLocaleContext as ee } from "../../Locale/context.js";
+import ne from "../../UserCard/index.js";
+import { InfoType as oe, CardType as te } from "../../UserCard/types.js";
 import { mergeSx as f } from "../../Util/style.js";
-import re from "./switch-role.js";
-const ie = {
+import ie from "./switch-role.js";
+const re = {
   en: {
     notThis: "Not you?",
     useAnother: "Use another account",
@@ -29,7 +29,7 @@ const ie = {
     cancel: "取消"
   }
 };
-function ye({
+function ze({
   session: s,
   requestAppInfo: g,
   currentAppInfo: x,
@@ -43,51 +43,52 @@ function ye({
   authorizeText: b = void 0,
   connectText: k = void 0,
   cancelText: S = void 0,
-  useAnotherText: D = void 0,
-  slotProps: i = void 0,
-  onConnect: I = c,
-  onAuthorize: L = c,
-  onSwitchConnect: R = c,
-  onSwitchPassport: W = c,
-  onCancel: j = c,
-  ref: B,
-  disableAuthorizeButton: m = !1
+  useAnotherText: B = void 0,
+  slotProps: o = void 0,
+  onConnect: D = c,
+  onAuthorize: I = c,
+  onSwitchConnect: L = c,
+  onSwitchPassport: R = c,
+  onCancel: W = c,
+  ref: j,
+  disableAuthorizeButton: m = !1,
+  titlePrefix: F = void 0
 }) {
-  const n = O({
+  const n = V({
     loading: !1
-  }), { locale: F = "en" } = $() || {}, t = r((q, E = {}) => _(ie, q, F, "en", E)), l = r(() => {
+  }), { locale: M = "en" } = ee() || {}, r = i((G, J = {}) => P(re, G, M, "en", J)), l = i(() => {
     n.loading = !1;
-  }), M = r(() => {
+  }), U = i(() => {
+    n.loading = !0, D?.(l);
+  }), H = i(() => {
+    n.loading = !0, L?.(l);
+  }), N = i(() => {
     n.loading = !0, I?.(l);
-  }), U = r(() => {
+  }), q = i(() => {
     n.loading = !0, R?.(l);
-  }), H = r(() => {
-    n.loading = !0, L?.(l);
-  }), N = r(() => {
-    n.loading = !0, W?.(l);
-  }), P = r(() => {
-    j?.();
+  }), E = i(() => {
+    W?.();
   });
-  if (Q(B, () => ({
+  if (X(j, () => ({
     closeLoading: l
   })), s.loading || !s.initialized)
-    return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(u, {}) });
+    return /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(u, {}) });
   const a = v ?? s?.user;
-  return /* @__PURE__ */ e(Z, { did: window.blocklet?.appPid, standalone: !0, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e($, { did: window.blocklet?.appPid, standalone: !0, children: /* @__PURE__ */ e(
     d,
     {
-      ...i?.root,
+      ...o?.root,
       sx: f(
         {
           width: 420,
           maxWidth: "100%"
         },
-        i?.root?.sx
+        o?.root?.sx
       ),
-      children: /* @__PURE__ */ e(V, { hideCloseButton: !0, ...i?.didConnectContainer, children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ e(Y, { hideCloseButton: !0, ...o?.didConnectContainer, children: /* @__PURE__ */ t(
         d,
         {
-          ...i?.contentContainer,
+          ...o?.contentContainer,
           sx: f(
             {
               display: "flex",
@@ -104,25 +105,25 @@ function ye({
               },
               bgcolor: "background.paper"
             },
-            i?.contentContainer?.sx
+            o?.contentContainer?.sx
           ),
           children: [
-            /* @__PURE__ */ e(X, { requestAppInfo: g, currentAppInfo: x }),
-            a ? /* @__PURE__ */ o(p, { children: [
+            /* @__PURE__ */ e(Z, { requestAppInfo: g, currentAppInfo: x, titlePrefix: F }),
+            a ? /* @__PURE__ */ t(p, { children: [
               /* @__PURE__ */ e(
-                ee,
+                ne,
                 {
                   user: a,
                   showDid: !0,
-                  cardType: oe.Detailed,
-                  infoType: ne.Minimal,
-                  renderTopRightContent: () => /* @__PURE__ */ e(re, { user: a, switchPassport: N })
+                  cardType: te.Detailed,
+                  infoType: oe.Minimal,
+                  renderTopRightContent: () => /* @__PURE__ */ e(ie, { user: a, switchPassport: q })
                 }
               ),
               /* @__PURE__ */ e(d, {})
             ] }) : null,
             C,
-            A ? null : /* @__PURE__ */ o(p, { children: [
+            A ? null : /* @__PURE__ */ t(p, { children: [
               /* @__PURE__ */ e(
                 d,
                 {
@@ -135,7 +136,7 @@ function ye({
                   }
                 }
               ),
-              /* @__PURE__ */ o(G, { direction: "row", spacing: 2, children: [
+              /* @__PURE__ */ t(K, { direction: "row", spacing: 2, children: [
                 w ? null : /* @__PURE__ */ e(
                   h,
                   {
@@ -143,44 +144,47 @@ function ye({
                     variant: "outlined",
                     size: "large",
                     fullWidth: !0,
-                    onClick: P,
+                    onClick: E,
                     sx: {
                       color: "grey.500"
                     },
-                    children: S || t("cancel")
+                    ...o?.cancelButton,
+                    children: S || r("cancel")
                   }
                 ),
-                a && !z ? /* @__PURE__ */ o(
+                a && !z ? /* @__PURE__ */ t(
                   h,
                   {
                     variant: "contained",
                     size: "large",
                     fullWidth: !0,
-                    onClick: H,
+                    onClick: N,
                     disabled: n.loading || m,
+                    ...o?.authorizeButton,
                     children: [
                       n.loading ? /* @__PURE__ */ e(u, { size: 20, sx: { mr: 1 } }) : null,
-                      b || t("authorize")
+                      b || r("authorize")
                     ]
                   }
-                ) : /* @__PURE__ */ o(
+                ) : /* @__PURE__ */ t(
                   h,
                   {
                     variant: "contained",
                     size: "large",
                     fullWidth: !0,
                     disabled: n.loading || m,
-                    onClick: M,
+                    onClick: U,
+                    ...o?.connectButton,
                     children: [
                       n.loading ? /* @__PURE__ */ e(u, { size: 20, sx: { mr: 1 } }) : null,
-                      k || t("connect")
+                      k || r("connect")
                     ]
                   }
                 )
               ] })
             ] }),
-            y || !a ? null : /* @__PURE__ */ e(d, { sx: { textAlign: "center" }, children: /* @__PURE__ */ o(
-              J,
+            y || !a ? null : /* @__PURE__ */ e(d, { sx: { textAlign: "center" }, children: /* @__PURE__ */ t(
+              O,
               {
                 variant: "body2",
                 sx: {
@@ -190,17 +194,17 @@ function ye({
                   gap: 1
                 },
                 children: [
-                  T || t("notThis"),
+                  T || r("notThis"),
                   " ",
                   /* @__PURE__ */ e(
-                    K,
+                    Q,
                     {
                       underline: "hover",
-                      onClick: U,
+                      onClick: H,
                       sx: {
                         cursor: "pointer"
                       },
-                      children: D || t("useAnother")
+                      children: B || r("useAnother")
                     }
                   )
                 ]
@@ -213,5 +217,5 @@ function ye({
   ) });
 }
 export {
-  ye as default
+  ze as default
 };

package/lib/SessionUser/components/logged-in.d.ts

@@ -1,5 +1,6 @@
 import { BoxProps } from '@mui/material';
 import { Locale, Session } from '../../type';
+import { SessionUserProps } from '..';
 export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     session: Session;
     onBindWallet?: () => void;
@@ -9,5 +10,6 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
     popperType?: 'hover' | 'click';
     profileUrl?: string;
     mode?: 'minimal' | 'normal';
+    renderUserButton: SessionUserProps['renderUserButton'];
 }
-export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, mode, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;
+export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, mode, sx, renderUserButton, ...rest }: LoggedInProps): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -1,126 +1,144 @@
 import { jsxs as s, jsx as r, Fragment as T } from "react/jsx-runtime";
-import { useRef as _, useEffect as j } from "react";
-import { useMemoizedFn as n, useCreation as G, useReactive as H } from "ahooks";
-import f from "@arcblock/bridge";
-import { Box as b, IconButton as N, Popper as Q, ClickAwayListener as V, Fade as q, Paper as J, Divider as k, MenuList as K, MenuItem as X } from "@mui/material";
-import { Icon as Y } from "@iconify/react";
-import Z from "@iconify-icons/material-symbols/person-outline-rounded";
-import $ from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
-import ee from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
-import re from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
-import te from "copy-to-clipboard";
-import h from "lodash/noop";
-import oe from "../../Toast/index.js";
-import ie from "../../Avatar/index.js";
-import { getUserAvatar as ne } from "../../Util/index.js";
-import ce from "./user-info.js";
-import { DASHBOARD_URL as le, PROFILE_URL as ae } from "../../Util/constant.js";
-import se from "../../SessionPermission/index.js";
-import { translations as pe } from "../libs/translation.js";
-import { translate as ue } from "../../Locale/util.js";
-import de from "./did-space.js";
-import { mergeSx as me } from "../../Util/style.js";
-import { createDebug as fe } from "../../Util/logger.js";
-import { GA_LAST_ROLE as he } from "../../withTracker/constant/index.js";
-const ge = (e) => {
+import { useRef as G, useEffect as H } from "react";
+import { useMemoizedFn as n, useCreation as N, useReactive as Q } from "ahooks";
+import v from "@arcblock/bridge";
+import { Box as M, IconButton as V, Popper as q, ClickAwayListener as J, Fade as K, Paper as X, Divider as B, MenuList as Y, MenuItem as Z } from "@mui/material";
+import { Icon as $ } from "@iconify/react";
+import ee from "@iconify-icons/material-symbols/person-outline-rounded";
+import re from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
+import te from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
+import oe from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
+import ie from "copy-to-clipboard";
+import x from "lodash/noop";
+import ne from "../../Toast/index.js";
+import ce from "../../Avatar/index.js";
+import { getUserAvatar as ae } from "../../Util/index.js";
+import le from "./user-info.js";
+import { DASHBOARD_URL as E, PROFILE_URL as se } from "../../Util/constant.js";
+import pe from "../../SessionPermission/index.js";
+import { translations as ue } from "../libs/translation.js";
+import { translate as de } from "../../Locale/util.js";
+import me from "./did-space.js";
+import { mergeSx as fe } from "../../Util/style.js";
+import { createDebug as he } from "../../Util/logger.js";
+import { GA_LAST_ROLE as ge } from "../../withTracker/constant/index.js";
+const Pe = (e) => {
   const c = new URL(window.location.href);
   return c.searchParams.set("inviter", e), c.toString();
-}, g = fe("did-connect");
-function je({
+}, w = he("did-connect");
+function Ge({
   session: e,
-  onBindWallet: c = h,
-  isBlocklet: l = !0,
-  locale: u = "en",
-  size: I = 24,
-  popperType: y = "click",
-  profileUrl: R = ae,
-  mode: P = "normal",
-  sx: C,
-  ...L
+  onBindWallet: c = x,
+  isBlocklet: a = !0,
+  locale: p = "en",
+  size: A = 24,
+  popperType: S = "click",
+  profileUrl: b = se,
+  mode: d = "normal",
+  sx: U,
+  renderUserButton: k,
+  ...F
 }) {
-  const a = n((t, o = {}) => ue(pe, t, u, "en", o)), B = G(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), v = _(null), d = H({
+  const l = n((t, o = {}) => de(ue, t, p, "en", o)), I = N(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), y = G(null), m = Q({
     open: !1
-  }), i = n((t = !d.open) => {
-    d.open = t;
-  }), D = y === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, O = ne(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), E = e.useOAuth(), M = typeof e.usePasskey == "function" ? e.usePasskey() : null, x = n(({ inArcSphere: t = !1 } = {}) => {
-    localStorage.setItem(he, e?.user?.role);
+  }), i = n((t = !m.open) => {
+    m.open = t;
+  }), W = S === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, R = ae(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), _ = e.useOAuth(), j = typeof e.usePasskey == "function" ? e.usePasskey() : null, f = n(({ inArcSphere: t = !1 } = {}) => {
+    localStorage.setItem(ge, e?.user?.role);
     const o = {};
-    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? M.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? E.switchOAuthPassport(e.user) : e.switchPassport(h, o);
-  }), w = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((z) => {
-    const S = {};
-    o && e.user.sourceAppPid && (S.sourceAppPid = e.user.sourceAppPid);
-    const m = {};
-    t ? m.userSession = t : (i(!1), m.showQuickConnect = !1), e.switchDid(
+    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? j.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? _.switchOAuthPassport(e.user) : e.switchPassport(x, o);
+  }), h = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((z) => {
+    const O = {};
+    o && e.user.sourceAppPid && (O.sourceAppPid = e.user.sourceAppPid);
+    const P = {};
+    t ? P.userSession = t : (i(!1), P.showQuickConnect = !1), e.switchDid(
       () => {
         i(!1), z();
       },
-      S,
-      m
+      O,
+      P
     );
-  })), A = n(({ inArcSphere: t = !1 } = {}) => {
+  })), g = n(({ inArcSphere: t = !1 } = {}) => {
     const o = {};
-    t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(h, o);
-  }), U = n(() => {
+    t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(x, o);
+  }), C = n(() => {
     i(!1), e.logout();
-  }), F = n(() => {
+  }), L = n(() => {
     i(!1), e.bindWallet(c);
-  }), W = n(() => {
+  }), D = n(() => {
     i(!1);
-    const t = ge(e.user.did);
-    te(t), oe.success(a("inviteCopied"));
+    const t = Pe(e.user.did);
+    ie(t), ne.success(l("inviteCopied"));
   });
-  return j(() => {
-    f.registerBlocklet("callSwitchPassport", () => {
-      g("bridge registerBlocklet: callSwitchPassport"), x({ inArcSphere: !0 });
-    }), f.registerBlocklet("callSwitchDid", () => {
-      g("bridge registerBlocklet: callSwitchDid"), w({ inArcSphere: !0 });
-    }), f.registerBlocklet("callSwitchProfile", () => {
-      g("bridge registerBlocklet: callSwitchProfile"), A({ inArcSphere: !0 });
+  return H(() => {
+    v.registerBlocklet("callSwitchPassport", () => {
+      w("bridge registerBlocklet: callSwitchPassport"), f({ inArcSphere: !0 });
+    }), v.registerBlocklet("callSwitchDid", () => {
+      w("bridge registerBlocklet: callSwitchDid"), h({ inArcSphere: !0 });
+    }), v.registerBlocklet("callSwitchProfile", () => {
+      w("bridge registerBlocklet: callSwitchProfile"), g({ inArcSphere: !0 });
     });
-  }, []), /* @__PURE__ */ s(
-    b,
+  }, []), k ? k({
+    isBlocklet: a,
+    session: e,
+    locale: p,
+    size: A,
+    popperType: S,
+    profileUrl: b,
+    dashboardUrl: E,
+    mode: d,
+    avatar: R,
+    isInviteEnabled: I,
+    handleSwitchPassport: f,
+    handleSwitchAccount: h,
+    handleSwitchProfile: g,
+    handleBindWallet: L,
+    handleOpenInvite: D,
+    handleLogout: C
+  }) : /* @__PURE__ */ s(
+    M,
     {
-      sx: me(
+      sx: fe(
         {
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center"
         },
         // @ts-ignore
-        C
+        U
       ),
-      ...L,
+      ...F,
       children: [
         /* @__PURE__ */ r(
-          N,
+          V,
           {
-            ref: v,
+            ref: y,
             size: "medium",
             "data-cy": "sessionManager-logout-popup",
             className: "arc-session-user-logged-in",
             "aria-label": "User info button",
-            ...D,
-            children: /* @__PURE__ */ r(ie, { variant: "circle", did: e.user.did, src: O, size: I, shape: "circle" })
+            ...W,
+            children: /* @__PURE__ */ r(ce, { variant: "circle", did: e.user.did, src: R, size: A, shape: "circle" })
           }
         ),
         /* @__PURE__ */ r(
-          Q,
+          q,
           {
-            open: d.open,
-            anchorEl: v.current,
+            open: m.open,
+            anchorEl: y.current,
             transition: !0,
             placement: "bottom-end",
             sx: {
               zIndex: 1600
             },
             children: ({ TransitionProps: t }) => /* @__PURE__ */ r(
-              V,
+              J,
               {
                 onClickAway: (o) => {
                   o.preventDefault(), o.stopPropagation(), i(!1);
                 },
-                children: /* @__PURE__ */ r(q, { ...t, timeout: 350, children: /* @__PURE__ */ s(
-                  J,
+                children: /* @__PURE__ */ r(K, { ...t, timeout: 350, children: /* @__PURE__ */ s(
+                  X,
                   {
                     variant: "outlined",
                     sx: {
@@ -130,62 +148,62 @@ function je({
                     },
                     children: [
                       /* @__PURE__ */ r(
-                        ce,
+                        le,
                         {
-                          locale: u,
-                          isBlocklet: l,
+                          locale: p,
+                          isBlocklet: a,
                           session: e,
-                          onSwitchPassport: x,
-                          onSwitchAccount: w,
-                          onSwitchProfile: A,
-                          onBindWallet: F,
-                          mode: P
+                          onSwitchPassport: f,
+                          onSwitchAccount: h,
+                          onSwitchProfile: g,
+                          onBindWallet: L,
+                          mode: d
                         }
                       ),
-                      /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
-                      /* @__PURE__ */ s(K, { sx: { p: 0 }, children: [
-                        l ? /* @__PURE__ */ s(T, { children: [
-                          /* @__PURE__ */ r(se, { session: e, children: /* @__PURE__ */ r(
-                            p,
+                      /* @__PURE__ */ r(B, { sx: { m: "0 !important" } }),
+                      /* @__PURE__ */ s(Y, { sx: { p: 0 }, children: [
+                        a ? /* @__PURE__ */ s(T, { children: [
+                          /* @__PURE__ */ r(pe, { session: e, children: /* @__PURE__ */ r(
+                            u,
                             {
-                              icon: $,
-                              title: a("dashboard"),
+                              icon: re,
+                              title: l("dashboard"),
                               component: "a",
-                              href: le,
+                              href: E,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
                             }
                           ) }),
                           /* @__PURE__ */ r(
-                            p,
+                            u,
                             {
-                              icon: Z,
-                              title: a("profile"),
+                              icon: ee,
+                              title: l("profile"),
                               component: "a",
-                              href: R,
+                              href: b,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
                             }
                           ),
-                          B && /* @__PURE__ */ r(
-                            p,
+                          I && /* @__PURE__ */ r(
+                            u,
                             {
-                              icon: re,
-                              title: a("invite"),
+                              icon: oe,
+                              title: l("invite"),
                               component: "div",
-                              onClick: W,
+                              onClick: D,
                               sx: { display: "block", color: "inherit" }
                             }
                           ),
-                          /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
-                          P === "normal" ? /* @__PURE__ */ r(de, { session: e, locale: u }) : null
+                          /* @__PURE__ */ r(B, { sx: { m: "0 !important" } }),
+                          d === "normal" ? /* @__PURE__ */ r(me, { session: e, locale: p }) : null
                         ] }) : null,
                         /* @__PURE__ */ r(
-                          p,
+                          u,
                           {
-                            icon: ee,
-                            title: a("logout"),
+                            icon: te,
+                            title: l("logout"),
                             component: "div",
                             sx: { color: "error.main" },
-                            onClick: U,
+                            onClick: C,
                             "data-cy": "sessionManager-logout-trigger"
                           }
                         )
@@ -201,13 +219,13 @@ function je({
     }
   );
 }
-function p({
+function u({
   icon: e,
   title: c,
-  ...l
+  ...a
 }) {
-  return /* @__PURE__ */ r(b, { ...l, sx: { p: 0.5, ...l?.sx }, children: /* @__PURE__ */ s(
-    X,
+  return /* @__PURE__ */ r(M, { ...a, sx: { p: 0.5, ...a?.sx }, children: /* @__PURE__ */ s(
+    Z,
     {
       sx: {
         display: "flex",
@@ -220,12 +238,12 @@ function p({
         py: 1
       },
       children: [
-        /* @__PURE__ */ r(Y, { icon: e, fontSize: 24 }),
+        /* @__PURE__ */ r($, { icon: e, fontSize: 24 }),
         c
       ]
     }
   ) });
 }
 export {
-  je as default
+  Ge as default
 };

package/lib/SessionUser/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Locale, Session } from '../type';
 export interface SessionUserProps {
     session: Session;
@@ -6,5 +7,23 @@ export interface SessionUserProps {
     size?: number;
     popperType?: 'hover' | 'click';
     profileUrl?: string;
+    renderUserButton?: (props: {
+        isBlocklet: boolean;
+        session: Session;
+        locale: Locale;
+        size: number;
+        popperType: 'hover' | 'click';
+        profileUrl?: string;
+        dashboardUrl?: string;
+        mode?: any;
+        avatar: string;
+        isInviteEnabled: boolean;
+        handleSwitchPassport: () => void;
+        handleSwitchAccount: () => void;
+        handleSwitchProfile: () => void;
+        handleBindWallet: () => void;
+        handleOpenInvite: () => void;
+        handleLogout: () => void;
+    }) => ReactNode;
 }
-export default function SessionUser({ session, onBindWallet, locale, size, popperType, profileUrl, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;
+export default function SessionUser({ session, onBindWallet, locale, size, popperType, profileUrl, renderUserButton, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/index.js

@@ -1,31 +1,33 @@
-import { jsx as m } from "react/jsx-runtime";
-import p from "lodash/noop";
-import { useCreation as c } from "ahooks";
-import u from "./components/logged-in.js";
-import g from "./components/un-login.js";
-import { PROFILE_URL as s } from "../Util/constant.js";
+import { jsx as i } from "react/jsx-runtime";
+import c from "lodash/noop";
+import { useCreation as u } from "ahooks";
+import g from "./components/logged-in.js";
+import s from "./components/un-login.js";
+import { PROFILE_URL as S } from "../Util/constant.js";
 function U({
   session: o,
-  onBindWallet: e = p,
+  onBindWallet: m = c,
   locale: r = "en",
   size: t = 24,
-  popperType: i = "click",
-  profileUrl: n = s
+  popperType: e = "click",
+  profileUrl: n = S,
+  renderUserButton: l = void 0
 }) {
-  const l = c(() => !!globalThis?.blocklet, []), f = globalThis?.blocklet?.SESSION_USER_MODE;
-  return o.user ? /* @__PURE__ */ m(
-    u,
+  const f = u(() => !!globalThis?.blocklet, []), p = globalThis?.blocklet?.SESSION_USER_MODE;
+  return o.user ? /* @__PURE__ */ i(
+    g,
     {
-      isBlocklet: l,
+      isBlocklet: f,
       session: o,
-      onBindWallet: e,
+      onBindWallet: m,
       locale: r,
       size: t,
-      popperType: i,
+      popperType: e,
       profileUrl: n,
-      mode: f
+      mode: p,
+      renderUserButton: l
     }
-  ) : /* @__PURE__ */ m(g, { session: o, locale: r, size: t });
+  ) : /* @__PURE__ */ i(s, { session: o, locale: r, size: t });
 }
 export {
   U as default

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.4.10", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
+const e = "3.4.12", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.4.10",
+  "version": "3.4.12",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -74,16 +74,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "162768378bf0a1d1e0984d1f01235eafa5bd9bdb",
+  "gitHead": "db4d4378824b5ad63613d8165f1cf3bb76ea5f75",
   "dependencies": {
-    "@arcblock/bridge": "3.4.10",
-    "@arcblock/did": "^1.28.6",
+    "@arcblock/bridge": "3.4.12",
+    "@arcblock/did": "^1.28.8",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.4.10",
-    "@arcblock/nft-display": "3.4.10",
-    "@arcblock/react-hooks": "3.4.10",
+    "@arcblock/icons": "3.4.12",
+    "@arcblock/nft-display": "3.4.12",
+    "@arcblock/react-hooks": "3.4.12",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.10",
+    "@blocklet/theme": "3.4.12",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -91,7 +91,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.28.6",
+    "@ocap/mcrypto": "^1.28.8",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

package/src/DIDConnect/auth-apps/auth-apps-info.tsx

@@ -16,9 +16,11 @@ export type CurrentAppInfo = {
 export default function AuthAppsInfo({
   requestAppInfo,
   currentAppInfo,
+  titlePrefix = 'Authorize',
 }: {
   requestAppInfo: RequestAppInfo;
   currentAppInfo: CurrentAppInfo;
+  titlePrefix?: string;
 }) {
   return (
     <Box
@@ -65,7 +67,7 @@ export default function AuthAppsInfo({
           mb: 1,
           fontSize: '1.2rem',
         }}>
-        Authorize{' '}
+        {titlePrefix}{' '}
         <Box component="span" sx={{ color: 'primary.main' }}>
           {requestAppInfo.appName}
         </Box>

package/src/DIDConnect/auth-apps/index.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Button, CircularProgress, Link, Stack, SxProps, Typography } from '@mui/material';
+import { Box, BoxProps, Button, ButtonProps, CircularProgress, Link, Stack, SxProps, Typography } from '@mui/material';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
@@ -63,6 +63,7 @@ export default function AuthApps({
   ref,
 
   disableAuthorizeButton = false,
+  titlePrefix = undefined,
 }: {
   session: any;
   requestAppInfo: RequestAppInfo;
@@ -85,6 +86,9 @@ export default function AuthApps({
     root?: BoxProps;
     didConnectContainer?: object;
     contentContainer?: BoxProps;
+    connectButton?: ButtonProps;
+    authorizeButton?: ButtonProps;
+    cancelButton?: ButtonProps;
   };
 
   onConnect?: (done: () => void) => void;
@@ -95,6 +99,7 @@ export default function AuthApps({
   ref: Ref<{ closeLoading: () => void }>;
 
   disableAuthorizeButton?: boolean;
+  titlePrefix?: string;
 }) {
   const currentState = useReactive({
     loading: false,
@@ -172,7 +177,7 @@ export default function AuthApps({
               },
               slotProps?.contentContainer?.sx as SxProps
             )}>
-            <AuthAppsInfo requestAppInfo={requestAppInfo} currentAppInfo={currentAppInfo} />
+            <AuthAppsInfo requestAppInfo={requestAppInfo} currentAppInfo={currentAppInfo} titlePrefix={titlePrefix} />
 
             {user ? (
               <>
@@ -211,7 +216,8 @@ export default function AuthApps({
                       onClick={handleCancel}
                       sx={{
                         color: 'grey.500',
-                      }}>
+                      }}
+                      {...slotProps?.cancelButton}>
                       {cancelText || t('cancel')}
                     </Button>
                   ) : null}
@@ -221,7 +227,8 @@ export default function AuthApps({
                       size="large"
                       fullWidth
                       onClick={handleAuthorize}
-                      disabled={currentState.loading || disableAuthorizeButton}>
+                      disabled={currentState.loading || disableAuthorizeButton}
+                      {...slotProps?.authorizeButton}>
                       {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
                       {authorizeText || t('authorize')}
                     </Button>
@@ -231,7 +238,8 @@ export default function AuthApps({
                       size="large"
                       fullWidth
                       disabled={currentState.loading || disableAuthorizeButton}
-                      onClick={handleConnect}>
+                      onClick={handleConnect}
+                      {...slotProps?.connectButton}>
                       {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
                       {connectText || t('connect')}
                     </Button>

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

@@ -34,6 +34,7 @@ import DidSpace from './did-space';
 import { mergeSx } from '../../Util/style';
 import { createDebug } from '../../Util/logger';
 import { GA_LAST_ROLE } from '../../withTracker/constant';
+import type { SessionUserProps } from '..';
 
 const getInviteLink = (inviter: string) => {
   const url = new URL(window.location.href);
@@ -52,6 +53,7 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
   popperType?: 'hover' | 'click';
   profileUrl?: string;
   mode?: 'minimal' | 'normal';
+  renderUserButton: SessionUserProps['renderUserButton'];
 }
 
 export default function LoggedIn({
@@ -64,6 +66,7 @@ export default function LoggedIn({
   profileUrl = PROFILE_URL,
   mode = 'normal',
   sx,
+  renderUserButton,
   ...rest
 }: LoggedInProps) {
   const t = useMemoizedFn((key, data = {}) => {
@@ -143,7 +146,7 @@ export default function LoggedIn({
     onTogglePopper(false);
     session.switchProfile(noop, extraParams);
   });
-  const onLogout = useMemoizedFn(() => {
+  const handleLogout = useMemoizedFn(() => {
     onTogglePopper(false);
     session.logout();
   });
@@ -176,6 +179,27 @@ export default function LoggedIn({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (renderUserButton) {
+    return renderUserButton({
+      isBlocklet,
+      session,
+      locale,
+      size,
+      popperType,
+      profileUrl,
+      dashboardUrl: DASHBOARD_URL,
+      mode,
+      avatar,
+      isInviteEnabled,
+      handleSwitchPassport,
+      handleSwitchAccount,
+      handleSwitchProfile,
+      handleBindWallet,
+      handleOpenInvite,
+      handleLogout,
+    });
+  }
+
   return (
     <Box
       sx={mergeSx(
@@ -269,7 +293,7 @@ export default function LoggedIn({
                     title={t('logout')}
                     component="div"
                     sx={{ color: 'error.main' }}
-                    onClick={onLogout}
+                    onClick={handleLogout}
                     data-cy="sessionManager-logout-trigger"
                   />
                 </MenuList>

package/src/SessionUser/index.tsx

@@ -1,5 +1,6 @@
 import noop from 'lodash/noop';
 import { useCreation } from 'ahooks';
+import { ReactNode } from 'react';
 
 import LoggedIn from './components/logged-in';
 import UnLogin from './components/un-login';
@@ -13,6 +14,24 @@ export interface SessionUserProps {
   size?: number;
   popperType?: 'hover' | 'click';
   profileUrl?: string;
+  renderUserButton?: (props: {
+    isBlocklet: boolean;
+    session: Session;
+    locale: Locale;
+    size: number;
+    popperType: 'hover' | 'click';
+    profileUrl?: string;
+    dashboardUrl?: string;
+    mode?: any;
+    avatar: string;
+    isInviteEnabled: boolean;
+    handleSwitchPassport: () => void;
+    handleSwitchAccount: () => void;
+    handleSwitchProfile: () => void;
+    handleBindWallet: () => void;
+    handleOpenInvite: () => void;
+    handleLogout: () => void;
+  }) => ReactNode;
 }
 
 export default function SessionUser({
@@ -22,6 +41,7 @@ export default function SessionUser({
   size = 24,
   popperType = 'click',
   profileUrl = PROFILE_URL,
+  renderUserButton = undefined,
 }: SessionUserProps) {
   const isBlocklet = useCreation(() => {
     return !!globalThis?.blocklet;
@@ -40,6 +60,7 @@ export default function SessionUser({
         popperType={popperType}
         profileUrl={profileUrl}
         mode={mode}
+        renderUserButton={renderUserButton}
       />
     );
   }