@abtnode/ux 1.16.11-next-470e8c41 → 1.16.11

package/lib/blocklet/component/space-selector.js

@@ -157,7 +157,7 @@ function SpaceSelector(_ref) {
               width: '100px',
               height: '100%'
             },
-            children: endpoint ? t('storage.spaces.reconnect') : t('storage.spaces.connects')
+            children: endpoint ? t('storage.spaces.reconnect') : t('storage.spaces.connect.now')
           })
         })
       }));

package/lib/blocklet/configuration.js

@@ -26,6 +26,7 @@ var _constant2 = require("@blocklet/constant");
 var _util = require("@blocklet/meta/lib/util");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _formTextInput = _interopRequireDefault(require("../form/form-text-input"));
+var _formSelectInput = _interopRequireDefault(require("../form/form-select-input"));
 var _node = require("../contexts/node");
 var _util2 = require("../util");
 var _permission = require("../permission");
@@ -49,6 +50,10 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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; }
+const languages = Object.keys(_constant2.SUPPORTED_LANGUAGES).map(x => ({
+  code: x,
+  name: _constant2.SUPPORTED_LANGUAGES[x].nativeName
+}));
 function BlockletEnvironment(_ref) {
   var _blocklet$settings;
   let {
@@ -94,6 +99,7 @@ function BlockletEnvironment(_ref) {
   // configurable blocklet environment
   const customDelete = blocklet.environments.find(x => x.key === 'BLOCKLET_DELETABLE');
   const deletable = !customDelete || customDelete.value === 'yes';
+  const customLanguages = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LANGUAGES');
   const customUrl = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_URL');
   const customLogoSquare = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_SQUARE');
   const customLogoRect = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_RECT');
@@ -322,6 +328,28 @@ function BlockletEnvironment(_ref) {
       className: "config-form",
       component: _Divider.default,
       my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: t('blocklet.config.languages')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formSelectInput.default, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        options: languages,
+        initialValue: customLanguages ? customLanguages.value.split(',') : ['en'],
+        onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: "config-form",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {

package/lib/blocklet/storage/action.js

@@ -11,17 +11,18 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _ArrowOutward = _interopRequireDefault(require("@mui/icons-material/ArrowOutward"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ElectricBoltOutlined = _interopRequireDefault(require("@mui/icons-material/ElectricBoltOutlined"));
-var _BackupOutlined = _interopRequireDefault(require("@mui/icons-material/BackupOutlined"));
+var _FolderOutlined = _interopRequireDefault(require("@mui/icons-material/FolderOutlined"));
 var _spaces = require("../../util/spaces");
 var _delete = _interopRequireDefault(require("./delete"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["spaceGateway", "connected", "onDelete", "onConnect"];
+const _excluded = ["spaceGateway", "connected", "onDelete", "onConnect", "enableSwitchToSpace"];
 /**
  * @description
  * @param {{
  *  spaceGateway: import('./connected').SpaceGateway,
  *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
  *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
+ *  enableSwitchToSpace: boolean,
  *  connected: boolean
  * }} { spaceGateway, onDelete, ...rest }
  * @return {*}
@@ -41,7 +42,8 @@ function SpaceItemAction(_ref) {
       spaceGateway,
       connected,
       onDelete,
-      onConnect
+      onConnect,
+      enableSwitchToSpace
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
@@ -102,13 +104,13 @@ function SpaceItemAction(_ref) {
           style: {
             minWidth: 24
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackupOutlined.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FolderOutlined.default, {
             fontSize: "small"
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
           children: t('storage.spaces.strategy.viewBackupFiles')
         })]
-      }), !connected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      }), !connected && enableSwitchToSpace && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
         onClick: handleOnConnect,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           style: {
@@ -135,12 +137,14 @@ SpaceItemAction.propTypes = {
     endpoint: _propTypes.default.string.isRequired
   }).isRequired,
   connected: _propTypes.default.bool.isRequired,
+  enableSwitchToSpace: _propTypes.default.bool,
   onDelete: _propTypes.default.func,
   onConnect: _propTypes.default.func
 };
 SpaceItemAction.defaultProps = {
   onDelete: () => {},
-  onConnect: () => {}
+  onConnect: () => {},
+  enableSwitchToSpace: true
 };
 var _default = SpaceItemAction;
 exports.default = _default;

package/lib/blocklet/storage/backups.js

@@ -17,7 +17,7 @@ var _propTypes = require("prop-types");
 var _node = require("../../contexts/node");
 var _blocklet = require("../../../lib/contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["progress"];
+const _excluded = ["progress", "spaceGateways"];
 /**
  * @description
  * @param {{ blocklet: import('@abtnode/client').BlockletState }} { blocklet }
@@ -34,6 +34,7 @@ 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 useBackups(_ref) {
+  var _blocklet$meta2;
   let {
     blocklet,
     loading,
@@ -59,43 +60,26 @@ function useBackups(_ref) {
   // eslint-disable-next-line require-await
   (0, _ahooks.useAsyncEffect)(async () => {
     fetchBackups();
-  }, [blocklet, progress, loading]);
+  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, progress, loading]);
   return {
     backups
   };
 }
-function useSpaceGateways(_ref2) {
-  let {
-    blocklet
-  } = _ref2;
-  const [spaceGateways, setSpaceGateways] = (0, _react.useState)( /** @type {SpaceGateway[]} */
-  []);
-  const {
-    api
-  } = (0, _node.useNodeContext)();
-  (0, _ahooks.useAsyncEffect)(async () => {
-    const {
-      spaceGateways: _spaceGateways
-    } = await api.getBlockletSpaceGateways({
-      input: {
-        did: blocklet.meta.did
-      }
-    });
-    setSpaceGateways([{
-      name: 'Prod DID Spaces',
-      url: 'https://www.didspaces.com/app',
-      protected: true
-    }, ...(_spaceGateways !== null && _spaceGateways !== void 0 ? _spaceGateways : [])]);
-  }, [blocklet]);
-  return {
-    spaceGateways
-  };
-}
-function SpacesBackupRecords(_ref3) {
+
+/**
+ * @description
+ * @param {{
+ *  progress: any,
+ *  spaceGateways: Array<import('./connected').SpaceGateway>
+ * }} { progress, spaceGateways, ...rest }
+ * @return {*}
+ */
+function SpacesBackupRecords(_ref2) {
   let {
-      progress
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+      progress,
+      spaceGateways
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   const {
     t,
     locale
@@ -109,23 +93,19 @@ function SpacesBackupRecords(_ref3) {
     blocklet,
     progress
   });
-  const {
-    spaceGateways
-  } = useSpaceGateways({
-    blocklet
-  });
   const columns = [{
     label: 'DID Spaces',
     name: 'target',
     options: {
       // eslint-disable-next-line react/no-unstable-nested-components
       customBodyRenderLite: index => {
-        var _spaceGateways$find$n, _spaceGateways$find;
+        var _spaceGateways$find;
         // eslint-disable-next-line no-unused-vars
         const {
-          targetUrl
+          targetUrl,
+          targetName
         } = backups[index];
-        const spaceName = (_spaceGateways$find$n = (_spaceGateways$find = spaceGateways.find(spaceGateway => targetUrl === null || targetUrl === void 0 ? void 0 : targetUrl.includes(spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.url))) === null || _spaceGateways$find === void 0 ? void 0 : _spaceGateways$find.name) !== null && _spaceGateways$find$n !== void 0 ? _spaceGateways$find$n : 'DID Spaces';
+        const spaceName = ((_spaceGateways$find = spaceGateways.find(spaceGateway => targetUrl === null || targetUrl === void 0 ? void 0 : targetUrl.includes(spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.url))) === null || _spaceGateways$find === void 0 ? void 0 : _spaceGateways$find.name) || targetName || 'DID Space';
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
           fontSize: "16px",
           href: targetUrl,
@@ -209,11 +189,16 @@ function SpacesBackupRecords(_ref3) {
           }), " \xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             style: {
               display: 'flex',
-              alignItems: 'center'
+              alignItems: 'center',
+              flexShrink: 0
             },
             title: message,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Icon, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+                style: {
+                  width: '24px',
+                  height: '24px'
+                },
                 color: "error"
               })
             })
@@ -231,12 +216,12 @@ function SpacesBackupRecords(_ref3) {
       justifyContent: "space-between"
     }, rest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "#25292F",
-        fontSize: "20px",
+        fontSize: "1.2rem",
+        fontWeight: "bold",
         children: t('storage.spaces.backup.records')
       })
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      children: backups !== null && backups !== void 0 && backups.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
         data: backups,
         columns: columns,
         emptyNode: t('storage.spaces.record.emptyData', locale),
@@ -245,12 +230,17 @@ function SpacesBackupRecords(_ref3) {
           filter: false,
           print: false
         }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        color: "#9397A1",
+        marginTop: "24px",
+        children: t('storage.spaces.record.emptyData')
       })
     })]
   });
 }
 SpacesBackupRecords.propTypes = {
-  progress: _propTypes.object.isRequired
+  progress: _propTypes.object.isRequired,
+  spaceGateways: _propTypes.array.isRequired
 };
 var _default = SpacesBackupRecords;
 exports.default = _default;

