@abtnode/ux 1.16.7 → 1.16.8-beta-0c0c5eb2

package/lib/blocklet/component/add.js

@@ -550,7 +550,7 @@ function AddComponent(_ref2) {
     if (config) {
       doc = _objectSpread(_objectSpread({}, doc), {}, {
         pathPrefix: config.mountPoint,
-        title: config.meta.title,
+        title: title || '',
         componentName: config.meta.name,
         // use history's environments
         hasEnvironmentsStep: false
@@ -824,22 +824,6 @@ function AddComponent(_ref2) {
             value: (0, _util2.formatMountPoint)(pathPrefix)
           }));
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-        label: t('common.title'),
-        autoComplete: "off",
-        variant: "outlined",
-        fullWidth: true,
-        style: {
-          marginBottom: 32
-        },
-        margin: "normal",
-        value: params.title,
-        onChange: e => {
-          const title = e.target.value;
-          setParams(_objectSpread(_objectSpread({}, params), {}, {
-            title
-          }));
-        }
       }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
         type: "error",
         style: {

package/lib/blocklet/component/environment.js

@@ -35,7 +35,11 @@ const getDescription = (data, t) => {
     description
   } = data;
   if (Object.values(_constant.CHAIN_PROP_MAP).includes(data.key)) {
-    description = "".concat(data.description, " (").concat(t('blocklet.config.sharedToAllComponents'), ")");
+    if (description) {
+      description = "".concat(description, " (").concat(t('blocklet.config.sharedToAllComponents'), ")");
+    } else {
+      description = t('blocklet.config.sharedToAllComponents');
+    }
   }
   return description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
@@ -205,12 +209,12 @@ function ComponentEnvironment(_ref) {
     initialEditValue: 'Value',
     width: 'calc((100% - (96px + 30%)) / 1)',
     render: d => {
-      if (d.secure) {
-        return '******';
-      }
       if (!d.value) {
         return null;
       }
+      if (d.secure) {
+        return '******';
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
         unstyled: true,
         value: d.value,

package/lib/blocklet/component/setting.js

@@ -51,24 +51,6 @@ function ComponentSetting(_ref) {
   if (blocklet.status === 'unknown' && (0, _util.isInstalling)(blocklet.status)) {
     return null;
   }
-  const onSubmitTitle = async value => {
-    setLoading(true);
-    try {
-      setLoading(false);
-      await api.updateComponentTitle({
-        input: {
-          rootDid,
-          did: blocklet.meta.did,
-          title: value
-        }
-      });
-    } catch (err) {
-      setLoading(false);
-      err.message = (0, _util.formatError)(err);
-      _toast.default.error(err.message);
-      throw err;
-    }
-  };
   const onSubmitMountPoint = async value => {
     setLoading(true);
     try {
@@ -99,19 +81,9 @@ function ComponentSetting(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
     component: "div"
   }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       mt: 3,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
-        label: t('common.title'),
-        style: {
-          marginTop: -24
-        },
-        disabled: loading || disabled,
-        loading: loading,
-        required: true,
-        initialValue: blocklet.meta.title,
-        onSubmit: onSubmitTitle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
         label: t('blocklet.component.mountPoint'),
         style: {
           marginTop: -24
@@ -124,7 +96,7 @@ function ComponentSetting(_ref) {
         onChange: handleMountPointChange,
         helperText: mountPointHelperText,
         formatterBeforeSubmit: value => (0, _urlPathFriendly.default)(value)
-      })]
+      })
     })
   }));
 }

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

@@ -159,7 +159,8 @@ function AddDomainAlias(_ref) {
       params: confirmSetting.params,
       onConfirm: confirmSetting.onConfirm,
       onCancel: confirmSetting.onCancel,
-      color: "primary"
+      color: "primary",
+      loading: loading
     })]
   });
 }

package/lib/blocklet/router/action/delete-domain-alias.js

@@ -31,9 +31,6 @@ function DeleteDomainAlias(props) {
   const {
     api
   } = (0, _node.useNodeContext)();
-  if (domain === window.location.hostname) {
-    return '';
-  }
   const onCancel = () => {
     setLoading(false);
     setConfirmSetting(null);

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

@@ -10,6 +10,7 @@ var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon")
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _actions = _interopRequireDefault(require("../../actions"));
 var _deleteDomainAlias = _interopRequireDefault(require("./action/delete-domain-alias"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,6 +24,7 @@ function DomainActions(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const isCurrentDomain = domain.value === window.location.hostname;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
     "data-cy": "domain-actions",
     actions: [
@@ -40,24 +42,29 @@ function DomainActions(_ref) {
           let {
             open
           } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
-            disabled: domain.isProtected,
-            dense: true,
-            onClick: e => {
-              close();
-              open(e);
-            },
-            "data-cy": "action-toggle-block",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-              style: {
-                minWidth: 24,
-                marginRight: 8
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {})
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-              primary: t('common.delete')
-            })]
-          }, "remove");
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+            title: isCurrentDomain ? t('blocklet.router.currentDomainTip') : '',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+                disabled: domain.isProtected || isCurrentDomain,
+                dense: true,
+                onClick: e => {
+                  close();
+                  open(e);
+                },
+                "data-cy": "action-toggle-block",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+                  style: {
+                    minWidth: 24,
+                    marginRight: 8
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {})
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+                  primary: t('common.delete')
+                })]
+              }, "remove")
+            })
+          });
         }
       });
     }]

