@abtnode/ux 1.8.68-beta-500af7e5 → 1.8.68

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,7 +25,6 @@ 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"));
@@ -180,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) {
@@ -611,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",
@@ -629,7 +627,7 @@ function AddComponent(_ref2) {
               marginRight: 4
             }
           }), " ", t('blocklet.component.addComponentTip.fromUrl'), ' ']
-        }) : null,
+        }),
         loading: loading,
         onChange: () => {
           setParams({});
@@ -976,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,
@@ -1040,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,7 +27,7 @@ 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"));
@@ -635,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'
@@ -792,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/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/configuration.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BlockletEnvironmentWithPermission;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -41,8 +41,6 @@ var _templateObject;
 const _excluded = ["blocklet", "onUpdate", "hasPermission"],
   _excluded2 = ["value"];
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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; }

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

@@ -4,13 +4,12 @@ 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 _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"));
@@ -50,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
           })
         })
@@ -114,25 +113,13 @@ function BlockletOverview() {
     loadingRuntimeInfo
   } = (0, _blocklet.useBlockletContext)();
   const {
-    appDid,
-    appPid,
-    migratedFrom = []
-  } = blocklet;
+    value: appDid
+  } = (blocklet.environments || []).find(x => x.key === 'BLOCKLET_APP_ID') || {};
   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)
@@ -268,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')