@blocklet/ui-react 2.11.7 → 2.11.9

package/lib/UserCenter/components/passport.js

@@ -54,10 +54,12 @@ export default function Passport({ user, ...rest }) {
       ...rest,
       sx: {
         display: "grid",
+        justifyItems: "start",
         gridTemplateColumns: {
           xs: "repeat(2, 1fr)",
-          sm: "repeat(3, 1fr)",
-          md: "repeat(4, 1fr)"
+          sm: "repeat(2, 1fr)",
+          md: "repeat(3, 1fr)",
+          lg: "repeat(5, 1fr)"
         },
         gap: 2.5,
         ...rest.sx

package/lib/UserCenter/components/user-center.js

@@ -20,11 +20,13 @@ import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
 import { translations } from "../libs/locales.js";
 import { UserInfo, UserBasicInfo, SwitchRole } from "./user-info/index.js";
-import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
+import { formatBlockletInfo, getLink, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
 import { client } from "../../libs/client.js";
 import useMobile from "../../hooks/use-mobile.js";
+const profileLink = joinURL(PROFILE_URL, "/profile");
+const settingsLink = joinURL(PROFILE_URL, "/settings");
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -127,7 +129,8 @@ export default function UserCenter({
       {
         label: t("common.profile"),
         protected: false,
-        url: joinURL(PROFILE_URL, "/profile")
+        value: profileLink,
+        url: getLink(profileLink, locale)
       }
     ];
     if (isMyself) {
@@ -135,17 +138,18 @@ export default function UserCenter({
         label: t("common.setting"),
         protected: true,
         isPrivate: true,
-        url: joinURL(PROFILE_URL, "/settings")
+        value: settingsLink,
+        url: getLink(settingsLink, locale)
       });
     }
     return tabs;
-  }, [isMyself]);
+  }, [isMyself, locale]);
   const userCenterTabs = useCreation(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
     const localizedMenus = getLocalizedNavigation(menus, locale) || [];
     const allMenus = localizedMenus.concat(defaultTabs);
     return allMenus.map((x) => {
-      const value = x._rawLink ?? x.link ?? x.url;
+      const value = x.value ?? x._rawLink ?? x.link ?? x.url;
       return {
         value,
         label: x.title || x.label,
@@ -215,13 +219,24 @@ export default function UserCenter({
                 top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
               },
               children: [
-                /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
-                    isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: session.switchPassport }) : null
-                  ] }),
-                  /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
-                ] }),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      width: {
+                        sx: "100%",
+                        md: 420
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", children: [
+                        /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
+                        isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: session.switchPassport }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
+                    ]
+                  }
+                ),
                 isMyself ? /* @__PURE__ */ jsxs(Box, { children: [
                   /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
                   /* @__PURE__ */ jsx(Passport, { user: userState.data })
@@ -322,6 +337,8 @@ export default function UserCenter({
                     onChange: handleChangeTab,
                     sx: {
                       width: isMobile ? "100%" : 180,
+                      marginBottom: isMobile ? "8px" : 0,
+                      flexShrink: 0,
                       ".MuiTabs-flexContainer": {
                         gap: 1.5,
                         ".MuiButtonBase-root": {
@@ -345,7 +362,8 @@ export default function UserCenter({
                       minHeight: "160px",
                       display: "flex",
                       justifyContent: "center",
-                      alignItems: "center"
+                      alignItems: "center",
+                      flex: 1
                     },
                     children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
                   }
@@ -391,8 +409,8 @@ export default function UserCenter({
     }
     return currentActiveTab?.isPrivate;
   }, [isMyself, currentActiveTab]);
-  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0 || !currentActiveTab || isPrivateActive) {
-    const firstUserCenterUrl = formattedBlocklet?.navigation?.userCenter[0]?.link;
+  if (!disableAutoRedirect && !currentTab && userCenterTabs?.length > 0 || !currentActiveTab || isPrivateActive) {
+    const firstUserCenterUrl = userCenterTabs[0]?.url;
     const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
     if (firstUserCenterUrl && !firstTab?.isPrivate) {
       window.location.replace(

package/lib/UserSessions/components/user-sessions.js

@@ -260,6 +260,9 @@ export default function UserSessions({
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
           fontWeight: "bold"
+        },
+        ".MuiTableCell-root": {
+          paddingRight: "16px"
         }
       },
       children: [

package/lib/blocklets.d.ts

@@ -1,5 +1,6 @@
 export const publicPath: any;
 export function formatTheme(theme: any): any;
+export function getLink(link: any, locale?: string): any;
 export function getLocalizedNavigation(navigation: any, locale?: string): any;
 export function formatNavigation(navigation: any): any;
 export function parseNavigation(navigation: any): {

package/lib/blocklets.js

@@ -20,6 +20,24 @@ export const formatTheme = (theme) => {
   return formatted;
 };
 
+export const getLink = (link, locale = 'en') => {
+  if (typeof link === 'string') {
+    // http[s] 开头的 url
+    if (isUrl(link)) {
+      const url = new URL(link);
+      url.searchParams.set('locale', locale);
+      return url.href;
+    }
+    const url = new URL(link, window.location.origin);
+    url.searchParams.set('locale', locale);
+    return url.pathname + url.search;
+  }
+  if (typeof link === 'object') {
+    return link[locale] || link?.en || link?.zh;
+  }
+  return link;
+};
+
 /**
  * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
  */
@@ -37,24 +55,7 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
     }
     return title;
   };
-  // eslint-disable-next-line no-shadow
-  const getLink = (link, _locale) => {
-    if (typeof link === 'string') {
-      // http[s] 开头的 url
-      if (isUrl(link)) {
-        const url = new URL(link);
-        url.searchParams.set('locale', _locale);
-        return url.href;
-      }
-      const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', _locale);
-      return url.pathname + url.search;
-    }
-    if (typeof link === 'object') {
-      return link[_locale] || link?.en || link?.zh;
-    }
-    return link;
-  };
+
   return mapRecursive(
     navigation,
     (item) => {

package/lib/common/notification-addon.js

@@ -23,7 +23,6 @@ export default function NotificationAddon({ session = {} }) {
       href: viewAllUrl,
       sx: {
         borderRadius: 2,
-        color: "rgba(0, 0, 0, 0.6)",
         borderColor: colors.lineBorderStrong,
         "&:hover": {
           borderRadius: "50%"

package/lib/common/wallet-hidden-topbar.js

@@ -7,7 +7,7 @@ import bridge from '@arcblock/bridge';
 export const useWalletHiddenTopbar = () => {
   const browser = useBrowser();
   useEffect(() => {
-    if (browser.wallet) {
+    if (browser.wallet || browser.arcSphere) {
       bridge.call('arcHideTopBar', '{}');
     }
   }, [browser]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.7",
+  "version": "2.11.9",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.7",
-    "@arcblock/react-hooks": "^2.11.7",
+    "@arcblock/bridge": "^2.11.9",
+    "@arcblock/react-hooks": "^2.11.9",
     "@blocklet/did-space-react": "^0.5.83",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "1561a224b2ac2e0f8ec38fdaa4983d0582b418ba"
+  "gitHead": "cc71a9dd666287cb70d1a7bd487d1930294b9765"
 }

package/src/UserCenter/components/passport.tsx

@@ -65,10 +65,12 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
       {...rest}
       sx={{
         display: 'grid',
+        justifyItems: 'start',
         gridTemplateColumns: {
           xs: 'repeat(2, 1fr)',
-          sm: 'repeat(3, 1fr)',
-          md: 'repeat(4, 1fr)',
+          sm: 'repeat(2, 1fr)',
+          md: 'repeat(3, 1fr)',
+          lg: 'repeat(5, 1fr)',
         },
         gap: 2.5,
         ...rest.sx,

package/src/UserCenter/components/user-center.tsx

@@ -26,12 +26,15 @@ import { translations } from '../libs/locales';
 import { UserInfo, UserBasicInfo, SwitchRole } from './user-info';
 import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
-import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
+import { formatBlockletInfo, getLink, getLocalizedNavigation } from '../../blocklets';
 import Passport from './passport';
 import Settings from './settings';
 import { client } from '../../libs/client';
 import useMobile from '../../hooks/use-mobile';
 
+const profileLink = joinURL(PROFILE_URL, '/profile');
+const settingsLink = joinURL(PROFILE_URL, '/settings');
+
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -155,7 +158,8 @@ export default function UserCenter({
       {
         label: t('common.profile'),
         protected: false,
-        url: joinURL(PROFILE_URL, '/profile'),
+        value: profileLink,
+        url: getLink(profileLink, locale),
       },
     ];
     if (isMyself) {
@@ -163,11 +167,12 @@ export default function UserCenter({
         label: t('common.setting'),
         protected: true,
         isPrivate: true,
-        url: joinURL(PROFILE_URL, '/settings'),
+        value: settingsLink,
+        url: getLink(settingsLink, locale),
       });
     }
     return tabs;
-  }, [isMyself]);
+  }, [isMyself, locale]);
 
   const userCenterTabs = useCreation<UserCenterTab[]>(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
@@ -175,7 +180,7 @@ export default function UserCenter({
     const allMenus = localizedMenus.concat(defaultTabs);
     return allMenus
       .map((x: any) => {
-        const value = x._rawLink ?? x.link ?? x.url;
+        const value = x.value ?? x._rawLink ?? x.link ?? x.url;
 
         return {
           value,
@@ -249,7 +254,13 @@ export default function UserCenter({
               },
               top: (theme) => (stickySidebar ? theme.spacing(3) : 'unset'),
             }}>
-            <Box>
+            <Box
+              sx={{
+                width: {
+                  sx: '100%',
+                  md: 420,
+                },
+              }}>
               <Box display="flex" justifyContent="space-between">
                 <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{isMyself ? t('myInfo') : t('hisInfo')}</Typography>
                 {isMyself ? <SwitchRole user={userState.data as User} switchPassport={session.switchPassport} /> : null}
@@ -364,6 +375,8 @@ export default function UserCenter({
               onChange={handleChangeTab}
               sx={{
                 width: isMobile ? '100%' : 180,
+                marginBottom: isMobile ? '8px' : 0,
+                flexShrink: 0,
                 '.MuiTabs-flexContainer': {
                   gap: 1.5,
                   '.MuiButtonBase-root': {
@@ -386,6 +399,7 @@ export default function UserCenter({
                   display: 'flex',
                   justifyContent: 'center',
                   alignItems: 'center',
+                  flex: 1,
                 }}>
                 <CircularProgress sx={{ color: colors.primary100 }} />
               </Box>
@@ -438,12 +452,8 @@ export default function UserCenter({
   }, [isMyself, currentActiveTab]);
 
   // TODO 过滤 !mySelf 是的URL跳转
-  if (
-    (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) ||
-    !currentActiveTab ||
-    isPrivateActive
-  ) {
-    const firstUserCenterUrl = formattedBlocklet?.navigation?.userCenter[0]?.link;
+  if ((!disableAutoRedirect && !currentTab && userCenterTabs?.length > 0) || !currentActiveTab || isPrivateActive) {
+    const firstUserCenterUrl = userCenterTabs[0]?.url;
     const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
     if (firstUserCenterUrl && !firstTab?.isPrivate) {
       window.location.replace(

package/src/UserSessions/components/user-sessions.tsx

@@ -312,6 +312,9 @@ export default function UserSessions({
           whiteSpace: 'nowrap',
           fontWeight: 'bold',
         },
+        '.MuiTableCell-root': {
+          paddingRight: '16px',
+        },
       }}>
       {confirmHolder}
       <Datatable

package/src/blocklets.js

@@ -20,6 +20,24 @@ export const formatTheme = (theme) => {
   return formatted;
 };
 
+export const getLink = (link, locale = 'en') => {
+  if (typeof link === 'string') {
+    // http[s] 开头的 url
+    if (isUrl(link)) {
+      const url = new URL(link);
+      url.searchParams.set('locale', locale);
+      return url.href;
+    }
+    const url = new URL(link, window.location.origin);
+    url.searchParams.set('locale', locale);
+    return url.pathname + url.search;
+  }
+  if (typeof link === 'object') {
+    return link[locale] || link?.en || link?.zh;
+  }
+  return link;
+};
+
 /**
  * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
  */
@@ -37,24 +55,7 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
     }
     return title;
   };
-  // eslint-disable-next-line no-shadow
-  const getLink = (link, _locale) => {
-    if (typeof link === 'string') {
-      // http[s] 开头的 url
-      if (isUrl(link)) {
-        const url = new URL(link);
-        url.searchParams.set('locale', _locale);
-        return url.href;
-      }
-      const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', _locale);
-      return url.pathname + url.search;
-    }
-    if (typeof link === 'object') {
-      return link[_locale] || link?.en || link?.zh;
-    }
-    return link;
-  };
+
   return mapRecursive(
     navigation,
     (item) => {

package/src/common/notification-addon.jsx

@@ -27,7 +27,6 @@ export default function NotificationAddon({ session = {} }) {
       href={viewAllUrl}
       sx={{
         borderRadius: 2,
-        color: 'rgba(0, 0, 0, 0.6)',
         borderColor: colors.lineBorderStrong,
         '&:hover': {
           borderRadius: '50%',

package/src/common/wallet-hidden-topbar.js

@@ -7,7 +7,7 @@ import bridge from '@arcblock/bridge';
 export const useWalletHiddenTopbar = () => {
   const browser = useBrowser();
   useEffect(() => {
-    if (browser.wallet) {
+    if (browser.wallet || browser.arcSphere) {
       bridge.call('arcHideTopBar', '{}');
     }
   }, [browser]);