@abtnode/ux 1.8.66-beta-b56e3b54 → 1.8.66

package/lib/blocklet/access/config-access.js

@@ -25,7 +25,7 @@ var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _node = require("../../contexts/node");
 var _team = require("../../contexts/team");
 var _util2 = require("../../util");
@@ -198,8 +198,8 @@ function ConfigAccess(_ref) {
         variant: "contained",
         autoFocus: true,
         "data-cy": "config-access-confirm",
-        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-          size: 16
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
         }), t('common.confirm')]
       })]
     }),

package/lib/blocklet/actions.js

@@ -13,7 +13,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
@@ -397,8 +397,8 @@ function BlockletActions(_ref) {
         "data-cy": "".concat(action.action, "-blocklet"),
         onClick: () => onAction(action),
         disabled: Boolean(action.disabled) || loading,
-        children: [currentAction === action.action && loading && inProgress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-          size: 16
+        children: [currentAction === action.action && loading && inProgress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(action.icon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "blocklet-action-text",
           children: action.name

package/lib/blocklet/audit-logs.js

@@ -8,7 +8,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactRouterDom = require("react-router-dom");
 var _reactMarkdownPreview = _interopRequireDefault(require("@uiw/react-markdown-preview"));
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -49,9 +49,6 @@ function AuditLog(_ref2) {
     inService,
     info
   } = (0, _node.useNodeContext)();
-  if (!log.actor.did) {
-    return null;
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     className: "log-entry",
     "data-cy": "log-entry",
@@ -133,7 +130,7 @@ function AuditLogs() {
         textAlign: 'center',
         marginTop: '50px'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {

package/lib/blocklet/component/add.js

@@ -12,7 +12,7 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -25,13 +25,13 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@blocklet/constant");
 var _launcherLayout = _interopRequireDefault(require("@blocklet/launcher-layout"));
 var _step = require("@blocklet/launcher-layout/lib/context/step");
-var _constant2 = require("@abtnode/constant");
 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 _AnimationWaiter = _interopRequireDefault(require("@arcblock/ux/lib/AnimationWaiter"));
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 var _util = require("@blocklet/meta/lib/util");
+var _urlFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-friendly"));
 var _node = require("../../contexts/node");
 var _util2 = require("../../util");
 var _toast = _interopRequireDefault(require("../../toast"));
@@ -138,6 +138,7 @@ function AddComponent(_ref2) {
   const [error, setError] = (0, _react.useState)('');
   const [showDialog, setShowDialog] = (0, _react.useState)('');
   const [configs, setConfigs] = (0, _react.useState)([]);
+  const [mountPointHelperText, setMountPointHelperText] = (0, _react.useState)('');
   const {
     api,
     ws: {
@@ -178,7 +179,6 @@ function AddComponent(_ref2) {
   const {
     setActiveStepByIndex
   } = stepRef.current || {};
-  const isServerlessMode = nodeInfo.mode === _constant2.NODE_MODES.SERVERLESS;
   const updateParams = obj => setParams(x => _objectSpread(_objectSpread({}, x), obj));
   (0, _react.useEffect)(() => {
     if (params.pathPrefix) {
@@ -282,7 +282,7 @@ function AddComponent(_ref2) {
     const installInput = _objectSpread(_objectSpread(_objectSpread({
       rootDid: blocklet.meta.did,
       url,
-      mountPoint,
+      mountPoint: (0, _urlFriendly.default)(mountPoint),
       title,
       name: componentName,
       did: componentDid
@@ -546,7 +546,7 @@ function AddComponent(_ref2) {
     } else {
       var _component$current$me, _component$current$me2;
       doc = _objectSpread(_objectSpread({}, doc), {}, {
-        pathPrefix: "/".concat((0, _util.urlFriendly)(name)),
+        pathPrefix: "/".concat((0, _urlFriendly.default)(name)),
         title: title || '',
         componentName: '',
         hasEnvironmentsStep: ((_component$current$me = component.current.meta) === null || _component$current$me === void 0 ? void 0 : (_component$current$me2 = _component$current$me.environments) === null || _component$current$me2 === void 0 ? void 0 : _component$current$me2.length) > 0
@@ -609,7 +609,7 @@ function AddComponent(_ref2) {
           confirm: t('blocklet.component.choose')
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectStore.default, {
-        extra: !isServerlessMode ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        extra: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
           variant: "text",
           color: "primary",
           "data-cy": "add-component-from-url",
@@ -627,7 +627,7 @@ function AddComponent(_ref2) {
               marginRight: 4
             }
           }), " ", t('blocklet.component.addComponentTip.fromUrl'), ' ']
-        }) : null,
+        }),
         loading: loading,
         onChange: () => {
           setParams({});
@@ -818,7 +818,7 @@ function AddComponent(_ref2) {
           'data-cy': 'mount-point-input'
         },
         fullWidth: true,
-        helperText: t('blocklet.component.mountPointTip'),
+        helperText: mountPointHelperText || t('blocklet.component.mountPointTip'),
         style: {
           marginBottom: 32
         },
@@ -829,6 +829,9 @@ function AddComponent(_ref2) {
           updateParams({
             pathPrefix
           });
+          setMountPointHelperText(t('common.slugifyHint', {
+            value: (0, _util2.formatMountPoint)(pathPrefix)
+          }));
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         label: t('common.title'),
@@ -971,8 +974,8 @@ function AddComponent(_ref2) {
       onClick: onMenuItemClick,
       className: "component-action",
       "data-cy": "action-add-component",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
         style: {
           fontSize: 18,
@@ -1035,8 +1038,8 @@ function AddComponent(_ref2) {
             maxWidth: '200px',
             display: 'inline-block'
           },
-          children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-            size: 16
+          children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+            size: [16, 10]
           }), step.confirm]
         })]
       }),

package/lib/blocklet/component/index.js

@@ -27,12 +27,13 @@ var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowFor
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _util = require("@blocklet/meta/lib/util");
+var _normalizePathPrefix = _interopRequireDefault(require("@abtnode/util/lib/normalize-path-prefix"));
 var _deletingBlocklets = require("../../contexts/deleting-blocklets");
 var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _tag = _interopRequireDefault(require("../../tag"));
@@ -308,7 +309,7 @@ function ComponentItem(_ref) {
           overflow: "hidden",
           whiteSpace: "nowrap",
           textOverflow: "ellipsis",
-          children: mountPoint
+          children: (0, _normalizePathPrefix.default)(mountPoint)
         })
       })
     }, mountPoint), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -634,8 +635,8 @@ function BlockletComponent(_ref4) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
                 mr: 0.5,
                 display: "flex",
-                children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-                  size: 16
+                children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+                  size: [16, 10]
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Update.default, {
                   style: {
                     fontSize: '1em'
@@ -791,8 +792,8 @@ function BlockletComponent(_ref4) {
             disabled: loading || updateConfirm.type === 'component' && !updateConfirm.hasChecks,
             variant: "contained",
             autoFocus: true,
-            children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-              size: 16
+            children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+              size: [16, 10]
             }), t('common.update')]
           })]
         })]

package/lib/blocklet/component/select-store.js

@@ -10,7 +10,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _constant = require("@abtnode/constant");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -55,7 +54,6 @@ function SelectStore(_ref) {
     nodeInfo
   });
   const currentRegistry = storeUrl && storeList.find(x => storeUrl === x.url) || storeList[0];
-  const isServerlessMode = nodeInfo.mode === _constant.NODE_MODES.SERVERLESS;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(SelectStoreTitle, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
@@ -126,7 +124,7 @@ function SelectStore(_ref) {
             }
           })
         }, x.url);
