@arcblock/ux 2.1.18 → 2.1.21

package/lib/Wallet/Open.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = OpenInWallet;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,6 +13,8 @@ var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useB
 
 var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function OpenInWallet(_ref) {
@@ -27,15 +27,16 @@ function OpenInWallet(_ref) {
 
   if (browser.mobile.any && !browser.wallet && !browser.wechat) {
     const deepLink = "abt://abtwallet.io/i?action=requestOpenUrl&url=".concat(encodeURIComponent(link));
-    return /*#__PURE__*/_react.default.createElement(Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
       size: "small",
       href: deepLink,
       variant: "extended",
       color: "primary",
       rounded: true,
       target: "_blank",
-      className: "open-in-wallet-button"
-    }, buttonText);
+      className: "open-in-wallet-button",
+      children: buttonText
+    });
   }
 
   return null;

package/lib/WechatPrompt/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WechatPrompt;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -19,6 +17,8 @@ var _ios = _interopRequireDefault(require("./images/ios.png"));
 
 var _android = _interopRequireDefault(require("./images/android.png"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function WechatPrompt() {
@@ -33,36 +33,48 @@ function WechatPrompt() {
   }
 
   if (browser.android) {
-    return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: true,
-      fullScreen: true
-    }, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      className: "wechat-title"
-    }, "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"), /*#__PURE__*/_react.default.createElement("div", {
-      className: "wechat-tip"
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      className: "wechat-tip-text"
-    }, "2. \u70B9\u51FB\u201C\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
-      className: "wechat-tip-img",
-      src: _android.default,
-      alt: "Open in Android Browser"
-    }))));
+      fullScreen: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          className: "wechat-title",
+          children: "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "wechat-tip",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            className: "wechat-tip-text",
+            children: "2. \u70B9\u51FB\u201C\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            className: "wechat-tip-img",
+            src: _android.default,
+            alt: "Open in Android Browser"
+          })]
+        })]
+      })
+    });
   }
 
-  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
     open: true,
-    fullScreen: true
-  }, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "wechat-title"
-  }, "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "wechat-tip"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "wechat-tip-text"
-  }, "2. \u70B9\u51FB\u201C\u5728Safari\u4E2D\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
-    className: "wechat-tip-img",
-    src: _ios.default,
-    alt: "Open in Safari"
-  }))));
+    fullScreen: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        className: "wechat-title",
+        children: "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "wechat-tip",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          className: "wechat-tip-text",
+          children: "2. \u70B9\u51FB\u201C\u5728Safari\u4E2D\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: "wechat-tip-img",
+          src: _ios.default,
+          alt: "Open in Safari"
+        })]
+      })]
+    })
+  });
 }
 
 const Container = _styledComponents.default.div.withConfig({

package/lib/withTheme/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = require("styled-components");
 
@@ -15,8 +15,20 @@ var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
 
 var _Theme = require("../Theme");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const GlobalStyle = (0, _styledComponents.createGlobalStyle)(["font-family:", ";color:", ";a,a:hover,a:active{text-decoration:none;color:", ";}a:hover{color:", ";}.section--latest-post{p:last-of-type{margin:0;}}.has-scrolled{.section--footnotes{position:static !important;transition-property:background-color;transition-duration:600ms;transition-timing-function:ease;.footnote__title{color:#fff;}}}"], props => props.theme.typography.fontFamily, props => props.theme.typography.color.main, props => props.theme.palette.primary.dark, props => props.theme.palette.primary.main);
 
 function withTheme(Component) {
@@ -27,7 +39,7 @@ function withTheme(Component) {
     typography
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  class WithTheme extends _react.default.Component {
+  class WithTheme extends React.Component {
     constructor(props) {
       super(props);
       this.theme = (0, _Theme.create)({
@@ -48,13 +60,15 @@ function withTheme(Component) {
     }
 
     render() {
-      return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-        theme: this.theme
-      }, /*#__PURE__*/_react.default.createElement(_CssBaseline.default, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, {
-        theme: this.theme
-      }), /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-        theme: this.theme
-      }, /*#__PURE__*/_react.default.createElement(Component, this.props)));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+        theme: this.theme,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStyle, {
+          theme: this.theme
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
+          theme: this.theme,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, this.props))
+        })]
+      });
     }
 
   }

package/lib/withTracker/error_boundary.js

