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

package/lib/blocklet/storage/item.js

@@ -17,6 +17,9 @@ var _Address = _interopRequireDefault(require("@arcblock/ux/lib/Address"));
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 var _ahooks = require("ahooks");
 var _didMotif = require("@arcblock/did-motif");
+var _lodash = require("lodash");
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _switchControl = _interopRequireDefault(require("../component/switch-control"));
 var _action = _interopRequireDefault(require("./action"));
 var _mode = require("../../util/mode");
@@ -26,10 +29,12 @@ var _blocklet = require("../../../lib/contexts/blocklet");
 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 = ["spaceGateway", "connected", "progress", "onDelete", "onBackupNow"];
+var _templateObject;
+const _excluded = ["spaceGateway", "connected", "progress", "onDelete", "onBackupNow", "refreshSpaceGateways"];
 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; }
@@ -108,6 +113,10 @@ SpaceDisconnected.defaultProps = {
  * @param {{
  *  spaceGateway: import('./connected').SpaceGateway
  *  connected: boolean,
+ *  progress: any,
+ *  onDelete: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  onBackupNow: () => Promise<void>,
+ *  refreshSpaceGateways: () => void
  * }} { spaceGateway }
  */
 function SpaceItem(_ref) {
@@ -116,7 +125,8 @@ function SpaceItem(_ref) {
       connected,
       progress,
       onDelete,
-      onBackupNow
+      onBackupNow,
+      refreshSpaceGateways
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -126,10 +136,7 @@ function SpaceItem(_ref) {
   const [loading, setLoading] = (0, _react.useState)(false);
   /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
-    blocklet,
-    actions: {
-      refreshBlocklet
-    }
+    blocklet
   } = (0, _blocklet.useBlockletContext)();
   const {
     api: nodeApi,
@@ -281,7 +288,7 @@ function SpaceItem(_ref) {
     setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
       open: false
     }));
-    refreshBlocklet();
+    refreshSpaceGateways();
   };
   const _onBackupNow = async () => {
     try {
@@ -311,13 +318,17 @@ function SpaceItem(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [progress]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("main", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BoxContainer, {
+    style: {
+      position: 'relative'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({
       sx: {
         backgroundColor: connected ? '#F0FDFF' : 'inherit',
         '&:hover': {
           backgroundColor: connected ? '#F0FDFF' : '#FBFBFB'
-        }
+        },
+        borderRadius: '8px'
       },
       display: "flex",
       padding: "12px 20px"
@@ -346,7 +357,7 @@ function SpaceItem(_ref) {
           alignItems: "center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             color: connected ? 'primary' : 'inherit',
-            fontSize: "18px",
+            fontSize: "1rem",
             fontWeight: "bold",
             children: spaceGateway.name
           }), shouldDisplayConnected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
@@ -394,8 +405,8 @@ function SpaceItem(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 fontSize: "14px",
                 color: (0, _didMotif.getDIDMotifInfo)(spaceGateway.did).color,
-                children: "DID:"
-              }), "ABT:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                children: "DID:ABT:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
                 style: {
                   display: 'inline-flex',
                   marginLeft: '8px'
@@ -507,7 +518,8 @@ function SpaceItem(_ref) {
           spaceGateway: spaceGateway,
           connected: connected,
           onDelete: onDelete,
-          onConnect: onConnect
+          onConnect: onConnect,
+          enableSwitchToSpace: (progress === null || progress === void 0 ? void 0 : progress.completed) || (0, _lodash.isEmpty)(progress === null || progress === void 0 ? void 0 : progress.message)
         })]
       })]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
@@ -525,7 +537,12 @@ function SpaceItem(_ref) {
       extraParams: authorizeConnect.extraParams,
       messages: authorizeConnect.messages,
       locale: locale
-    }, "get-endpoint")]
+    }, "get-endpoint"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "selected-container ".concat(connected ? 'selected' : ''),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+        className: "selected-icon"
+      })
+    })]
   });
 }
 SpaceItem.propTypes = {
@@ -538,6 +555,7 @@ SpaceItem.propTypes = {
   }).isRequired,
   connected: _propTypes.default.bool.isRequired,
   progress: _propTypes.default.any.isRequired,
