@abtnode/ux 1.8.68-beta-500af7e5 → 1.8.68

package/lib/blocklet/preferences/app-sk.js

@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSk;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
-var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _formTextInput = _interopRequireDefault(require("../../form/form-text-input"));
 var _confirm = _interopRequireDefault(require("../../confirm"));
-var _session = require("../../contexts/session");
-var _blocklet = require("../../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,19 +25,10 @@ function AppSk(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const {
-    api
-  } = (0, _session.useSessionContext)();
-  const {
-    blocklet
-  } = (0, _blocklet.useBlockletContext)();
-  const [state, setState] = (0, _useSetState.default)({
-    newAppSk: '',
-    isConnectOpen: false
-  });
+  const [confirmAppSk, setConfirmAppSk] = (0, _react.useState)(null);
   const onAppSkChange = value => {
-    setState({
-      newAppSk: value
+    setConfirmAppSk({
+      value
     });
     return false;
   };
@@ -49,29 +36,16 @@ function AppSk(_ref) {
     try {
       await onChange(v);
     } finally {
-      setState({
-        newAppSk: ''
-      });
+      setConfirmAppSk(null);
     }
   };
-  const onClose = () => setState({
-    isConnectOpen: false
-  });
-  const triggers = [{
-    key: 'rotate-with-did-wallet',
-    title: 'Migrate with DID Wallet',
-    handler: () => setState({
-      isConnectOpen: true
-    })
-  }];
   return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
     disabled: disabled,
     loading: loading,
     initialValue: initialValue,
     onSubmit: onAppSkChange,
-    triggers: triggers,
     secure: true
-  }), state.newAppSk && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+  }), confirmAppSk && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
     title: t('blocklet.config.appSkTitle'),
     description: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -90,28 +64,8 @@ function AppSk(_ref) {
     }),
     confirm: t('confirm'),
     cancel: t('cancel'),
