@arcblock/ux 2.10.56 → 2.10.58

package/lib/BlockletV2/blocklet.d.ts

@@ -8,6 +8,11 @@ export interface IBlockletStore extends CardProps {
     avatar: string;
     author: string;
     download: string;
+    official?: {
+        tooltip: React.ReactNode;
+        size?: number;
+        color?: string;
+    };
     button?: React.ReactNode;
     buttonText?: string;
     buttonDisabled?: boolean;

package/lib/BlockletV2/blocklet.js

@@ -2,11 +2,13 @@ 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, CircularProgress, Stack, Typography } from '@mui/material';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import { Box, Card, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
 import IconText from './components/icon-text';
+import TooltipIcon from './tooltip-icon';
 import { formatDownloadCount, strippedString } from './utils';
 export default function BlockletStore(props) {
   const {
@@ -17,6 +19,7 @@ export default function BlockletStore(props) {
     author,
     download,
     did,
+    official,
     buttonText = 'Install',
     buttonDisabled,
     buttonLoading,
@@ -74,24 +77,52 @@ export default function BlockletStore(props) {
     children: [/*#__PURE__*/_jsxs(Stack, {
       flex: 1,
       direction: "row",
-      gap: 2,
+      gap: 1,
       alignItems: "center",
       overflow: "hidden",
+      sx: {
+        '& > *': {
+          flexShrink: 0
+        }
+      },
       children: [/*#__PURE__*/_jsx(Avatar, {
         src: cover,
         did: did,
         size: 48,
-        variant: "rounded"
+        variant: "rounded",
+        style: {
+          borderRadius: '8px',
+          overflow: 'hidden'
+        }
       }), /*#__PURE__*/_jsx(Typography, {
-        flex: 1,
-        fontWeight: "typography.fontWeightMedium",
+        className: "blocklet-title",
+        fontWeight: "fontWeightMedium",
         sx: {
           fontSize: 16,
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
-          overflow: 'hidden'
+          overflow: 'hidden',
+          pl: 0.5,
+          '&&': {
+            flexShrink: 1
+          }
         },
         ...titleProps
+      }), /*#__PURE__*/_jsx(Box, {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        gap: 1,
+        children: official && /*#__PURE__*/_jsx(TooltipIcon, {
+          title: official.tooltip,
+          children: /*#__PURE__*/_jsx(VerifiedIcon, {
+            sx: {
+              color: official.color || '#D97706',
+              fontSize: official.size || 18
+            }
+          })
+        })
       }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
         color: "reverse",
         variant: "outlined",
@@ -115,6 +146,7 @@ export default function BlockletStore(props) {
     }), /*#__PURE__*/_jsx(Stack, {
       py: 2,
       children: /*#__PURE__*/_jsx(Typography, {
+        className: "blocklet-description",
         variant: "body2",
         color: "text.secondary",
         sx: {

package/lib/BlockletV2/index.d.ts

@@ -1,4 +1,5 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
-export { ActionButton, strippedString };
+import TooltipIcon from './tooltip-icon';
+export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/lib/BlockletV2/index.js

@@ -1,4 +1,5 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
-export { ActionButton, strippedString };
+import TooltipIcon from './tooltip-icon';
+export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/lib/BlockletV2/tooltip-icon.d.ts

@@ -0,0 +1,7 @@
+import { TooltipProps } from '@mui/material';
+export interface TooltipIconProps extends TooltipProps {
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    color?: string;
+}
+export default function TooltipIcon({ title, sx, children, PopperProps, fontSize, fontWeight, color, ...props }: TooltipIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/BlockletV2/tooltip-icon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip, tooltipClasses } from '@mui/material';
+export default function TooltipIcon({
+  title,
+  sx,
+  children,
+  PopperProps,
+  fontSize = 12,
+  fontWeight = 500,
+  color = 'text.secondary',
+  ...props
+}) {
+  return title ? /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    placement: "top",
+    ...props,
+    PopperProps: {
+      ...PopperProps,
+      sx: [{
+        [`& .${tooltipClasses.tooltip}`]: {
+          backgroundColor: 'common.white',
+          boxShadow: 1,
+          fontSize,
+          fontWeight,
+          color,
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, ...(Array.isArray(PopperProps?.sx) ? PopperProps.sx : [PopperProps?.sx])]
+    },
+    children: children
+  }) : children;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.56",
+  "version": "2.10.58",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "10a7e8065f17c565540a428069fd20e30760848f",
+  "gitHead": "b6bba35441efe81e5df2833a5ca5fb589ceea55b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.56",
-    "@arcblock/nft-display": "^2.10.56",
-    "@arcblock/react-hooks": "^2.10.56",
+    "@arcblock/icons": "^2.10.58",
+    "@arcblock/nft-display": "^2.10.58",
+    "@arcblock/react-hooks": "^2.10.58",
     "@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,11 +2,13 @@ import React, { isValidElement } from 'react';
 
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import { Card, CardProps, CircularProgress, Stack, Typography } from '@mui/material';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import { Box, Card, CardProps, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
 import IconText from './components/icon-text';
+import TooltipIcon from './tooltip-icon';
 import { formatDownloadCount, strippedString } from './utils';
 
 export interface IBlockletStore extends CardProps {
@@ -17,6 +19,11 @@ export interface IBlockletStore extends CardProps {
   avatar: string;
   author: string;
   download: string;
+  official?: {
+    tooltip: React.ReactNode;
+    size?: number;
+    color?: string;
+  };
   button?: React.ReactNode;
   buttonText?: string;
   buttonDisabled?: boolean;
@@ -35,6 +42,7 @@ export default function BlockletStore(props: IBlockletStore) {
     author,
     download,
     did,
+    official,
     buttonText = 'Install',
     buttonDisabled,
     buttonLoading,
@@ -81,14 +89,28 @@ export default function BlockletStore(props: IBlockletStore) {
       onClick={handleMainClick}
       {...rest}
       sx={{ p: { xs: 2, md: 3 }, borderRadius: 2, ...rest.sx }}>
-      <Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
-        <Avatar src={cover} did={did} size={48} variant="rounded" />
+      <Stack flex={1} direction="row" gap={1} alignItems="center" overflow="hidden" sx={{ '& > *': { flexShrink: 0 } }}>
+        <Avatar src={cover} did={did} size={48} variant="rounded" style={{ borderRadius: '8px', overflow: 'hidden' }} />
         <Typography
-          flex={1}
-          fontWeight="typography.fontWeightMedium"
-          sx={{ fontSize: 16, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+          className="blocklet-title"
+          fontWeight="fontWeightMedium"
+          sx={{
+            fontSize: 16,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            pl: 0.5,
+            '&&': { flexShrink: 1 },
+          }}
           {...titleProps}
         />
+        <Box flex={1} display="flex" alignItems="center" justifyContent="flex-start" gap={1}>
+          {official && (
+            <TooltipIcon title={official.tooltip}>
+              <VerifiedIcon sx={{ color: official.color || '#D97706', fontSize: official.size || 18 }} />
+            </TooltipIcon>
+          )}
+        </Box>
         {button ||
           (onButtonClick && (
             <Button
@@ -110,6 +132,7 @@ export default function BlockletStore(props: IBlockletStore) {
       </Stack>
       <Stack py={2}>
         <Typography
+          className="blocklet-description"
           variant="body2"
           color="text.secondary"
           sx={{

package/src/BlockletV2/index.ts

@@ -1,5 +1,6 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
+import TooltipIcon from './tooltip-icon';
 
-export { ActionButton, strippedString };
+export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/src/BlockletV2/tooltip-icon.tsx

@@ -0,0 +1,46 @@
+import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+
+export interface TooltipIconProps extends TooltipProps {
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  color?: string;
+}
+
+export default function TooltipIcon({
+  title,
+  sx,
+  children,
+  PopperProps,
+  fontSize = 12,
+  fontWeight = 500,
+  color = 'text.secondary',
+  ...props
+}: TooltipIconProps) {
+  return title ? (
+    <Tooltip
+      title={title}
+      placement="top"
+      {...props}
+      PopperProps={{
+        ...PopperProps,
+        sx: [
+          {
+            [`& .${tooltipClasses.tooltip}`]: {
+              backgroundColor: 'common.white',
+              boxShadow: 1,
+              fontSize,
+              fontWeight,
+              color,
+              display: 'flex',
+              alignItems: 'center',
+            },
+          },
+          ...(Array.isArray(PopperProps?.sx) ? PopperProps.sx : [PopperProps?.sx]),
+        ],
+      }}>
+      {children}
+    </Tooltip>
+  ) : (
+    children
+  );
+}