@arcblock/ux 2.10.36 → 2.10.38

package/lib/Video/index.d.ts

@@ -0,0 +1,19 @@
+declare function Video(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace Video {
+    namespace propTypes {
+        let url: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        let height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        let style: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    }
+    namespace defaultProps {
+        let width_1: number;
+        export { width_1 as width };
+        let height_1: number;
+        export { height_1 as height };
+        let style_1: {};
+        export { style_1 as style };
+    }
+}
+export default Video;
+import PropTypes from 'prop-types';

package/lib/Wallet/Action.d.ts

@@ -0,0 +1,21 @@
+declare function WalletAction(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace WalletAction {
+    namespace propTypes {
+        let action: PropTypes.Requireable<string>;
+        let size: PropTypes.Requireable<string>;
+        let textLayout: PropTypes.Requireable<string>;
+        let style: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    }
+    namespace defaultProps {
+        let action_1: string;
+        export { action_1 as action };
+        let textLayout_1: string;
+        export { textLayout_1 as textLayout };
+        let size_1: string;
+        export { size_1 as size };
+        let style_1: {};
+        export { style_1 as style };
+    }
+}
+export default WalletAction;
+import PropTypes from 'prop-types';

package/lib/Wallet/Download.d.ts

@@ -0,0 +1,33 @@
+declare function WalletDownload(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace WalletDownload {
+    namespace propTypes {
+        let title: PropTypes.Requireable<string>;
+        let layout: PropTypes.Requireable<string>;
+        let storeLayout: PropTypes.Requireable<string>;
+        let style: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let iosLink: PropTypes.Requireable<string>;
+        let androidLink: PropTypes.Requireable<string>;
+        let androidDownLoadUrl: PropTypes.Requireable<string>;
+        let locale: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let title_1: string;
+        export { title_1 as title };
+        let layout_1: string;
+        export { layout_1 as layout };
+        let storeLayout_1: string;
+        export { storeLayout_1 as storeLayout };
+        let iosLink_1: string;
+        export { iosLink_1 as iosLink };
+        let androidLink_1: string;
+        export { androidLink_1 as androidLink };
+        let androidDownLoadUrl_1: string;
+        export { androidDownLoadUrl_1 as androidDownLoadUrl };
+        let style_1: {};
+        export { style_1 as style };
+        let locale_1: string;
+        export { locale_1 as locale };
+    }
+}
+export default WalletDownload;
+import PropTypes from 'prop-types';

package/lib/Wallet/Open.d.ts

@@ -0,0 +1,16 @@
+declare function OpenInWallet({ locale, link }: {
+    locale: any;
+    link: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace OpenInWallet {
+    namespace propTypes {
+        let locale: PropTypes.Requireable<string>;
+        let link: PropTypes.Validator<string>;
+    }
+    namespace defaultProps {
+        let locale_1: string;
+        export { locale_1 as locale };
+    }
+}
+export default OpenInWallet;
+import PropTypes from 'prop-types';

package/lib/WalletOSIcon/index.d.ts

@@ -0,0 +1,26 @@
+declare function WalletOSIcon({ loading, walletOS, provider, color }: {
+    loading: any;
+    walletOS: any;
+    provider: any;
+    color: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace WalletOSIcon {
+    namespace propTypes {
+        let loading: PropTypes.Requireable<boolean>;
+        let walletOS: PropTypes.Requireable<string>;
+        let provider: PropTypes.Requireable<string>;
+        let color: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let loading_1: boolean;
+        export { loading_1 as loading };
+        let walletOS_1: null;
+        export { walletOS_1 as walletOS };
+        let provider_1: null;
+        export { provider_1 as provider };
+        let color_1: string;
+        export { color_1 as color };
+    }
+}
+export default WalletOSIcon;
+import PropTypes from 'prop-types';

package/lib/WebWalletSWKeeper/index.d.ts

@@ -0,0 +1,21 @@
+export default WebWalletSWKeeper;
+export function withWebWalletSWKeeper(Component: any): ({ webWalletUrl, maxIdleTime, ...rest }: {
+    [x: string]: any;
+    webWalletUrl: any;
+    maxIdleTime: any;
+}) => import("react/jsx-runtime").JSX.Element;
+declare function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }: {
+    webWalletUrl: any;
+    maxIdleTime: any;
+}): null;
+declare namespace WebWalletSWKeeper {
+    namespace propTypes {
+        let webWalletUrl: PropTypes.Validator<string>;
+        let maxIdleTime: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        export { DEFAULT_MAX_IDLE_TIME as maxIdleTime };
+    }
+}
+import PropTypes from 'prop-types';
+declare const DEFAULT_MAX_IDLE_TIME: number;

package/lib/WechatPrompt/index.d.ts

@@ -0,0 +1 @@
+export default function WechatPrompt(): import("react/jsx-runtime").JSX.Element | null;

package/lib/index.d.ts

@@ -0,0 +1,36 @@
+import ActionButton from './ActionButton';
+import ActivityIndicator from './ActivityIndicator';
+import Address from './Address';
+import Alert from './Alert';
+import AnimationWaiter from './AnimationWaiter';
+import Async from './Async';
+import Avatar from './Avatar';
+import Badge from './Badge';
+import Button from './Button';
+import ClickToCopy from './ClickToCopy';
+import CodeBlock from './CodeBlock';
+import ContactForm from './ContactForm';
+import CountDown from './CountDown';
+import Earth from './Earth';
+import Footer from './Footer';
+import Icon from './Icon';
+import LocaleSelector from './Locale/selector';
+import Logo from './Logo';
+import Tabs from './Tabs';
+import RelativeTime from './RelativeTime';
+import SessionManager from './SessionManager';
+import Datatable from './Datatable';
+import Dialog from './Dialog';
+import DidLogo from './DidLogo';
+import Tag from './Tag';
+import TextCollapse from './TextCollapse';
+import Toast from './Toast';
+import Video from './Video';
+import WebWalletSWKeeper from './WebWalletSWKeeper';
+import WalletAction from './Wallet/Action';
+import WalletDownload from './Wallet/Download';
+import WechatPrompt from './WechatPrompt';
+import withTheme from './withTheme';
+import withTracker from './withTracker';
+import Img from './Img';
+export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img };

package/lib/withTheme/index.d.ts

@@ -0,0 +1,7 @@
+export default withTheme;
+declare function withTheme(Component: any, { mode, pageWidth, palette, typography }?: {
+    mode?: string | undefined;
+    pageWidth?: string | undefined;
+    palette: any;
+    typography: any;
+}): (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/withTracker/error_boundary.d.ts

@@ -0,0 +1,9 @@
+export default class ErrorBoundary extends Component<any, any, any> {
+    constructor(props: any);
+    state: {
+        error: null;
+    };
+    componentDidCatch(error: any, info: any): void;
+    render(): any;
+}
+import { Component } from 'react';

package/lib/withTracker/index.d.ts

@@ -0,0 +1,2 @@
+declare function _default(WrappedComponent: any, options?: {}): (props: any) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.36",
+  "version": "2.10.38",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -17,7 +17,7 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src tests --ext js --ext jsx && tsc --noEmit --emitDeclarationOnly false",
+    "lint": "eslint src tests --ext js,jsx,ts,tsx",
     "lint:fix": "npm run lint -- --fix",
     "build": "npm run build:clean && npm run build:babel && npm run build:types",
     "build:clean": "rm -rf lib",
@@ -44,6 +44,8 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.24.7",
     "@types/react": "^18.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "copyfiles": "^2.4.1",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -51,7 +53,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "moment-timezone": "^0.5.37",
-    "typescript": "^5.5.4"
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -61,18 +63,19 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "828b8514875e49150504e46b250b938f33bf3669",
+  "gitHead": "ec30518daa2eb50dc076fe00e7dfde253ba8b7cb",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.36",
-    "@arcblock/nft-display": "^2.10.36",
-    "@arcblock/react-hooks": "^2.10.36",
+    "@arcblock/icons": "^2.10.38",
+    "@arcblock/nft-display": "^2.10.38",
+    "@arcblock/react-hooks": "^2.10.38",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/mdi": "^1.2.48",
+    "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^4.1.1",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",

package/src/BlockletV2/blocklet.tsx

@@ -0,0 +1,130 @@
+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 Avatar from '../Avatar';
+import Button from '../Button';
+import { useTheme } from '../Theme';
+import IconText from './components/icon-text';
+import { formatDownloadCount, strippedString } from './utils';
+
+export interface IBlockletStore
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'title' | 'className'> {
+  did?: string;
+  title: string;
+  description?: string;
+  cover?: string;
+  avatar: string;
+  author: string;
+  download: string;
+  button?: React.ReactNode;
+  buttonText?: string;
+  buttonDisabled?: boolean;
+  buttonLoading?: boolean;
+  onButtonClick?: Function;
+  onMainClick?: Function;
+  className?: string;
+}
+
+export default function BlockletStore(props: IBlockletStore) {
+  const {
+    title,
+    description = '',
+    cover = '',
+    avatar,
+    author,
+    download,
+    did,
+    buttonText = 'Install',
+    buttonDisabled,
+    buttonLoading,
+    button,
+    onButtonClick = () => {},
+    onMainClick,
+    className,
+    ref,
+    ...rest
+  } = props;
+
+  const theme = useTheme();
+
+  const wrapHandler =
+    (handler: Function, stopFn = () => false) =>
+    (e: React.MouseEvent<HTMLElement>, ...args: any[]) => {
+      const isFunction = handler instanceof Function;
+      if (stopFn() || isFunction) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isFunction) {
+          handler(...args);
+        }
+      }
+    };
+
+  const handleMainClick = onMainClick && wrapHandler(onMainClick);
+  const handleButtonClick = wrapHandler(onButtonClick, () => {
+    // stop click while custom button or buttonDisabled or buttonLoading
+    return !!(button || buttonDisabled || buttonLoading);
+  });
+
+  const titleProps = isValidElement(title)
+    ? { children: title }
+    : { title: strippedString(title), dangerouslySetInnerHTML: { __html: title } };
+
+  const descriptionProps = isValidElement(description)
+    ? { children: description }
+    : { 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 }}>
+        <Typography
+          component="div"
+          variant="body2"
+          color="text.secondary"
+          sx={{
+            lineClamp: 2,
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            height: 40,
+          }}
+          {...descriptionProps}
+        />
+      </CardContent>
+      <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 4, color: 'grey.800' }}>
+        <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />}>{author}</IconText>
+        <IconText icon={<Icon icon={Download} />} title={download}>
+          {formatDownloadCount(download)}
+        </IconText>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { Stack, Typography } from '@mui/material';
+import React from 'react';
+
+export default function IconText({
+  icon,
+  children,
+  maxWidth = 100,
+  title,
+}: {
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  maxWidth?: number;
+  title?: string;
+}) {
+  return (
+    children && (
+      <Stack direction="row" alignItems="center" gap={1} sx={{ maxWidth, overflow: 'hidden' }}>
+        {icon}
+        <Typography
+          flex={1}
+          variant="body2"
+          sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+          title={title || (typeof children === 'string' ? children : undefined)}>
+          {children}
+        </Typography>
+      </Stack>
+    )
+  );
+}

