@abtnode/ux 1.8.35 → 1.8.37

package/lib/blocklet/component/add.js

@@ -0,0 +1,1083 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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"));
+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 _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 _node = require("../../contexts/node");
+var _util2 = require("../../util");
+var _toast = _interopRequireDefault(require("../../toast"));
+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 _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const _excluded = ["name", "validation"],
+  _excluded2 = ["default", "key"];
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+const requirePurchase = meta => meta.inStore && (0, _util.isFreeBlocklet)(meta) === false;
+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;
+  let {
+    blocklet,
+    children
+  } = _ref2;
+  const {
+    t,
+    locale
+  } = (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 [configs, setConfigs] = (0, _react.useState)([]);
+  const {
+    api,
+    ws: {
+      useSubscription
+    },
+    inService,
+    info: nodeInfo
+  } = (0, _node.useNodeContext)();
+  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,
+    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 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 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 => {
+    updateParams({
+      installResultProps: {
+        variant: 'error',
+        title: getComponentName(),
+        subTitle: errorMessage,
+        footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          className: "bottom-button",
+          "data-cy": "retry-install-component",
+          onClick: () => {
+            updateParams({
+              installResultProps: {}
+            });
+            onInstall(component.current.installInput);
+          },
+          children: t('common.retry')
+        })
+      }
+    });
+  };
+  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);
+    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,
+      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
+            }
+          });
+        }
+      }
+    } catch (err) {
+      _toast.default.error(err.message);
+      console.error('installComponent error: ', err);
+      setInstallErrorResult(err.message);
+    } 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 = payload => {
+    const {
+      errMsg
+    } = validateInput(_objectSpread(_objectSpread({}, params), {}, {
+      locale
+    }));
+    setError(errMsg);
+
+    // the step can complete, install component
+    if (activeStep === steps.length - 2) {
+      updateParams({
+        installResultProps: {}
+      });
+      onInstall(payload);
+    }
+    setActiveStepByIndex(x => x + 1);
+  };
+  const _onCancel = () => {
+    setActiveStepByIndex(x => x - 1);
+  };
+  const onGeneratePurchaseData = async () => {
+    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, _list$, _list$$meta, _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).sort((a, b) => new Date(a.deletedAt) > new Date(b.deletedAt) ? -1 : 1);
+    setConfigs(list);
+    const componentDid = componentDidValue || ((_list$ = list[0]) === null || _list$ === void 0 ? void 0 : (_list$$meta = _list$.meta) === null || _list$$meta === void 0 ? void 0 : _list$$meta.did) || '';
+    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,
+        custom: false
+      };
+      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)({
+        configs: componentAllConfigs
+      }, ancestors);
+      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)
+      });
+    }
+
+    // use deleted history
+    if (componentDid && componentDid !== '_empty_') {
+      const config = list.find(x => x.meta.did === componentDid);
+      doc = _objectSpread(_objectSpread({}, doc), {}, {
+        pathPrefix: config === null || config === void 0 ? void 0 : config.mountPoint,
+        title: config === null || config === void 0 ? void 0 : config.meta.title,
+        componentName: config === null || config === void 0 ? void 0 : config.meta.name,
+        // use history's environments
+        hasEnvironmentsStep: false
+      });
+    } else {
+      var _component$current$me, _component$current$me2;
+      doc = _objectSpread(_objectSpread({}, doc), {}, {
+        pathPrefix: "/".concat((0, _util.urlFriendly)(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);
+    updateParams(_objectSpread(_objectSpread({
+      bundleDid,
+      componentDid
+    }, doc), {}, {
+      hasRequiredEnvironments: hasRequiredEnvironments(component.current.meta),
+      requirePurchase: componentRequirePurchase
+    }));
+    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: /*#__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'), ' ']
+        }),
+        loading: loading,
+        onChange: () => {
+          setParams({});
+          component.current = {};
+        },
+        children: _ref6 => {
+          let {
+            currentRegistry
+          } = _ref6;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_storeBlockletList.default, {
+            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 => !!(0, _util.isComponentBlocklet)(x));
+            }
+          });
+        }
+      })]
+    }),
+    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();
+    }
+  }, {
+    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')
+      }), !!params.bundleDid && !!configs.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TextField.default, {
+        select: true,
+        label: t('blocklet.component.selectInstance'),
+        autoComplete: "off",
+        variant: "outlined",
+        name: "did",
+        helperText: t('blocklet.component.selectInstanceTip'),
+        "data-cy": "component-instance-select",
+        fullWidth: true,
+        value: params.componentDid || '_empty_',
+        onChange: e => {
+          setConfigValue({
+            componentDid: e.target.value
+          });
+        },
+        style: {
+          marginBottom: 32
+        },
+        margin: "normal",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: "_empty_",
+          children: t('blocklet.component.newInstance')
+        }, "_empty_"), configs.map(x => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+            value: x.meta.did,
+            "data-cy": x.meta.did,
+            children: [x.meta.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+              style: {
+                marginLeft: 8
+              },
+              children: (0, _util2.formatToDatetime)(x.deletedAt)
+            })]
+          }, x.meta.did);
+        })]
+      }), /*#__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: t('blocklet.component.mountPointTip'),
+        style: {
+          marginBottom: 32
+        },
+        margin: "normal",
+        value: params.pathPrefix,
+        onChange: e => {
+          const pathPrefix = e.target.value;
+          updateParams({
+            pathPrefix
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('common.title'),
+        autoComplete: "off",
+        variant: "outlined",
+        fullWidth: true,
+        style: {
+          marginBottom: 32
+        },
+        margin: "normal",
+        value: params.title,
+        helperText: t('blocklet.component.titleTip'),
+        onChange: e => {
+          const title = e.target.value;
+          setParams(_objectSpread(_objectSpread({}, params), {}, {
+            title
+          }));
+        }
+      }), !!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
+  }, {
+    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)(_Spinner.default, {
+        size: [16, 10]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('blocklet.component.add')]
+    }), showDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogWrapper, {
+      title: t('blocklet.component.addWithName', {
+        name: (0, _util.getDisplayName)(blocklet)
+      }),
+      maxWidth: false,
+      fullWidth: false,
+      PaperProps: {
+        style: isMobile ? {
+          width: '100%',
+          height: window.innerHeight
+        } : {
+          maxWidth: 1350,
+          minWidth: 930,
+          width: '80%'
+        }
+      }
+      // 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$);
+      },
+      showCloseButton: showCloseButton,
+      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();
+          },
+          color: "inherit",
+          children: step.cancel || t('common.cancel')
+        }), step.confirm && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          onClick: e => {
+            e.stopPropagation();
+            step.onConfirm();
+          },
+          color: "primary",
+          "data-cy": "submit-confirm-next",
+          disabled: typeof step.disabled === 'boolean' ? step.disabled : isDisabled(),
+          variant: "contained",
+          autoFocus: true,
+          title: step.confirm,
+          style: {
+            marginLeft: 8,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            maxWidth: '200px',
+            display: 'inline-block'
+          },
+          children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+            size: [16, 10]
+          }), 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);
+          }
+        })
+      })
+    })]
+  });
+}
+AddComponent.propTypes = {
+  children: _propTypes.default.any,
+  blocklet: _propTypes.default.object.isRequired
+};
+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  .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  padding: 34px 24px 24px;\n  width: 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      & > div{\n        height: 100%;\n      }\n      .root-header {\n        .app-name-content {\n          display: none;\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      ";
+  }
+  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);