@arcblock/ux 3.1.43 → 3.1.45

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

@@ -5,7 +5,7 @@ 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, onCancel, ref, }: {
+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, }: {
     session: any;
     requestAppInfo: RequestAppInfo;
     currentAppInfo: CurrentAppInfo;
@@ -28,8 +28,10 @@ export default function AuthApps({ session, requestAppInfo, currentAppInfo, chil
     onConnect?: (done: () => void) => void;
     onAuthorize?: (done: () => void) => void;
     onSwitchConnect?: (done: () => void) => void;
+    onSwitchPassport?: (done: () => void) => void;
     onCancel?: () => void;
     ref: Ref<{
         closeLoading: () => void;
     }>;
+    disableAuthorizeButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

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

package/lib/DIDConnect/auth-apps/switch-role.d.ts

@@ -0,0 +1,13 @@
+import { UserPublicInfo } from '@blocklet/js-sdk';
+declare function SwitchRole({ user, switchPassport, }: {
+    user: UserPublicInfo & {
+        passports: {
+            name: string;
+            title: string;
+            role: string;
+        }[];
+    };
+    switchPassport: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare const _default: import('react').MemoExoticComponent<typeof SwitchRole>;
+export default _default;

package/lib/DIDConnect/auth-apps/switch-role.js

@@ -0,0 +1,45 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as n } from "react";
+import { Chip as i } from "@mui/material";
+import { Icon as a } from "@iconify/react";
+import p from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import { useCreation as c } from "ahooks";
+function m({
+  user: o,
+  switchPassport: r
+}) {
+  const l = c(
+    () => (o?.passports || [])?.find((e) => e.name === o.role || e.role === o.role),
+    [o?.passports, o?.role]
+  );
+  return /* @__PURE__ */ t(
+    i,
+    {
+      label: l?.title || o?.role || "Guest",
+      size: "small",
+      variant: "outlined",
+      sx: {
+        flexShrink: 0,
+        fontWeight: "bold",
+        fontSize: "12px",
+        color: "text.primary",
+        borderColor: "grey.100",
+        backgroundColor: "transparent",
+        textTransform: "capitalize",
+        pr: 1,
+        pl: 0.5,
+        "&:active": {
+          boxShadow: "none"
+        }
+      },
+      clickable: !0,
+      deleteIcon: /* @__PURE__ */ t(a, { icon: p, color: "inherit" }),
+      onDelete: r,
+      onClick: r
+    }
+  );
+}
+const S = n(m);
+export {
+  S as default
+};

package/lib/UserCard/Content/minimal.js

@@ -87,7 +87,7 @@ function A({ ...s }) {
                   ) : null
                 ] })
               ] }),
