@abtnode/ux 1.16.18-beta-adeeb0b3 → 1.16.18-beta-aa01bd8e

package/lib/blocklet/component/add.js

@@ -6,1019 +6,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = AddComponent;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
-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 _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 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 _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _constant2 = require("@abtnode/constant");
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
-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 _urlPathFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-path-friendly"));
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _constants = require("../../util/constants");
 var _node = require("../../contexts/node");
-var _blocklet = require("../../contexts/blocklet");
-var _util2 = require("../../util");
-var _schemaForm = _interopRequireDefault(require("../../schema-form"));
-var _required = _interopRequireDefault(require("../../form/required"));
-var _purchase = require("../purchase");
-var _util3 = require("../router/util");
-var _agreement = _interopRequireDefault(require("../agreement"));
-var _installFromUrl = _interopRequireDefault(require("../install-from-url"));
-var _selectStore = _interopRequireDefault(require("./select-store"));
-var _storeBlockletList = _interopRequireDefault(require("./store-blocklet-list"));
-var _spaceConnector = _interopRequireDefault(require("./space-connector"));
+var _addComponentCore = _interopRequireDefault(require("./add-component-core"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const _excluded = ["name", "validation"],
-  _excluded2 = ["default", "key"];
+var _templateObject;
+/* eslint-disable react/no-unstable-nested-components */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable react/no-unstable-nested-components */
-const requirePurchase = meta => meta.inStore && (0, _util.isFreeBlocklet)(meta) === false;
-const getDIDSpaceCapability = meta => {
-  var _meta$capabilities;
-  return meta === null || meta === void 0 ? void 0 : (_meta$capabilities = meta.capabilities) === null || _meta$capabilities === void 0 ? void 0 : _meta$capabilities.didSpace;
-};
-/**
- * @description
- * @param {import('@abtnode/client').BlockletState} blocklet
- * @return {string}
- */
-const getDIDSpaceEndpoint = blocklet => {
-  var _blocklet$configs, _blocklet$configs$fin;
-  return (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$configs = blocklet.configs) === null || _blocklet$configs === void 0 ? void 0 : (_blocklet$configs$fin = _blocklet$configs.find(item => item.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)) === null || _blocklet$configs$fin === void 0 ? void 0 : _blocklet$configs$fin.value) || null;
-};
-const hasRequiredEnvironments = meta => (meta.environments || []).some(x => x.required);
-const hasMissRequiredConfigs = (configsList, sharedValueMap) => {
-  return configsList === null || configsList === void 0 ? void 0 : configsList.some(item => {
-    return item.required && !sharedValueMap[item.key];
-  });
-};
-const getParamsName = function getParamsName() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return params.title || params.name;
-};
-const StepContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    meta,
-    isMobile,
-    onStepChange
-  } = _ref;
-  const {
-    steps,
-    activeStep,
-    setActiveStepByKey,
-    setActiveStepByIndex
-  } = (0, _step.useStepContext)();
-  const {
-    t,
-    locale
-  } = (0, _context.useLocaleContext)();
-  const step = steps[activeStep];
-  (0, _react.useEffect)(() => {
-    onStepChange(activeStep);
-  }, [onStepChange, activeStep]);
-
-  // expose the func and activeStep
-  (0, _react.useImperativeHandle)(ref, () => ({
-    setActiveStepByKey,
-    setActiveStepByIndex
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentWrapper, {
-    component: "div",
-    className: isMobile ? 'mobileStyle' : '',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_launcherLayout.default, {
-      locale: locale,
-      blockletMeta: _objectSpread({
-        title: ' '
-      }, meta),
-      pcWidth: "100%",
-      pcHeight: "100%",
-      logoUrl: meta && meta.logo && meta.registryUrl ? (0, _util2.getBlockletLogoUrl)({
-        did: meta.did,
-        baseUrl: meta.registryUrl,
-        logoPath: meta.logo
-      }) : null,
-      stepTip: t('blocklet.component.add'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RightContent, {
-        children: step !== null && step !== void 0 && step.body && typeof step.body === 'function' ? step.body() : step.body
-      })
-    })
-  });
-});
-StepContent.propTypes = {
-  meta: _propTypes.default.any,
-  onStepChange: _propTypes.default.func.isRequired,
-  isMobile: _propTypes.default.bool.isRequired
-};
-StepContent.defaultProps = {
-  meta: null
-};
-function AddComponent(_ref2) {
-  var _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _purchaseRef$current, _purchaseRef$current$, _purchaseRef$current2, _purchaseRef$current3;
+function AddComponent(_ref) {
   let {
     blocklet,
     children
-  } = _ref2;
+  } = _ref;
   const {
-    t,
-    locale
+    t
   } = (0, _context.useLocaleContext)();
-  const [loading, setLoading] = (0, _react.useState)(false);
-  const [editingItem, setEditingItem] = (0, _react.useState)(null);
-  const [error, setError] = (0, _react.useState)('');
-  const [showDialog, setShowDialog] = (0, _react.useState)('');
-  const [mountPointHelperText, setMountPointHelperText] = (0, _react.useState)('');
-  const {
-    api,
-    ws: {
-      useSubscription
-    },
-    inService,
-    info: nodeInfo
-  } = (0, _node.useNodeContext)();
-  const {
-    actions: {
-      refreshBlocklet: refreshApp
-    }
-  } = (0, _blocklet.useBlockletContext)();
-  const [purchaseData, setPurchaseData] = (0, _react.useState)(null);
-  const [isWaitingPurchase, setIsWaitingPurchase] = (0, _react.useState)(false);
-  const initParams = {
-    bundleDid: '',
-    componentDid: '',
-    componentName: '',
-    pathPrefix: '',
-    name: '',
-    title: '',
-    configsList: [],
-    configsValue: {},
-    hasMissRequiredConfigs: false,
-    hasEnvironmentsStep: false,
-    hasRequiredEnvironments: false,
-    requirePurchase: false,
-    didSpaceCapability: null,
-    installResultProps: {},
-    purchaseResultProps: {},
-    showFromUrlDialog: false
-  };
-  const [params, setParams] = (0, _react.useState)(initParams);
-  const [activeStep, setActiveStep] = (0, _react.useState)(0);
-  const component = (0, _react.useRef)({});
-  const stepRef = (0, _react.useRef)({});
-  const purchaseRef = (0, _react.useRef)({});
+  const [showDialog, setShowDialog] = (0, _react.useState)(false);
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const {
-    meta
-  } = component.current;
-  // eslint-disable-next-line no-unused-vars
-  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) {
-      const {
-        errMsg
-      } = validateInput(_objectSpread(_objectSpread({}, params), {}, {
-        pathPrefix: params.pathPrefix,
-        locale
-      }));
-      setError(errMsg);
-    }
-  }, [params.pathPrefix]); // eslint-disable-line
-
-  (0, _react.useEffect)(() => {
-    if (activeStep === 0) {
-      // reset params, when step change to select component
-      setParams(initParams);
-    }
-  }, [activeStep]); // eslint-disable-line
-
-  const getComponentName = () => {
-    var _component$current;
-    if (component !== null && component !== void 0 && (_component$current = component.current) !== null && _component$current !== void 0 && _component$current.meta) {
-      return (0, _util.getDisplayName)(component.current);
-    }
-    return '';
-  };
-  const setInstallErrorResult = errorMessage => {
-    const update = _loading => {
-      updateParams({
-        installResultProps: {
-          variant: 'error',
-          title: getComponentName(),
-          subTitle: errorMessage,
-          footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-            className: "bottom-button",
-            disabled: _loading,
-            "data-cy": "retry-install-component",
-            onClick: async () => {
-              // set button disabled and show spinner
-              update(true);
-              await onInstall(component.current.installInput);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-              display: "flex",
-              alignItems: "center",
-              children: [_loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-                size: 16,
-                style: {
-                  marginRight: 8
-                }
-              }), t('common.retry')]
-            })
-          })
-        }
-      });
-    };
-    update();
-  };
-  const createBlockletEventHandler = handler => {
-    return b => {
-      var _b$meta, _blocklet$meta;
-      if (((b === null || b === void 0 ? void 0 : (_b$meta = b.meta) === null || _b$meta === void 0 ? void 0 : _b$meta.did) || (b === null || b === void 0 ? void 0 : b.meta)) === (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did)) {
-        handler(b);
-      }
-    };
-  };
-  useSubscription(_constant.BlockletEvents.statusChange, createBlockletEventHandler(e => {
-    switch (e.status) {
-      case _constant.BlockletStatus.upgrading:
-        updateParams({
-          installResultProps: {
-            variant: 'success',
-            title: getComponentName(),
-            subTitle: t('blocklet.component.installSuccessTip')
-          }
-        });
-        break;
-      default:
-    }
-  }), [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did]);
-  useSubscription(_constant.BlockletEvents.downloadFailed, createBlockletEventHandler(() => {
-    setInstallErrorResult(t('blocklet.component.installComponentError'));
-  }), [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta3 = blocklet.meta) === null || _blocklet$meta3 === void 0 ? void 0 : _blocklet$meta3.did]);
-  useSubscription(_constant.BlockletEvents.installFailed, createBlockletEventHandler(() => {
-    setInstallErrorResult(t('blocklet.component.installComponentError'));
-  }), [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta4 = blocklet.meta) === null || _blocklet$meta4 === void 0 ? void 0 : _blocklet$meta4.did]);
-  const onClose = () => {
-    setLoading(false);
+    inService
+  } = (0, _node.useNodeContext)();
+  const _onClose = () => {
     setShowDialog(false);
-    setParams({});
-    component.current = {};
-  };
-  const onInstall = async payload => {
-    var _component$current2, _component$current3;
-    const {
-      pathPrefix: mountPoint,
-      bundleDid,
-      title,
-      componentName = '',
-      componentDid = ''
-    } = params;
-    // eslint-disable-next-line no-shadow
-    const {
-      configs = [],
-      registryUrl,
-      inStore,
-      inputUrl
-    } = ((_component$current2 = component.current) === null || _component$current2 === void 0 ? void 0 : _component$current2.meta) || {};
-    const downloadTokenList = (_component$current3 = component.current) === null || _component$current3 === void 0 ? void 0 : _component$current3.downloadTokenList;
-    const url = inStore ? (0, _util2.getBlockletMetaUrl)(registryUrl, bundleDid) : inputUrl;
-    setLoading(true);
-    const installInput = _objectSpread(_objectSpread(_objectSpread({
-      rootDid: blocklet.meta.did,
-      url,
-      mountPoint: (0, _urlPathFriendly.default)(mountPoint),
-      title,
-      name: componentName,
-      did: componentDid
-    }, params.hasEnvironmentsStep && configs.length > 0 ? {
-      configs: configs.map(item => {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          value: params.configsValue[item.key] || ''
-        });
-      })
-    } : {}), downloadTokenList ? {
-      downloadTokenList
-    } : {}), payload);
-    try {
-      await api.installComponent({
-        input: installInput
-      });
-      if (registryUrl) {
-        const {
-          teamDid,
-          storeList
-        } = (0, _util2.getStoreList)({
-          fromBlocklet: inService,
-          nodeInfo,
-          blocklet
-        });
-        const {
-          isNew,
-          decoded
-        } = (0, _util2.isNewStoreUrl)(registryUrl, storeList);
-        if (isNew) {
-          await api.addBlockletStore({
-            input: {
-              teamDid,
-              url: decoded
-            }
-          });
-        }
-      }
-      updateParams({
-        installResultProps: {}
-      });
-
-      // let app state refresh fast before receive subscribe event
-      refreshApp({
-        showError: false,
-        attachRuntimeInfo: false
-      });
-    } catch (err) {
-      const errMsg = (0, _util2.formatError)(err);
-      _Toast.default.error(errMsg);
-      console.error('installComponent error: ', err);
-      setInstallErrorResult(errMsg);
-    } finally {
-      setLoading(false);
-      component.current.installInput = installInput;
-    }
-  };
-  const validateInput = input => {
-    // FIXME: validatePathPrefix should be updated
-    const errMsg = (0, _util3.validatePathPrefix)({
-      params: _objectSpread(_objectSpread({}, input), {}, {
-        did: input.bundleDid
-      }),
-      blocklets: [blocklet],
-      // blocklets: component.current?.blocklets?.map(x => ({ meta: x })) || [],
-      blocklet,
-      locale
-    });
-    return {
-      errMsg
-    };
-  };
-  const onNext = async payload => {
-    const {
-      errMsg
-    } = validateInput(_objectSpread(_objectSpread({}, params), {}, {
-      locale
-    }));
-    setError(errMsg);
-
-    // the step can complete, install component
-    if (activeStep === steps.length - 2) {
-      await onInstall(payload);
-    }
-    setActiveStepByIndex(x => x + 1);
-  };
-  const _onCancel = () => {
-    setActiveStepByIndex(x => x - 1);
   };
