@abtnode/ux 1.8.68 → 1.8.69-beta-54faead3

package/lib/blocklet/install-from-url.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _semver = _interopRequireDefault(require("semver"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -16,12 +16,14 @@ var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
 var _Step = _interopRequireDefault(require("@mui/material/Step"));
 var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
 var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
 var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
 var _util = require("@blocklet/meta/lib/util");
 var _node = require("../contexts/node");
+var _session = require("../contexts/session");
 var _util2 = require("../util");
 var _didAddress = _interopRequireDefault(require("../did-address"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,6 +45,9 @@ function InstallFromUrl(_ref) {
   const {
     api
   } = (0, _node.useNodeContext)();
+  const {
+    api: $api
+  } = (0, _session.useSessionContext)();
   const [loading, setLoading] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)('');
   const {
@@ -55,6 +60,8 @@ function InstallFromUrl(_ref) {
   const [activeStep, setActiveStep] = (0, _react.useState)(defaultUrl ? 1 : 0);
   const [meta, setMeta] = (0, _react.useState)(initMeta);
   const [existingMeta, setExistingMeta] = (0, _react.useState)(null);
+  const [isConnectOpen, setConnectOpen] = (0, _react.useState)(false);
+  const [canUpgrade, setCanUpgrade] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({});
   const isComponentMode = mode === 'component';
   // if mode is component , we need to always show the step, that means the user can return to the previous step
@@ -95,12 +102,11 @@ function InstallFromUrl(_ref) {
             attachRuntimeInfo: false
           }
         });
-        if (existedBlocklet && _semver.default.gte(existedBlocklet.meta.version, newer.version)) {
+        if (existedBlocklet) {
           setExistingMeta(existedBlocklet.meta);
-          setMeta(newer);
-        } else {
-          setMeta(newer);
+          setCanUpgrade(_semver.default.lt(existedBlocklet.meta.version, newer.version));
         }
+        setMeta(newer);
       }
       setParams({
         inStore,
@@ -121,28 +127,43 @@ function InstallFromUrl(_ref) {
       onSuccess(_objectSpread({
         meta
       }, params));
-    } else {
-      await onInstall();
+      _onCancel();
+      return;
+    }
+    if (canUpgrade) {
+      try {
+        setLoading(true);
+        await api.installBlocklet({
+          input: {
+            url: decodeURIComponent(url.trim())
+          }
+        });
+        onSuccess(_objectSpread({
+          meta
+        }, params));
+        _onCancel();
+      } catch (err) {
+        const errMsg = "Blocklet Install failed: ".concat((0, _util2.formatError)(err));
+        setError(errMsg);
+      } finally {
+        setLoading(false);
+      }
+      return;
     }
+    setLoading(true);
+    setConnectOpen(true);
+  };
+  const onEndInstall = () => {
+    setLoading(false);
+    setConnectOpen(false);
+    onSuccess(_objectSpread({
+      meta
+    }, params));
     _onCancel();
   };
-  const onInstall = async () => {
-    setLoading(true);
-    try {
-      await api.installBlocklet({
-        input: {
-          url: decodeURIComponent(url.trim())
-        }
-      });
-      onSuccess(_objectSpread({
-        meta
-      }, params));
-    } catch (err) {
-      const errMsg = "Blocklet Install failed: ".concat((0, _util2.formatError)(err));
-      setError(errMsg);
-    } finally {
-      setLoading(false);
-    }
+  const onCancelInstall = () => {
+    setLoading(false);
+    setConnectOpen(false);
   };
   (0, _react.useEffect)(() => {
     if (defaultUrl) {
@@ -181,7 +202,7 @@ function InstallFromUrl(_ref) {
           justifyContent: 'center',
           flexDirection: 'column'
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
       });
     }
     if (meta.did) {
@@ -205,7 +226,7 @@ function InstallFromUrl(_ref) {
             name: row.name,
             children: row.value
           }, row.name);
-        }), existingMeta && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        }), existingMeta && !canUpgrade && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
           type: "error",
           variant: "icon",
           style: {
@@ -276,7 +297,7 @@ function InstallFromUrl(_ref) {
       }
     },
     onConfirm: () => {
-      if (existingMeta) {
+      if (existingMeta && !canUpgrade) {
         _onCancel();
       } else {
         _onConfirm();
@@ -284,67 +305,89 @@ function InstallFromUrl(_ref) {
     }
   }];
   const step = steps[activeStep];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
-    title: (handleText === null || handleText === void 0 ? void 0 : handleText.title) || t('blocklet.fromUrl.title'),
-    fullWidth: true,
-    maxWidth: "md",
-    onClose: () => step.onCancel(),
-    showCloseButton: activeStep === 0,
-    disableEscapeKeyDown: true,
-    open: true,
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: e => {
-          e.stopPropagation();
-          setError(null);
-          step.onCancel();
-        },
-        color: "inherit",
-        children: step.cancel || t('common.cancel')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-        onClick: e => {
-          e.stopPropagation();
-          step.onConfirm();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      title: (handleText === null || handleText === void 0 ? void 0 : handleText.title) || t('blocklet.fromUrl.title'),
+      fullWidth: true,
+      maxWidth: "md",
+      onClose: () => step.onCancel(),
+      showCloseButton: activeStep === 0,
+      disableEscapeKeyDown: true,
+      open: true,
+      actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: e => {
+            e.stopPropagation();
+            setError(null);
+            step.onCancel();
+          },
+          color: "inherit",
+          children: step.cancel || t('common.cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          onClick: e => {
+            e.stopPropagation();
+            step.onConfirm();
+          },
+          color: "primary",
+          "data-cy": "install-blocklet-next-step",
+          disabled: loading || !url || error,
+          variant: "contained",
+          autoFocus: true,
+          style: {
+            marginLeft: 8
+          },
+          children: [loading && activeStep === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+            size: 16
+          }), step.confirm]
+        })]
+      }),
+      children: [alwayShowSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper.default, {
+        alternativeLabel: true,
+        activeStep: activeStep,
+        children: steps.map(_ref2 => {
+          let {
+            label
+          } = _ref2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+              children: label
+            })
+          }, label);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+        component: "div",
+        style: {
+          marginTop: 24
         },