-      }), !isServerlessMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
         disabled: loading,
         storeList: storeList,
         teamDid: teamDid,

package/lib/blocklet/component/setting.js

@@ -9,6 +9,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _urlFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-friendly"));
 var _toast = _interopRequireDefault(require("../../toast"));
 var _formTextInput = _interopRequireDefault(require("../../form/form-text-input"));
 var _node = require("../../contexts/node");
@@ -43,6 +44,7 @@ function ComponentSetting(_ref) {
   const isDynamic = blocklet.dynamic;
   const rootDid = isRoot ? blocklet.meta.did : ancestors.map(x => x.meta.did)[0];
   const [loading, setLoading] = (0, _react.useState)('');
+  const [mountPointHelperText, setMountPointHelperText] = (0, _react.useState)('');
   const isDev = (0, _util.isBlockletDev)(blocklet);
   const disabled = isDev || loading || !hasPermission;
   if (!rootDid) {
@@ -74,7 +76,7 @@ function ComponentSetting(_ref) {
     try {
       const input = {
         rootDid,
-        mountPoint: value
+        mountPoint: (0, _urlFriendly.default)(value)
       };
       if (!isRoot) {
         input.did = blocklet.meta.did;
@@ -83,6 +85,7 @@ function ComponentSetting(_ref) {
         input
       });
       setLoading(false);
+      return true;
     } catch (err) {
       setLoading(false);
       err.message = (0, _util.formatError)(err);
@@ -90,6 +93,11 @@ function ComponentSetting(_ref) {
       throw err;
     }
   };
+  const handleMountPointChange = value => {
+    setMountPointHelperText(t('common.slugifyHint', {
+      value: (0, _util.formatMountPoint)(value)
+    }));
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
     component: "div"
   }, rest), {}, {
@@ -114,7 +122,10 @@ function ComponentSetting(_ref) {
         loading: loading,
         required: true,
         initialValue: blocklet.mountPoint,
-        onSubmit: onSubmitMountPoint
+        onSubmit: onSubmitMountPoint,
+        onChange: handleMountPointChange,
+        helperText: mountPointHelperText,
+        formatterBeforeSubmit: value => (0, _urlFriendly.default)(value)
       })]
     })
   }));