-              i && (l || o.showSocialActions) ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
+              i && !l && o.showSocialActions ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
               l ? null : /* @__PURE__ */ t(
                 j,
                 {

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.43",
+  "version": "3.1.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "f8ee8cbf1c349c55a31ed833de014f4db6222976",
+  "gitHead": "6706a870c69720bc0beae69a2c380247d4d0efaa",
   "dependencies": {
-    "@arcblock/bridge": "3.1.43",
+    "@arcblock/bridge": "3.1.45",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.43",
-    "@arcblock/nft-display": "3.1.43",
-    "@arcblock/react-hooks": "3.1.43",
+    "@arcblock/icons": "3.1.45",
+    "@arcblock/nft-display": "3.1.45",
+    "@arcblock/react-hooks": "3.1.45",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.43",
+    "@blocklet/theme": "3.1.45",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

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

@@ -13,6 +13,7 @@ import { useLocaleContext } from '../../Locale/context';
 import UserCard from '../../UserCard';
 import { CardType, InfoType } from '../../UserCard/types';
 import { mergeSx } from '../../Util/style';
+import SwitchRole from './switch-role';
 
 const translations = {
   en: {
@@ -57,8 +58,11 @@ export default function AuthApps({
   onConnect = noop,
   onAuthorize = noop,
   onSwitchConnect = noop,
+  onSwitchPassport = noop,
   onCancel = noop,
   ref,
+
+  disableAuthorizeButton = false,
 }: {
   session: any;
   requestAppInfo: RequestAppInfo;
@@ -86,8 +90,11 @@ export default function AuthApps({
   onConnect?: (done: () => void) => void;
   onAuthorize?: (done: () => void) => void;
   onSwitchConnect?: (done: () => void) => void;
+  onSwitchPassport?: (done: () => void) => void;
   onCancel?: () => void;
   ref: Ref<{ closeLoading: () => void }>;
+
+  disableAuthorizeButton?: boolean;
 }) {
   const currentState = useReactive({
     loading: false,
@@ -111,6 +118,10 @@ export default function AuthApps({
     currentState.loading = true;
     onAuthorize?.(handleCloseLoading);
   });
+  const handleSwitchPassport = useMemoizedFn(() => {
+    currentState.loading = true;
+    onSwitchPassport?.(handleCloseLoading);
+  });
   const handleCancel = useMemoizedFn(() => {
     onCancel?.();
   });
@@ -165,7 +176,13 @@ export default function AuthApps({
 
             {user ? (
               <>
-                <UserCard user={user} showDid cardType={CardType.Detailed} infoType={InfoType.Minimal} />
+                <UserCard
+                  user={user}
+                  showDid
+                  cardType={CardType.Detailed}
+                  infoType={InfoType.Minimal}
+                  renderTopRightContent={() => <SwitchRole user={user} switchPassport={handleSwitchPassport} />}
+                />
                 <Box />
               </>
             ) : null}
@@ -204,7 +221,7 @@ export default function AuthApps({
                       size="large"
                       fullWidth
                       onClick={handleAuthorize}
-                      disabled={currentState.loading}>
+                      disabled={currentState.loading || disableAuthorizeButton}>
                       {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
                       {authorizeText || t('authorize')}
                     </Button>
@@ -213,7 +230,7 @@ export default function AuthApps({
                       variant="contained"
                       size="large"
                       fullWidth
-                      disabled={currentState.loading}
+                      disabled={currentState.loading || disableAuthorizeButton}
                       onClick={handleConnect}>
                       {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
                       {connectText || t('connect')}

package/src/DIDConnect/auth-apps/switch-role.tsx

@@ -0,0 +1,47 @@
+import { memo } from 'react';
+import { Chip } from '@mui/material';
+import { Icon } from '@iconify/react';
+import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
+import { useCreation } from 'ahooks';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
+
+function SwitchRole({
+  user,
+  switchPassport,
+}: {
+  user: UserPublicInfo & { passports: { name: string; title: string; role: string }[] };
+  switchPassport: () => void;
+}) {
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role || item.role === user.role),
+    [user?.passports, user?.role]
+  );
+
+  return (
+    <Chip
+      label={currentRole?.title || user?.role || 'Guest'}
+      size="small"
+      variant="outlined"
+      sx={{
+        flexShrink: 0,
+        fontWeight: 'bold',
+        fontSize: '12px',
+        color: 'text.primary',
+        borderColor: 'grey.100',
+        backgroundColor: 'transparent',
+        textTransform: 'capitalize',
+        pr: 1,
+        pl: 0.5,
+        '&:active': {
+          boxShadow: 'none',
+        },
+      }}
+      clickable
+      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
+      onDelete={switchPassport}
+      onClick={switchPassport}
+    />
+  );
+}
+
+export default memo(SwitchRole);

package/src/UserCard/Content/minimal.tsx

@@ -93,7 +93,7 @@ function MinimalContent({ ...props }: MinimalContentProps) {
             ) : null}
           </Box>
         </Box>
-        {isSmallScreen && (renderTopRightContent || rest.showSocialActions) ? <Divider sx={{ width: '100%' }} /> : null}
+        {isSmallScreen && !renderTopRightContent && rest.showSocialActions ? <Divider sx={{ width: '100%' }} /> : null}
         {!renderTopRightContent ? (
           <SocialActions
             onFollowClick={rest.onFollowClick}