@arcblock/ux 3.4.8 → 3.4.10

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

@@ -8,5 +8,6 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
     size?: number;
     popperType?: 'hover' | 'click';
     profileUrl?: string;
+    mode?: 'minimal' | 'normal';
 }
-export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;
+export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, mode, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;

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

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

package/lib/SessionUser/components/user-info.d.ts

@@ -9,5 +9,6 @@ export interface UserInfoProps {
     onSwitchProfile?: () => void;
     locale?: Locale;
     isBlocklet?: true | false;
+    mode?: 'minimal' | 'normal';
 }
-export default function UserInfo({ session, onSwitchPassport, onSwitchAccount, onBindWallet, onSwitchProfile, locale, isBlocklet, }: UserInfoProps): import("react/jsx-runtime").JSX.Element;
+export default function UserInfo({ session, onSwitchPassport, onSwitchAccount, onBindWallet, onSwitchProfile, locale, isBlocklet, mode, }: UserInfoProps): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/components/user-info.js

@@ -1,30 +1,32 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Box as n, Typography as b, Chip as w, alpha as v } from "@mui/material";
+import { jsxs as n, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { Box as o, Typography as C, Chip as v, alpha as I } from "@mui/material";
 import { Icon as p } from "@iconify/react";
 import S from "@iconify-icons/material-symbols/swap-horiz-rounded";
-import C from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
-import { useMemoizedFn as I, useCreation as s } from "ahooks";
-import d from "lodash/noop";
-import z from "../../Avatar/index.js";
-import { getUserAvatar as R } from "../../Util/index.js";
+import _ from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
+import { useMemoizedFn as z, useCreation as d } from "ahooks";
+import m from "lodash/noop";
+import R from "../../Avatar/index.js";
+import { getUserAvatar as D } from "../../Util/index.js";
 import k from "./session-user-switch.js";
-import { getWallet as A } from "../libs/utils.js";
-import { translations as U } from "../libs/translation.js";
-import { translate as W } from "../../Locale/util.js";
-function K({
+import { getWallet as N } from "../libs/utils.js";
+import { translations as A } from "../libs/translation.js";
+import { translate as U } from "../../Locale/util.js";
+import W from "../../Tag/index.js";
+function Q({
   session: r,
-  onSwitchPassport: a,
-  onSwitchAccount: m,
-  onBindWallet: u,
-  onSwitchProfile: f = d,
-  locale: l = "en",
-  isBlocklet: o = !0
+  onSwitchPassport: l,
+  onSwitchAccount: u,
+  onBindWallet: f,
+  onSwitchProfile: h = m,
+  locale: c = "en",
+  isBlocklet: a = !0,
+  mode: i = "normal"
 }) {
-  const c = I((t, y = {}) => W(U, t, l, "en", y)), h = R(r.user?.avatar?.replace(/\s/g, encodeURIComponent(" ")), 64), g = s(() => r.user?.passports?.find(
+  const s = z((t, b = {}) => U(A, t, c, "en", b)), g = D(r.user?.avatar?.replace(/\s/g, encodeURIComponent(" ")), 64), x = d(() => r.user?.passports?.find(
     (t) => t.name === r.user.role || t.role === r.user.role
-  ), [r?.user?.passports, r?.user?.role]), x = s(() => A(r?.user), [r?.user]);
-  return /* @__PURE__ */ i(
-    n,
+  ), [r?.user?.passports, r?.user?.role]), y = d(() => N(r?.user), [r?.user]);
+  return /* @__PURE__ */ n(
+    o,
     {
       sx: {
         py: 2,
@@ -35,8 +37,8 @@ function K({
         gap: 1.5
       },
       children: [
-        /* @__PURE__ */ i(
-          n,
+        /* @__PURE__ */ n(
+          o,
           {
             sx: {
               display: "flex",
@@ -46,8 +48,8 @@ function K({
               px: 2
             },
             children: [
-              /* @__PURE__ */ i(
-                n,
+              /* @__PURE__ */ n(
+                o,
                 {
                   sx: {
                     display: "flex",
@@ -55,21 +57,21 @@ function K({
                     gap: 1.5
                   },
                   children: [
-                    /* @__PURE__ */ e(
-                      n,
+                    i === "normal" ? /* @__PURE__ */ e(
+                      o,
                       {
-                        onClick: o ? d : f,
+                        onClick: a ? m : h,
                         "data-cy": "sessionManager-switch-profile-trigger",
                         sx: {
-                          cursor: o ? "default" : "pointer",
+                          cursor: a ? "default" : "pointer",
                           position: "relative",
                           borderRadius: "100%",
                           overflow: "hidden",
                           fontSize: 0,
                           flexShrink: 0,
-                          "&:hover": o ? {} : {
+                          "&:hover": a ? {} : {
                             "&::after": {
-                              content: `"${c("switch")}"`,
+                              content: `"${s("switch")}"`,
                               position: "absolute",
                               bottom: 0,
                               background: "rgba(0, 0, 0, 0.2)",
@@ -84,28 +86,59 @@ function K({
                           }
                         },
                         children: /* @__PURE__ */ e(
-                          z,
+                          R,
                           {
                             variant: "circle",
                             did: r.user.did,
-                            src: h,
+                            src: g,
                             size: 48,
                             shape: "circle",
                             sx: {
-                              cursor: o ? "unset" : "pointer"
+                              cursor: a ? "unset" : "pointer"
                             }
                           }
                         )
                       }
-                    ),
-                    /* @__PURE__ */ e(b, { variant: "h6", sx: { wordBreak: "break-word" }, children: r.user.fullName })
+                    ) : null,
+                    /* @__PURE__ */ n(o, { children: [
+                      /* @__PURE__ */ e(C, { variant: i === "normal" ? "h6" : "h4", sx: { wordBreak: "break-word" }, children: r.user.fullName }),
+                      i === "normal" ? null : /* @__PURE__ */ n(
+                        W,
+                        {
+                          className: "user-info__connected-tag",
+                          type: "primary",
+                          sx: {
+                            transform: "scale(0.85)",
+                            transformOrigin: "left",
+                            display: "flex",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              o,
+                              {
+                                className: "user-info__connected-tag__dot",
+                                sx: {
+                                  mr: 0.75,
+                                  width: 6,
+                                  height: 6,
+                                  backgroundColor: (t) => t.palette.text.contrast,
+                                  borderRadius: "100vw"
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ e(o, { className: "user-info__connected-tag__text", children: "DID CONNECTED" })
+                          ]
+                        }
+                      )
+                    ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(
-                w,
+              i === "normal" ? /* @__PURE__ */ e(
+                v,
                 {
-                  label: g?.title || r.user?.role.toUpperCase(),
+                  label: x?.title || r.user?.role.toUpperCase(),
                   size: "small",
                   variant: "outlined",
                   clickable: !0,
@@ -122,43 +155,45 @@ function K({
                     }
                   },
                   deleteIcon: /* @__PURE__ */ e(p, { icon: S, color: "inherit" }),
-                  onDelete: a,
-                  onClick: a,
+                  onDelete: l,
+                  onClick: l,
                   "data-cy": "sessionManager-switch-passport-trigger"
                 }
-              )
+              ) : null
             ]
           }
         ),
-        /* @__PURE__ */ e(k, { session: r, onSwitch: m, isBlocklet: o, locale: l }),
-        x ? null : /* @__PURE__ */ i(
-          n,
-          {
-            sx: {
-              color: "secondary.main",
-              bgcolor: ({ palette: t }) => v(t.secondary.main, 0.05),
-              borderRadius: 1,
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              fontSize: 12,
-              py: 0.75,
-              px: 1.5,
-              cursor: "pointer",
-              mt: -0.75
-            },
-            onClick: u,
-            "data-cy": "sessionManager-bind-trigger",
-            children: [
-              c("connectDIDWallet"),
-              /* @__PURE__ */ e(p, { icon: C, color: "inherit", fontSize: 16 })
-            ]
-          }
-        )
+        i === "normal" ? /* @__PURE__ */ n(w, { children: [
+          /* @__PURE__ */ e(k, { session: r, onSwitch: u, isBlocklet: a, locale: c }),
+          y ? null : /* @__PURE__ */ n(
+            o,
+            {
+              sx: {
+                color: "secondary.main",
+                bgcolor: ({ palette: t }) => I(t.secondary.main, 0.05),
+                borderRadius: 1,
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                fontSize: 12,
+                py: 0.75,
+                px: 1.5,
+                cursor: "pointer",
+                mt: -0.75
+              },
+              onClick: f,
+              "data-cy": "sessionManager-bind-trigger",
+              children: [
+                s("connectDIDWallet"),
+                /* @__PURE__ */ e(p, { icon: _, color: "inherit", fontSize: 16 })
+              ]
+            }
+          )
+        ] }) : null
       ]
     }
   );
 }
 export {
-  K as default
+  Q as default
 };

package/lib/SessionUser/index.js

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

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.4.8", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
+const e = "3.4.10", 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.8",
+  "version": "3.4.10",
   "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": "6bbdc63e6e0b7ddfd5e37f2ac6bb44ee49da7139",
+  "gitHead": "162768378bf0a1d1e0984d1f01235eafa5bd9bdb",
   "dependencies": {
-    "@arcblock/bridge": "3.4.8",
-    "@arcblock/did": "^1.28.5",
+    "@arcblock/bridge": "3.4.10",
+    "@arcblock/did": "^1.28.6",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.4.8",
-    "@arcblock/nft-display": "3.4.8",
-    "@arcblock/react-hooks": "3.4.8",
+    "@arcblock/icons": "3.4.10",
+    "@arcblock/nft-display": "3.4.10",
+    "@arcblock/react-hooks": "3.4.10",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.8",
+    "@blocklet/theme": "3.4.10",
     "@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.5",
+    "@ocap/mcrypto": "^1.28.6",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

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

@@ -51,6 +51,7 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
   size?: number;
   popperType?: 'hover' | 'click';
   profileUrl?: string;
+  mode?: 'minimal' | 'normal';
 }
 
 export default function LoggedIn({
@@ -61,6 +62,7 @@ export default function LoggedIn({
   size = 24,
   popperType = 'click',
   profileUrl = PROFILE_URL,
+  mode = 'normal',
   sx,
   ...rest
 }: LoggedInProps) {
@@ -227,6 +229,7 @@ export default function LoggedIn({
                   onSwitchAccount={handleSwitchAccount}
                   onSwitchProfile={handleSwitchProfile}
                   onBindWallet={handleBindWallet}
+                  mode={mode}
                 />
                 <Divider sx={{ m: '0 !important' }} />
                 <MenuList sx={{ p: 0 }}>
@@ -258,7 +261,7 @@ export default function LoggedIn({
                         />
                       )}
                       <Divider sx={{ m: '0 !important' }} />
-                      <DidSpace session={session} locale={locale} />
+                      {mode === 'normal' ? <DidSpace session={session} locale={locale} /> : null}
                     </>
                   ) : null}
                   <SessionMenuItem

package/src/SessionUser/components/user-info.tsx

@@ -12,6 +12,7 @@ import { getWallet } from '../libs/utils';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
 import type { $TSFixMe, Locale, Session } from '../../type';
+import Tag from '../../Tag';
 
 export interface UserInfoProps {
   session: Session;
@@ -21,6 +22,7 @@ export interface UserInfoProps {
   onSwitchProfile?: () => void;
   locale?: Locale;
   isBlocklet?: true | false;
+  mode?: 'minimal' | 'normal';
 }
 
 export default function UserInfo({
@@ -31,6 +33,7 @@ export default function UserInfo({
   onSwitchProfile = noop,
   locale = 'en',
   isBlocklet = true,
+  mode = 'normal',
 }: UserInfoProps) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -71,94 +74,127 @@ export default function UserInfo({
             alignItems: 'center',
             gap: 1.5,
           }}>
-          <Box
-            onClick={isBlocklet ? noop : onSwitchProfile}
-            data-cy="sessionManager-switch-profile-trigger"
-            sx={{
-              cursor: isBlocklet ? 'default' : 'pointer',
-              position: 'relative',
-              borderRadius: '100%',
-              overflow: 'hidden',
-              fontSize: 0,
-              flexShrink: 0,
-              '&:hover': isBlocklet
-                ? {}
-                : {
-                    '&::after': {
-                      content: `"${t('switch')}"`,
-                      position: 'absolute',
-                      bottom: 0,
-                      background: 'rgba(0, 0, 0, 0.2)',
-                      left: 0,
-                      right: 0,
-                      height: '2.2em',
-                      color: 'white',
-                      textAlign: 'center',
-                      fontSize: '12px',
-                      lineHeight: '2em',
-                    },
-                  },
-            }}>
-            <DidAvatar
-              variant="circle"
-              did={session.user.did}
-              src={avatar}
-              size={48}
-              shape="circle"
+          {mode === 'normal' ? (
+            <Box
+              onClick={isBlocklet ? noop : onSwitchProfile}
+              data-cy="sessionManager-switch-profile-trigger"
               sx={{
-                cursor: isBlocklet ? 'unset' : 'pointer',
-              }}
-            />
-          </Box>
+                cursor: isBlocklet ? 'default' : 'pointer',
+                position: 'relative',
+                borderRadius: '100%',
+                overflow: 'hidden',
+                fontSize: 0,
+                flexShrink: 0,
+                '&:hover': isBlocklet
+                  ? {}
+                  : {
+                      '&::after': {
+                        content: `"${t('switch')}"`,
+                        position: 'absolute',
+                        bottom: 0,
+                        background: 'rgba(0, 0, 0, 0.2)',
+                        left: 0,
+                        right: 0,
+                        height: '2.2em',
+                        color: 'white',
+                        textAlign: 'center',
+                        fontSize: '12px',
+                        lineHeight: '2em',
+                      },
+                    },
+              }}>
+              <DidAvatar
+                variant="circle"
+                did={session.user.did}
+                src={avatar}
+                size={48}
+                shape="circle"
+                sx={{
+                  cursor: isBlocklet ? 'unset' : 'pointer',
+                }}
+              />
+            </Box>
+          ) : null}
 
-          <Typography variant="h6" sx={{ wordBreak: 'break-word' }}>
-            {session.user.fullName}
-          </Typography>
+          <Box>
+            <Typography variant={mode === 'normal' ? 'h6' : 'h4'} sx={{ wordBreak: 'break-word' }}>
+              {session.user.fullName}
+            </Typography>
+            {mode === 'normal' ? null : (
+              <Tag
+                className="user-info__connected-tag"
+                type="primary"
+                sx={{
+                  transform: 'scale(0.85)',
+                  transformOrigin: 'left',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}>
+                <Box
+                  className="user-info__connected-tag__dot"
+                  sx={{
+                    mr: 0.75,
+                    width: 6,
+                    height: 6,
+                    backgroundColor: (theme) => theme.palette.text.contrast,
+                    borderRadius: '100vw',
+                  }}
+                />
+                <Box className="user-info__connected-tag__text">DID CONNECTED</Box>
+              </Tag>
+            )}
+          </Box>
         </Box>
-        <Chip
-          label={currentRole?.title || session.user?.role.toUpperCase()}
-          size="small"
-          variant="outlined"
-          clickable
-          sx={{
-            flexShrink: 0,
-            fontWeight: 'bold',
-            fontSize: '12px',
-            color: 'text.primary',
-            borderColor: 'grey.100',
-            pr: 1,
-            pl: 0.5,
-            '&:active': {
-              boxShadow: 'none',
-            },
-          }}
-          deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
-          onDelete={onSwitchPassport}
-          onClick={onSwitchPassport}
-          data-cy="sessionManager-switch-passport-trigger"
-        />
+        {mode === 'normal' ? (
+          <Chip
+            label={currentRole?.title || session.user?.role.toUpperCase()}
+            size="small"
+            variant="outlined"
+            clickable
+            sx={{
+              flexShrink: 0,
+              fontWeight: 'bold',
+              fontSize: '12px',
+              color: 'text.primary',
+              borderColor: 'grey.100',
+              pr: 1,
+              pl: 0.5,
+              '&:active': {
+                boxShadow: 'none',
+              },
+            }}
+            deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
+            onDelete={onSwitchPassport}
+            onClick={onSwitchPassport}
+            data-cy="sessionManager-switch-passport-trigger"
+          />
+        ) : null}
       </Box>
-      <SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
-      {!hasBindWallet ? (
-        <Box
-          sx={{
-            color: 'secondary.main',
-            bgcolor: ({ palette }) => alpha(palette.secondary.main, 0.05),
-            borderRadius: 1,
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            fontSize: 12,
-            py: 0.75,
-            px: 1.5,
-            cursor: 'pointer',
-            mt: -0.75,
-          }}
-          onClick={onBindWallet}
-          data-cy="sessionManager-bind-trigger">
-          {t('connectDIDWallet')}
-          <Icon icon={ArrowRightAltRoundedIcon} color="inherit" fontSize={16} />
-        </Box>
+      {mode === 'normal' ? (
+        <>
+          <SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
+          {!hasBindWallet ? (
+            <Box
+              sx={{
+                color: 'secondary.main',
+                bgcolor: ({ palette }) => alpha(palette.secondary.main, 0.05),
+                borderRadius: 1,
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                fontSize: 12,
+                py: 0.75,
+                px: 1.5,
+                cursor: 'pointer',
+                mt: -0.75,
+              }}
+              onClick={onBindWallet}
+              data-cy="sessionManager-bind-trigger">
+              {t('connectDIDWallet')}
+              <Icon icon={ArrowRightAltRoundedIcon} color="inherit" fontSize={16} />
+            </Box>
+          ) : null}
+        </>
       ) : null}
     </Box>
   );

package/src/SessionUser/index.tsx

@@ -27,6 +27,8 @@ export default function SessionUser({
     return !!globalThis?.blocklet;
   }, []);
 
+  const mode = globalThis?.blocklet?.SESSION_USER_MODE;
+
   if (session.user) {
     return (
       <LoggedIn
@@ -37,6 +39,7 @@ export default function SessionUser({
         size={size}
         popperType={popperType}
         profileUrl={profileUrl}
+        mode={mode}
       />
     );
   }