package/src/BlockletV2/index.ts

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

package/src/BlockletV2/utils.js

@@ -0,0 +1,75 @@
+import { styled } from '../Theme';
+
+const ActionButton = styled('div')`
+  background-color: transparent !important;
+  & > :not(.Mui-disabled) {
+    position: relative;
+    z-index: 1;
+    &::before {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+      transition: opacity 0.3s;
+    }
+    &:hover::before {
+      opacity: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      border-radius: 2px;
+      background-color: ${(props) => props.theme.palette.primary.main};
+      transform: scale(0.1);
+      opacity: 0;
+      z-index: -1;
+      transition:
+        transform 0.3s,
+        opacity 0.3s,
+        background-color 0.3s;
+    }
+    &:hover::after {
+      opacity: 1;
+      transform-origin: center;
+      transform: scale(1);
+    }
+  }
+  & > :not(.Mui-disabled) {
+    background-color: transparent !important;
+    color: ${(props) => props.theme.palette.primary.main}!important;
+  }
+  & > :not(.Mui-disabled) {
+    &:hover {
+      color: ${(props) => props.theme.palette.common.white}!important;
+    }
+  }
+`;
+
+export default ActionButton;
+
+export const strippedString = (originalString = '') => {
+  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
+};
+
+export const formatDownloadCount = (num = '') => {
+  const n = parseInt(num, 10);
+  if (Number.isNaN(n)) {
+    return num;
+  }
+  if (n < 1000) {
+    return n;
+  }
+  if (n < 1000000) {
+    return `${(n / 1000).toFixed(1)}k`;
+  }
+  if (n < 1000000000) {
+    return `${(n / 1000000).toFixed(1)}m`;
+  }
+  return `${(n / 1000000000).toFixed(1)}b`;
+};