package/lib/blocklet/component/store-blocklet-list.js

@@ -14,7 +14,7 @@ var _reactErrorBoundary = require("react-error-boundary");
 var _list = _interopRequireDefault(require("@blocklet/list"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Blocklet = _interopRequireWildcard(require("@arcblock/ux/lib/Blocklet"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _util = require("@blocklet/meta/lib/util");
 var _toast = _interopRequireDefault(require("../../toast"));
@@ -120,8 +120,8 @@ function BlockletItem(_ref2) {
             color: "primary",
             "data-cy": "install-blocklet",
             children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-                size: 16,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+                size: [16, 10],
                 style: {
                   marginRight: 3
                 }

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 _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -16,14 +16,12 @@ 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");
@@ -45,9 +43,6 @@ 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 {
@@ -60,8 +55,6 @@ 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
@@ -102,11 +95,12 @@ function InstallFromUrl(_ref) {
             attachRuntimeInfo: false
           }
         });
-        if (existedBlocklet) {
+        if (existedBlocklet && _semver.default.gte(existedBlocklet.meta.version, newer.version)) {
           setExistingMeta(existedBlocklet.meta);
-          setCanUpgrade(_semver.default.lt(existedBlocklet.meta.version, newer.version));
+          setMeta(newer);
+        } else {
+          setMeta(newer);
         }
-        setMeta(newer);
       }
       setParams({
         inStore,
@@ -127,43 +121,28 @@ function InstallFromUrl(_ref) {
       onSuccess(_objectSpread({
         meta
       }, params));
-      _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;
+    } else {
+      await onInstall();
     }
-    setLoading(true);
-    setConnectOpen(true);
-  };
-  const onEndInstall = () => {
-    setLoading(false);
-    setConnectOpen(false);
-    onSuccess(_objectSpread({
-      meta
-    }, params));
     _onCancel();
   };
-  const onCancelInstall = () => {
-    setLoading(false);
-    setConnectOpen(false);
+  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);
+    }
   };
   (0, _react.useEffect)(() => {
     if (defaultUrl) {
@@ -202,7 +181,7 @@ function InstallFromUrl(_ref) {
           justifyContent: 'center',
           flexDirection: 'column'
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
       });
     }
     if (meta.did) {
@@ -226,7 +205,7 @@ function InstallFromUrl(_ref) {
             name: row.name,
             children: row.value
           }, row.name);
-        }), existingMeta && !canUpgrade && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        }), existingMeta && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
           type: "error",
           variant: "icon",
           style: {
@@ -297,7 +276,7 @@ function InstallFromUrl(_ref) {
       }
     },
     onConfirm: () => {
-      if (existingMeta && !canUpgrade) {
+      if (existingMeta) {
         _onCancel();
       } else {
         _onConfirm();
@@ -305,89 +284,67 @@ function InstallFromUrl(_ref) {
     }
   }];
   const step = steps[activeStep];
-  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
+  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();
         },
-        children: step.body
-      }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        type: "error",
+        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: {
-          width: '100%',
-          marginTop: 8
+          marginLeft: 8
         },
-        children: error
+        children: [loading && activeStep === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), step.confirm]
       })]
-    }), 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: [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
       },
-      messages: {
-        title: t('setup.keyPair.title'),
-        scan: t('setup.keyPair.scan'),
-        confirm: t('setup.keyPair.confirm'),
-        success: t('setup.keyPair.success')
+      children: step.body
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      style: {
+        width: '100%',
+        marginTop: 8
       },
-      onClose: onCancelInstall
+      children: error
     })]
   });
 }

package/lib/blocklet/overview.js

@@ -9,7 +9,7 @@ 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 _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 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 +49,7 @@ function DomainLink(_ref) {
         placement: "top-end",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "status",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
             size: 12
           })
         })
@@ -255,7 +255,7 @@ function BlockletOverview() {
           }
         })]
       })
-    }, domain.value)), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    }, domain.value)), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
       size: 16
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
       children: t('common.empty')