-  const onGeneratePurchaseData = () => {
-    const {
-      pathPrefix: mountPoint,
-      bundleDid,
-      title,
-      componentName = '',
-      componentDid = ''
-    } = params;
-
-    // eslint-disable-next-line no-shadow
-    const {
-      meta = {}
-    } = component.current || {};
-    const {
-      registryUrl,
-      inStore,
-      inputUrl
-    } = meta;
-    const url = inStore ? (0, _util2.getBlockletMetaUrl)(registryUrl, bundleDid) : inputUrl;
-    setPurchaseData({
-      meta,
-      installOpts: {
-        type: 'component',
-        rootDid: blocklet.meta.did,
-        mountPoint,
-        url,
-        title,
-        name: componentName,
-        did: componentDid
-      }
-    });
-  };
-  const onCancelPurchase = errorMessage => {
-    setIsWaitingPurchase(false);
-    updateParams({
-      purchaseResultProps: {
-        variant: 'error',
-        title: getComponentName(),
-        subTitle: errorMessage,
-        style: {
-          paddingTop: 120
-        },
-        footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          className: "bottom-button",
-          "data-cy": "retry-purchase-component",
-          onClick: () => {
-            updateParams({
-              purchaseResultProps: {}
-            });
-          },
-          children: t('common.retry')
-        })
-      }
-    });
-  };
-  const onSuccessPurchase = _ref3 => {
-    let {
-      downloadTokenList
-    } = _ref3;
-    component.current.downloadTokenList = downloadTokenList;
-    setIsWaitingPurchase(false);
-    onNext();
-  };
-  const setConfigValue = _ref4 => {
-    var _blocklet$settings, _meta$environments;
-    let {
-      chooseParams = component.current,
-      componentDid: componentDidValue,
-      isInit = false
-    } = _ref4;
-    // eslint-disable-next-line no-shadow
-    const {
-      meta,
-      registryUrl,
-      inStore,
-      inputUrl
-    } = chooseParams;
-    const {
-      did: bundleDid,
-      title,
-      name
-    } = meta;
-
-    // deleted history list
-    const list = (((_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.children) || []).filter(x => x.status === 'deleted' && x.meta.bundleDid === bundleDid);
-    const componentDid = componentDidValue || '';
-    const newConfigs = (_meta$environments = meta.environments) === null || _meta$environments === void 0 ? void 0 : _meta$environments.map(item => {
-      const {
-          name: key,
-          validation
-        } = item,
-        rest = _objectWithoutProperties(item, _excluded);
-      const formatItem = {
-        // if the blocklet has validation, provide the validation (fix not inStore)
-        validation: (0, _isNil.default)(validation) ? '' : validation
-      };
-      return _objectSpread(_objectSpread({}, rest), {}, {
-        key
-      }, formatItem);
-    });
-    component.current = _objectSpread(_objectSpread({}, chooseParams), {}, {
-      meta: _objectSpread(_objectSpread({}, meta), {}, {
-        // init configs from environments
-        configs: newConfigs,
-        registryUrl,
-        inStore,
-        inputUrl
-      })
-    });
-    let doc = {};
-
-    // if is init, should update configs
-    if (isInit) {
-      const ancestors = [blocklet];
-
-      // component config
-      const componentSelfConfigs = newConfigs || [];
-
-      // TODO: meta not include children environments/configs before install, waiting for next sprint to design
-      const componentChildrenConfigs = [];
-
-      // eslint-disable-next-line
-      // chooseBlocklet?.children?.map(childBlocklet => {
-      //   // eslint-disable-next-line no-shadow
-      //   forEachChildSync(childBlocklet, (b, { ancestors }) => {
-      //     const ancestorDids = ancestors.slice(1).map(x => x.meta.did);
-
-      //     componentChildrenConfigs.push(
-      //       (b.configs || []).map(x => ({ ...x, childDid: ancestorDids.concat(b.meta.did) }))
-      //     );
-      //   });
-
-      //   return false;
-      // });
-
-      const componentAllConfigs = (0, _uniqBy.default)((0, _flatten.default)([...componentSelfConfigs, ...componentChildrenConfigs]), 'key').filter(x => !!x.key).sort((a, b) => {
-        if (a.required && !b.required) {
-          return -1;
-        }
-        if (b.required && !a.required) {
-          return 1;
-        }
-        return 0;
-      });
-      const sharedConfigObj = (0, _util.getSharedConfigObj)(ancestors[0], {
-        configs: componentAllConfigs
-      });
-      const configsValue = {};
-      const configsList = componentAllConfigs.map(item => {
-        const {
-            default: defaultValue,
-            key
-          } = item,
-          rest = _objectWithoutProperties(item, _excluded2);
-        configsValue[key] = sharedConfigObj[key] || defaultValue;
-        return _objectSpread(_objectSpread({}, rest), {}, {
-          key,
-          hidden: !!_constant.BLOCKLET_CONFIGURABLE_KEY[key]
-        });
-      });
-      doc = _objectSpread(_objectSpread({}, doc), {}, {
-        configsList,
-        configsValue,
-        hasMissRequiredConfigs: hasMissRequiredConfigs(configsList, configsValue)
-      });
-    }
-    const hasRootPath = blocklet.children.some(x => x.mountPoint === '/');
-
-    // use deleted history
-    const config = list.find(x => x.meta.bundleDid === bundleDid);
-    if (config) {
-      doc = _objectSpread(_objectSpread({}, doc), {}, {
-        pathPrefix: config.mountPoint,
-        title: title || '',
-        componentName: config.meta.name,
-        // use history's environments
-        hasEnvironmentsStep: false
-      });
-    } else {
-      var _component$current$me, _component$current$me2;
-      doc = _objectSpread(_objectSpread({}, doc), {}, {
-        pathPrefix: hasRootPath ? "/".concat((0, _urlPathFriendly.default)(title) || (0, _urlPathFriendly.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
-      });
-    }
-
-    // eslint-disable-next-line no-shadow
-    const componentRequirePurchase = requirePurchase(component.current.meta);
-    const componentDIDSpaceCapability = getDIDSpaceCapability(component.current.meta);
-    const didSpaceEndpoint = getDIDSpaceEndpoint(blocklet);
-    updateParams(_objectSpread(_objectSpread({
-      bundleDid,
-      componentDid
-    }, doc), {}, {
-      hasRequiredEnvironments: hasRequiredEnvironments(component.current.meta),
-      requirePurchase: componentRequirePurchase,
-      didSpaceCapability: componentDIDSpaceCapability,
-      didSpaceEndpoint
-    }));
-    if (isInit && componentRequirePurchase) {
-      onGeneratePurchaseData();
-    }
-  };
-  const steps = [{
-    key: 'selectComponent',
-    name: t('blocklet.component.selectComponent'),
-    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-      component: "div",
-      children: [params.showFromUrlDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_installFromUrl.default
-      // if not set defaultUrl, the dialog will always show step 1 when the dialog is opened
-      // defaultUrl={meta?.inputUrl}
-      , {
-        mode: "component",
-        onCancel: () => {
-          updateParams({
-            showFromUrlDialog: false
-          });
-        }
-        // eslint-disable-next-line no-shadow
-        ,
-        onSuccess: _ref5 => {
-          let {
-            meta,
-            inputUrl,
-            inStore,
-            registryUrl
-          } = _ref5;
-          setConfigValue({
-            chooseParams: {
-              meta,
-              inputUrl,
-              inStore,
-              registryUrl
-            },
-            isInit: true
-          });
-          updateParams({
-            showFromUrlDialog: false
-          });
-          onNext();
-        },
-        handleText: {
-          title: t('blocklet.component.addComponentTip.fromUrl'),
-          confirm: t('blocklet.component.choose')
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectStore.default, {
-        extra: !isServerlessMode ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-          variant: "text",
-          color: "primary",
-          "data-cy": "add-component-from-url",
-          onClick: () => {
-            updateParams({
-              showFromUrlDialog: true
-            });
-          },
-          style: {
-            padding: '0 2px'
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
-            style: {
-              fontSize: 20,
-              marginRight: 4
-            }
-          }), " ", t('blocklet.component.addComponentTip.fromUrl'), ' ']
-        }) : null,
-        loading: loading,
-        onChange: () => {
-          setParams({});
-          component.current = {};
-        },
-        children: _ref6 => {
-          let {
-            currentRegistry
-          } = _ref6;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_storeBlockletList.default, {
-            serverVersion: nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.version,
-            style: isMobile ? {
-              // should remove other dom height/margin
-              height: 'calc(100vh - 56px - 80px - 32px - 40px  )'
-            } : {
-              height: 'calc(100% - 40px)'
-            },
-            storeUrl: currentRegistry.url,
-            handleButtonClick: chooseParams => {
-              setConfigValue({
-                chooseParams: _objectSpread(_objectSpread({}, chooseParams), {}, {
-                  inStore: true // choose from store, must be inStore
-                }),
-
-                isInit: true
-              });
-            },
-            handleBlockletRender: _ref7 => {
-              let {
-                blocklet: blockletItem,
-                defaultRender
-              } = _ref7;
-              const isChosen = (params === null || params === void 0 ? void 0 : params.bundleDid) && (params === null || params === void 0 ? void 0 : params.bundleDid) === (blockletItem === null || blockletItem === void 0 ? void 0 : blockletItem.did);
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StoreBlockletItemWrapper, {
-                children: [isChosen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "check-container",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-                    className: "check-icon"
-                  })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: isChosen ? 'choose-blocklet' : '',
-                  style: {
-                    marginLeft: 16
-                  },
-                  children: defaultRender
-                })]
-              });
-            },
-            extraFilter: allBlocklets => {
-              // only use blocklets that are component
-              return allBlocklets === null || allBlocklets === void 0 ? void 0 : allBlocklets.filter(x => {
-                if ((blocklet.children || []).some(y => y.meta.did === x.did)) {
-                  return false;
-                }
-                return true;
-              });
-            }
-          });
-        }
-      })]
-    }),
-    cancel: t('common.cancel'),
-    confirm: getParamsName(params) ? t('blocklet.component.addNext', {
-      name: getParamsName(params)
-    }) : t('common.next'),
-    onCancel: onClose,
-    onConfirm: () => {
-      onNext();
-    }
-  }, {
-    key: 'agreement',
-    name: t('launchBlocklet.introduction'),
-    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-      component: "div",
-      className: "agreement-wrapper",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
-        title: t('launchBlocklet.introduction'),
-        subTitle: t('blocklet.component.addComponentTip.introduction')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_agreement.default, {
-        meta: meta,
-        onClickNext: onNext,
-        handleDescEle: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              // eslint-disable-next-line
-              dangerouslySetInnerHTML: {
-                __html: t("blocklet.component.addComponentTip.".concat(params.requirePurchase ? 'isPurchase' : 'isFree'), {
-                  name: getComponentName()
-                })
-              }
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: t('blocklet.component.addComponentTip.belowInformation')
-          })]
-        })
-      })]
-    }),
-    cancel: t('common.pre'),
-    confirm: t('launchBlocklet.next'),
-    onCancel: _onCancel,
-    onConfirm: () => {
-      setIsWaitingPurchase(false);
-      onNext();
-    }
-  }, meta && params.requirePurchase && {
-    key: 'purchase',
-    name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [t('common.verifyNFT'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
-    }),
-    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-      component: "div",
-      className: "flex-align-center",
-      style: {
-        flexDirection: 'column'
-      },
-      children: [!(((_purchaseRef$current = purchaseRef.current) === null || _purchaseRef$current === void 0 ? void 0 : (_purchaseRef$current$ = _purchaseRef$current.getCurrentStep) === null || _purchaseRef$current$ === void 0 ? void 0 : _purchaseRef$current$.call(_purchaseRef$current)) === 2 || isWaitingPurchase) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
-        title: t('common.verifyNFT'),
-        subTitle: t('blocklet.component.addComponentTip.verifyNFT')
-      }), !(0, _isEmpty.default)(params.purchaseResultProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "flex-align-center flex-justify-center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, _objectSpread({}, params.purchaseResultProps))
-      }) : purchaseData && /*#__PURE__*/(0, _jsxRuntime.jsx)(_purchase.ComponentPurchaseSelect, {
-        ref: purchaseRef,
-        meta: purchaseData.meta
-        // if select deleted history, use verify mode
-        ,
-        mode: params.componentDid ? 'verify' : 'both',
-        onCancel: onCancelPurchase,
-        installOpts: purchaseData.installOpts,
-        handlePaySuccess: onSuccessPurchase
-      })]
-    }),
-    disabled: ((_purchaseRef$current2 = purchaseRef.current) === null || _purchaseRef$current2 === void 0 ? void 0 : (_purchaseRef$current3 = _purchaseRef$current2.getCurrentStep) === null || _purchaseRef$current3 === void 0 ? void 0 : _purchaseRef$current3.call(_purchaseRef$current2)) === 2 || isWaitingPurchase,
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onConfirm: () => {
-      if (typeof purchaseRef.current.onNext === 'function') {
-        purchaseRef.current.onNext();
-        setIsWaitingPurchase(true);
-      }
-    },
-    onCancel: () => {
-      _onCancel();
-    }
-  }, (0, _util.hasStartEngine)(meta) && {
-    key: 'config',
-    name: t('common.config'),
-    error,
-    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-      component: "div",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
-        title: t('common.config'),
-        subTitle: t('blocklet.component.addComponentTip.config')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-        label: t('blocklet.component.mountPoint'),
-        autoComplete: "off",
-        variant: "outlined",
-        name: "pathPrefix",
-        inputProps: {
-          'data-cy': 'mount-point-input'
-        },
-        fullWidth: true,
-        helperText: mountPointHelperText || t('blocklet.component.mountPointTip'),
-        style: {
-          marginBottom: 32
-        },
-        margin: "normal",
-        value: params.pathPrefix,
-        onChange: e => {
-          const pathPrefix = e.target.value;
-          updateParams({
-            pathPrefix
-          });
-          setMountPointHelperText(t('common.slugifyHint', {
-            value: (0, _util2.formatMountPoint)(pathPrefix)
-          }));
-        }
-      }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        type: "error",
-        style: {
-          width: '100%',
-          marginTop: 8
-        },
-        children: error
-      })]
-    }),
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel: _onCancel,
-    onConfirm: () => {
-      onNext();
-    }
-  }, meta && (params === null || params === void 0 ? void 0 : params.hasEnvironmentsStep) && {
-    key: 'environment',
-    name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [t('common.environment'), " ", params.hasRequiredEnvironments && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
-    }),
-    disabled: !!editingItem || (params === null || params === void 0 ? void 0 : params.hasMissRequiredConfigs),
-    body: () => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
-          title: t('common.environment'),
-          subTitle: t('blocklet.component.addComponentTip.environment')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_schemaForm.default, {
-          style: {
-            marginTop: -12,
-            width: '100%'
-          },
-          schema: params.configsList,
-          defaultValue: params.configsValue
-          // eslint-disable-next-line
-          ,
-          onChange: (changeValue, _ref8) => {
-            let {
-              action,
-              currentItem,
-              allValues
-            } = _ref8;
-            if (action === 'confirm') {
-              updateParams({
-                hasMissRequiredConfigs: hasMissRequiredConfigs(params.configsList, allValues),
-                configsValue: allValues
-              });
-            }
-            if (action === 'edit') {
-              setEditingItem(currentItem);
-            } else if (['cancel', 'confirm'].includes(action)) {
-              setEditingItem(null);
-            }
-          }
-        })]
-      });
-    },
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel: _onCancel,
-    onConfirm: onNext
-  }, meta && (params === null || params === void 0 ? void 0 : params.didSpaceCapability) && {
-    key: 'didSpace',
-    name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceCapability === 'required' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
-    }),
-    disabled: params.didSpaceCapability === 'required' && !params.didSpaceEndpoint,
-    body: () => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
-          title: t('blocklet.component.didSpaceConfig'),
-          subTitle: t('blocklet.component.didSpaceConfigTip')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            mt: '36px',
-            '& > div': {
-              maxWidth: 'unset !important',
-              '& .MuiAutocomplete-root': {
-                maxWidth: 'unset !important'
-              }
-            }
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spaceConnector.default, {
-            sx: {
-              '& .MuiFormHelperText-root': {
-                wordBreak: 'break-all'
-              }
-            },
-            helperText: params.didSpaceEndpoint && t('blocklet.component.didSpaceConnected', {
-              endpoint: params.didSpaceEndpoint
-            }),
-            onConnect: () => {
-              onNext();
-            }
-          })
-        })]
-      });
-    },
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel: _onCancel,
-    onConfirm: onNext
-  }, {
-    key: 'install',
-    name: t('common.install'),
-    disabled: false,
-    loading: false,
-    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyWrapper, {
-      component: "div",
-      className: "flex-justify-center flex-align-center",
-      style: {
-        flexDirection: 'column'
-      },
-      children: (0, _isEmpty.default)(params.installResultProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationWaiter.default, {
-        message: /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageDiv, {
-          children: t('blocklet.component.installingCanCloseWindowTip')
-        }),
-        increaseSpeed: 0.3,
-        messageLoop: false
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          marginTop: 120
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, _objectSpread({}, params.installResultProps))
-      })
-    }),
-    confirm: t('common.complete'),
-    // onCancel: onClose,
-    onConfirm: () => {
-      onClose();
-      // scroll to bottom
-      setTimeout(() => {
-        const scrollDom = document.getElementsByClassName('dashboard-main')[0];
-        if (scrollDom) {
-          scrollDom.scrollTop = scrollDom.scrollHeight;
-        }
-      }, 200);
-    }
-  }].filter(item => item);
-  const step = steps[activeStep] || {};
   const onMenuItemClick = e => {
     e.stopPropagation();
     // eslint-disable-next-line no-unused-expressions
     setShowDialog(true);
   };