package/lib/blocklet/storage/add.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _react = require("react");
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onAdd"];
+/**
+ * @typedef {{
+ *  name: string,
+ *  url: string,
+ *  protected?: boolean,
+ * }} SpaceGateway
+ */
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  onAdd: (url: string) => Promise<void> | void,
+ * }} { onAdd, spaceGateways, ...rest }
+ * @return {*}
+ */
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 AddDIDSpacesGateWay(_ref) {
+  let {
+      onAdd
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [url, setUrl] = (0, _react.useState)('');
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const onConfirm = async () => {
+    try {
+      setLoading(true);
+      await onAdd(url);
+      setOpen(false);
+    } catch (err) {
+      const _errorMessage = "".concat(t('storage.spaces.gateway.add.failed', locale), ": ").concat((0, _util.formatError)(err));
+      setErrorMessage(_errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({
+      size: "small",
+      color: "primary",
+      variant: "outlined",
+      onClick: () => setOpen(true)
+    }, rest), {}, {
+      children: t('storage.spaces.gateway.add.title')
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      title: t('storage.spaces.gateway.add.title'),
+      fullWidth: true,
+      maxWidth: "md",
+      open: open,
+      onClose: () => setOpen(false),
+      PaperProps: {
+        style: {
+          minHeight: 'auto'
+        }
+      },
+      actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: e => {
+            e.stopPropagation();
+            setOpen(false);
+          },
+          color: "inherit",
+          children: t('common.cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          onClick: e => {
+            e.stopPropagation();
+            onConfirm();
+          },
+          color: "primary",
+          "data-cy": "install-blocklet-next-step",
+          disabled: loading || !url,
+          variant: "contained",
+          autoFocus: true,
+          children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 16
+          }), t('common.confirm')]
+        })]
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          paddingTop: 12,
+          overflowY: 'hidden'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+          component: "div",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "div",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+              label: t('storage.spaces.gateway.add.label'),
+              autoComplete: "off",
+              variant: "outlined",
+              name: "url",
+              fullWidth: true,
+              value: url,
+              onChange: e => {
+                setErrorMessage(null);
+                setUrl(e.target.value);
+              },
+              disabled: loading,
+              onKeyPress: async e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  await onConfirm();
+                }
+              }
+            })
+          })
+        })
+      }), !!errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "error",
+        style: {
+          width: '100%'
+        },
+        children: errorMessage
+      })]
+    })]
+  });
+}
+AddDIDSpacesGateWay.propTypes = {
+  onAdd: _propTypes.default.func
+};
+AddDIDSpacesGateWay.defaultProps = {
+  onAdd: async () => undefined
+};
+var _default = AddDIDSpacesGateWay;
+exports.default = _default;