+  refreshSpaceGateways: _propTypes.default.func.isRequired,
   onDelete: _propTypes.default.func,
   onBackupNow: _propTypes.default.func
 };
@@ -545,5 +563,6 @@ SpaceItem.defaultProps = {
   onDelete: () => undefined,
   onBackupNow: () => undefined
 };
+const BoxContainer = (0, _styled.default)(_material.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .selected-container {\n    position: absolute;\n    right: 0px;\n    bottom: 0px;\n    display: flex;\n    -webkit-box-pack: end;\n    justify-content: flex-end;\n    align-items: flex-end;\n    width: 32px;\n    height: 32px;\n    border-radius: 0px 0px 8px;\n    color: rgb(255, 255, 255);\n    overflow: hidden;\n    transition: all 0.4s ease 0s;\n\n    &::after {\n      position: absolute;\n      z-index: 0;\n      left: 60px;\n      top: 60px;\n      display: block;\n      width: 0px;\n      height: 0px;\n      border-width: 16px;\n      border-style: solid;\n      border-color: transparent #1dc1c7 #1dc1c7 transparent;\n      transition: all 0.1s ease 0s;\n      content: '';\n    }\n\n    .selected-icon {\n      visibility: hidden;\n      width: 60%;\n      height: 60%;\n      position: relative;\n      z-index: 2;\n      margin: 0px 1px 1px 0px;\n      font-size: 16px;\n      transition: all 0.2s ease 0s;\n    }\n  }\n\n  .selected-container.selected {\n    &::after {\n      left: 0px;\n      top: 0px;\n    }\n\n    .selected-icon {\n      visibility: visible;\n    }\n  }\n"])));
 var _default = SpaceItem;
 exports.default = _default;

package/lib/form/form-select-input.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FormSelectInput;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _styles = require("@mui/material/styles");
+var _required = _interopRequireDefault(require("./required"));
+var _formWrapper = _interopRequireDefault(require("./form-wrapper"));
+var _inputTriggers = _interopRequireDefault(require("./input-triggers"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["label", "disabled", "required", "initialValue", "onChange", "style", "onSubmit", "triggers", "options", "formatterBeforeSubmit"];
+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; }
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250
+    }
+  }
+};
+const getStyles = (current, selected, theme) => {
+  return {
+    fontWeight: selected.indexOf(current) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium
+  };
+};
+function FormSelectInput(_ref) {
+  let {
+      label,
+      disabled,
+      required,
+      initialValue,
+      onChange,
+      style,
+      onSubmit,
+      triggers,
+      options,
+      formatterBeforeSubmit
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const theme = (0, _styles.useTheme)();
+  const [editing, setEditing] = (0, _react.useState)(false);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [defaultValue, setDefaultValue] = (0, _react.useState)(initialValue);
+  const [value, setValue] = (0, _react.useState)(defaultValue);
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const shouldUpdate = await onSubmit(typeof formatterBeforeSubmit === 'function' ? formatterBeforeSubmit(value) : value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else {
+        setValue(value);
+        setDefaultValue(value);
+      }
+    } catch (err) {
+      setValue(defaultValue);
+    } finally {
+      setLoading(false);
+      setEditing(false);
+    }
+  };
+  const onInputChange = e => {
+    let {
+      value: selected
+    } = e.target;
+    selected = typeof selected === 'string' ? selected.split(',') : selected;
+    setValue(selected);
+    onChange(selected);
+  };
+  const input = editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, _objectSpread(_objectSpread({
+    value: value,
+    onChange: onInputChange,
+    fullWidth: true,
+    multiple: true,
+    variant: "outlined",
+    margin: "dense",
+    renderValue: selected => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      children: selected.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        label: options.find(o => o.code === x).name,
+        style: {
+          marginRight: 8
+        },
+        size: "small"
+      }, x))
+    }),
+    MenuProps: MenuProps
+  }, rest), {}, {
+    children: options.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+      value: x.code,
+      style: getStyles(x.code, value, theme),
+      children: x.name
+    }, x.code))
+  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    px: 1,
+    className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
+    children: value.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      label: options.find(o => o.code === x).name,
+      style: {
+        marginRight: 8
+      },
+      size: "small"
+    }, x))
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formWrapper.default, {
+    className: "form",
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "form-item",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item-label",
+        children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item-body",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "form-item-input",
+          children: input
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "form-item-action",
+          children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-confirm",
+              onClick: handleSubmit,
+              disabled: disabled || loading,
+              size: "large",
+              children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                size: 24
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-cancel",
+              onClick: () => {
+                setValue(defaultValue);
+                setEditing(false);
+              },
+              disabled: disabled || loading,
+              size: "large",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputTriggers.default, {
+            triggers: triggers,
+            onEnterEdit: () => setEditing(true),
+            disabled: disabled
+          })
+        })]
+      })]
+    })
+  });
+}
+FormSelectInput.propTypes = {
+  style: _propTypes.default.object,
+  onSubmit: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  label: _propTypes.default.string,
+  initialValue: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  triggers: _propTypes.default.array,
+  options: _propTypes.default.array,
+  formatterBeforeSubmit: _propTypes.default.func
+};
+FormSelectInput.defaultProps = {
+  style: {},
+  onSubmit: () => {},
+  onChange: () => {},
+  label: '',
+  initialValue: '',
+  required: false,
+  disabled: false,
+  triggers: [],
+  options: [],
+  formatterBeforeSubmit: x => x.join(',')
+};