-  const isDisabled = () => {
-    if (loading || step.error || !params.bundleDid) {
-      return true;
-    }
-    if (activeStep > 0) {
-      return !params.pathPrefix;
-    }
-    return false;
-  };
-
-  // show close button when step is not the last one
-  const showCloseButton = activeStep < steps.length - 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [typeof children === 'function' ? children({
-      loading,
       open: onMenuItemClick
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: onMenuItemClick,
       className: "component-action",
       "data-cy": "action-add-component",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
         style: {
           fontSize: 18,
           marginRight: 5
@@ -1043,68 +74,18 @@ function AddComponent(_ref2) {
       // eslint-disable-next-line no-unused-vars
       ,
       onClose: (event, reason) => {
-        var _steps$, _steps$$onCancel;
         // disable backdropClick
         if (reason === 'backdropClick') {
           return;
         }
-        (_steps$ = steps[0]) === null || _steps$ === void 0 ? void 0 : (_steps$$onCancel = _steps$.onCancel) === null || _steps$$onCancel === void 0 ? void 0 : _steps$$onCancel.call(_steps$);
+        _onClose();
       },
-      showCloseButton: showCloseButton,
+      showCloseButton: true,
       disableEscapeKeyDown: true,
       open: true,
-      actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: e => {
-            e.stopPropagation();
-            step.onCancel();
-          },
-          disabled: activeStep === steps.length - 2 && loading,
-          color: "inherit",
-          children: step.cancel || t('common.cancel')
-        }), step.confirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: e => {
-            e.stopPropagation();
-            step.onConfirm();
-          },
-          color: "primary",
-          "data-cy": "submit-confirm-next",
-          disabled: loading || (typeof step.disabled === 'boolean' ? step.disabled : isDisabled()),
-          variant: "contained",
-          autoFocus: true,
-          title: step.confirm,
-          style: {
-            marginLeft: 8,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            minWidth: '140px',
-            maxWidth: '280px',
-            textAlign: 'center'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-            display: "flex",
-            alignItems: "center",
-            children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-              style: {
-                marginRight: 8
-              },
-              size: 16
-            }), step.confirm]
-          })
-        })]
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_step.StepProvider, {
-        steps: steps,
-        mode: "memory",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContent, {
-          ref: stepRef,
-          meta: meta,
-          isMobile: isMobile,
-          onStepChange: newStep => {
-            setActiveStep(newStep);
-          }
-        })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_addComponentCore.default, {
+        onClose: _onClose,
+        storageKey: inService ? _constants.STORAGE_KEY_STORE_BLOCKLET : _constants.STORAGE_KEY_STORE_SERVER
       })
     })]
   });