@@ -5,20 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var Sentry = _interopRequireWildcard(require("@sentry/browser"));
 
 var _Alert = _interopRequireDefault(require("../Alert"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-unresolved */
-class ErrorBoundary extends _react.default.Component {
+class ErrorBoundary extends _react.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -38,10 +40,11 @@ class ErrorBoundary extends _react.default.Component {
 
   render() {
     if (this.state.error) {
-      return /*#__PURE__*/_react.default.createElement(_Alert.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
         type: "error",
-        variant: "icon"
-      }, "Oops! We encountered an error, please try reload this application.");
+        variant: "icon",
+        children: "Oops! We encountered an error, please try reload this application."
+      });
     } // eslint-disable-next-line react/prop-types
 
 

package/lib/withTracker/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,12 +17,14 @@ var _reactRouterDom = require("react-router-dom");
 
 var _error_boundary = _interopRequireDefault(require("./error_boundary"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -80,10 +82,12 @@ var _default = function _default(WrappedComponent) {
 
     render() {
       if (process.env.NODE_ENV === 'production') {
-        return /*#__PURE__*/_react.default.createElement(_error_boundary.default, null, /*#__PURE__*/_react.default.createElement(WrappedComponent, this.props));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_error_boundary.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props))
+        });
       }
 
-      return /*#__PURE__*/_react.default.createElement(WrappedComponent, this.props);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props));
     }
 
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "5724cf7868e1dcb5d96af8d100f4254546a59442",
+  "gitHead": "ee49a5560e16fa5791cef6ab0cc5930c4f1c2cf5",
   "dependencies": {
-    "@arcblock/icons": "^2.1.18",
-    "@arcblock/react-hooks": "^2.1.18",
+    "@arcblock/icons": "^2.1.21",
+    "@arcblock/react-hooks": "^2.1.21",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/ActionButton/index.js

@@ -1,10 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
 
-const ActionButton = props => {
+function ActionButton(props) {
   const newProps = mergeProps(props, ActionButton);
   const { href, icon, size, color, theme, variant, gradient, children, text, ...rest } = newProps;
   const styles = {};
@@ -13,7 +12,7 @@ const ActionButton = props => {
     styles.borderColor = 'transparent';
   }
   const attrs = ['color', 'border', 'width'];
-  attrs.forEach(x => {
+  attrs.forEach((x) => {
     if (newProps[x]) {
       styles[x] = newProps[x];
     }
@@ -33,7 +32,7 @@ const ActionButton = props => {
       {text || children}
     </Button>
   );
-};
+}
 
 ActionButton.propTypes = {
   href: PropTypes.string.isRequired,

package/src/ActivityIndicator/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { green, blue } from '@mui/material/colors';
@@ -91,16 +91,13 @@ const Div = styled.div`
   }
 `;
 
-const Orbit = ({ size, orbitColor, atomColor, duration, ...rest }) => {
+function Orbit({ size, orbitColor, atomColor, duration, ...rest }) {
   return (
-    <OrbitRoot
-      $duration={duration}
-      style={{ width: size, height: size, border: `1px solid ${orbitColor}` }}
-      {...rest}>
+    <OrbitRoot $duration={duration} style={{ width: size, height: size, border: `1px solid ${orbitColor}` }} {...rest}>
       <div style={{ background: atomColor }} />
     </OrbitRoot>
   );
-};
+}
 
 Orbit.propTypes = {
   size: PropTypes.number.isRequired,

package/src/Alert/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
@@ -35,7 +34,7 @@ const types = {
   },
 };
 
-const Alert = props => {
+function Alert(props) {
   const newProps = mergeProps(props, Alert, ['style']);
   const { type, children, style, className, variant, ...rest } = newProps;
   const { icon, color, backgroundColor, borderColor } = types[type] || types.success;
@@ -49,19 +48,14 @@ const Alert = props => {
   );
 
   return (
-    <Container
-      {...rest}
-      className={`alert alert--${type} alert--${variant} ${className}`.trim()}
-      style={styles}>
-      {variant === 'icon' && (
-        <Icon className="alert-icon" name={icon} size={24} style={{ color }} />
-      )}
+    <Container {...rest} className={`alert alert--${type} alert--${variant} ${className}`.trim()} style={styles}>
+      {variant === 'icon' && <Icon className="alert-icon" name={icon} size={24} style={{ color }} />}
       <Typography component="div" className="alert-content">
         {children}
       </Typography>
     </Container>
   );
-};
+}
 
 Alert.propTypes = {
   type: PropTypes.oneOf(Object.keys(types)),

package/src/AnimationWaiter/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
@@ -66,6 +66,7 @@ export default function AnimationWaiter({
     return () => {
       clearInterval(timer);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [message, messageDuration]);
 
   // tips
@@ -103,9 +104,10 @@ export default function AnimationWaiter({
     }, 1000);
 
     return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSpeed]);
 
-  const getMsgClassName = index => {
+  const getMsgClassName = (index) => {
     let className = 'message-before';
     if (messageId === index) {
       className = 'show-message';

package/src/Async/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import CircularProgress from '@mui/material/CircularProgress';
 
@@ -15,8 +15,8 @@ export default function LoadAsyncComponent(importComponent, key = 'default', sho
 
     componentDidMount() {
       importComponent()
-        .then(asyncModule => this.setState({ Component: asyncModule[key] }))
-        .catch(err => this.setState({ error: `Failed to load async component: ${err.message}` }));
+        .then((asyncModule) => this.setState({ Component: asyncModule[key] }))
+        .catch((err) => this.setState({ error: `Failed to load async component: ${err.message}` }));
     }
 
     render() {
@@ -27,11 +27,7 @@ export default function LoadAsyncComponent(importComponent, key = 'default', sho
       }
 
       // eslint-disable-next-line no-nested-ternary
-      return Component ? (
-        <Component {...this.props} />
-      ) : showProgress ? (
-        <CircularProgress color="primary" />
-      ) : null;
+      return Component ? <Component {...this.props} /> : showProgress ? <CircularProgress color="primary" /> : null;
     }
   }
 

package/src/Badge/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -57,7 +57,7 @@ Badge.defaultProps = {
   style: '{}',
 };
 
-export default React.forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />);
+export default forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />);
 
 const Span = styled(Typography)`
   && {

package/src/Blocklet/blocklet.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
@@ -12,25 +11,25 @@ import Img from '../Img';
 
 const Div = styled.div`
   &.arcblock-blocklet {
-    padding: ${props => props.theme.spacing(2)} ${props => props.theme.spacing(2)} 0
-      ${props => props.theme.spacing(2)};
+    padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0
+      ${(props) => props.theme.spacing(2)};
   }
   .arcblock-blocklet__content {
     cursor: pointer;
     display: flex;
-    ${props => props.theme.breakpoints.up('sm')} {
+    ${(props) => props.theme.breakpoints.up('sm')} {
       align-items: center;
     }
   }
   .arcblock-blocklet__cover {
     width: 64px;
     height: 64px;
-    margin-right: ${props => props.theme.spacing(2)};
+    margin-right: ${(props) => props.theme.spacing(2)};
     overflow: hidden;
     border-radius: 12px;
     /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
     transform: translateZ(0);
-    ${props => props.theme.breakpoints.up('sm')} {
+    ${(props) => props.theme.breakpoints.up('sm')} {
       width: 80px;
       height: 80px;
       margin-bottom: 12px;
@@ -57,7 +56,7 @@ const Div = styled.div`
         position: absolute;
         height: 100%;
         width: 100%;
-        background-color: ${props => props.theme.palette.primary.main};
+        background-color: ${(props) => props.theme.palette.primary.main};
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
@@ -72,19 +71,19 @@ const Div = styled.div`
 
     &:not(.Mui-disabled) {
       background-color: transparent !important;
-      color: ${props => props.theme.palette.primary.main};
+      color: ${(props) => props.theme.palette.primary.main};
     }
     &:not(.Mui-disabled) {
       &:hover {
-        color: ${props => props.theme.palette.common.white};
+        color: ${(props) => props.theme.palette.common.white};
       }
     }
   }
   .arcblock-blocklet__info {
     flex: 1;
     overflow: hidden;
-    border-bottom: 1px solid ${props => props.theme.palette.divider};
-    padding-bottom: ${props => props.theme.spacing(2)};
+    border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+    padding-bottom: ${(props) => props.theme.spacing(2)};
   }
   .arcblock-blocklet__text {
     height: 57px;
@@ -100,8 +99,8 @@ const Div = styled.div`
     white-space: nowrap;
   }
   .arcblock-blocklet__describe {
-    margin-top: ${props => props.theme.spacing(0.5)};
-    color: ${props => props.theme.palette.grey[600]};
+    margin-top: ${(props) => props.theme.spacing(0.5)};
+    color: ${(props) => props.theme.palette.grey[600]};
     font-size: 14px;
     font-weight: 500;
     line-height: 17px;
@@ -114,7 +113,7 @@ const Div = styled.div`
     word-break: break-word;
   }
   .arcblock-blocklet__version {
-    color: ${props => props.theme.palette.grey[600]};
+    color: ${(props) => props.theme.palette.grey[600]};
     font-size: 12px;
   }
 `;
@@ -173,19 +172,11 @@ export default function BlockletStore({
         )}
         <div className="arcblock-blocklet__info">
           <div className="arcblock-blocklet__text">
-            <Typography
-              component="h3"
-              variant="h3"
-              className="arcblock-blocklet__title"
-              title={title}>
+            <Typography component="h3" variant="h3" className="arcblock-blocklet__title" title={title}>
               {title}
             </Typography>
             {description && (
-              <Typography
-                component="div"
-                variant="body2"
-                className="arcblock-blocklet__describe"
-                title={description}>
+              <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
                 {description}
               </Typography>
             )}
@@ -212,9 +203,7 @@ export default function BlockletStore({
                       minWidth: '92px',
                       textAlign: 'center',
                     }}>
-                    {buttonLoading && (
-                      <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />
-                    )}
+                    {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
                     {buttonText}
                   </Button>
                 ))}

package/src/Blocklet/utils.js

@@ -25,7 +25,7 @@ const ActionButton = styled.div`
       top: 0;
       left: 0;
       border-radius: 2px;
-      background-color: ${props => props.theme.palette.primary.main};
+      background-color: ${(props) => props.theme.palette.primary.main};
       transform: scale(0.1);
       opacity: 0;
       z-index: -1;
@@ -39,11 +39,11 @@ const ActionButton = styled.div`
   }
   & > :not(.Mui-disabled) {
     background-color: transparent !important;
-    color: ${props => props.theme.palette.primary.main}!important;
+    color: ${(props) => props.theme.palette.primary.main}!important;
   }
   & > :not(.Mui-disabled) {
     &:hover {
-      color: ${props => props.theme.palette.common.white}!important;
+      color: ${(props) => props.theme.palette.common.white}!important;
     }
   }
 `;