@abtnode/ux 1.16.17-beta-2679e686 → 1.16.17-beta-3232a7af

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

@@ -9,6 +9,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Chip from '@mui/material/Chip';
 import { useTheme } from '@mui/material/styles';
+import FormHelperText from '@mui/material/FormHelperText';
 import Required from './required';
 import FormWrapper from './form-wrapper';
 import InputTriggers from './input-triggers';
@@ -41,6 +42,7 @@ export default function FormSelectInput({
   triggers,
   options,
   formatterBeforeSubmit,
+  helperText,
   ...rest
 }) {
   const theme = useTheme();
@@ -154,6 +156,8 @@ export default function FormSelectInput({
             disabled: disabled
           })
         })]
+      }), editing && helperText && /*#__PURE__*/_jsx(FormHelperText, {
+        children: helperText
       })]
     })
   });
@@ -168,6 +172,7 @@ FormSelectInput.propTypes = {
   disabled: PropTypes.bool,
   triggers: PropTypes.array,
   options: PropTypes.array,
+  helperText: PropTypes.string,
   formatterBeforeSubmit: PropTypes.func
 };
 FormSelectInput.defaultProps = {
@@ -180,5 +185,6 @@ FormSelectInput.defaultProps = {
   disabled: false,
   triggers: [],
   options: [],
+  helperText: '',
   formatterBeforeSubmit: x => x.join(',')
 };

package/es/locales/en.js

@@ -410,6 +410,7 @@ module.exports = {
         description: 'Blocklet instance wallet type, will change the derived DID'
       },
       languages: 'Supported Languages',
+      selectLanguagesTip: 'Adjust the order by removing and re-adding',
       passportColor: 'Passport Color',
       appUrl: 'Blocklet URL',
       access: {
@@ -734,6 +735,8 @@ module.exports = {
       registerUrlPlaceholder: 'Input the URL of your preferred Blocklet Launcher, you can use the official one safely',
       webWalletUrl: 'DID Wallet URL',
       webWalletUrlPlaceholder: 'Please input the URL of your hosted "DID Wallet", you can use the official one safely',
+      nftDomainUrl: 'NFT Domain URL',
+      nftDomainUrlPlaceholder: 'Please input the URL of your hosted "NFT Domain", you can use the official one safely',
       enableWelcomePage: 'Enable welcome page',
       welcome: {
         switchLabel: 'Welcome Page'
@@ -919,12 +922,29 @@ module.exports = {
       }
     },
     domainAlias: {
+      inputDomain: 'Input Domain',
+      nftDomain: 'NFT Domain',
       add: {
         title: 'Add Additional Domain',
         domainDescription: 'Please provide a valid domain name',
         forceTip: 'Force add if domain name already exists',
         helperText: 'If an HTTP or HTTPS URL is entered, it will be automatically converted into a domain name.'
       },
+      addCustomDomain: {
+        name: 'Custom Domain'
+      },
+      addDomainNFT: {
+        showNFT: 'Show NFT',
+        tips: 'NFT Domain will do the domain name resolution automatically, no need to configure it manually, and the application will update the resolution record of the domain name automatically when needed.',
+        connect: {
+          title: 'Please show your Domain NFT',
+          scan: 'Scan following QR code with DID Wallet to authorize to blocklet to use your domain',
+          confirm: 'Confirm on your DID Wallet',
+          success: 'Authorization Successfully'
+        },
+        buyTip: "If your don't have domain yet, ",
+        buy: 'buy it now!'
+      },
       delete: {
         title: 'Delete',
         description: 'After removing a domain alias, access to that alias may not be handled properly.'

package/es/locales/zh.js

@@ -414,6 +414,7 @@ module.exports = {
         description: '应用钱包类型，会影响派生出来的 DID'
       },
       languages: '支持的语言',
+      selectLanguagesTip: '通过删除再添加来调整顺序',
       passportColor: '通行证颜色',
       appUrl: '应用访问地址',
       access: {
@@ -738,6 +739,8 @@ module.exports = {
       registerUrlPlaceholder: '你可以使用自己运行的"应用启动器", 也可以使用官方提供的版本',
       webWalletUrl: 'DID Wallet 地址',
       webWalletUrlPlaceholder: '你可以使用自己运行的 "DID Wallet", 也可以使用官方提供的版本',
+      nftDomainUrl: 'NFT Domain 地址',
+      nftDomainUrlPlaceholder: '你可以选择其它的 NFT Domain 服务器, 也可以使用官方提供的版本',
       upgrade: {
         title: '升级节点 {version}',
         description: '在升级期间，节点将会进入维护模式几分钟。',
@@ -922,12 +925,30 @@ module.exports = {
       }
     },
     domainAlias: {
+      inputDomain: '输入域名',
+      nftDomain: 'NFT 域名',
       add: {
         title: '添加额外域名',
         domainDescription: '请填写有效的域名',
         forceTip: '当域名已存在时强制添加',
         helperText: '如果输入 HTTP 或者 HTTPS URL, 则会被自动转换为域名。'
       },
+      addCustomDomain: {
+        name: '自定义域名'
+      },
+      addDomainNFT: {
+        name: 'NFT 域名',
+        showNFT: '出示 NFT',
+        tips: 'NFT 域名会自动完成域名解析，无需手动配置，并且应用会在需要的时候自动更新该域名的解析记录。',
+        connect: {
+          title: '请出示域名 NFT',
+          scan: '用 DID 钱包扫描下面的二维码, 出示域名 NFT',
+          confirm: '在您的 DID 钱包上确认',
+          success: '授权成功'
+        },
+        buyTip: '如果还没有域名 NFT, ',
+        buy: '现在购买!'
+      },
       delete: {
         title: '删除',
         description: '删除别名将会删除域名别用该站点下的所有流量转发规则，是否继续？'

package/es/team/members/index.js

@@ -460,6 +460,9 @@ export default function MemberList({
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "main",
       display: "flex",
+      sx: {
+        mt: inService ? 4 : 0
+      },
       children: [/*#__PURE__*/_jsx("div", {
         className: "left",
         children: /*#__PURE__*/_jsx("div", {

package/es/team/passports/index.js

@@ -76,6 +76,9 @@ export default function PassportList({
   };
   const filteredRoles = roles.filter(x => !search || x.title.includes(search) || x.name.includes(search));
   return /*#__PURE__*/_jsxs(Div, {
+    sx: {
+      mt: inService ? 6 : 0
+    },
     children: [/*#__PURE__*/_jsxs(ListHeader, {
       children: [/*#__PURE__*/_jsx("div", {
         className: "left",
@@ -244,7 +247,7 @@ export default function PassportList({
     })]
   });
 }
-const Div = styled.div`
+const Div = styled(Box)`
   .list {
     .item {
       padding: 12px;

package/lib/blocklet/component/domain-list.js

@@ -9,12 +9,17 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Diamond = _interopRequireDefault(require("@mui/icons-material/Diamond"));
 var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
 var _base = require("@abtnode/util/lib/base32");
 var _urlEvaluation = require("@abtnode/util/lib/url-evaluation");
@@ -23,6 +28,8 @@ var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _util = require("@blocklet/meta/lib/util");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _didAddress = _interopRequireDefault(require("../../did-address"));
+var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
 var _permission = require("../../permission");
 var _util2 = require("../../util");
@@ -32,7 +39,6 @@ var _domainActions = _interopRequireDefault(require("../router/domain-actions"))
 var _domainStatus = _interopRequireDefault(require("../router/domain-status"));
 var _types = require("../types");
 var _util3 = require("../util");
-var _blocklet = require("../../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 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); }
@@ -65,7 +71,7 @@ function DomainListWithPermission(props) {
   }));
 }
 function DomainList(_ref) {
-  var _blocklet$site2, _blocklet$meta;
+  var _blocklet$site2, _blocklet$environment, _blocklet$environment2, _blocklet$meta;
   let {
     hasPermission,
     blocklet,
@@ -75,6 +81,7 @@ function DomainList(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = (0, _react.useState)(null);
   const [showAllDomains, setShowAllDomains] = (0, _react.useState)(false);
   const theme = (0, _useTheme.default)();
   const hasMutatePermission = (0, _react.useMemo)(() => {
@@ -84,6 +91,12 @@ function DomainList(_ref) {
     }
     return res;
   }, [hasPermission, inService, blocklet]);
+  const handlePopoverOpen = event => {
+    setDomainInfoAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setDomainInfoAnchorEl(null);
+  };
   const {
     site
   } = blocklet;
@@ -94,6 +107,7 @@ function DomainList(_ref) {
   const displayDomains = [];
   const hiddenDomains = [];
   const pidBase32 = (0, _base.encode)(blocklet.appPid);
+  const appPk = (_blocklet$environment = blocklet.environments) === null || _blocklet$environment === void 0 ? void 0 : (_blocklet$environment2 = _blocklet$environment.find(x => x.key === 'BLOCKLET_APP_PK')) === null || _blocklet$environment2 === void 0 ? void 0 : _blocklet$environment2.value;
   const systemDomains = (0, _util2.getSystemDomains)(domains);
   domains.forEach(domain => {
     const value = domain.value || '';
@@ -115,6 +129,8 @@ function DomainList(_ref) {
         id: site.id,
         title: t('router.domain.add.title'),
         teamDid: (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did,
+        appId: blocklet.appPid,
+        appPk: appPk,
         systemDomains: systemDomains === null || systemDomains === void 0 ? void 0 : systemDomains.map(x => x.value),
         children: _ref2 => {
           let {
@@ -167,6 +183,92 @@ function DomainList(_ref) {
             target: "_blank",
             children: domain.value
           })
+        }), domain.type === 'nft-domain' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
+            onMouseEnter: handlePopoverOpen,
+            onMouseLeave: handlePopoverClose,
+            style: {
+              cursor: 'pointer',
+              fill: theme.palette.primary.main
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+            id: "mouse-over-popover",
+            style: {
+              pointerEvents: 'none'
+            },
+            open: Boolean(domainInfoAnchorEl),
+            anchorEl: domainInfoAnchorEl,
+            anchorOrigin: {
+              vertical: 'bottom',
+              horizontal: 'left'
+            },
+            transformOrigin: {
+              vertical: 'top',
+              horizontal: 'left'
+            },
+            onClose: handlePopoverClose,
+            disableRestoreFocus: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
+                style: {
+                  display: 'flex',
+                  flexDirection: 'column'
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                  component: "div",
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
+                    style: {
+                      fill: theme.palette.primary.main
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    component: "span",
+                    style: {
+                      marginLeft: '8px',
+                      fontSize: '18px',
+                      fontWeight: 'bolder'
+                    },
+                    children: t('router.domainAlias.nftDomain')
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                  component: "div",
+                  style: {
+                    display: 'flex',
+                    marginTop: '12px'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    component: "span",
+                    style: {
+                      width: '80px',
+                      marginRight: '8px'
+                    },
+                    children: t('common.domain')
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    component: "span",
+                    children: domain.value
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                  component: "div",
+                  style: {
+                    display: 'flex'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    component: "span",
+                    style: {
+                      width: '80px',
+                      marginRight: '8px'
+                    },
+                    children: "NFT"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+                    did: domain.nftDid
+                  })]
+                })]
+              })
+            })
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
           domain: domain,
           filters: ['http']

package/lib/blocklet/configuration.js

@@ -438,7 +438,8 @@ function BlockletEnvironment(_ref) {
         loading: loading,
         options: languages,
         initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
-        onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value)
+        onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value),
+        helperText: t('blocklet.config.selectLanguagesTip')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-form",

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

@@ -4,20 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AddDomainAlias;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
 var _urlEvaluation = require("@abtnode/util/lib/url-evaluation");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _CallMerge = _interopRequireDefault(require("@mui/icons-material/CallMerge"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
 var _confirm = _interopRequireDefault(require("../../../confirm"));
 var _node = require("../../../contexts/node");
 var _util = require("../../../util");
-var _dnsTip = _interopRequireDefault(require("../dns-tip"));
 var _util2 = require("../util");
+var _addDomain = _interopRequireDefault(require("../add-domain"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -31,7 +29,9 @@ function AddDomainAlias(_ref) {
     children,
     title,
     teamDid,
-    systemDomains
+    systemDomains,
+    appId,
+    appPk
   } = _ref;
   const {
     t
@@ -39,18 +39,24 @@ function AddDomainAlias(_ref) {
   const {
     api
   } = (0, _node.useNodeContext)();
-  const [loading, setLoading] = (0, _react.useState)(false);
-  const [confirmSetting, setConfirmSetting] = (0, _react.useState)(null);
+  const [state, setState] = (0, _useSetState.default)({
+    loading: false,
+    confirmSetting: null
+  });
   const cnameDomain = systemDomains.find(item => (0, _urlEvaluation.isDidDomain)(item));
   const onCancel = () => {
-    setLoading(false);
-    setConfirmSetting(null);
+    setState({
+      loading: false,
+      confirmSetting: null
+    });
   };
   const onConfirm = async params => {
-    if (loading) {
+    if (state.loading) {
       return;
     }
-    setLoading(true);
+    setState({
+      loading: true
+    });
     try {
       await api.addDomainAlias({
         input: {
@@ -60,72 +66,41 @@ function AddDomainAlias(_ref) {
         }
       });
       await (0, _util.sleep)(2000);
-      setConfirmSetting(null);
-    } finally {
-      setLoading(false);
-    }
-  };
-  const onEnter = async (params, confirm, setError) => {
-    try {
-      await confirm(params);
-    } catch (err) {
-      setError((0, _util.formatError)(err));
+      setState({
+        confirmSetting: null
+      });
     } finally {
-      setLoading(false);
+      setState({
+        loading: false
+      });
     }
   };
   const setting = {
     title: title || t('router.domainAlias.add.title'),
     // eslint-disable-next-line react/no-unstable-nested-components
-    description: (params, setParams, setError) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-      component: "div",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-        label: t('router.domainAlias.add.domainDescription'),
-        helperText: t('router.domainAlias.add.helperText'),
-        autoComplete: "off",
-        variant: "outlined",
-        name: "domain",
-        "data-cy": "add-domain",
-        fullWidth: true,
-        autoFocus: true,
-        inputProps: {
-          'data-cy': 'domain-name-input'
-        },
-        value: params.domain,
-        style: {
-          marginBottom: 8
-        },
-        margin: "dense",
-        onChange: e => {
-          const domain = e.target.value.trim();
-          const errMsg = (0, _util2.validateDomain)(domain, t);
+    description: function Description(params, setParams, setError) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_addDomain.default, {
+        siteId: id,
+        teamDid: teamDid,
+        cnameDomain: cnameDomain,
+        onSuccess: () => setState({
+          confirmSetting: null
+        }),
+        onInputDomain: _ref2 => {
+          let {
+            domain,
+            error
+          } = _ref2;
           setParams(_objectSpread(_objectSpread({}, params), {}, {
             domain,
-            __disableConfirm: !!errMsg
+            __disableConfirm: !!error
           }));
-          if (errMsg) {
-            setError(errMsg);
-          } else {
-            setError('');
-          }
+          setError(error);
         },
-        onKeyPress: e => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            const domain = e.target.value.trim();
-            const errMsg = (0, _util2.validateDomain)(domain, t);
-            if (errMsg) {
-              setError(errMsg);
-            } else {
-              onEnter(params, onConfirm, setError);
-            }
-          }
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dnsTip.default, {
-        domain: params.domain,
-        resolvedTarget: cnameDomain
-      })]
-    }),
+        appId: appId,
+        appPk: appPk
+      });
+    },
     confirm: t('common.confirm'),
     cancel: t('common.cancel'),
     params: {
@@ -137,18 +112,19 @@ function AddDomainAlias(_ref) {
   };
   const onMenuItemClick = e => {
     e.stopPropagation();
-    // eslint-disable-next-line no-unused-expressions
-    setConfirmSetting(setting);
+    setState({
+      confirmSetting: setting
+    });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [typeof children === 'function' ? children({
-      loading,
+      loading: state.loading,
       open: onMenuItemClick
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-domain-alias",
-      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+      children: [state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
         size: 16
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallMerge.default, {
         style: {
@@ -156,16 +132,16 @@ function AddDomainAlias(_ref) {
           marginRight: 5
         }
       }), t('router.domainAlias.add.title')]
-    }), confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
-      title: confirmSetting.title,
-      description: confirmSetting.description,
-      confirm: confirmSetting.confirm,
-      cancel: confirmSetting.cancel,
-      params: confirmSetting.params,
-      onConfirm: confirmSetting.onConfirm,
-      onCancel: confirmSetting.onCancel,
+    }), state.confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: state.confirmSetting.title,
+      description: state.confirmSetting.description,
+      confirm: state.confirmSetting.confirm,
+      cancel: state.confirmSetting.cancel,
+      params: state.confirmSetting.params,
+      onConfirm: state.confirmSetting.onConfirm,
+      onCancel: state.confirmSetting.onCancel,
       color: "primary",
-      loading: loading,
+      loading: state.loading,
       maxWidth: "lg"
     })]
   });
@@ -175,10 +151,13 @@ AddDomainAlias.propTypes = {
   children: _propTypes.default.any,
   title: _propTypes.default.string,
   teamDid: _propTypes.default.string,
-  systemDomains: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
+  systemDomains: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  appId: _propTypes.default.string,
+  appPk: _propTypes.default.string.isRequired
 };
 AddDomainAlias.defaultProps = {
   children: null,
   title: '',
-  teamDid: ''
+  teamDid: '',
+  appId: null
 };