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

package/es/blocklet/component/add.js

@@ -1,1017 +1,47 @@
 /* eslint-disable react/no-unstable-nested-components */
-import { useState, useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
-import uniqBy from 'lodash/uniqBy';
-import flatten from 'lodash/flatten';
-import isEmpty from 'lodash/isEmpty';
-import isNil from 'lodash/isNil';
-import PageHeader from '@blocklet/launcher-layout/lib/page-header';
 import Dialog from '@arcblock/ux/lib/Dialog';
-import Spinner from '@mui/material/CircularProgress';
-import DialogContentText from '@mui/material/DialogContentText';
-import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import AddIcon from '@mui/icons-material/Link';
-import CheckIcon from '@mui/icons-material/Check';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import styled from '@emotion/styled';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { BLOCKLET_CONFIGURABLE_KEY, BlockletStatus, BlockletEvents } from '@blocklet/constant';
-import Layout from '@blocklet/launcher-layout';
-import { StepProvider, useStepContext } from '@blocklet/launcher-layout/lib/context/step';
-import Box from '@mui/material/Box';
-import { NODE_MODES } from '@abtnode/constant';
-import Button from '@arcblock/ux/lib/Button';
-import Alert from '@arcblock/ux/lib/Alert';
-import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
-import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
-import { getDisplayName, isFreeBlocklet, getSharedConfigObj, hasStartEngine } from '@blocklet/meta/lib/util';
-import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
-import Toast from '@arcblock/ux/lib/Toast';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { STORAGE_KEY_STORE_BLOCKLET, STORAGE_KEY_STORE_SERVER } from '../../util/constants';
 import { useNodeContext } from '../../contexts/node';
-import { useBlockletContext } from '../../contexts/blocklet';
-import { getBlockletLogoUrl, getBlockletMetaUrl, isNewStoreUrl, getStoreList, formatError, formatMountPoint } from '../../util';
-import SchemaForm from '../../schema-form';
-import Required from '../../form/required';
-import { ComponentPurchaseSelect } from '../purchase';
-import { validatePathPrefix } from '../router/util';
-import Agreement from '../agreement';
-import InstallFromUrl from '../install-from-url';
-import SelectStore from './select-store';
-import BlockletList from './store-blocklet-list';
-import SpaceConnector from './space-connector';
+import AddComponentCore from './add-component-core';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const requirePurchase = meta => meta.inStore && isFreeBlocklet(meta) === false;
-const getDIDSpaceCapability = meta => {
-  return meta?.capabilities?.didSpace;
-};
-/**
- * @description
- * @param {import('@abtnode/client').BlockletState} blocklet
- * @return {string}
- */
-const getDIDSpaceEndpoint = blocklet => {
-  return blocklet?.configs?.find(item => item.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)?.value || null;
-};
-const hasRequiredEnvironments = meta => (meta.environments || []).some(x => x.required);
-const hasMissRequiredConfigs = (configsList, sharedValueMap) => {
-  return configsList?.some(item => {
-    return item.required && !sharedValueMap[item.key];
-  });
-};
-const getParamsName = (params = {}) => {
-  return params.title || params.name;
-};
-const StepContent = /*#__PURE__*/forwardRef(({
-  meta,
-  isMobile,
-  onStepChange
-}, ref) => {
-  const {
-    steps,
-    activeStep,
-    setActiveStepByKey,
-    setActiveStepByIndex
-  } = useStepContext();
-  const {
-    t,
-    locale
-  } = useLocaleContext();
-  const step = steps[activeStep];
-  useEffect(() => {
-    onStepChange(activeStep);
-  }, [onStepChange, activeStep]);
-
-  // expose the func and activeStep
-  useImperativeHandle(ref, () => ({
-    setActiveStepByKey,
-    setActiveStepByIndex
-  }));
-  return /*#__PURE__*/_jsx(DialogContentWrapper, {
-    component: "div",
-    className: isMobile ? 'mobileStyle' : '',
-    children: /*#__PURE__*/_jsx(Layout, {
-      locale: locale,
-      blockletMeta: {
-        title: ' ',
-        ...meta
-      },
-      pcWidth: "100%",
-      pcHeight: "100%",
-      logoUrl: meta && meta.logo && meta.registryUrl ? getBlockletLogoUrl({
-        did: meta.did,
-        baseUrl: meta.registryUrl,
-        logoPath: meta.logo
-      }) : null,
-      stepTip: t('blocklet.component.add'),
-      children: /*#__PURE__*/_jsx(RightContent, {
-        children: step?.body && typeof step.body === 'function' ? step.body() : step.body
-      })
-    })
-  });
-});
-StepContent.propTypes = {
-  meta: PropTypes.any,
-  onStepChange: PropTypes.func.isRequired,
-  isMobile: PropTypes.bool.isRequired
-};
-StepContent.defaultProps = {
-  meta: null
-};
 export default function AddComponent({
   blocklet,
   children
 }) {
   const {
-    t,
-    locale
+    t
   } = useLocaleContext();
-  const [loading, setLoading] = useState(false);
-  const [editingItem, setEditingItem] = useState(null);
-  const [error, setError] = useState('');
-  const [showDialog, setShowDialog] = useState('');
-  const [mountPointHelperText, setMountPointHelperText] = useState('');
-  const {
-    api,
-    ws: {
-      useSubscription
-    },
-    inService,
-    info: nodeInfo
-  } = useNodeContext();
-  const {
-    actions: {
-      refreshBlocklet: refreshApp
-    }
-  } = useBlockletContext();
-  const [purchaseData, setPurchaseData] = useState(null);
-  const [isWaitingPurchase, setIsWaitingPurchase] = 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] = useState(initParams);
-  const [activeStep, setActiveStep] = useState(0);
-  const component = useRef({});
-  const stepRef = useRef({});
-  const purchaseRef = useRef({});
+  const [showDialog, setShowDialog] = useState(false);
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const {
-    meta
-  } = component.current;
-  // eslint-disable-next-line no-unused-vars
-  const {
-    setActiveStepByIndex
-  } = stepRef.current || {};
-  const isServerlessMode = nodeInfo.mode === NODE_MODES.SERVERLESS;
-  const updateParams = obj => setParams(x => ({
-    ...x,
-    ...obj
-  }));
-  useEffect(() => {
-    if (params.pathPrefix) {
-      const {
-        errMsg
-      } = validateInput({
-        ...params,
-        pathPrefix: params.pathPrefix,
-        locale
-      });
-      setError(errMsg);
-    }
-  }, [params.pathPrefix]); // eslint-disable-line
-
-  useEffect(() => {
-    if (activeStep === 0) {
-      // reset params, when step change to select component
-      setParams(initParams);
-    }
-  }, [activeStep]); // eslint-disable-line
-
-  const getComponentName = () => {
-    if (component?.current?.meta) {
-      return getDisplayName(component.current);
-    }
-    return '';
-  };
-  const setInstallErrorResult = errorMessage => {
-    const update = _loading => {
-      updateParams({
-        installResultProps: {
-          variant: 'error',
-          title: getComponentName(),
-          subTitle: errorMessage,
-          footer: /*#__PURE__*/_jsx(Button, {
-            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__*/_jsxs(Box, {
-              display: "flex",
-              alignItems: "center",
-              children: [_loading && /*#__PURE__*/_jsx(Spinner, {
-                size: 16,
-                style: {
-                  marginRight: 8
-                }
-              }), t('common.retry')]
-            })
-          })
-        }
-      });
-    };
-    update();
-  };
-  const createBlockletEventHandler = handler => {
-    return b => {
-      if ((b?.meta?.did || b?.meta) === blocklet?.meta?.did) {
-        handler(b);
-      }
-    };
-  };
-  useSubscription(BlockletEvents.statusChange, createBlockletEventHandler(e => {
-    switch (e.status) {
-      case BlockletStatus.upgrading:
-        updateParams({
-          installResultProps: {
-            variant: 'success',
-            title: getComponentName(),
-            subTitle: t('blocklet.component.installSuccessTip')
-          }
-        });
-        break;
-      default:
-    }
-  }), [blocklet?.meta?.did]);
-  useSubscription(BlockletEvents.downloadFailed, createBlockletEventHandler(() => {
-    setInstallErrorResult(t('blocklet.component.installComponentError'));
-  }), [blocklet?.meta?.did]);
-  useSubscription(BlockletEvents.installFailed, createBlockletEventHandler(() => {
-    setInstallErrorResult(t('blocklet.component.installComponentError'));
-  }), [blocklet?.meta?.did]);
+    inService
+  } = useNodeContext();
   const onClose = () => {
-    setLoading(false);
     setShowDialog(false);
-    setParams({});
-    component.current = {};
-  };
-  const onInstall = async payload => {
-    const {
-      pathPrefix: mountPoint,
-      bundleDid,
-      title,
-      componentName = '',
-      componentDid = ''
-    } = params;
-    // eslint-disable-next-line no-shadow
-    const {
-      configs = [],
-      registryUrl,
-      inStore,
-      inputUrl
-    } = component.current?.meta || {};
-    const downloadTokenList = component.current?.downloadTokenList;
-    const url = inStore ? getBlockletMetaUrl(registryUrl, bundleDid) : inputUrl;
-    setLoading(true);
-    const installInput = {
-      rootDid: blocklet.meta.did,
-      url,
-      mountPoint: urlPathFriendly(mountPoint),
-      title,
-      name: componentName,
-      did: componentDid,
-      // if blocklet has config, provide the configs
-      ...(params.hasEnvironmentsStep && configs.length > 0 ? {
-        configs: configs.map(item => {
-          return {
-            ...item,
-            value: params.configsValue[item.key] || ''
-          };
-        })
-      } : {}),
-      ...(downloadTokenList ? {
-        downloadTokenList
-      } : {}),
-      ...payload
-    };
-    try {
-      await api.installComponent({
-        input: installInput
-      });
-      if (registryUrl) {
-        const {
-          teamDid,
-          storeList
-        } = getStoreList({
-          fromBlocklet: inService,
-          nodeInfo,
-          blocklet
-        });
-        const {
-          isNew,
-          decoded
-        } = 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 = formatError(err);
-      Toast.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 = validatePathPrefix({
-      params: {
-        ...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({
-      ...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 ? 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__*/_jsx(Button, {
-          className: "bottom-button",
-          "data-cy": "retry-purchase-component",
-          onClick: () => {
-            updateParams({
-              purchaseResultProps: {}
-            });
-          },
-          children: t('common.retry')
-        })
-      }
-    });
-  };
-  const onSuccessPurchase = ({
-    downloadTokenList
-  }) => {
-    component.current.downloadTokenList = downloadTokenList;
-    setIsWaitingPurchase(false);
-    onNext();
-  };
-  const setConfigValue = ({
-    chooseParams = component.current,
-    componentDid: componentDidValue,
-    isInit = false
-  }) => {
-    // 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?.children || []).filter(x => x.status === 'deleted' && x.meta.bundleDid === bundleDid);
-    const componentDid = componentDidValue || '';
-    const newConfigs = meta.environments?.map(item => {
-      const {
-        name: key,
-        validation,
-        ...rest
-      } = item;
-      const formatItem = {
-        // if the blocklet has validation, provide the validation (fix not inStore)
-        validation: isNil(validation) ? '' : validation
-      };
-      return {
-        ...rest,
-        key,
-        ...formatItem
-      };
-    });
-    component.current = {
-      ...chooseParams,
-      meta: {
-        ...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 = uniqBy(flatten([...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 = getSharedConfigObj(ancestors[0], {
-        configs: componentAllConfigs
-      });
-      const configsValue = {};
-      const configsList = componentAllConfigs.map(item => {
-        const {
-          default: defaultValue,
-          key,
-          ...rest
-        } = item;
-        configsValue[key] = sharedConfigObj[key] || defaultValue;
-        return {
-          ...rest,
-          key,
-          hidden: !!BLOCKLET_CONFIGURABLE_KEY[key]
-        };
-      });
-      doc = {
-        ...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 = {
-        ...doc,
-        pathPrefix: config.mountPoint,
-        title: title || '',
-        componentName: config.meta.name,
-        // use history's environments
-        hasEnvironmentsStep: false
-      };
-    } else {
-      doc = {
-        ...doc,
-        pathPrefix: hasRootPath ? `/${urlPathFriendly(title) || urlPathFriendly(name)}` : '/',
-        title: title || '',
-        componentName: '',
-        hasEnvironmentsStep: component.current.meta?.environments?.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({
-      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__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      children: [params.showFromUrlDialog && /*#__PURE__*/_jsx(InstallFromUrl
-      // 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: ({
-          meta,
-          inputUrl,
-          inStore,
-          registryUrl
-        }) => {
-          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__*/_jsx(SelectStore, {
-        extra: !isServerlessMode ? /*#__PURE__*/_jsxs(Button, {
-          variant: "text",
-          color: "primary",
-          "data-cy": "add-component-from-url",
-          onClick: () => {
-            updateParams({
-              showFromUrlDialog: true
-            });
-          },
-          style: {
-            padding: '0 2px'
-          },
-          children: [/*#__PURE__*/_jsx(AddIcon, {
-            style: {
-              fontSize: 20,
-              marginRight: 4
-            }
-          }), " ", t('blocklet.component.addComponentTip.fromUrl'), ' ']
-        }) : null,
-        loading: loading,
-        onChange: () => {
-          setParams({});
-          component.current = {};
-        },
-        children: ({
-          currentRegistry
-        }) => {
-          return /*#__PURE__*/_jsx(BlockletList, {
-            serverVersion: 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: {
-                  ...chooseParams,
-                  inStore: true // choose from store, must be inStore
-                },
-
-                isInit: true
-              });
-            },
-            handleBlockletRender: ({
-              blocklet: blockletItem,
-              defaultRender
-            }) => {
-              const isChosen = params?.bundleDid && params?.bundleDid === blockletItem?.did;
-              return /*#__PURE__*/_jsxs(StoreBlockletItemWrapper, {
-                children: [isChosen && /*#__PURE__*/_jsx("div", {
-                  className: "check-container",
-                  children: /*#__PURE__*/_jsx(CheckIcon, {
-                    className: "check-icon"
-                  })
-                }), /*#__PURE__*/_jsx("div", {
-                  className: isChosen ? 'choose-blocklet' : '',
-                  style: {
-                    marginLeft: 16
-                  },
-                  children: defaultRender
-                })]
-              });
-            },
-            extraFilter: allBlocklets => {
-              // only use blocklets that are component
-              return 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__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      className: "agreement-wrapper",
-      children: [/*#__PURE__*/_jsx(PageHeader, {
-        title: t('launchBlocklet.introduction'),
-        subTitle: t('blocklet.component.addComponentTip.introduction')
-      }), /*#__PURE__*/_jsx(Agreement, {
-        meta: meta,
-        onClickNext: onNext,
-        handleDescEle: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("p", {
-            children: /*#__PURE__*/_jsx("div", {
-              // eslint-disable-next-line
-              dangerouslySetInnerHTML: {
-                __html: t(`blocklet.component.addComponentTip.${params.requirePurchase ? 'isPurchase' : 'isFree'}`, {
-                  name: getComponentName()
-                })
-              }
-            })
-          }), /*#__PURE__*/_jsx("p", {
-            children: t('blocklet.component.addComponentTip.belowInformation')
-          })]
-        })
-      })]
-    }),
-    cancel: t('common.pre'),
-    confirm: t('launchBlocklet.next'),
-    onCancel,
-    onConfirm: () => {
-      setIsWaitingPurchase(false);
-      onNext();
-    }
-  }, meta && params.requirePurchase && {
-    key: 'purchase',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('common.verifyNFT'), /*#__PURE__*/_jsx(Required, {})]
-    }),
-    body: /*#__PURE__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      className: "flex-align-center",
-      style: {
-        flexDirection: 'column'
-      },
-      children: [!(purchaseRef.current?.getCurrentStep?.() === 2 || isWaitingPurchase) && /*#__PURE__*/_jsx(PageHeaderWrapper, {
-        title: t('common.verifyNFT'),
-        subTitle: t('blocklet.component.addComponentTip.verifyNFT')
-      }), !isEmpty(params.purchaseResultProps) ? /*#__PURE__*/_jsx("div", {
-        className: "flex-align-center flex-justify-center",
-        children: /*#__PURE__*/_jsx(ResultMessage, {
-          ...params.purchaseResultProps
-        })
-      }) : purchaseData && /*#__PURE__*/_jsx(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.current?.getCurrentStep?.() === 2 || isWaitingPurchase,
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onConfirm: () => {
-      if (typeof purchaseRef.current.onNext === 'function') {
-        purchaseRef.current.onNext();
-        setIsWaitingPurchase(true);
-      }
-    },
-    onCancel: () => {
-      onCancel();
-    }
-  }, hasStartEngine(meta) && {
-    key: 'config',
-    name: t('common.config'),
-    error,
-    body: /*#__PURE__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-        title: t('common.config'),
-        subTitle: t('blocklet.component.addComponentTip.config')
-      }), /*#__PURE__*/_jsx(TextField, {
-        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: formatMountPoint(pathPrefix)
-          }));
-        }
-      }), !!error && /*#__PURE__*/_jsx(Alert, {
-        type: "error",
-        style: {
-          width: '100%',
-          marginTop: 8
-        },
-        children: error
-      })]
-    }),
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel,
-    onConfirm: () => {
-      onNext();
-    }
-  }, meta && params?.hasEnvironmentsStep && {
-    key: 'environment',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('common.environment'), " ", params.hasRequiredEnvironments && /*#__PURE__*/_jsx(Required, {})]
-    }),
-    disabled: !!editingItem || params?.hasMissRequiredConfigs,
-    body: () => {
-      return /*#__PURE__*/_jsxs(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-          title: t('common.environment'),
-          subTitle: t('blocklet.component.addComponentTip.environment')
-        }), /*#__PURE__*/_jsx(SchemaForm, {
-          style: {
-            marginTop: -12,
-            width: '100%'
-          },
-          schema: params.configsList,
-          defaultValue: params.configsValue
-          // eslint-disable-next-line
-          ,
-          onChange: (changeValue, {
-            action,
-            currentItem,
-            allValues
-          }) => {
-            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,
-    onConfirm: onNext
-  }, meta && params?.didSpaceCapability && {
-    key: 'didSpace',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceCapability === 'required' && /*#__PURE__*/_jsx(Required, {})]
-    }),
-    disabled: params.didSpaceCapability === 'required' && !params.didSpaceEndpoint,
-    body: () => {
-      return /*#__PURE__*/_jsxs(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-          title: t('blocklet.component.didSpaceConfig'),
-          subTitle: t('blocklet.component.didSpaceConfigTip')
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            mt: '36px',
-            '& > div': {
-              maxWidth: 'unset !important',
-              '& .MuiAutocomplete-root': {
-                maxWidth: 'unset !important'
-              }
-            }
-          },
-          children: /*#__PURE__*/_jsx(SpaceConnector, {
-            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,
-    onConfirm: onNext
-  }, {
-    key: 'install',
-    name: t('common.install'),
-    disabled: false,
-    loading: false,
-    body: /*#__PURE__*/_jsx(TypographyWrapper, {
-      component: "div",
-      className: "flex-justify-center flex-align-center",
-      style: {
-        flexDirection: 'column'
-      },
-      children: isEmpty(params.installResultProps) ? /*#__PURE__*/_jsx(AnimationWaiter, {
-        message: /*#__PURE__*/_jsx(MessageDiv, {
-          children: t('blocklet.component.installingCanCloseWindowTip')
-        }),
-        increaseSpeed: 0.3,
-        messageLoop: false
-      }) : /*#__PURE__*/_jsx("div", {
-        style: {
-          marginTop: 120
-        },
-        children: /*#__PURE__*/_jsx(ResultMessage, {
-          ...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__*/_jsxs(_Fragment, {
     children: [typeof children === 'function' ? children({
-      loading,
       open: onMenuItemClick
     }) : /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onMenuItemClick,
       className: "component-action",
       "data-cy": "action-add-component",
-      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
-        size: 16
-      }) : /*#__PURE__*/_jsx(AddIcon, {
+      children: [/*#__PURE__*/_jsx(AddIcon, {
         style: {
           fontSize: 18,
           marginRight: 5
@@ -1040,63 +70,14 @@ export default function AddComponent({
         if (reason === 'backdropClick') {
           return;
         }
-        steps[0]?.onCancel?.();
+        onClose();
       },
-      showCloseButton: showCloseButton,
+      showCloseButton: true,
       disableEscapeKeyDown: true,
       open: true,
-      actions: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [step.cancel && /*#__PURE__*/_jsx(Button, {
-          onClick: e => {
-            e.stopPropagation();
-            step.onCancel();
-          },
-          disabled: activeStep === steps.length - 2 && loading,
-          color: "inherit",
-          children: step.cancel || t('common.cancel')
-        }), step.confirm && /*#__PURE__*/_jsx(Button, {
-          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__*/_jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
-            children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/_jsx(Spinner, {
-              style: {
-                marginRight: 8
-              },
-              size: 16
-            }), step.confirm]
-          })
-        })]
-      }),
-      children: /*#__PURE__*/_jsx(StepProvider, {
-        steps: steps,
-        mode: "memory",
-        children: /*#__PURE__*/_jsx(StepContent, {
-          ref: stepRef,
-          meta: meta,
-          isMobile: isMobile,
-          onStepChange: newStep => {
-            setActiveStep(newStep);
-          }
-        })
+      children: /*#__PURE__*/_jsx(AddComponentCore, {
+        onClose: onClose,
+        storageKey: inService ? STORAGE_KEY_STORE_BLOCKLET : STORAGE_KEY_STORE_SERVER
       })
     })]
   });
@@ -1110,218 +91,5 @@ AddComponent.defaultProps = {
 };
 const DialogWrapper = styled(Dialog)`
   .MuiDialogContent-root {
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-  }
-
-  .MuiDialogActions-root {
-    padding: 16px 24px;
-  }
-`;
-const TypographyWrapper = styled(Typography)`
-  width: 100%;
-  height: 100%;
-`;
-const RightContent = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  .bottom-button {
-    min-width: 200px;
-  }
-
-  // blocklet-select-side
-  aside {
-    width: 140px;
-  }
-`;
-const isMobileDialogContent = props => {
-  if (props.isMobile) {
-    return `
-          height: calc(100vh - 56px - 64px - 48px);
-        `;
-  }
-  return '';
-};
-const DialogContentWrapper = styled(DialogContentText)`
-  ${({
-  className
-}) => {
-  // mobile extra style
-  if (className === 'mobileStyle') {
-    return `
-      height: 100%;
-
-      & > div{
-        height: 100%;
-      }
-      .root-header {
-        .app-name-content {
-          display: none;
-        }
-      }
-
-
-
-      // content-panel
-      .root-header + div{
-        padding-top: 0;
-        position: relative;
-        & > div {
-          padding-top: 0;
-        }
-      }
-
-      header + div {
-        padding-top: 0;
-      }
-
-      header {
-        .header-title {
-          margin-left: 0;
-        }
-
-        .header-title-name  {
-          max-width: 100% !important;
-        }
-      }
-      `;
-  }
-  return `
-      height: 72vh;
-      position: relative;
-      .root-header {
-        z-index: auto !important;
-        position: fixed !important;
-      }
-      & > div {
-        height: 100%;
-        width: 100%;
-        max-width: 100%;
-        & > div {
-          max-height: unset !important;
-          max-width: 100%;
-          & > div {
-            // left-panel
-            &:first-child {
-              padding-top: 0;
-              // padding-left: 0;
-              width: 25%;
-              min-width: 240px;
-              & > div:first-child {
-                display: none;
-              }
-              // step
-              & > div:last-child {
-                // margin-top: 32px;
-                margin-top: 0;
-              }
-            }
-            // right-panel
-            &:last-child {
-              padding-top: 0;
-              padding-right: 24px;
-              overflow-y: auto;
-              .app-content {
-                padding: 0 0 24px 0;
-              }
-              .button-container {
-                padding-right: 0;
-              }
-            }
-          }
-        }
-      }
-
-    `;
-}}
-
-  & .flex-justify-center {
-    display: flex;
-    justify-content: center;
-  }
-
-  & .flex-align-center {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    ${props => isMobileDialogContent(props)}
-  }
-
-  & .agreement-wrapper {
-    ${props => isMobileDialogContent(props)}
-    max-height: 60vh;
-    .eula-trigger {
-      padding-right: 0;
-    }
-    .next-button {
-      display: none;
-    }
-  }
-
-  & .connect {
-    background: white;
-  }
-`;
-const PageHeaderWrapper = styled(PageHeader)`
-  margin-bottom: 24px;
-`;
-const StoreBlockletItemWrapper = styled.div`
-  position: relative;
-
-  .choose-blocklet {
-    background-color: rgb(236, 251, 253);
-    border-color: rgb(236, 251, 253);
-    border-radius: 8px;
-  }
-
-  .check-container {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 30px;
-    height: 30px;
-    border-radius: 0 0 8px 0;
-    color: ${props => props.theme.palette.common.white};
-    overflow: hidden;
-    transition: all ease 0.3s;
-    &:after {
-      position: absolute;
-      z-index: 0;
-      display: block;
-      width: 0;
-      height: 0;
-      border-top: transparent solid 15px;
-      border-left: transparent solid 15px;
-      border-bottom: ${props => props.theme.palette.primary.main} solid 15px;
-      border-right: ${props => props.theme.palette.primary.main} solid 15px;
-      transition: all ease 0.1s;
-      content: '';
-    }
-
-    .check-icon {
-      position: relative;
-      z-index: 2;
-      margin: 0 1px 1px 0;
-      font-size: 16px;
-      transition: all ease 0.2s;
-    }
-  }
-`;
-const MessageDiv = styled.div`
-  color: ${props => props.theme.palette.primary.main};
-  .msg-before {
-    display: inline-block;
-    color: #aaa;
-    font-size: 14px;
-    margin-right: 6px;
   }
 `;