@abtnode/ux 1.16.19-beta-630ac853 → 1.16.19-beta-626e4d43

package/es/subscription.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import { useRef } from 'react';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import useSetState from 'react-use/lib/useSetState';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { formatPrettyMsLocale, getAsset, getAssetExpiration, getSubscriptionURL } from './util';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,6 +18,21 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
 const DEFAULT_LAUNCHER_URL = 'https://launcher.arcblock.io/'; // 兼容: 旧版本的 blocklet.controller 没有 launcherUrl 字段
 
+// eslint-disable-next-line react/prop-types
+function ChipLabel({
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/_jsx(AccessTimeIcon, {
+      fontSize: "small"
+    }), children]
+  });
+}
 function Subscription({
   launcherUrl,
   chainHost,
@@ -33,10 +49,12 @@ function Subscription({
     popoverAnchorEl: null
   });
   const iframeRef = useRef(null);
+  const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
   const {
     sx = {},
     ...rest
   } = props;
+  const typoKey = isMobile ? 'mobile' : 'desktop';
   const asyncState = useAsyncRetry(async () => {
     const [asset, subscriptionURL] = await Promise.all([getAsset(chainHost, nftId), getSubscriptionURL({
       launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
@@ -49,24 +67,26 @@ function Subscription({
     };
   }, [locale]);
   if (asyncState.loading) {
-    return /*#__PURE__*/_jsxs(Box, {
+    return /*#__PURE__*/_jsx(Chip, {
+      label: /*#__PURE__*/_jsxs(ChipLabel, {
+        children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/_jsx(CircularProgress, {
+          size: 16
+        })]
+      }),
+      variant: "success",
       sx: {
-        display: 'flex',
-        alignItems: 'center',
-        color: 'grey',
-        gap: 1,
+        cursor: 'pointer',
         ...sx
       },
-      ...rest,
-      children: [/*#__PURE__*/_jsx(CircularProgress, {
-        size: 16
-      }), t('expiration.loading')]
+      ...rest
     });
   }
   if (asyncState.error) {
     console.error(asyncState.error);
     return /*#__PURE__*/_jsx(Chip, {
-      label: t('expiration.loadFailed'),
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: t(`expiration.${typoKey}.loadFailed`)
+      }),
       color: "error",
       variant: "success",
       sx: {
@@ -99,23 +119,14 @@ function Subscription({
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Chip, {
-      label: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/_jsx(AccessTimeIcon, {
-          sx: {
-            mr: '4px'
-          },
-          fontSize: "small"
-        }), t(`expiration.tips.${status}`, {
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: t(`expiration.${typoKey}.tips.${status}`, {
           validity: prettyMs(validityMs, {
             locale: formatPrettyMsLocale(locale),
             compact: true,
             verbose: true
           })
-        })]
+        })
       }),
       color: status,
       variant: status !== 'success' ? 'contained' : 'outlined',

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

@@ -341,6 +341,7 @@ function AddComponentCore(_ref3) {
     component.current = {};
     onClose();
   };
+  const alreadyInstalled = did => ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.children) || []).some(x => x.meta.did === did);
   const onInstall = async payload => {
     var _component$current2, _component$current3;
     const {
@@ -538,7 +539,7 @@ function AddComponentCore(_ref3) {
     } = meta;
 
     // deleted history list
-    const list = (((_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.children) || []).filter(x => x.status === 'deleted' && x.meta.bundleDid === bundleDid);
+    const deletedList = (((_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.children) || []).filter(x => x.status === 'deleted' && x.meta.bundleDid === bundleDid);
     const componentDid = componentDidValue || '';
     const newConfigs = (_meta$environments = meta.environments) === null || _meta$environments === void 0 ? void 0 : _meta$environments.map(item => {
       const {
@@ -623,20 +624,27 @@ function AddComponentCore(_ref3) {
     const hasRootPath = blocklet.children.some(x => x.mountPoint === '/');
 
     // use deleted history
-    const config = list.find(x => x.meta.bundleDid === bundleDid);
-    if (config) {
+    const deletedConfig = deletedList.find(x => x.meta.bundleDid === bundleDid);
+    const installedConfig = blocklet.children.find(x => x.meta.bundleDid === bundleDid);
+    doc.title = title || '';
+    if (deletedConfig) {
       doc = _objectSpread(_objectSpread({}, doc), {}, {
-        pathPrefix: config.mountPoint || '',
-        title: title || '',
-        componentName: config.meta.name,
+        pathPrefix: deletedConfig.mountPoint || '',
+        componentName: deletedConfig.meta.name,
         // use history's environments
         hasEnvironmentsStep: false
       });
+    } else if (installedConfig) {
+      doc = _objectSpread(_objectSpread({}, doc), {}, {
+        pathPrefix: installedConfig.mountPoint || '',
+        componentName: installedConfig.meta.name,
+        // use current's environments
+        hasEnvironmentsStep: false
+      });
     } else {
       var _component$current$me, _component$current$me2;
       doc = _objectSpread(_objectSpread({}, doc), {}, {
         pathPrefix: hasRootPath ? "/".concat((0, _urlPathFriendly.default)(title) || (0, _urlPathFriendly.default)(name)) : '/',
-        title: title || '',
         componentName: '',
         hasEnvironmentsStep: ((_component$current$me = component.current.meta) === null || _component$current$me === void 0 ? void 0 : (_component$current$me2 = _component$current$me.environments) === null || _component$current$me2 === void 0 ? void 0 : _component$current$me2.length) > 0
       });
@@ -861,7 +869,7 @@ function AddComponentCore(_ref3) {
     onCancel: () => {
       _onCancel();
     }
-  }, (0, _util.hasStartEngine)(meta) && {
+  }, (0, _util.hasStartEngine)(meta) && !alreadyInstalled(meta.did) && {
     key: 'config',
     name: t('common.config'),
     error,
@@ -909,7 +917,7 @@ function AddComponentCore(_ref3) {
     onConfirm: () => {
       _onNext();
     }
-  }, meta && (params === null || params === void 0 ? void 0 : params.hasEnvironmentsStep) && {
+  }, meta && !alreadyInstalled(meta.did) && (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, {})]
@@ -955,7 +963,7 @@ function AddComponentCore(_ref3) {
     confirm: t('common.next'),
     onCancel: _onCancel,
     onConfirm: _onNext
-  }, meta && (params === null || params === void 0 ? void 0 : params.didSpaceCapability) && {
+  }, meta && !alreadyInstalled(meta.did) && (params === null || params === void 0 ? void 0 : params.didSpaceCapability) && {
     key: 'didSpace',
     name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceCapability === 'required' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
@@ -995,7 +1003,7 @@ function AddComponentCore(_ref3) {
     onConfirm: _onNext
   }, {
     key: 'install',
-    name: t('common.install'),
+    name: alreadyInstalled(meta === null || meta === void 0 ? void 0 : meta.did) ? t('common.upgrade') : t('common.install'),
     disabled: false,
     loading: false,
     body: /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyWrapper, {

package/lib/blocklet/component/domain-list.js

@@ -74,13 +74,20 @@ function DomainListWithPermission(props) {
     loadingRuntimeInfo: loadingRuntimeInfo
   }));
 }
+DomainListWithPermission.propTypes = {
+  listOnly: _propTypes.default.bool
+};
+DomainListWithPermission.defaultProps = {
+  listOnly: false
+};
 function DomainList(_ref) {
   var _blocklet$site2, _blocklet$environment, _blocklet$environment2, _blocklet$meta;
   let {
     hasPermission,
     blocklet,
     loadingRuntimeInfo,
-    inService
+    inService,
+    listOnly
   } = _ref;
   const {
     t
@@ -115,49 +122,51 @@ function DomainList(_ref) {
     }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      className: "title first",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        children: t('common.domain')
-      }), hasMutatePermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_addDomainAlias.default, {
-        id: site.id,
-        title: t('router.domain.add.title'),
-        teamDid: (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did,
-        appId: blocklet.appPid,
-        appPk: appPk,
-        systemDomains: systemDomains === null || systemDomains === void 0 ? void 0 : systemDomains.map(x => x.value),
-        children: _ref2 => {
-          let {
-            open
-          } = _ref2;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-            style: {
-              marginLeft: 16
-            },
-            variant: "contained",
-            color: "primary",
-            "data-cy": "add-domain-alias",
-            onClick: open,
-            disabled: (0, _util.isInProgress)(blocklet.status),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+    children: [!listOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "title first",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          children: t('common.domain')
+        }), hasMutatePermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_addDomainAlias.default, {
+          id: site.id,
+          title: t('router.domain.add.title'),
+          teamDid: (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did,
+          appId: blocklet.appPid,
+          appPk: appPk,
+          systemDomains: systemDomains === null || systemDomains === void 0 ? void 0 : systemDomains.map(x => x.value),
+          children: _ref2 => {
+            let {
+              open
+            } = _ref2;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
               style: {
-                fontSize: '1.3em',
-                marginRight: 4
-              }
-            }), t('common.add')]
-          });
-        }
+                marginLeft: 16
+              },
+              variant: "contained",
+              color: "primary",
+              "data-cy": "add-domain-alias",
+              onClick: open,
+              disabled: (0, _util.isInProgress)(blocklet.status),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                style: {
+                  fontSize: '1.3em',
+                  marginRight: 4
+                }
+              }), t('common.add')]
+            });
+          }
+        })]
+      }), (0, _util.isAccessible)(blocklet.status) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mt: 1.5,
+        mb: 1.5,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+          severity: "warning",
+          children: t('blocklet.router.noRunning')
+        })
       })]