@@ -1116,25 +97,4 @@ AddComponent.propTypes = {
 AddComponent.defaultProps = {
   children: null
 };
-const DialogWrapper = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n    padding-left: 0;\n    padding-right: 0;\n    padding-bottom: 0;\n  }\n\n  .MuiDialogActions-root {\n    padding: 16px 24px;\n  }\n"])));
-const TypographyWrapper = (0, _styled.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
-const RightContent = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  .bottom-button {\n    min-width: 200px;\n  }\n\n  // blocklet-select-side\n  aside {\n    width: 140px;\n  }\n"])));
-const isMobileDialogContent = props => {
-  if (props.isMobile) {
-    return "\n          height: calc(100vh - 56px - 64px - 48px);\n        ";
-  }
-  return '';
-};
-const DialogContentWrapper = (0, _styled.default)(_DialogContentText.default)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n\n  & .flex-justify-center {\n    display: flex;\n    justify-content: center;\n  }\n\n  & .flex-align-center {\n    display: flex;\n    height: 100%;\n    align-items: center;\n    ", "\n  }\n\n  & .agreement-wrapper {\n    ", "\n    max-height: 60vh;\n    .eula-trigger {\n      padding-right: 0;\n    }\n    .next-button {\n      display: none;\n    }\n  }\n\n  & .connect {\n    background: white;\n  }\n"])), _ref9 => {
-  let {
-    className
-  } = _ref9;
-  // mobile extra style
-  if (className === 'mobileStyle') {
-    return "\n      height: 100%;\n\n      & > div{\n        height: 100%;\n      }\n      .root-header {\n        .app-name-content {\n          display: none;\n        }\n      }\n\n\n\n      // content-panel\n      .root-header + div{\n        padding-top: 0;\n        position: relative;\n        & > div {\n          padding-top: 0;\n        }\n      }\n\n      header + div {\n        padding-top: 0;\n      }\n\n      header {\n        .header-title {\n          margin-left: 0;\n        }\n\n        .header-title-name  {\n          max-width: 100% !important;\n        }\n      }\n      ";
-  }
-  return "\n      height: 72vh;\n      position: relative;\n      .root-header {\n        z-index: auto !important;\n        position: fixed !important;\n      }\n      & > div {\n        height: 100%;\n        width: 100%;\n        max-width: 100%;\n        & > div {\n          max-height: unset !important;\n          max-width: 100%;\n          & > div {\n            // left-panel\n            &:first-child {\n              padding-top: 0;\n              // padding-left: 0;\n              width: 25%;\n              min-width: 240px;\n              & > div:first-child {\n                display: none;\n              }\n              // step\n              & > div:last-child {\n                // margin-top: 32px;\n                margin-top: 0;\n              }\n            }\n            // right-panel\n            &:last-child {\n              padding-top: 0;\n              padding-right: 24px;\n              overflow-y: auto;\n              .app-content {\n                padding: 0 0 24px 0;\n              }\n              .button-container {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n\n    ";
-}, props => isMobileDialogContent(props), props => isMobileDialogContent(props));
-const PageHeaderWrapper = (0, _styled.default)(_pageHeader.default)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
-const StoreBlockletItemWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .choose-blocklet {\n    background-color: rgb(236, 251, 253);\n    border-color: rgb(236, 251, 253);\n    border-radius: 8px;\n  }\n\n  .check-container {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    justify-content: flex-end;\n    align-items: flex-end;\n    width: 30px;\n    height: 30px;\n    border-radius: 0 0 8px 0;\n    color: ", ";\n    overflow: hidden;\n    transition: all ease 0.3s;\n    &:after {\n      position: absolute;\n      z-index: 0;\n      display: block;\n      width: 0;\n      height: 0;\n      border-top: transparent solid 15px;\n      border-left: transparent solid 15px;\n      border-bottom: ", " solid 15px;\n      border-right: ", " solid 15px;\n      transition: all ease 0.1s;\n      content: '';\n    }\n\n    .check-icon {\n      position: relative;\n      z-index: 2;\n      margin: 0 1px 1px 0;\n      font-size: 16px;\n      transition: all ease 0.2s;\n    }\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
-const MessageDiv = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  .msg-before {\n    display: inline-block;\n    color: #aaa;\n    font-size: 14px;\n    margin-right: 6px;\n  }\n"])), props => props.theme.palette.primary.main);
+const DialogWrapper = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n  }\n"])));