@abtnode/ux 1.16.19-beta-7d3ef675 → 1.16.19-beta-ba354e01

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

@@ -43,7 +43,8 @@ var _agreement = _interopRequireDefault(require("../agreement"));
 var _installFromUrl = _interopRequireDefault(require("../install-from-url"));
 var _selectStore = _interopRequireDefault(require("./select-store"));
 var _storeBlockletList = _interopRequireDefault(require("./store-blocklet-list"));
-var _spaceConnector = _interopRequireDefault(require("./space-connector"));
+var _didSpace = _interopRequireDefault(require("./did-space"));
+var _configSpace = require("../../contexts/config-space");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 const _excluded = ["name", "validation"],
@@ -254,6 +255,13 @@ function AddComponentCore(_ref3) {
     }
   }, [activeStep]); // eslint-disable-line
 
+  const refreshDidSpaceEndpoint = () => {
+    var _getDIDSpaceEndpoint;
+    const didSpaceEndpoint = (_getDIDSpaceEndpoint = getDIDSpaceEndpoint(blocklet)) !== null && _getDIDSpaceEndpoint !== void 0 ? _getDIDSpaceEndpoint : '';
+    updateParams({
+      didSpaceEndpoint
+    });
+  };
   const getComponentName = () => {
     var _component$current;
     if (component !== null && component !== void 0 && (_component$current = component.current) !== null && _component$current !== void 0 && _component$current.meta) {
@@ -316,6 +324,10 @@ function AddComponentCore(_ref3) {
         break;
       default:
     }
+    const didSpaceEndpoint = getDIDSpaceEndpoint(blocklet);
+    updateParams(p => _objectSpread(_objectSpread({}, p), {}, {
+      didSpaceEndpoint
+    }));
   }), [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did]);
   useSubscription(_constant.BlockletEvents.downloadFailed, createBlockletEventHandler(() => {
     setInstallErrorResult(t('blocklet.component.installComponentError'));
@@ -424,7 +436,7 @@ function AddComponentCore(_ref3) {
       errMsg
     };
   };
-  const onNext = async payload => {
+  const _onNext = async payload => {
     const {
       errMsg
     } = validateInput(_objectSpread(_objectSpread({}, params), {}, {
@@ -503,7 +515,7 @@ function AddComponentCore(_ref3) {
     } = _ref4;
     component.current.downloadTokenList = downloadTokenList;
     setIsWaitingPurchase(false);
-    onNext();
+    _onNext();
   };
   const setConfigValue = _ref5 => {
     var _blocklet$settings, _meta$environments;
@@ -683,7 +695,7 @@ function AddComponentCore(_ref3) {
           updateParams({
             showFromUrlDialog: false
           });
-          onNext();
+          _onNext();
         },
         handleText: {
           title: t('blocklet.component.addComponentTip.fromUrl'),
@@ -772,7 +784,7 @@ function AddComponentCore(_ref3) {
     }),
     onCancel: onOver,
     onConfirm: () => {
-      onNext();
+      _onNext();
     }
   }, {
     key: 'agreement',
@@ -785,7 +797,7 @@ function AddComponentCore(_ref3) {
         subTitle: t('blocklet.component.addComponentTip.introduction')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_agreement.default, {
         meta: meta,
-        onClickNext: onNext,
+        onClickNext: _onNext,
         handleDescEle: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -807,7 +819,7 @@ function AddComponentCore(_ref3) {
     onCancel: _onCancel,
     onConfirm: () => {
       setIsWaitingPurchase(false);
-      onNext();
+      _onNext();
     }
   }, meta && params.requirePurchase && {
     key: 'purchase',
@@ -895,7 +907,7 @@ function AddComponentCore(_ref3) {
     confirm: t('common.next'),
     onCancel: _onCancel,
     onConfirm: () => {
-      onNext();
+      _onNext();
     }
   }, meta && (params === null || params === void 0 ? void 0 : params.hasEnvironmentsStep) && {
     key: 'environment',
@@ -942,7 +954,7 @@ function AddComponentCore(_ref3) {
     cancel: t('common.pre'),
     confirm: t('common.next'),
     onCancel: _onCancel,
-    onConfirm: onNext
+    onConfirm: _onNext
   }, meta && (params === null || params === void 0 ? void 0 : params.didSpaceCapability) && {
     key: 'didSpace',
     name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -950,41 +962,37 @@ function AddComponentCore(_ref3) {
     }),
     disabled: params.didSpaceCapability === 'required' && !params.didSpaceEndpoint,
     body: () => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
-          title: t('blocklet.component.didSpaceConfig'),
-          subTitle: t('blocklet.component.didSpaceConfigTip')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            mt: '36px',
-            '& > div': {
-              maxWidth: 'unset !important',
-              '& .MuiAutocomplete-root': {
-                maxWidth: 'unset !important'
-              }
-            }
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spaceConnector.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_configSpace.ConfigSpaceProvider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
+          component: "div",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
+            title: t('blocklet.component.didSpaceConfig'),
+            subTitle: t('blocklet.component.didSpaceConfigTip')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             sx: {
-              '& .MuiFormHelperText-root': {
-                wordBreak: 'break-all'
+              mt: '36px',
+              '& > div': {
+                maxWidth: 'unset !important',
+                '& .MuiAutocomplete-root': {
+                  maxWidth: 'unset !important'
+                }
               }
             },
-            helperText: params.didSpaceEndpoint && t('blocklet.component.didSpaceConnected', {
-              endpoint: params.didSpaceEndpoint
-            }),
-            onConnect: () => {
-              onNext();
-            }
-          })
-        })]
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didSpace.default, {
+              blockletMeta: component.current.meta,
+              onNext: () => {
+                _onNext();
+              },
+              onEndpointUpdate: refreshDidSpaceEndpoint
+            })
+          })]
+        })
       });
     },
     cancel: t('common.pre'),
     confirm: t('common.next'),
     onCancel: _onCancel,