-        color: "primary",
-        "data-cy": "install-blocklet-next-step",
-        disabled: loading || !url || error,
-        variant: "contained",
-        autoFocus: true,
+        children: step.body
+      }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "error",
         style: {
-          marginLeft: 8
+          width: '100%',
+          marginTop: 8
         },
-        children: [loading && activeStep === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-          size: [16, 10]
-        }), step.confirm]
+        children: error
       })]
-    }),
-    children: [alwayShowSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper.default, {
-      alternativeLabel: true,
-      activeStep: activeStep,
-      children: steps.map(_ref2 => {
-        let {
-          label
-        } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
-            children: label
-          })
-        }, label);
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
-      component: "div",
-      style: {
-        marginTop: 24
+    }), meta && isConnectOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      popup: true,
+      open: true,
+      forceConnected: false,
+      className: "launch-from-url-auth",
+      action: "launch-free-blocklet-by-session",
+      checkFn: $api.get,
+      checkTimeout: 5 * 60 * 1000,
+      onSuccess: onEndInstall,
+      extraParams: {
+        title: meta.title,
+        blockletMetaUrl: decodeURIComponent(url.trim())
       },
-      children: step.body
-    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-      type: "error",
-      style: {
-        width: '100%',
-        marginTop: 8
+      messages: {
+        title: t('setup.keyPair.title'),
+        scan: t('setup.keyPair.scan'),
+        confirm: t('setup.keyPair.confirm'),
+        success: t('setup.keyPair.success')
       },
-      children: error
+      onClose: onCancelInstall
     })]
   });
 }

package/lib/blocklet/overview.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BlockletOverview;
+var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
 var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
@@ -49,7 +50,7 @@ function DomainLink(_ref) {
         placement: "top-end",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "status",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
             size: 12
           })
         })
@@ -113,13 +114,25 @@ function BlockletOverview() {
     loadingRuntimeInfo
   } = (0, _blocklet.useBlockletContext)();
   const {
-    value: appDid
-  } = (blocklet.environments || []).find(x => x.key === 'BLOCKLET_APP_ID') || {};
+    appDid,
+    appPid,
+    migratedFrom = []
+  } = blocklet;
   const infoRows = [appDid ? {
     name: t('blocklet.appId'),
     value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
       did: appDid
     })
+  } : null, appPid ? {
+    name: t('blocklet.appPid'),
+    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+      did: appPid
+    })
+  } : null, migratedFrom !== null && migratedFrom !== void 0 && migratedFrom.length ? {
+    name: t('blocklet.alsoKnownAs'),
+    value: migratedFrom.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+      did: x.appDid
+    }))
   } : null, {
     name: t('common.name'),
     value: (0, _util.getDisplayName)(blocklet, true)
@@ -255,7 +268,7 @@ function BlockletOverview() {
           }
         })]
       })