package/lib/blocklet/storage/connect.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _material = require("@mui/material");
+var _lodash = require("lodash");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _axios = _interopRequireDefault(require("axios"));
+var _util = require("@blocklet/meta/lib/util");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _blocklet = require("../../../lib/contexts/blocklet");
+var _spaces = require("../../util/spaces");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+                                                                                                                                                                                                                                                                                                                                                                                           * @typedef {{
+                                                                                                                                                                                                                                                                                                                                                                                           *  name: string,
+                                                                                                                                                                                                                                                                                                                                                                                           *  url: string,
+                                                                                                                                                                                                                                                                                                                                                                                           *  protected?: boolean,
+                                                                                                                                                                                                                                                                                                                                                                                           *  endpoint?: string,
+                                                                                                                                                                                                                                                                                                                                                                                           * }} SpaceGateway
+                                                                                                                                                                                                                                                                                                                                                                                           */ /**
+                                                                                                                                                                                                                                                                                                                                                                                               *
+                                                                                                                                                                                                                                                                                                                                                                                               *
+                                                                                                                                                                                                                                                                                                                                                                                               * @param {import('@abtnode/client').BlockletState} blocklet
+                                                                                                                                                                                                                                                                                                                                                                                               * @return {*}
+                                                                                                                                                                                                                                                                                                                                                                                               */
+function useBlockletInfo(blocklet) {
+  var _blocklet$site, _blocklet$site$domain, _blocklet$site$domain2;
+  const {
+    appDid
+  } = blocklet;
+  const appName = (0, _util.getAppName)(blocklet);
+  const appDescription = (0, _util.getAppDescription)(blocklet);
+  const appUrls = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$site = blocklet.site) === null || _blocklet$site === void 0 ? void 0 : (_blocklet$site$domain = _blocklet$site.domainAliases) === null || _blocklet$site$domain === void 0 ? void 0 : (_blocklet$site$domain2 = _blocklet$site$domain.sort((a, b) => {
+    if (a.accessibility.accessible && b.accessibility.accessible) {
+      return +a.isProtected - +b.isProtected;
+    }
+    return +b.accessibility.accessible - +a.accessibility.accessible;
+  })) === null || _blocklet$site$domain2 === void 0 ? void 0 : _blocklet$site$domain2.map(domainAlias => {
+    var _domainAlias$domainSt;
+    const protocol = domainAlias !== null && domainAlias !== void 0 && (_domainAlias$domainSt = domainAlias.domainStatus) !== null && _domainAlias$domainSt !== void 0 && _domainAlias$domainSt.isHttps ? 'https://' : 'http://';
+    const value = domainAlias === null || domainAlias === void 0 ? void 0 : domainAlias.value;
+    return "".concat(protocol).concat(value);
+  }).filter(Boolean);
+  const appUrl = appUrls === null || appUrls === void 0 ? void 0 : appUrls[0];
+  const scopes = 'list:object read:object write:object';
+  const referrer = window.location.href;
+
+  // 授权的时候提供 appUrl, 因为 appUrl 可能很久都拿不到值，所以加一个 isReady 来表示就绪状态
+  return {
+    appDid,
+    appName,
+    appDescription,
+    appUrl,
+    scopes,
+    referrer,
+    isReady: Boolean(appUrl)
+  };
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  spaceGateway: SpaceGateway,
+ *  onConnect: (spaceGateway: SpaceGateway, endpoint: string) => void | Promise<void>
+ * }} { spaceGateway, onConnect }
+ * @return {React.Component}
+ */
+function ConnectDIDSpaces(_ref) {
+  let {
+    spaceGateway,
+    onConnect
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    info
+  } = (0, _node.useNodeContext)();
+  const nodeDid = info.did;
+  const {
+    url
+  } = spaceGateway;
+  const [loading, setLoading] = (0, _react.useState)(false);
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    appDid,
+    appName,
+    appDescription,
+    appUrl,
+    scopes,
+    referrer,
+    isReady
+  } = useBlockletInfo(blocklet);
+  const [authorizeConnect, setAuthorizeConnect] = (0, _react.useState)({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    messages: {
+      title: t('storage.spaces.authorize.title', {
+        appName
+      }, locale),
+      scan: t('storage.spaces.authorize.scan', {
+        appName
+      }, locale),
+      confirm: '',
+      success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        gutterBottom: true,
+        children: t('storage.spaces.authorize.success')
+      })
+    },
+    extraParams: {
+      appDid,
+      appName,
+      appDescription,
+      scopes,
+      appUrl,
+      referrer,
+      nodeDid
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+    }
+  });
+  const onConnectSuccess = async (response, decrypt) => {
+    setTimeout(async () => {
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+      const endpoint = decrypt(response.endpoint);
+      await onConnect(spaceGateway, endpoint);
+      refreshBlocklet();
+    }, 3000);
+  };
+  const handleOnClick = async () => {
+    try {
+      setLoading(true);
+      if ((0, _lodash.isEmpty)(url)) {
+        _toast.default.error(t('storage.spaces.addressCannotEmpty', locale));
+        return;
+      }
+
+      // 我们已经有 endpoint && 权限还在 的话，就无需 connect 了
+      if (await (0, _spaces.hasPermissionByEndpoint)(spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.endpoint)) {
+        await onConnect(spaceGateway, spaceGateway.endpoint);
+        return;
+      }
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: true,
+        prefix: (0, _urlJoin.default)(url, 'space/api/did'),
+        baseUrl: new URL(url).origin,
+        checkFn: _axios.default.create({
+          baseURL: (0, _urlJoin.default)(url, 'space')
+        }).get
+      }));
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      size: "small",
+      loading: !isReady || loading,
+      color: "secondary",
+      variant: "contained",
+      onClick: handleOnClick,
+      children: t('storage.spaces.gateway.connectTo')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeConnect.prefix,
+      open: authorizeConnect.open,
+      popup: true,
+      action: authorizeConnect.action,
+      baseUrl: authorizeConnect.baseUrl,
+      checkFn: authorizeConnect.checkFn,
+      onSuccess: onConnectSuccess,
+      onClose: authorizeConnect.onClose,
+      checkTimeout: authorizeConnect.checkTimeout,
+      extraParams: authorizeConnect.extraParams,
+      messages: authorizeConnect.messages,
+      locale: locale
+    })]
+  });
+}
+ConnectDIDSpaces.propTypes = {
+  spaceGateway: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    url: _propTypes.default.string.isRequired,
+    protected: _propTypes.default.bool,
+    endpoint: _propTypes.default.string
+  }).isRequired,
+  onConnect: _propTypes.default.func
+};
+ConnectDIDSpaces.defaultProps = {
+  onConnect: async () => undefined
+};
+var _default = ConnectDIDSpaces;
+exports.default = _default;