package/lib/blocklet/storage/connect-to.js

@@ -11,11 +11,12 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _isUrl = _interopRequireDefault(require("is-url"));
-var _ahooks = require("ahooks");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _constant = require("@blocklet/constant");
 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 _blocklet = require("../../../lib/contexts/blocklet");
 var _api = require("../../util/api");
 var _util = require("../../util");
@@ -23,6 +24,15 @@ var _node = require("../../contexts/node");
 var _useBlockletInfoForConnectDidSpaces = _interopRequireDefault(require("../../hooks/use-blocklet-info-for-connect-did-spaces"));
 var _spaces = require("../../util/spaces");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["spaceGateways", "refreshSpaceGateways"];
+/**
+ * @description
+ * @param {{
+ *  spaceGateways: Array<import('./connected').SpaceGateway>,
+ *  refreshSpaceGateways: () => void,
+ * }} { spaceGateways, refreshSpaceGateways, ...rest }
+ * @return {*}
+ */
 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; }
@@ -31,14 +41,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 _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 rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  let {
+      spaceGateways,
+      refreshSpaceGateways
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const {
-    blocklet,
-    actions: {
-      refreshBlocklet
-    }
+    blocklet
   } = (0, _blocklet.useBlockletContext)();
   const {
     info,
@@ -48,30 +60,18 @@ function ConnectTo(_ref) {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const [spaceGateways, setSpaceGateways] = (0, _react.useState)( /** @type {Array<SpaceGateway>} */
-  []);
   const spaceBackupEndpoint = (0, _react.useMemo)(() => (0, _spaces.getSpaceBackupEndpoint)(blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments), [blocklet]);
   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)('');
-  (0, _ahooks.useAsyncEffect)(async () => {
-    const {
-      spaceGateways: _spaceGateways
-    } = await nodeApi.getBlockletSpaceGateways({
-      input: {
-        did: blocklet.meta.did
-      }
-    });
-    setSpaceGateways(_spaceGateways !== null && _spaceGateways !== void 0 ? _spaceGateways : []);
-  }, [blocklet]);
   const blockletInfo = (0, _useBlockletInfoForConnectDidSpaces.default)({
     blocklet
   });
   const webWalletUrl = (0, _util.getWebWalletUrl)(info);
   const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = (0, _react.useState)({
     open: false,
-    action: 'get-did-spaces-url',
+    action: 'get-did-spaces-endpoint',
     checkTimeout: 1000 * 300,
     checkFn: _api.axios.create({
       baseURL: (0, _urlJoin.default)(window.location.origin, (0, _util.getPathPrefix)())
@@ -130,7 +130,7 @@ function ConnectTo(_ref) {
       }));
       const endpoint = decrypt(response.endpoint);
       const space = response.space ? decrypt(response.space) : {};
-      await updateBackupSpace(_objectSpread(_objectSpread({
+      await addSpaceGateway(_objectSpread(_objectSpread({
         endpoint
       }, {
         did: (0, _spaces.getDIDSpaceDidFromEndpoint)(endpoint),
@@ -148,7 +148,7 @@ function ConnectTo(_ref) {
    * }} {endpoint, name, did}
    * @returns {Promise<void>}
    */
-  const updateBackupSpace = async _ref2 => {
+  const addSpaceGateway = async _ref2 => {
     var _endpoint$replace, _endpoint$replace$tri, _spaceGateway$name;
     let {
       endpoint,
@@ -197,7 +197,7 @@ function ConnectTo(_ref) {
     _Toast.default.success(t('storage.spaces.connectedWithName', {
       name: (_spaceGateway$name = spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.name) !== null && _spaceGateway$name !== void 0 ? _spaceGateway$name : 'DID Spaces'
     }));
-    refreshBlocklet();
+    refreshSpaceGateways();
   };
   const handleUseWalletConnect = () => {
     setAuthorizeFromNftConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
@@ -213,15 +213,19 @@ function ConnectTo(_ref) {
       }
     }));
   };
-  const handleUseSpaceGatewayConnect = () => {
+  const handleUseSpaceGatewayConnect = async () => {
     try {
       setLoading(true);
+      const fullUrl = url.startsWith('http') ? url : "https://".concat(url);
+      if (!(await (0, _spaces.isValidSpaceGatewayUrl)(fullUrl))) {
+        throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
+      }
       setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
         open: true,
-        prefix: (0, _urlJoin.default)(url, 'space/api/did'),
-        baseUrl: new URL(url).origin,
+        prefix: (0, _urlJoin.default)(fullUrl, 'space/api/did'),
+        baseUrl: new URL(fullUrl).origin,
         checkFn: _api.axios.create({
-          baseURL: (0, _urlJoin.default)(url, 'space')
+          baseURL: (0, _urlJoin.default)(fullUrl, 'space')
         }).get,
         extraParams: {
           appDid: blockletInfo.appDid,
@@ -348,12 +352,16 @@ function ConnectTo(_ref) {
                 setUrl(e.target.value);
               },
               disabled: loading,
-              onKeyPress: handleUseSpaceGatewayConnect,
+              onKeyPress: async e => {
+                if (e.key === 'Enter') {
+                  await handleUseSpaceGatewayConnect();
+                }
+              },
               autoFocus: true
             })
           })
         })
-      }), !!errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+      }), Boolean(errorMessage) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
         type: "error",
         style: {
           width: '100%'
@@ -363,6 +371,9 @@ function ConnectTo(_ref) {
     })]
   });
 }
-ConnectTo.propTypes = {};
+ConnectTo.propTypes = {
+  spaceGateways: _propTypes.array.isRequired,
+  refreshSpaceGateways: _propTypes.func.isRequired
+};
 var _default = ConnectTo;
 exports.default = _default;

package/lib/blocklet/storage/connected.js

@@ -16,10 +16,69 @@ var _blocklet = require("../../../lib/contexts/blocklet");
 var _node = require("../../contexts/node");
 var _spaces = require("../../util/spaces");
 var _useBackupProgress = _interopRequireDefault(require("../../hooks/use-backup-progress"));
+var _spaceGateway = require("../../util/space-gateway");
+var _util = require("../../util");
 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; }
