@blocklet/ui-react 2.13.21 → 2.13.24

package/lib/Footer/index.js

@@ -26,6 +26,8 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   }, [meta]);
   const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
   const appLogo = useBlockletLogo({
+    key: "xs",
+    // 始终优先长 logo
     meta,
     theme: themeOverrides
   });

package/lib/Footer/internal-footer.js

@@ -11,7 +11,7 @@ import PlainLayout from "./layout/plain.js";
 const layouts = [
   {
     name: "plain",
-    // navigation 数据为空时, 使用简单布局
+    // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
     support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
     component: PlainLayout
   },

package/lib/Footer/layout/row.js

@@ -27,10 +27,10 @@ const RowRoot = styled(Box)`
     margin: 0 auto;
   }
 
-  ${(props) => props.theme.breakpoints.down("md")} {
+  ${({ theme }) => theme.breakpoints.down("md")} {
     align-items: stretch;
     flex-direction: column;
-    gap: 16px;
+    gap: ${({ theme }) => theme.spacing(1)};
     > * {
       flex: 1 0 100%;
     }

package/lib/Footer/layout/standard.js

@@ -18,7 +18,7 @@ function StandardLayout({ elements, data, className, ...rest }) {
             paddingRight: { xs: 0, md: 3 },
             display: "flex",
             flexDirection: "column",
-            alignItems: { xs: "center", md: "flex-start" },
+            alignItems: "flex-start",
             gap: 2,
             pb: 3
           },
@@ -38,7 +38,7 @@ function StandardLayout({ elements, data, className, ...rest }) {
           display: "flex",
           flexDirection: { xs: "column", md: "row" },
           justifyContent: "space-between",
-          alignItems: { xs: "center", md: "space-between" },
+          alignItems: "space-between",
           gap: 2,
           pb: 3
         },

package/lib/UserCenter/components/nft.js

@@ -58,28 +58,46 @@ export default function Nft({ user }) {
           children: t("common.nft")
         }
       ),
-      /* @__PURE__ */ jsxs(Box, { className: "nft-list-wrapper", display: "flex", flexDirection: "row", gap: 2, flexWrap: "wrap", children: [
-        data?.assets?.map((item) => /* @__PURE__ */ jsx(Box, { width: 166, height: 166, flexShrink: 0, children: /* @__PURE__ */ jsx(
-          NFTDisplay,
-          {
-            data: item.display,
-            address: item.address,
-            inset: true,
-            imageFilter: {
-              imageFilter: "resize",
-              w: "500",
-              f: "webp"
-            }
-          }
-        ) }, item.address)),
-        data?.assets?.length === 0 && !loading && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%", children: /* @__PURE__ */ jsx(Empty, { children: t("common.noNFT") }) })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: "nft-list-wrapper",
+          sx: {
+            display: "grid",
+            justifyItems: "start",
+            gridTemplateColumns: {
+              xs: "repeat(2, 1fr)",
+              sm: "repeat(2, 1fr)",
+              md: "repeat(3, 1fr)",
+              lg: "repeat(5, 1fr)"
+            },
+            gap: 2.5
+          },
+          children: [
+            data?.assets?.map((item) => /* @__PURE__ */ jsx(Box, { width: 166, height: 166, flexShrink: 0, children: /* @__PURE__ */ jsx(
+              NFTDisplay,
+              {
+                data: item.display,
+                address: item.address,
+                inset: true,
+                imageFilter: {
+                  imageFilter: "resize",
+                  w: "500",
+                  f: "webp"
+                }
+              }
+            ) }, item.address)),
+            data?.assets?.length === 0 && !loading && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%", children: /* @__PURE__ */ jsx(Empty, { children: t("common.noNFT") }) })
+          ]
+        }
+      ),
       dataPage.next || paging.page > 1 ? /* @__PURE__ */ jsx(
         Pagination,
         {
           sx: {
             display: "flex",
-            justifyContent: "end"
+            justifyContent: "center",
+            mt: 2
           },
           page: paging.page,
           onChange: handlePageChange,

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

@@ -243,13 +243,13 @@ export default function UserCenter({
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
   const isSettingTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/settings");
+    return currentActiveTab && currentActiveTab?.value === settingsLink;
   }, [currentActiveTab]);
   const isNftsTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile") || currentActiveTab?.value === joinURL(PROFILE_URL, "/nfts");
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile") || currentActiveTab?.value === nftsLink;
   }, [currentActiveTab]);
   const isDidSpaceTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/did-spaces");
+    return currentActiveTab && currentActiveTab?.value === didSpacesLink;
   }, [currentActiveTab]);
   const oauth = session.useOAuth();
   const passkey = session.usePasskey();
@@ -547,7 +547,18 @@ export default function UserCenter({
           content,
           confirmHolder
         ] }),
-        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { bordered: true, ...footerProps })
+        hideFooter ? null : /* @__PURE__ */ jsx(
+          Footer,
+          {
+            bordered: true,
+            ...footerProps,
+            sx: {
+              ".MuiContainer-root": {
+                maxWidth: 1600
+              }
+            }
+          }
+        )
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.21",
+  "version": "2.13.24",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,11 +34,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.42",
     "@abtnode/util": "^1.16.42",
-    "@arcblock/bridge": "^2.13.21",
-    "@arcblock/react-hooks": "^2.13.21",
-    "@arcblock/ws": "^1.20.4",
+    "@arcblock/bridge": "^2.13.24",
+    "@arcblock/react-hooks": "^2.13.24",
+    "@arcblock/ws": "^1.20.6",
     "@blocklet/constant": "^1.16.42",
-    "@blocklet/did-space-react": "^1.0.49",
+    "@blocklet/did-space-react": "^1.0.51",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ff25dbcf651ad7e8c0b940525e285f2cebe3e52d"
+  "gitHead": "57fa9683f81c72474528412d1a2205dab186f4f9"
 }

package/src/Footer/index.jsx

@@ -31,6 +31,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
 
   const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
   const appLogo = useBlockletLogo({
+    key: 'xs', // 始终优先长 logo
     meta,
     theme: themeOverrides,
   });

package/src/Footer/internal-footer.jsx

@@ -12,7 +12,7 @@ import PlainLayout from './layout/plain';
 const layouts = [
   {
     name: 'plain',
-    // navigation 数据为空时, 使用简单布局
+    // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
     support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
     component: PlainLayout,
   },

package/src/Footer/layout/row.jsx

@@ -34,10 +34,10 @@ const RowRoot = styled(Box)`
     margin: 0 auto;
   }
 