-    }, domain.value)), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+    }, domain.value)), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
       size: 16
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
       children: t('common.empty')

package/lib/blocklet/preferences/app-sk.js

@@ -4,13 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSk;
-var _react = require("react");
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _formTextInput = _interopRequireDefault(require("../../form/form-text-input"));
 var _confirm = _interopRequireDefault(require("../../confirm"));
+var _session = require("../../contexts/session");
+var _blocklet = require("../../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,10 +29,19 @@ function AppSk(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const [confirmAppSk, setConfirmAppSk] = (0, _react.useState)(null);
+  const {
+    api
+  } = (0, _session.useSessionContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [state, setState] = (0, _useSetState.default)({
+    newAppSk: '',
+    isConnectOpen: false
+  });
   const onAppSkChange = value => {
-    setConfirmAppSk({
-      value
+    setState({
+      newAppSk: value
     });
     return false;
   };
@@ -36,16 +49,29 @@ function AppSk(_ref) {
     try {
       await onChange(v);
     } finally {
-      setConfirmAppSk(null);
+      setState({
+        newAppSk: ''
+      });
     }
   };
+  const onClose = () => setState({
+    isConnectOpen: false
+  });
+  const triggers = [{
+    key: 'rotate-with-did-wallet',
+    title: 'Migrate with DID Wallet',
+    handler: () => setState({
+      isConnectOpen: true
+    })
+  }];
   return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
     disabled: disabled,
     loading: loading,
     initialValue: initialValue,
     onSubmit: onAppSkChange,
+    triggers: triggers,
     secure: true
-  }), confirmAppSk && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+  }), state.newAppSk && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
     title: t('blocklet.config.appSkTitle'),
     description: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -64,8 +90,29 @@ function AppSk(_ref) {
     }),
     confirm: t('confirm'),
     cancel: t('cancel'),
-    onConfirm: () => _onConfirm(confirmAppSk.value),
-    onCancel: () => setConfirmAppSk(null)
+    onConfirm: () => _onConfirm(state.newAppSk),
+    onCancel: () => setState({
+      newAppSk: ''
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+    popup: true,
+    open: state.isConnectOpen,
+    forceConnected: false,
+    saveConnect: false,
+    action: "rotate-key-pair",
+    checkFn: api.get,
+    checkTimeout: 5 * 60 * 1000,
+    onSuccess: onClose,
+    extraParams: {
+      appDid: blocklet.appDid
+    },
+    messages: {
+      title: t('setup.keyPair.title'),
+      scan: t('setup.keyPair.scan'),
+      confirm: t('setup.keyPair.confirm'),
+      success: t('setup.keyPair.success')
+    },
+    onClose: onClose
   })];
 }
 AppSk.propTypes = {

package/lib/blocklet/router/action/add-domain-alias.js

@@ -7,7 +7,7 @@ exports.default = AddDomainAlias;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CallMerge = _interopRequireDefault(require("@mui/icons-material/CallMerge"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -140,8 +140,8 @@ function AddDomainAlias(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-domain-alias",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-        size: [16, 10]
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallMerge.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/router/action/add-rule.js

@@ -7,7 +7,7 @@ exports.default = AddRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -176,8 +176,8 @@ function AddRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-        size: [16, 10]
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/router/action/delete-domain-alias.js

@@ -7,7 +7,7 @@ exports.default = DeleteDomainAlias;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _confirm = _interopRequireDefault(require("../../../confirm"));
@@ -78,8 +78,8 @@ function DeleteDomainAlias(props) {
       className: "rule-action",
       color: "error",
       "data-cy": "action-delete-domain-alias",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-        size: [16, 10]
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
         style: {
           fontSize: 16

package/lib/blocklet/router/action/delete-rule.js

@@ -7,7 +7,7 @@ exports.default = DeleteRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _node = require("../../../contexts/node");
@@ -83,8 +83,8 @@ function DeleteRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-delete-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-        size: [16, 10]
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/router/action/update-rule.js

@@ -7,7 +7,7 @@ exports.default = UpdateRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -172,8 +172,8 @@ function UpdateRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-update-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-        size: [16, 10]
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/status.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = BlockletStatus;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _dot = _interopRequireDefault(require("../dot"));
@@ -85,8 +85,8 @@ function BlockletStatus(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tag.default, _objectSpread(_objectSpread({
     type: map[status]
   }, rest), {}, {
-    children: [inProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-      size: [12, 6],
+    children: [inProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+      size: 12,
       color: "inherit",
       style: {
         marginRight: 5