-    onConfirm: () => _onConfirm(state.newAppSk),
-    onCancel: () => setState({
-      newAppSk: ''
-    })
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
-    popup: true,
-    open: state.isConnectOpen,
-    forceConnected: false,
-    action: "rotate-key-pair",
-    checkFn: api.get,
-    checkTimeout: 5 * 60 * 1000,
-    onSuccess: onClose,
-    extraParams: {
-      appDid: blocklet.appDid
-    },
-    messages: {
-      title: t('setup.keyPair.title'),
-      scan: t('setup.keyPair.scan'),
-      confirm: t('setup.keyPair.confirm'),
-      success: t('setup.keyPair.success')
-    },
-    onClose: onClose
+    onConfirm: () => _onConfirm(confirmAppSk.value),
+    onCancel: () => setConfirmAppSk(null)
   })];
 }
 AppSk.propTypes = {

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

@@ -7,7 +7,7 @@ exports.default = AddDomainAlias;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CallMerge = _interopRequireDefault(require("@mui/icons-material/CallMerge"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -140,8 +140,8 @@ function AddDomainAlias(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-domain-alias",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallMerge.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/router/action/add-rule.js

@@ -7,7 +7,7 @@ exports.default = AddRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -176,8 +176,8 @@ function AddRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
         style: {
           fontSize: 18,

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

@@ -7,7 +7,7 @@ exports.default = DeleteDomainAlias;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _confirm = _interopRequireDefault(require("../../../confirm"));
@@ -78,8 +78,8 @@ function DeleteDomainAlias(props) {
       className: "rule-action",
       color: "error",
       "data-cy": "action-delete-domain-alias",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
         style: {
           fontSize: 16

package/lib/blocklet/router/action/delete-rule.js

@@ -7,7 +7,7 @@ exports.default = DeleteRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _node = require("../../../contexts/node");
@@ -83,8 +83,8 @@ function DeleteRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-delete-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/router/action/update-rule.js

@@ -7,7 +7,7 @@ exports.default = UpdateRule;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -172,8 +172,8 @@ function UpdateRule(_ref) {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-update-rule",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        size: [16, 10]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {
         style: {
           fontSize: 18,

package/lib/blocklet/status.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = BlockletStatus;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _dot = _interopRequireDefault(require("../dot"));
@@ -85,8 +85,8 @@ function BlockletStatus(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tag.default, _objectSpread(_objectSpread({
     type: map[status]
   }, rest), {}, {
-    children: [inProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-      size: 12,
+    children: [inProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+      size: [12, 6],
       color: "inherit",
       style: {
         marginRight: 5

package/lib/blocklet/storage.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Storage;
-var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _react = require("react");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@blocklet/constant");
 var _axios = _interopRequireDefault(require("axios"));
@@ -14,77 +14,35 @@ var _urlJoin = _interopRequireDefault(require("url-join"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _lodash = require("lodash");
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _material = require("@mui/material");
 var _blocklet = require("../../lib/contexts/blocklet");
 var _node = require("../contexts/node");
 var _toast = _interopRequireDefault(require("../../lib/toast"));
-var _spaceGatewaySelector = _interopRequireDefault(require("./component/space-gateway-selector"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
+var _templateObject, _templateObject2;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Container = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n"])));
-
-/**
- * @description 实时显示备份的进度
- * @param {{appDid: string}} {appDid}
- * @return {{message: string, progress: number, completed: boolean}}
- */
-function useBackupProgress(_ref) {
-  let {
-    appDid
-  } = _ref;
-  const [progress, setProgress] = (0, _react.useState)({
-    message: '',
-    progress: 0,
-    completed: false
-  });
-  const node = (0, _node.useNodeContext)();
-  const webSocketClient = node.ws.getWsClient();
-  (0, _react.useEffect)(() => {
-    webSocketClient.on(_constant.BlockletEvents.backupProgress, data => {
-      if (appDid === (data === null || data === void 0 ? void 0 : data.did)) {
-        setProgress(preValue => _objectSpread(_objectSpread({}, preValue), data));
-      }
-    });
-    return () => {
-      webSocketClient.off(_constant.BlockletEvents.backupProgress);
-    };
-  }, [appDid, webSocketClient]);
-  return progress;
-}
-
-/**
- *
- *
- * @param {import('@abtnode/client').BlockletState} blocklet
- * @return {*}
- */
-function useAppUrl(blocklet) {
-  var _blocklet$site, _blocklet$site$domain, _blocklet$site$domain2;
-  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 => domainAlias.accessibility.url);
-  const appUrl = appUrls === null || appUrls === void 0 ? void 0 : appUrls[0];
-
-  // 授权的时候提供 appUrl, 因为 appUrl 可能很久都拿不到值，所以加一个 loading 效果过渡一下
-  return {
-    appUrl,
-    isReady: Boolean(appUrl)
-  };
-}
 function Storage() {
-  var _blocklet$environment;
+  var _localStorage$getItem, _blocklet$environment, _blocklet$environment2, _blocklet$environment3;
+  const options = [
+  // TODO: 测试用，上线后才需删除
+  {
+    value: (_localStorage$getItem = localStorage.getItem('test-spaces')) !== null && _localStorage$getItem !== void 0 && _localStorage$getItem.startsWith('http') ? localStorage.getItem('test-spaces') : 'https://bbqazi2fhuczchrlggs4njj2bucbvnwjjm2xlq6yk6i.did.abtnet.io',
+    label: 'test spaces'
+  }, {
+    value: 'https://storage.staging.abtnet.io/app',
+    label: 'staging spaces'
+  }, {
+    value: 'https://service.didspaces.com/app',
+    label: 'prod spaces'
+  }];
+
   /** @type {{ api: import('@abtnode/client').ABTNodeClient }} */
   const {
     api
@@ -93,15 +51,13 @@ function Storage() {
     t,
     locale
   } = (0, _react.useContext)(_context.LocaleContext);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)(false);
   /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
     blocklet
   } = (0, _blocklet.useBlockletContext)();
-  const [gatewayUrl, setGatewayUrl] = (0, _react.useState)('');
   const [endpoint, setEndpoint] = (0, _react.useState)(((_blocklet$environment = blocklet.environments.find(e => e.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)) === null || _blocklet$environment === void 0 ? void 0 : _blocklet$environment.value) || '');
-  const progress = useBackupProgress({
-    appDid: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appDid
-  });
+  const [didSpacesUrl, setDidSpacesUrl] = (0, _react.useState)((_blocklet$environment2 = (_blocklet$environment3 = blocklet.environments.find(e => e.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL)) === null || _blocklet$environment3 === void 0 ? void 0 : _blocklet$environment3.value) !== null && _blocklet$environment2 !== void 0 ? _blocklet$environment2 : options[0].value);
   const [isLoading, setIsLoading] = (0, _react.useState)(false);
   const {
     appDid
@@ -110,24 +66,26 @@ function Storage() {
     title: appName,
     description: appDescription
   } = blocklet.meta;
-  const {
-    appUrl,
-    isReady
-  } = useAppUrl(blocklet);
+
+  /**
+   *
+   * @param {string} did
+   * @param {string} storageEndpoint
+   */
   async function saveStorageEndpoint(did, storageEndpoint) {
     await api.configBlocklet({
       input: {
         did: [did],
         configs: [{
           key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL,
-          value: gatewayUrl
+          value: didSpacesUrl
         }, {
           key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT,
           value: storageEndpoint
         }]
       }
     }).then(() => {
-      _toast.default.success(t('storage.spaces.connected', locale));
+      _toast.default.success(t('storage.didSpaces.getSpacesAuthorizeSuccessfully', locale));
     }).catch(error => {
       console.error(error);
       _toast.default.error(error.message);
@@ -143,41 +101,49 @@ function Storage() {
     }, 3000);
   };
   const [authorizeConnect, setAuthorizeConnect] = (0, _react.useState)({
-    open: false
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    checkFn: _axios.default.create({
+      baseURL: (0, _urlJoin.default)(didSpacesUrl, 'space')
+    }).get,
+    onClose: () => {
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+    }
   });
-
-  // eslint-disable-next-line no-shadow
-  const handleOnClickAuthorize = async gatewayUrl => {
-    if ((0, _lodash.isEmpty)(gatewayUrl)) {
-      _toast.default.error(t('storage.spaces.addressCannotEmpty', locale));
+  const handleOnClickAuthorize = async () => {
+    if ((0, _lodash.isEmpty)(didSpacesUrl)) {
+      _toast.default.error(t('storage.didSpaces.addressCannotEmpty', locale));
       return;
     }
-    setGatewayUrl(gatewayUrl);
     setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
-      action: 'one-click-authorization',
-      checkTimeout: 1000 * 300,
-      prefix: (0, _urlJoin.default)(gatewayUrl, 'space/api/did'),
-      baseUrl: new URL(gatewayUrl).origin,
+      prefix: (0, _urlJoin.default)(didSpacesUrl, 'space/api/did'),
+      baseUrl: new URL(didSpacesUrl).origin,
       checkFn: _axios.default.create({
-        baseURL: (0, _urlJoin.default)(gatewayUrl, 'space')
+        baseURL: (0, _urlJoin.default)(didSpacesUrl, 'space')
       }).get,
       extraParams: {
         appDid,
         appName,
         appDescription,
-        scopes: 'list:object read:object write:object',
-        appUrl,
-        referrer: window.location.href
-      },
-      onClose: () => {
-        // eslint-disable-next-line no-shadow
-        setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
-          open: false
-        }));
+        scopes: 'list:object read:object write:object'
       },
       open: true
     }));
   };
+  const onDidSpacesUrlChange = event => {
+    const {
+      value
+    } = event.target;
+    if ((0, _lodash.isEmpty)(value)) {
+      setErrorMessage(t('storage.didSpaces.addressCannotEmpty', locale));
+      return;
+    }
+    setErrorMessage(null);
+    setDidSpacesUrl(value);
+  };
   const onBackup = async () => {
     try {
       if (isLoading) {
@@ -189,7 +155,7 @@ function Storage() {
           did: blocklet.appDid
         }
       });
-      _toast.default.success(t('storage.spaces.backupSuccessfully'));
+      _toast.default.success(t('storage.didSpaces.backupSuccessfully'));
     } catch (error) {
       _toast.default.error(error.message);
       console.error(error);
@@ -200,96 +166,88 @@ function Storage() {
   (0, _react.useEffect)(() => {
     setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
       messages: {
-        title: t('storage.spaces.authorize.title', {
+        title: t('storage.didSpaces.authorize.title', {
           appName
         }),
-        scan: t('storage.spaces.authorize.scan', {
+        scan: t('storage.didSpaces.authorize.scan', {
           appName
         }),
         confirm: '',
         success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           gutterBottom: true,
-          children: t('storage.spaces.authorize.success')
+          children: t('storage.didSpaces.authorize.success')
         })
       }
     }));
   }, [appName, locale, t]);
-  (0, _react.useEffect)(() => {
-    if (progress !== null && progress !== void 0 && progress.completed) {
-      setIsLoading(false);
-    } else if (progress !== null && progress !== void 0 && progress.message) {
-      setIsLoading(true);
-    }
-  }, [progress === null || progress === void 0 ? void 0 : progress.completed, progress === null || progress === void 0 ? void 0 : progress.message, t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    style: {
-      maxWidth: '720px'
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_spaceGatewaySelector.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StorageUrlTextField, {
+      select: true,
       sx: {
-        marginTop: '24px',
-        marginBottom: '40px'
+        marginTop: '20px'
       },
-      onSelect: handleOnClickAuthorize,
-      endpoint: endpoint,
-      loading: !isReady
-    }), endpoint && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      mt: 3,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        display: "inline",
-        children: [t('storage.spaces.tips'), ": \xA0", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      label: t('storage.didSpaces.label'),
+      value: didSpacesUrl,
+      onChange: onDidSpacesUrlChange,
+      autoFocus: true,
+      size: "small",
+      error: !!errorMessage,
+      helperText: errorMessage,
+      InputProps: {
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          onClick: handleOnClickAuthorize,
+          size: "small",
+          sx: {
+            position: 'absolute',
+            right: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '140px',
+            height: '100%'
+          },
+          children: endpoint ? t('storage.didSpaces.reAuthorization') : t('storage.didSpaces.goToAuthorization')
+        })
+      },
+      children: options.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: option.value,
+        children: option.label
+      }, option.value))
+    }), endpoint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      color: "text.secondary",
+      sx: {
+        marginTop: '20px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        display: "flex",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "inline",
-          color: "primary.main",
-          fontWeight: "fontWeightBold",
-          children: t('storage.spaces.connected')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          children: [t('storage.didSpaces.tips'), ": \xA0", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            display: "inline",
+            color: "primary.main",
+            fontWeight: "fontWeightBold",
+            children: t('storage.didSpaces.getSpacesAuthorizeSuccessfully')
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      justifyContent: "center",
+      sx: {
+        maxWidth: '580px',
+        marginTop: '20px',
+        padding: '0px 0px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         onClick: onBackup,
         loading: isLoading,
         variant: "contained",
         color: "primary",
         "data-cy": "add-domain-alias",
         disabled: !endpoint || isLoading,
-        children: t('storage.spaces.backup')
-      })]
-    }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      textAlign: "center",
-      marginTop: "16px",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        color: "primary",
-        children: progress === null || progress === void 0 ? void 0 : progress.message
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            width: '100%',
-            mr: 1
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
-            color: "primary",
-            variant: "determinate",
-            value: progress === null || progress === void 0 ? void 0 : progress.progress
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            minWidth: 35
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-            variant: "body2",
-            color: "text.secondary",
-            children: [progress === null || progress === void 0 ? void 0 : progress.progress, "%"]
-          })
-        })]
-      })]
+        children: t('storage.didSpaces.backup')
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
       prefix: authorizeConnect.prefix,
       open: authorizeConnect.open,
@@ -306,4 +264,6 @@ function Storage() {
     })]
   });
 }
+const Container = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n"])));
+const StorageUrlTextField = (0, _styled.default)(_material.TextField)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 56px;\n  width: 580px;\n  ", " {\n    width: 75%;\n  }\n  input.MuiInputBase-input {\n    width: calc(100% - 144px);\n  }\n"])), props => props.theme.breakpoints.down('md'));
 Storage.propTypes = {};

package/lib/blocklet/version.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _semver = _interopRequireDefault(require("semver"));
 var _notistack = require("notistack");
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
@@ -130,8 +130,8 @@ function Version(_ref) {
           },
           disabled: loading,
           onClick: () => setConfirmSetting(setting),
-          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-            size: 16
+          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+            size: [16, 10]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowUpward.default, {
             style: {
               fontSize: 16,