@abtnode/ux 1.16.18-beta-7aa6be5a → 1.16.18-beta-aa01bd8e

package/es/blocklet/component/add-component-core.js

@@ -0,0 +1,1317 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useState, useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+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 Spinner from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+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 { 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 { 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 getConfirmText = ({
+  params,
+  blocklet,
+  t
+}) => {
+  const name = params.title || params.name;
+  if (!name) {
+    return t('common.next');
+  }
+  const exist = (blocklet?.children || []).find(x => x.meta.bundleDid === params.bundleDid);
+  if (!exist) {
+    return t('blocklet.component.addNext', {
+      name
+    });
+  }
+  return t('blocklet.component.upgradeNext', {
+    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(ContentWrapper, {
+    component: "div",
+    className: isMobile ? 'mobileStyle' : '',
+    sx: {
+      height: '100%'
+    },
+    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
+};
+const postInstalledMessage = componentDid => {
+  // send event to parent window
+  window.parent.postMessage({
+    event: 'component.installed',
+    componentDid
+  }, '*');
+};
+export default function AddComponentCore({
+  onClose,
+  mode,
+  stores,
+  resourceType,
+  storageKey
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+  const [error, setError] = useState('');
+  const [mountPointHelperText, setMountPointHelperText] = useState('');
+  const {
+    api,
+    ws: {
+      useSubscription
+    },
+    inService,
+    info: nodeInfo
+  } = useNodeContext();
+  const {
+    blocklet,
+    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 isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
+  const routerParams = useParams();
+  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')
+          }
+        });
+        postInstalledMessage(routerParams.componentDid);
+        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]);
+  const onOver = () => {
+    setLoading(false);
+    setParams({});
+    component.current = {};
+    onClose();
+  };
+  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, {
+        stores: stores,
+        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 = {};
+        },
+        storageKey: storageKey,
+        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,
+            resourceType: resourceType,
+            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
+                })]
+              });
+            }
+          });
+        }
+      })]
+    }),
+    cancel: mode === 'embed' ? undefined : t('common.cancel'),
+    confirm: getConfirmText({
+      params,
+      blocklet,
+      t
+    }),
+    onCancel: onOver,
+    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'),
+    onConfirm: () => {
+      postInstalledMessage(routerParams.componentDid);
+      onOver();
+      // 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 isDisabled = () => {
+    if (loading || step.error || !params.bundleDid) {
+      return true;
+    }
+
+    // after select component and confirm license
+    if (activeStep > 1) {
+      return !params.pathPrefix;
+    }
+    return false;
+  };
+  if (!blocklet) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    sx: isMobile ? {
+      width: '100%',
+      height: window.innerHeight
+    } : {
+      width: '100%',
+      height: mode === 'embed' ? '100vh' : '72vh'
+    },
+    children: [/*#__PURE__*/_jsx(StepProvider, {
+      steps: steps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(StepContent, {
+        ref: stepRef,
+        meta: meta,
+        isMobile: isMobile,
+        onStepChange: newStep => {
+          setActiveStep(newStep);
+        }
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "action-bar",
+      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]
+        })
+      })]
+    })]
+  });
+}
+AddComponentCore.propTypes = {
+  onClose: PropTypes.func,
+  mode: PropTypes.oneOf(['normal', 'embed']),
+  stores: PropTypes.arrayOf(PropTypes.string),
+  resourceType: PropTypes.string,
+  storageKey: PropTypes.string
+};
+AddComponentCore.defaultProps = {
+  onClose: () => {},
+  mode: 'normal',
+  stores: [],
+  resourceType: '',
+  storageKey: ''
+};
+const Wrapper = styled(Box)`
+  .action-bar {
+    display: flex;
+    justify-content: flex-end;
+    position: sticky;
+    bottom: 0;
+    padding-top: 16px;
+    z-index: 100;
+    width: 100%;
+    background: #fff;
+    border-top: 1px solid #eee;
+  }
+`;
+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 isMobileContent = props => {
+  if (props.isMobile) {
+    return `
+          height: calc(100vh - 56px - 64px - 48px);
+        `;
+  }
+  return '';
+};
+const ContentWrapper = styled(Box)`
+  ${({
+  className
+}) => {
+  // mobile extra style
+  if (className === 'mobileStyle') {
+    return `
+      & > 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 `
+      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: 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: 0px;
+              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 => isMobileContent(props)}
+  }
+
+  & .agreement-wrapper {
+    ${props => isMobileContent(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;
+  }
+`;