+/**
+ * @description
+ * @param {{
+ *  blockletDid: string,
+ *  setLoading: (bool: boolean) => void,
+ *  refreshBlocklet: Function
+ * }} { blockletDid, setLoading = () => undefined, refreshBlocklet }
+ * @return {{
+ *  spaceGateways: Array<SpaceGateway>
+ *  refreshSpaceGateways: Function
+ * }} {spaceGateways}
+ */function useSpaceGateways(_ref) {
+  let {
+    blockletDid,
+    setLoading = () => undefined
+  } = _ref;
+  const [refresh, setRefresh] = (0, _react.useState)(false);
+  const [spaceGateways, setSpaceGateways] = (0, _react.useState)([]);
+  const {
+    api: nodeApi
+  } = (0, _node.useNodeContext)();
+  const refreshSpaceGateways = () => {
+    setRefresh(x => !x);
+  };
+  (0, _ahooks.useAsyncEffect)(async () => {
+    try {
+      if (!blockletDid) {
+        setSpaceGateways([]);
+        return;
+      }
+      setLoading(true);
+      const {
+        spaceGateways: _spaceGateways
+      } = await nodeApi.getBlockletSpaceGateways({
+        input: {
+          did: blockletDid
+        }
+      });
+      const latestSpaceGateways = await (0, _spaceGateway.updateSpaceGatewaysFromDIDSpaces)({
+        blockletDid,
+        nodeApi,
+        spaceGateways: _spaceGateways
+      });
+      setSpaceGateways(latestSpaceGateways !== null && latestSpaceGateways !== void 0 ? latestSpaceGateways : []);
+    } catch (error) {
+      console.error(error);
+      _Toast.default.error((0, _util.formatError)(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [blockletDid, refresh]);
+  return {
+    refreshSpaceGateways,
+    spaceGateways
+  };
+}
+
 /**
  * @typedef {{
  *  did: string,
@@ -28,7 +87,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *  endpoint: string
  *  protected?: boolean,
  * }} SpaceGateway
- */function Connected() {
+ */
+
+function Connected() {
+  var _blocklet$meta;
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -42,28 +104,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   const {
     api: nodeApi
   } = (0, _node.useNodeContext)();
-  const [spaceGateways, setSpaceGateways] = (0, _react.useState)( /** @type {Array<SpaceGateway>} */
-  []);
   const backupEndpoint = (0, _react.useMemo)(() => (0, _spaces.getSpaceBackupEndpoint)(blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments), [blocklet]);
   const progress = (0, _useBackupProgress.default)({
     appDid: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appDid
   });
-  (0, _ahooks.useAsyncEffect)(async () => {
-    const {
-      spaceGateways: _spaceGateways
-    } = await nodeApi.getBlockletSpaceGateways({
-      input: {
-        did: blocklet.meta.did
-      }
-    });
-    setSpaceGateways(_spaceGateways !== null && _spaceGateways !== void 0 ? _spaceGateways : []);
-  }, [blocklet]);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    spaceGateways,
+    refreshSpaceGateways
+  } = useSpaceGateways({
+    blockletDid: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did,
+    setLoading,
+    refreshBlocklet
+  });
+  const shouldShowLoading = loading && !(spaceGateways !== null && spaceGateways !== void 0 && spaceGateways.length);
 
   /**
    *
    * @description
    * @param {SpaceGateway} spaceGateway
-   * @param {number} index
    */
   const onDeleteGateway = async spaceGateway => {
     if (!spaceGateway) {
@@ -82,7 +141,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     _Toast.default.success(t('storage.spaces.gateway.delete.succeeded', {
       name: "(".concat(spaceGateway.name, ")")
     }));
-    refreshBlocklet();
+    refreshSpaceGateways();
   };
   const onBackupNow = async () => {
     await nodeApi.backupBlocklet({
@@ -100,35 +159,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "space-between",
+      marginBottom: "12px",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "#25292F",
-        fontSize: "20px",
+        fontSize: "1.2rem",
+        fontWeight: "bold",
         children: t('storage.spaces.connected.title')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectTo.default, {
         style: {
-          fontSize: '16px'
+          fontSize: '1rem'
         },
-        display: "inline-flex"
+        display: "inline-flex",
+        spaceGateways: spaceGateways,
+        refreshSpaceGateways: refreshSpaceGateways
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      marginTop: "16px",
-      children: spaceGateways.map((spaceGateway, index) => {
+      children: shouldShowLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        justifyContent: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+      }) : spaceGateways.map((spaceGateway, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+          style: {
+            marginTop: '12px'
+          },
           spaceGateway: spaceGateway,
           connected: spaceGateways.findIndex(s => s.endpoint === backupEndpoint) === index,
-          onDelete: s => onDeleteGateway(s, index),
+          onDelete: onDeleteGateway,
           onBackupNow: onBackupNow,
-          progress: progress
+          progress: progress,
+          refreshSpaceGateways: refreshSpaceGateways
         }, spaceGateway.endpoint);
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_backups.default, {
       sx: {
-        marginTop: '16px'
+        marginTop: '24px'
       },
+      spaceGateways: spaceGateways,
       progress: progress
     })]
   });
 }
-Connected.propTypes = {};
 var _default = Connected;
 exports.default = _default;