-  ${(props) => props.theme.breakpoints.down('md')} {
+  ${({ theme }) => theme.breakpoints.down('md')} {
     align-items: stretch;
     flex-direction: column;
-    gap: 16px;
+    gap: ${({ theme }) => theme.spacing(1)};
     > * {
       flex: 1 0 100%;
     }

package/src/Footer/layout/standard.jsx

@@ -24,7 +24,7 @@ function StandardLayout({ elements, data, className, ...rest }) {
             paddingRight: { xs: 0, md: 3 },
             display: 'flex',
             flexDirection: 'column',
-            alignItems: { xs: 'center', md: 'flex-start' },
+            alignItems: 'flex-start',
             gap: 2,
             pb: 3,
           }}>
@@ -42,7 +42,7 @@ function StandardLayout({ elements, data, className, ...rest }) {
           display: 'flex',
           flexDirection: { xs: 'column', md: 'row' },
           justifyContent: 'space-between',
-          alignItems: { xs: 'center', md: 'space-between' },
+          alignItems: 'space-between',
           gap: 2,
           pb: 3,
         }}>

package/src/UserCenter/components/nft.tsx

@@ -86,7 +86,19 @@ export default function Nft({ user }: { user: User }) {
           }}>
           {t('common.nft')}
         </Typography>
-        <Box className="nft-list-wrapper" display="flex" flexDirection="row" gap={2} flexWrap="wrap">
+        <Box
+          className="nft-list-wrapper"
+          sx={{
+            display: 'grid',
+            justifyItems: 'start',
+            gridTemplateColumns: {
+              xs: 'repeat(2, 1fr)',
+              sm: 'repeat(2, 1fr)',
+              md: 'repeat(3, 1fr)',
+              lg: 'repeat(5, 1fr)',
+            },
+            gap: 2.5,
+          }}>
           {data?.assets?.map((item) => (
             <Box key={item.address} width={166} height={166} flexShrink={0}>
               <NFTDisplay
@@ -111,7 +123,8 @@ export default function Nft({ user }: { user: User }) {
           <Pagination
             sx={{
               display: 'flex',
-              justifyContent: 'end',
+              justifyContent: 'center',
+              mt: 2,
             }}
             page={paging.page}
             onChange={handlePageChange}

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

@@ -291,18 +291,18 @@ export default function UserCenter({
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
 
   const isSettingTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/settings');
+    return currentActiveTab && currentActiveTab?.value === settingsLink;
   }, [currentActiveTab]);
 
   const isNftsTab = useCreation(() => {
     return (
       (currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile')) ||
-      currentActiveTab?.value === joinURL(PROFILE_URL, '/nfts')
+      currentActiveTab?.value === nftsLink
     );
   }, [currentActiveTab]);
 
   const isDidSpaceTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/did-spaces');
+    return currentActiveTab && currentActiveTab?.value === didSpacesLink;
   }, [currentActiveTab]);
 
   const oauth = session.useOAuth();
@@ -641,7 +641,17 @@ export default function UserCenter({
         {content}
         {confirmHolder}
       </Main>
-      {hideFooter ? null : <Footer bordered {...footerProps} />}
+      {hideFooter ? null : (
+        <Footer
+          bordered
+          {...footerProps}
+          sx={{
+            '.MuiContainer-root': {
+              maxWidth: 1600,
+            },
+          }}
+        />
+      )}
     </Box>
   );
 }