-    onConfirm: onNext
+    onConfirm: _onNext
   }, {
     key: 'install',
     name: t('common.install'),

package/lib/blocklet/component/button.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StyledButton;
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function StyledButton(_ref) {
+  let props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({
+    className: "bottom-button",
+    variant: "contained",
+    color: "primary"
+  }, props));
+}

package/lib/blocklet/component/did-space/connect-to.js

@@ -0,0 +1,362 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireWildcard(require("react"));
+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 _urlJoin = _interopRequireDefault(require("url-join"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _SplitButton = _interopRequireDefault(require("@arcblock/ux/lib/SplitButton"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _propTypes = require("prop-types");
+var _constant = require("@abtnode/constant");
+var _useBlockletInfoForConnectDidSpaces = _interopRequireDefault(require("../../../hooks/use-blocklet-info-for-connect-did-spaces"));
+var _spaces = require("../../../util/spaces");
+var _util = require("../../../../lib/util");
+var _blocklet = require("../../../contexts/blocklet");
+var _configSpace = require("../../../contexts/config-space");
+var _node = require("../../../contexts/node");
+var _api = require("../../../util/api");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onConnect"];
+/**
+ * @typedef {import('../../../contexts/config-space').SpaceGateway} SpaceGateway
+ */
+/**
+ * @FIXME: 后续可以思考一下，refactor 一下
+ * @description
+ * @param {{
+ *  onConnect(spaceGateway: SpaceGateway): void | Promise<void>,
+ * }} { onConnect, ...rest }
+ * @return {React.Component}
+ */
+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); }
+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 ConnectTo(_ref) {
+  let {
+      onConnect
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    info
+  } = (0, _node.useNodeContext)();
+  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 blockletInfo = (0, _useBlockletInfoForConnectDidSpaces.default)({
+    blocklet
+  });
+  const webWalletUrl = (0, _util.getWebWalletUrl)(info);
+  const {
+    storageEndpoint
+  } = (0, _configSpace.useConfigSpaceContext)();
+  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = (0, _react.useState)({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    prefix: (0, _urlJoin.default)(_constant.PROD_DID_SPACES.CORE_URL, 'space/api/did'),
+    baseUrl: new URL(_constant.PROD_DID_SPACES.CORE_URL).origin,
+    checkFn: _api.axios.create({
+      baseURL: (0, _urlJoin.default)(_constant.PROD_DID_SPACES.CORE_URL, 'space')
+    }).get,
+    messages: {
+      title: t('storage.spaces.provideNFT.title', {
+        appName: blockletInfo.appName
+      }, locale),
+      scan: t('storage.spaces.provideNFT.scan', {
+        appName: blockletInfo.appName
+      }, locale),
+      confirm: '',
+      success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        gutterBottom: true,
+        children: t('storage.spaces.provideNFT.success')
+      })
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeFromNftConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+    }
+  });
+  const [authorizeConnect, setAuthorizeConnect] = (0, _react.useState)({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    messages: {
+      title: t('storage.spaces.authorize.title', {
+        appName: blockletInfo.appName
+      }, locale),
+      scan: t('storage.spaces.authorize.scan', {
+        appName: blockletInfo.appName
+      }, locale),
+      confirm: '',
+      success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        gutterBottom: true,
+        children: t('storage.spaces.authorize.success')
+      })
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+    }
+  });
+  const onAuthorizeConnectSuccess = (response, decrypt) => {
+    setTimeout(async () => {
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+      setUrl(null);
+      setAuthorizeFromNftConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+      const endpoint = decrypt(response.endpoint);
+      const space = response.space ? decrypt(response.space) : {};
+
+      // eslint-disable-next-line no-use-before-define
+      await updateSpaceGateway(_objectSpread(_objectSpread({
+        endpoint
+      }, {
+        did: (0, _spaces.getDIDSpaceDidFromEndpoint)(endpoint),
+        name: 'DID Space'
+      }), space));
+    }, 0);
+  };
+
+  /**
+   *
+   * @param {} {endpoint, name, did}
+   * @returns {Promise<void>}
+   */
+  const updateSpaceGateway = async _ref2 => {
+    let {
+      did,
+      name,
+      endpoint
+    } = _ref2;
+    const spaceGatewayUrl = await (0, _spaces.getSpaceGatewayUrl)(endpoint);
+    if (!(await (0, _spaces.isValidSpaceGatewayUrl)(spaceGatewayUrl))) {
+      _Toast.default.error(t('storage.spaces.gateway.add.invalidUrl'));
+      return;
+    }
+
+    /** @type {SpaceGateway} */
+    const spaceGateway = {
+      name,
+      did,
+      url: spaceGatewayUrl,
+      endpoint
+    };
+    await onConnect(spaceGateway);
+    _Toast.default.success(t('storage.spaces.connectedWithName', {
+      name: spaceGateway.name
+    }));
+  };
+  const handleUseWalletConnect = () => {
+    setAuthorizeFromNftConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+      open: true,
+      extraParams: {
+        appDid: blockletInfo.appDid,
+        appName: blockletInfo.appName,
+        appDescription: blockletInfo.appDescription,
+        scopes: blockletInfo.scopes,
+        appUrl: blockletInfo.appUrl,
+        referrer: blockletInfo.referrer,
+        nodeDid: info.did
+      }
+    }));
+  };
+  const handleUseSpaceGatewayConnect = async () => {
+    try {
+      setLoading(true);
+      const spaceGatewayUrl = await (0, _spaces.getSpaceGatewayUrl)(url);
+      const didSpacesCoreUrl = (0, _spaces.extraDIDSpacesCoreUrl)(spaceGatewayUrl);
+      const spaceDid = new URL(spaceGatewayUrl).searchParams.get('spaceDid');
+      if (!(await (0, _spaces.isValidSpaceGatewayUrl)(didSpacesCoreUrl))) {
+        throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
+      }
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: true,
+        prefix: (0, _urlJoin.default)(didSpacesCoreUrl, 'space/api/did'),
+        baseUrl: new URL(didSpacesCoreUrl).origin,
+        checkFn: _api.axios.create({
+          baseURL: (0, _urlJoin.default)(didSpacesCoreUrl, 'space')
+        }).get,
+        extraParams: {
+          appDid: blockletInfo.appDid,
+          appName: blockletInfo.appName,
+          appDescription: blockletInfo.appDescription,
+          scopes: blockletInfo.scopes,
+          appUrl: blockletInfo.appUrl,
+          referrer: blockletInfo.referrer,
+          nodeDid: info.did,
+          spaceDid
+        }
+      }));
+      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)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default, {
+      color: "primary",
+      style: {
+        textTransform: 'none !important',
+        fontSize: '1rem'
+      },
+      size: "small",
+      onClick: handleUseWalletConnect,
+      variant: "outlined",
+      menu: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default.Item, _objectSpread(_objectSpread({
+        sx: {
+          textTransform: 'none'
+        },
+        onClick: () => setOpen(true),
+        size: "small"
+      }, rest), {}, {
+        children: storageEndpoint ? t('storage.spaces.connect.useSpaceGatewayReconnect') : t('storage.spaces.connect.useSpaceGateway')
+      }), "1")],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontWeight: 'bold',
+          textTransform: 'none'
+        },
+        children: storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeFromNftConnect.prefix,
+      open: authorizeFromNftConnect.open,
+      popup: true,
+      action: authorizeFromNftConnect.action,
+      webWalletUrl: webWalletUrl,
+      baseUrl: authorizeFromNftConnect.baseUrl,
+      checkFn: authorizeFromNftConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeFromNftConnect.onClose,
+      checkTimeout: authorizeFromNftConnect.checkTimeout,
+      extraParams: authorizeFromNftConnect.extraParams,
+      messages: authorizeFromNftConnect.messages,
+      locale: locale
+    }), /*#__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: onAuthorizeConnectSuccess,
+      onClose: authorizeConnect.onClose,
+      checkTimeout: authorizeConnect.checkTimeout,
+      extraParams: authorizeConnect.extraParams,
+      messages: authorizeConnect.messages,
+      locale: locale
+    }), /*#__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: handleUseSpaceGatewayConnect,
+          color: "primary",
+          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)(_material.DialogContentText, {
+          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') {
+                  await handleUseSpaceGatewayConnect();
+                }
+              },
+              autoFocus: true
+            })
+          })
+        })
+      }), Boolean(errorMessage) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "error",
+        style: {
+          width: '100%'
+        },
+        children: errorMessage
+      })]
+    })]
+  });
+}
+ConnectTo.propTypes = {
+  onConnect: _propTypes.func
+};
+ConnectTo.defaultProps = {
+  onConnect: () => undefined
+};
+var _default = ConnectTo;
+exports.default = _default;

package/lib/blocklet/component/did-space/connected.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _item = _interopRequireDefault(require("./item"));
+var _configSpace = require("../../../contexts/config-space");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Connected() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    spaceGateway,
+    settingStorageEndpoint
+  } = (0, _configSpace.useConfigSpaceContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "12px",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t('storage.spaces.connected.title')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+        style: {
+          marginTop: '12px'
+        },
+        spaceGateway: spaceGateway,
+        connected: true,
+        onDisconnect: () => settingStorageEndpoint(null)
+      }, spaceGateway.endpoint)
+    })]
+  });
+}
+var _default = Connected;
+exports.default = _default;