@arcblock/ux 3.4.10 → 3.4.11

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.11", 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.11",
   "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": "1cc263e80cb7b98f6ebb02bb8d151fee552e6c76",
   "dependencies": {
-    "@arcblock/bridge": "3.4.10",
+    "@arcblock/bridge": "3.4.11",
     "@arcblock/did": "^1.28.6",
     "@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.11",
+    "@arcblock/nft-display": "3.4.11",
+    "@arcblock/react-hooks": "3.4.11",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.10",
+    "@blocklet/theme": "3.4.11",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

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}
       />
     );
   }