@arcblock/ux 2.10.37 → 2.10.39

package/lib/BlockletV2/blocklet.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { isValidElement } from 'react';
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import { Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import { Card, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
@@ -62,66 +62,63 @@ export default function BlockletStore(props) {
   return /*#__PURE__*/_jsxs(Card, {
     variant: "outlined",
     sx: {
+      p: {
+        xs: 2,
+        md: 3
+      },
       borderRadius: 2
     },
     onClick: handleMainClick,
     ...rest,
-    children: [/*#__PURE__*/_jsx(CardContent, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'space-between'
-      },
-      children: /*#__PURE__*/_jsxs(Stack, {
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      flex: 1,
+      direction: "row",
+      gap: 2,
+      alignItems: "center",
+      overflow: "hidden",
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: cover,
+        did: did,
+        size: 40,
+        variant: "rounded"
+      }), /*#__PURE__*/_jsx(Typography, {
         flex: 1,
-        direction: "row",
-        gap: 2,
-        alignItems: "center",
-        overflow: "hidden",
-        children: [/*#__PURE__*/_jsx(Avatar, {
-          src: cover,
-          did: did,
-          size: 40,
-          variant: "rounded"
-        }), /*#__PURE__*/_jsx(Typography, {
-          flex: 1,
-          component: "h6",
-          variant: "h6",
-          sx: {
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
-          },
-          ...titleProps
-        }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
-          color: "reverse",
-          variant: "outlined",
-          size: "small",
-          disabled: buttonDisabled || buttonLoading,
+        sx: {
+          fontSize: 16,
+          fontWeight: 500,
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        },
+        ...titleProps
+      }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
+        color: "reverse",
+        variant: "outlined",
+        size: "small",
+        disabled: buttonDisabled || buttonLoading,
+        style: {
+          borderColor: theme.palette.grey[300],
+          borderRadius: 8,
+          fontSize: 13,
+          fontWeight: 'typography.fontWeightMedium'
+        },
+        onClick: handleButtonClick,
+        children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
+          size: 15,
           style: {
-            borderColor: theme.palette.grey[300],
-            borderRadius: 8
-          },
-          onClick: handleButtonClick,
-          children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
-            size: 15,
-            style: {
-              marginRight: 3,
-              color: 'inherit'
-            }
-          }), buttonText]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(CardContent, {
-      sx: {
-        py: 0
-      },
+            marginRight: 3,
+            color: 'inherit'
+          }
+        }), buttonText]
+      })]
+    }), /*#__PURE__*/_jsx(Stack, {
+      py: 2,
       children: /*#__PURE__*/_jsx(Typography, {
-        component: "div",
         variant: "body2",
         color: "text.secondary",
         sx: {
-          lineClamp: 2,
           display: '-webkit-box',
+          lineClamp: 2,
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
@@ -129,13 +126,11 @@ export default function BlockletStore(props) {
         },
         ...descriptionProps
       })
-    }), /*#__PURE__*/_jsxs(CardContent, {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-        color: 'grey.800'
-      },
+    }), /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 2,
+      color: "text.secondary",
       children: [/*#__PURE__*/_jsx(IconText, {
         icon: /*#__PURE__*/_jsx(Avatar, {
           src: avatar,

package/lib/BlockletV2/components/icon-text.js

@@ -7,7 +7,7 @@ export default function IconText({
   maxWidth = 100,
   title
 }) {
-  return children && /*#__PURE__*/_jsxs(Stack, {
+  return (children === 0 || children) && /*#__PURE__*/_jsxs(Stack, {
     direction: "row",
     alignItems: "center",
     gap: 1,

package/lib/NFTDisplay/index.js

@@ -228,6 +228,13 @@ function NFTDisplay({
     const renderObject = () => {
       const objectType = state.urlType || 'image/svg+xml';
       const url = getFullContentUrl();
+
+      // do naive image render
+      const pathname = new URL(url).pathname.toLowerCase();
+      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff', '.tif', '.ico', '.jfif', '.pjpeg', '.pjp', '.avif'];
+      if (imageExtensions.some(ext => pathname.endsWith(ext))) {
+        return renderImg();
+      }
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/alt-text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.37",
+  "version": "2.10.39",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,6 +53,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "moment-timezone": "^0.5.37",
+    "prettier": "^3.3.3",
     "typescript": "5.5.4"
   },
   "peerDependencies": {
@@ -63,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "e3cba514fa9ad05b887c0339137baa55530f89be",
+  "gitHead": "e9b7ea36bde7edec3bad5db838b9bfc3c03012a4",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.37",
-    "@arcblock/nft-display": "^2.10.37",
-    "@arcblock/react-hooks": "^2.10.37",
+    "@arcblock/icons": "^2.10.39",
+    "@arcblock/nft-display": "^2.10.39",
+    "@arcblock/react-hooks": "^2.10.39",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/BlockletV2/blocklet.tsx

@@ -2,7 +2,7 @@ import React, { isValidElement } from 'react';
 
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import { Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import { Card, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
@@ -77,40 +77,50 @@ export default function BlockletStore(props: IBlockletStore) {
     : { title: strippedString(description), dangerouslySetInnerHTML: { __html: description } };
 
   return (
-    <Card variant="outlined" sx={{ borderRadius: 2 }} onClick={handleMainClick} {...rest}>
-      <CardContent sx={{ display: 'flex', justifyContent: 'space-between' }}>
-        <Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
-          <Avatar src={cover} did={did} size={40} variant="rounded" />
-          <Typography
-            flex={1}
-            component="h6"
-            variant="h6"
-            sx={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
-            {...titleProps}
-          />
-          {button ||
-            (onButtonClick && (
-              <Button
-                color="reverse"
-                variant="outlined"
-                size="small"
-                disabled={buttonDisabled || buttonLoading}
-                style={{ borderColor: theme.palette.grey[300], borderRadius: 8 }}
-                onClick={handleButtonClick}>
-                {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
-                {buttonText}
-              </Button>
-            ))}
-        </Stack>
-      </CardContent>
-      <CardContent sx={{ py: 0 }}>
+    <Card
+      variant="outlined"
+      sx={{
+        p: {
+          xs: 2,
+          md: 3,
+        },
+        borderRadius: 2,
+      }}
+      onClick={handleMainClick}
+      {...rest}>
+      <Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
+        <Avatar src={cover} did={did} size={40} variant="rounded" />
+        <Typography
+          flex={1}
+          sx={{ fontSize: 16, fontWeight: 500, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+          {...titleProps}
+        />
+        {button ||
+          (onButtonClick && (
+            <Button
+              color="reverse"
+              variant="outlined"
+              size="small"
+              disabled={buttonDisabled || buttonLoading}
+              style={{
+                borderColor: theme.palette.grey[300],
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 'typography.fontWeightMedium',
+              }}
+              onClick={handleButtonClick}>
+              {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
+              {buttonText}
+            </Button>
+          ))}
+      </Stack>
+      <Stack py={2}>
         <Typography
-          component="div"
           variant="body2"
           color="text.secondary"
           sx={{
-            lineClamp: 2,
             display: '-webkit-box',
+            lineClamp: 2,
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
@@ -118,13 +128,13 @@ export default function BlockletStore(props: IBlockletStore) {
           }}
           {...descriptionProps}
         />
-      </CardContent>
-      <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 4, color: 'grey.800' }}>
+      </Stack>
+      <Stack direction="row" alignItems="center" gap={2} color="text.secondary">
         <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />}>{author}</IconText>
         <IconText icon={<Icon icon={Download} />} title={download}>
           {formatDownloadCount(download)}
         </IconText>
-      </CardContent>
+      </Stack>
     </Card>
   );
 }

package/src/BlockletV2/components/icon-text.tsx

@@ -13,7 +13,7 @@ export default function IconText({
   title?: string;
 }) {
   return (
-    children && (
+    (children === 0 || children) && (
       <Stack direction="row" alignItems="center" gap={1} sx={{ maxWidth, overflow: 'hidden' }}>
         {icon}
         <Typography

package/src/NFTDisplay/index.js

@@ -201,6 +201,29 @@ function NFTDisplay({
     const renderObject = () => {
       const objectType = state.urlType || 'image/svg+xml';
       const url = getFullContentUrl();
+
+      // do naive image render
+      const pathname = new URL(url).pathname.toLowerCase();
+      const imageExtensions = [
+        '.jpg',
+        '.jpeg',
+        '.png',
+        '.gif',
+        '.bmp',
+        '.webp',
+        '.svg',
+        '.tiff',
+        '.tif',
+        '.ico',
+        '.jfif',
+        '.pjpeg',
+        '.pjp',
+        '.avif',
+      ];
+      if (imageExtensions.some((ext) => pathname.endsWith(ext))) {
+        return renderImg();
+      }
+
       return (
         // eslint-disable-next-line jsx-a11y/alt-text
         <object