package/src/Button/wrap.js

@@ -72,11 +72,15 @@ export default function (BaseComponent) {
     /**
      * @type {import('react').CSSProperties}
      */
-    const styles = Object.assign({}, style, {
-      boxShadow: 'none',
-      textTransform: 'capitalize',
-      ...matched,
-    });
+    const styles = Object.assign(
+      {},
+      {
+        boxShadow: 'none',
+        textTransform: 'capitalize',
+        ...matched,
+      },
+      style
+    );
     let _rest = rest;
     if (!matched) {
       // mui button 本身支持的 color 交由 mui 处理

package/src/MuiWrap/index.tsx

@@ -1,9 +1,10 @@
 import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';
+import { ElementType } from 'react';
 
-export function TBox<C extends React.ElementType>({ component, ...rest }: BoxProps<C, { component: C }>) {
+export function TBox<C extends ElementType>({ component, ...rest }: BoxProps<C, { component: C }>) {
   return <Box component={component} {...rest} />;
 }
 
-export function TTypography<C extends React.ElementType>({ component, ...rest }: TypographyProps<C, { component: C }>) {
+export function TTypography<C extends ElementType>({ component, ...rest }: TypographyProps<C, { component: C }>) {
   return <Typography component={component} {...rest} />;
 }

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

package/src/SplitButton/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, isValidElement } from 'react';
+import React, { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
@@ -17,7 +17,7 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
     | React.ReactElement<MenuItemProps, typeof MenuItem>
     | React.ReactElement<MenuItemProps, typeof MenuItem>[]
     | MenuItemProps[];
-  children?: JSX.Element | (() => JSX.Element);
+  children?: React.ReactNode | (() => React.ReactNode);
   onClick?: () => void;
   menuButtonProps?: ButtonProps;
 }