package/lib/form/form-text-input.js

@@ -9,20 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
-var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
-var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
-var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _required = _interopRequireDefault(require("./required"));
 var _formWrapper = _interopRequireDefault(require("./form-wrapper"));
+var _inputTriggers = _interopRequireDefault(require("./input-triggers"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "disabled", "required", "initialValue", "onChange", "placeholder", "style", "onSubmit", "secure", "triggers", "formatterBeforeSubmit"];
 /**
@@ -51,91 +43,7 @@ const getDisplayValue = (value, secure, initialValue) => {
   }
   return value;
 };
-function InputTriggers(_ref) {
-  let {
-    triggers,
-    onEnterEdit,
-    disabled
-  } = _ref;
-  const anchorRef = _react.default.useRef(null);
-  const [open, setOpen] = _react.default.useState(false);
-  const handleTriggerClick = cb => {
-    setOpen(false);
-    cb();
-  };
-  const handleToggle = () => {
-    setOpen(prevOpen => !prevOpen);
-  };
-  const handleClose = event => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
-  if (triggers.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      "data-cy": "schema-form-item-edit",
-      onClick: onEnterEdit,
-      disabled: disabled,
-      size: "large",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      variant: "outlined",
-      ref: anchorRef,
-      "aria-label": "split button",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        "data-cy": "schema-form-item-edit",
-        onClick: onEnterEdit,
-        disabled: disabled,
-        size: "large",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        size: "small",
-        "aria-controls": open ? 'split-button-menu' : undefined,
-        "aria-expanded": open ? 'true' : undefined,
-        onClick: handleToggle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
-      sx: {
-        zIndex: 9999
-      },
-      open: open,
-      anchorEl: anchorRef.current,
-      role: undefined,
-      placement: "bottom-end",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
-          onClickAway: handleClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
-            id: "split-button-menu",
-            autoFocusItem: true,
-            children: triggers.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-              onClick: () => handleTriggerClick(x.handler),
-              children: x.title
-            }, x.key))
-          })
-        })
-      })
-    })]
-  });
-}
-InputTriggers.propTypes = {
-  triggers: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    title: _propTypes.default.string.isRequired,
-    handler: _propTypes.default.func.isRequired
-  })),
-  onEnterEdit: _propTypes.default.func.isRequired,
-  disabled: _propTypes.default.bool.isRequired
-};
-InputTriggers.defaultProps = {
-  triggers: []
-};
-function FormTextInput(_ref2) {
+function FormTextInput(_ref) {
   let {
       label,
       disabled,
@@ -148,8 +56,8 @@ function FormTextInput(_ref2) {
       secure,
       triggers,
       formatterBeforeSubmit
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const [editing, setEditing] = (0, _react.useState)(false);
   const [loading, setLoading] = (0, _react.useState)(false);
 
@@ -246,7 +154,7 @@ function FormTextInput(_ref2) {
               size: "large",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
             })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InputTriggers, {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputTriggers.default, {
             triggers: triggers,
             onEnterEdit: () => setEditing(true),
             disabled: disabled

package/lib/form/form-wrapper.js

@@ -9,5 +9,5 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var _default = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n  ", " {\n    width: 100%;\n    flex-shrink: 0;\n    padding: 0 24px;\n    transform: translate(0, 0);\n    /* max-height: 60vh; */\n  }\n\n  .form-item {\n    width: 100%;\n    margin-bottom: 24px;\n    position: relative;\n    ", " {\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n      flex-shrink: 0;\n    }\n  }\n\n  .form-item-body {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n  }\n\n  .form-item-label {\n    line-height: 1.2;\n    font-size: 14px;\n    color: #888;\n    font-weight: bold;\n\n    ", " {\n      text-align: left;\n      width: auto;\n      flex-grow: 1;\n    }\n  }\n\n  .form-item-input {\n    flex-grow: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    &.slot {\n      height: 40px;\n      line-height: 40px;\n      background: #f8f8f8;\n      font-size: 16px;\n    }\n  }\n\n  .form-item-action {\n    // width: 100px;\n    text-align: left;\n    margin-left: 12px;\n    flex-shrink: 0;\n    ", " {\n      width: auto;\n      margin-left: 0px;\n    }\n    .MuiIconButton-root {\n      padding: 8px;\n      svg {\n        fill: #888;\n      }\n      &.Mui-disabled {\n        opacity: 0.4;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
+var _default = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n  ", " {\n    width: 100%;\n    flex-shrink: 0;\n    padding: 0 24px;\n    transform: translate(0, 0);\n    /* max-height: 60vh; */\n  }\n\n  .form-item {\n    width: 100%;\n    margin-bottom: 24px;\n    position: relative;\n    ", " {\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n      flex-shrink: 0;\n    }\n  }\n\n  .form-item-body {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n  }\n\n  .form-item-label {\n    line-height: 1.2;\n    font-size: 14px;\n    color: #888;\n    font-weight: bold;\n\n    ", " {\n      text-align: left;\n      width: auto;\n      flex-grow: 1;\n    }\n  }\n\n  .form-item-input {\n    flex-grow: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    &.slot {\n      height: 40px;\n      line-height: 40px;\n      background: #f8f8f8;\n      font-size: 16px;\n\n      .MuiChip-root {\n        margin-top: -4px;\n      }\n    }\n\n    .MuiSelect-select {\n      padding: 8px;\n    }\n  }\n\n  .form-item-action {\n    // width: 100px;\n    text-align: left;\n    margin-left: 12px;\n    flex-shrink: 0;\n    ", " {\n      width: auto;\n      margin-left: 0px;\n    }\n    .MuiIconButton-root {\n      padding: 8px;\n      svg {\n        fill: #888;\n      }\n      &.Mui-disabled {\n        opacity: 0.4;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
 exports.default = _default;

package/lib/form/input-triggers.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InputTriggers;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function InputTriggers(_ref) {
+  let {
+    triggers,
+    onEnterEdit,
+    disabled
+  } = _ref;
+  const anchorRef = _react.default.useRef(null);
+  const [open, setOpen] = _react.default.useState(false);
+  const handleTriggerClick = cb => {
+    setOpen(false);
+    cb();
+  };
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  if (triggers.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      "data-cy": "schema-form-item-edit",
+      onClick: onEnterEdit,
+      disabled: disabled,
+      size: "large",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      variant: "outlined",
+      ref: anchorRef,
+      "aria-label": "split button",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        "data-cy": "schema-form-item-edit",
+        onClick: onEnterEdit,
+        disabled: disabled,
+        size: "large",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        size: "small",
+        "aria-controls": open ? 'split-button-menu' : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        onClick: handleToggle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+      sx: {
+        zIndex: 9999
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      placement: "bottom-end",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+          onClickAway: handleClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+            id: "split-button-menu",
+            autoFocusItem: true,
+            children: triggers.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+              onClick: () => handleTriggerClick(x.handler),
+              children: x.title
+            }, x.key))
+          })
+        })
+      })
+    })]
+  });
+}
+InputTriggers.propTypes = {
+  triggers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    handler: _propTypes.default.func.isRequired
+  })),
+  onEnterEdit: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool.isRequired
+};
+InputTriggers.defaultProps = {
+  triggers: []
+};