-    }), (0, _util.isAccessible)(blocklet.status) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      mt: 1.5,
-      mb: 1.5,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        severity: "warning",
-        children: t('blocklet.router.noRunning')
-      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       sx: {
         display: 'flex',
@@ -272,11 +281,13 @@ DomainList.propTypes = {
   hasPermission: _propTypes.default.bool,
   blocklet: _propTypes.default.object.isRequired,
   loadingRuntimeInfo: _propTypes.default.bool,
-  inService: _propTypes.default.bool.isRequired
+  inService: _propTypes.default.bool.isRequired,
+  listOnly: _propTypes.default.bool
 };
 DomainList.defaultProps = {
   hasPermission: false,
-  loadingRuntimeInfo: false
+  loadingRuntimeInfo: false,
+  listOnly: false
 };
 function DomainLink(_ref3) {
   let {

package/lib/blocklet/component/environment.js

@@ -93,14 +93,16 @@ function ComponentEnvironment(_ref) {
       return;
     }
     data.custom = true;
-    const result = await node.api.configBlocklet({
-      input: {
-        did: dids,
-        configs: [data]
-      }
-    });
-    if (result.code === 'ok') {
+    try {
+      const result = await node.api.configBlocklet({
+        input: {
+          did: dids,
+          configs: [data]
+        }
+      });
       onConfigChanged(result.blocklet);
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onEditConfig = async (newData, oldData) => {
@@ -138,9 +140,7 @@ function ComponentEnvironment(_ref) {
           configs
         }
       });
-      if (result.code === 'ok') {
-        onConfigChanged(result.blocklet);
-      }
+      onConfigChanged(result.blocklet);
     } catch (err) {
       _Toast.default.error((0, _util2.formatError)(err));
     }
@@ -154,17 +154,19 @@ function ComponentEnvironment(_ref) {
       _Toast.default.error('Only key of custom env can be changed');
       return;
     }
-    const result = await node.api.configBlocklet({
-      input: {
-        did: dids,
-        configs: [{
-          key: data.key,
-          custom: true
-        }]
-      }
-    });
-    if (result.code === 'ok') {
+    try {
+      const result = await node.api.configBlocklet({
+        input: {
+          did: dids,
+          configs: [{
+            key: data.key,
+            custom: true
+          }]
+        }
+      });
       onConfigChanged(result.blocklet);
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
 

package/lib/blocklet/component/index.js

@@ -139,7 +139,7 @@ const getComponentName = (componentId, app) => {
   return names.join(' / ');
 };
 function ComponentItem(_ref) {
-  var _blocklet$dependents, _blocklet$meta$resour, _blocklet$dependents2, _blocklet$dependents3;
+  var _blocklet$dependents, _blocklet$meta$resour, _blocklet$dependents2, _blocklet$meta, _blocklet$dependents3;
   let {
     blocklet,
     ancestors,
@@ -299,26 +299,39 @@ function ComponentItem(_ref) {
         ancestors: ancestors
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         ml: "16px",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          className: "component-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "component-header",
           onClick: () => setComponentInfo(blocklet),
-          children: (0, _util.getDisplayName)(blocklet, true)
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "component-name",
+            children: (0, _util.getDisplayName)(blocklet, true)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "component-version",
+            children: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
           alignItems: "center",
-          children: [!(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_resourceType.default, {
-            blocklet: blocklet
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+          sx: {
+            mt: '2px',
+            ml: -0.5
+          },
+          children: [status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
             style: {
               marginLeft: 4
             },
-            mode: blocklet.mode || ''
-          }), status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
+            status: status,
+            source: blocklet.source
+          }), !(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_resourceType.default, {
             style: {
               marginLeft: 4
             },
-            status: status,
-            source: blocklet.source
+            blocklet: blocklet
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+            style: {
+              marginLeft: 4
+            },
+            mode: blocklet.mode || ''
           }), !!((_blocklet$dependents3 = blocklet.dependents) !== null && _blocklet$dependents3 !== void 0 && _blocklet$dependents3.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
             title: ["".concat(t('common.dependents'), ": "), blocklet.dependents.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               pl: 1,
@@ -517,7 +530,7 @@ ComponentItem.defaultProps = {
   app: null
 };
 const StyledBadge = (0, _styled.default)(_Badge.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .BaseBadge-badge {\n    top: ", "px;\n    right: ", "px;\n  }\n"])), props => props.top * 8 || 6, props => props.right * 8 || 6);
-const StyledComponentRow = (0, _styled.default)(_Box.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .component-name {\n    color: #222;\n    font-size: 16px;\n    cursor: pointer;\n  }\n"])));
+const StyledComponentRow = (0, _styled.default)(_Box.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .component-header {\n    display: flex;\n    align-items: center;\n    align-items: flex-end;\n    cursor: pointer;\n  }\n  .component-name {\n    color: #222;\n    font-size: 16px;\n  }\n  .component-version {\n    color: #999;\n    font-size: 12px;\n    margin-left: 4px;\n    transform: translateY(-1px);\n  }\n"])));
 function BlockletComponent(_ref4) {
   let {
       blocklet,

package/lib/blocklet/router/add-domain.js

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = AddDomain;
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _Diamond = _interopRequireDefault(require("@mui/icons-material/Diamond"));
-var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
+var _trim = _interopRequireDefault(require("lodash/trim"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
@@ -25,7 +23,7 @@ var _api = require("../../util/api");
 var _dnsTip = _interopRequireDefault(require("./dns-tip"));
 var _util3 = require("./util");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["siteId", "teamDid", "cnameDomain", "defaultCustomDomain", "onInputDomain", "appId", "appPk", "onSuccess"];
+const _excluded = ["siteId", "teamDid", "cnameDomain", "defaultCustomDomain", "onInputDomain", "appId", "appPk", "onSuccess", "disabled", "autoFocus"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -35,7 +33,6 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 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 AddDomain(_ref) {
-  var _domainTypes$state$ty;
   let {
       siteId,
       teamDid,
@@ -44,10 +41,11 @@ function AddDomain(_ref) {
       onInputDomain,
       appId,
       appPk,
-      onSuccess
+      onSuccess,
+      disabled,
+      autoFocus
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const theme = (0, _useTheme.default)();
   const {
     t,
     locale
@@ -101,23 +99,19 @@ function AddDomain(_ref) {
   const domainTypes = {
     inputDomain: {
       name: t('router.domainAlias.inputDomain'),
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {}),
-      component: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-          style: {
-            marginTop: '8px'
-          },
           label: t('router.domainAlias.add.domainDescription'),
           helperText: state.error || t('router.domainAlias.add.helperText'),
           inputProps: {
             'data-cy': 'domain-name-input'
           },
           fullWidth: true,
+          disabled: disabled,
           value: state.domain,
           onChange: e => {
-            const {
-              value
-            } = e.target;
+            var _e$target;
+            const value = (0, _trim.default)((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
             setState({
               domain: value
             });
@@ -131,7 +125,14 @@ function AddDomain(_ref) {
               error: errMessage
             });
           },
-          autoFocus: true,
+          autoFocus: autoFocus,
+          onBlur: () => {
+            if (!state.domain) {
+              setState({
+                error: null
+              });
+            }
+          },
           size: "small",
           variant: "outlined",
           error: !!state.error
@@ -148,11 +149,7 @@ function AddDomain(_ref) {
   if (info !== null && info !== void 0 && info.nftDomainUrl) {
     domainTypes.nftDomain = {
       name: t('router.domainAlias.nftDomain'),
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {}),
-      component: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        sx: {
-          marginTop: '12px'
-        },
+      component: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           sx: {
             maxWidth: '640px',
@@ -181,6 +178,7 @@ function AddDomain(_ref) {
           sx: {
             marginTop: '8px'
           },
+          disabled: disabled,
           onClick: () => setState({
             showNFTDomainAuth: true
           }),
@@ -223,36 +221,28 @@ function AddDomain(_ref) {
     }
     return -1;
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       sx: {
         display: 'flex',
+        flexDirection: 'column',
         justifyContent: 'flex-start',
-        gap: '16px'
+        gap: '1em'
       },
-      children: inputDomainTypes.map(type => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        sx: {
-          width: '128px',
-          height: '64px',
-          padding: '8px',
-          cursor: 'pointer',
-          borderRadius: '8px',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
-          color: type === state.type ? theme.palette.primary.main : theme.palette.common.main,
-          border: "1px solid ".concat(type === state.type ? theme.palette.primary.main : '#E0E0E0')
-        },
-        onClick: () => setState({
-          type
-        }),
-        children: [domainTypes[type].icon, domainTypes[type].name]
-      }, type))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      marginTop: "12px",
-      children: (_domainTypes$state$ty = domainTypes[state.type]) === null || _domainTypes$state$ty === void 0 ? void 0 : _domainTypes$state$ty.component
-    })]
+      children: inputDomainTypes.map((type, index) => {
+        var _domainTypes$type, _domainTypes$type2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: "".concat(t("optionsOrder.".concat(index + 1)), ": ").concat((_domainTypes$type = domainTypes[type]) === null || _domainTypes$type === void 0 ? void 0 : _domainTypes$type.name)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              marginTop: '8px'
+            },
+            children: (_domainTypes$type2 = domainTypes[type]) === null || _domainTypes$type2 === void 0 ? void 0 : _domainTypes$type2.component
+          })]
+        }, type);
+      })
+    })
   }));
 }
 AddDomain.propTypes = {
@@ -263,12 +253,16 @@ AddDomain.propTypes = {
   onInputDomain: _propTypes.default.func,
   onSuccess: _propTypes.default.func,
   appId: _propTypes.default.string,
-  appPk: _propTypes.default.string
+  appPk: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool
 };
 AddDomain.defaultProps = {
   defaultCustomDomain: '',
   onInputDomain: _noop.default,
   onSuccess: _noop.default,
   appId: '',
-  appPk: ''
+  appPk: '',
+  disabled: false,
+  autoFocus: true
 };