package/lib/locales/en.js

@@ -390,6 +390,7 @@ module.exports = {
         name: 'Wallet Type',
         description: 'Blocklet instance wallet type, will change the derived DID'
       },
+      languages: 'Supported Languages',
       passportColor: 'Passport Color',
       appUrl: 'Blocklet URL',
       access: {
@@ -1346,6 +1347,11 @@ module.exports = {
         scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} to connect to DID Spaces',
         success: 'Connected successfully'
       },
+      provideNFT: {
+        title: 'Please show the DID Spaces NFT for {appName}',
+        scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} show DID space NFT',
+        success: 'Operation successfully'
+      },
       backup: {
         title: 'Backup',
         records: 'Backup Records'
@@ -1360,7 +1366,7 @@ module.exports = {
           title: 'Add DID Spaces',
           label: 'Enter the url of the DID Spaces',
           failed: 'Add DID Spaces failed',
-          invalidUrl: 'Invalid DID Spaces url',
+          invalidUrl: 'Invalid DID Spaces gateway url',
           duplicate: 'DID Space({name}) already exist'
         },
         delete: {
@@ -1397,6 +1403,7 @@ module.exports = {
       },
       notYet: "You don't have a backup in progress yet...",
       connect: {
+        now: 'Connect',
         title: 'Connect DID Spaces',
         provider: 'Provide your DID Spaces to start backups',
         useWallet: 'Connect DID Spaces',

package/lib/locales/zh.js

@@ -394,6 +394,7 @@ module.exports = {
         name: '钱包类型',
         description: '应用钱包类型，会影响派生出来的 DID'
       },
+      languages: '支持的语言',
       passportColor: '通行证颜色',
       appUrl: '应用访问地址',
       access: {
@@ -1368,7 +1369,7 @@ module.exports = {
           title: '添加 DID Spaces',
           label: '输入 DID Spaces 的地址',
           failed: '添加 DID Spaces 失败',
-          invalidUrl: '无效的 DID Spaces 地址',
+          invalidUrl: '无效的 DID Spaces 网关地址',
           duplicate: 'DID Space({name}) 已存在'
         },
         delete: {
@@ -1405,6 +1406,7 @@ module.exports = {
       },
       notYet: '你还没有正在进行中的备份...',
       connect: {
+        now: '立即连接',
         title: '使用 DID Wallet 连接',
         provider: '提供您的 DID Spaces 开始备份',
         useWallet: '使用 DID Wallet 连接',