@abtnode/ux 1.16.17-beta-2679e686 → 1.16.17-beta-6f0c7674

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

@@ -3,12 +3,17 @@ import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import React, { useMemo, useState } from 'react';
 import AddIcon from '@mui/icons-material/Add';
+import DiamondIcon from '@mui/icons-material/Diamond';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import useTheme from '@mui/material/styles/useTheme';
 import { encode as encodeBase32 } from '@abtnode/util/lib/base32';
 import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
@@ -17,6 +22,8 @@ import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { isInProgress } from '@blocklet/meta/lib/util';
 import Spinner from '@mui/material/CircularProgress';
+import DidAddress from '../../did-address';
+import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
 import { withPermission } from '../../permission';
 import { BlockletAdminRoles, getSystemDomains, sortDomains } from '../../util';
@@ -26,7 +33,6 @@ import DomainActions from '../router/domain-actions';
 import DomainStatus from '../router/domain-status';
 import { DomainType } from '../types';
 import { isServerless } from '../util';
-import { useBlockletContext } from '../../contexts/blocklet';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -60,6 +66,7 @@ function DomainList({
   const {
     t
   } = useLocaleContext();
+  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = useState(null);
   const [showAllDomains, setShowAllDomains] = useState(false);
   const theme = useTheme();
   const hasMutatePermission = useMemo(() => {
@@ -69,6 +76,12 @@ function DomainList({
     }
     return res;
   }, [hasPermission, inService, blocklet]);
+  const handlePopoverOpen = event => {
+    setDomainInfoAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setDomainInfoAnchorEl(null);
+  };
   const {
     site
   } = blocklet;
@@ -76,6 +89,7 @@ function DomainList({
   const displayDomains = [];
   const hiddenDomains = [];
   const pidBase32 = encodeBase32(blocklet.appPid);
+  const appPk = blocklet.environments?.find(x => x.key === 'BLOCKLET_APP_PK')?.value;
   const systemDomains = getSystemDomains(domains);
   domains.forEach(domain => {
     const value = domain.value || '';
@@ -97,6 +111,8 @@ function DomainList({
         id: site.id,
         title: t('router.domain.add.title'),
         teamDid: blocklet.meta?.did,
+        appId: blocklet.appPid,
+        appPk: appPk,
         systemDomains: systemDomains?.map(x => x.value),
         children: ({
           open
@@ -146,6 +162,92 @@ function DomainList({
             target: "_blank",
             children: domain.value
           })
+        }), domain.type === 'nft-domain' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(DiamondIcon, {
+            onMouseEnter: handlePopoverOpen,
+            onMouseLeave: handlePopoverClose,
+            style: {
+              cursor: 'pointer',
+              fill: theme.palette.primary.main
+            }
+          }), /*#__PURE__*/_jsx(Popover, {
+            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__*/_jsx(Card, {
+              children: /*#__PURE__*/_jsxs(CardContent, {
+                style: {
+                  display: 'flex',
+                  flexDirection: 'column'
+                },
+                children: [/*#__PURE__*/_jsxs(Typography, {
+                  component: "div",
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                  },
+                  children: [/*#__PURE__*/_jsx(DiamondIcon, {
+                    style: {
+                      fill: theme.palette.primary.main
+                    }
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    component: "span",
+                    style: {
+                      marginLeft: '8px',
+                      fontSize: '18px',
+                      fontWeight: 'bolder'
+                    },
+                    children: t('router.domainAlias.nftDomain')
+                  })]
+                }), /*#__PURE__*/_jsxs(Typography, {
+                  component: "div",
+                  style: {
+                    display: 'flex',
+                    marginTop: '12px'
+                  },
+                  children: [/*#__PURE__*/_jsx(Typography, {
+                    component: "span",
+                    style: {
+                      width: '80px',
+                      marginRight: '8px'
+                    },
+                    children: t('common.domain')
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    component: "span",
+                    children: domain.value
+                  })]
+                }), /*#__PURE__*/_jsxs(Typography, {
+                  component: "div",
+                  style: {
+                    display: 'flex'
+                  },
+                  children: [/*#__PURE__*/_jsx(Typography, {
+                    component: "span",
+                    style: {
+                      width: '80px',
+                      marginRight: '8px'
+                    },
+                    children: "NFT"
+                  }), /*#__PURE__*/_jsx(DidAddress, {
+                    did: domain.nftDid
+                  })]
+                })]
+              })
+            })
+          })]
         }), /*#__PURE__*/_jsx(DomainStatus, {
           domain: domain,
           filters: ['http']

package/es/blocklet/configuration.js

@@ -419,7 +419,8 @@ function BlockletEnvironment({
         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__*/_jsx(Box, {
       className: "config-form",

package/es/blocklet/oauth/federated-site-list.js

@@ -1,13 +1,12 @@
 /* eslint-disable react/no-unstable-nested-components */
 import SvgIcon from '@mui/material/SvgIcon';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import StarsIcon from '@mui/icons-material/Stars';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Address from '@arcblock/did-connect/lib/Address';
-import { useContext, useRef, useState } from 'react';
+import { useContext, useRef } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -17,7 +16,6 @@ import { useNodeContext } from '../../contexts/node';
 import useConfirm from '../../hooks/confirm';
 import FederatedDetailDialog from './federated-detail-dialog';
 import FederatedInviteDialog from './federated-invite-dialog';
-import SwitchControl from '../component/switch-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -44,9 +42,7 @@ function FederatedSiteList({
     api
   } = useNodeContext();
   const federatedSites = blocklet.settings.federated?.sites || [];
-  const federatedConfig = blocklet.settings.federated?.config || {
-    autoLogin: false
-  };
+  const federatedConfig = blocklet.settings.federated?.config || {};
   const isMaster = federatedConfig.isMaster !== false;
   const viewDetail = useMemoizedFn(row => {
     federatedDetailDialogRef.current?.open(row);
@@ -236,23 +232,6 @@ function FederatedSiteList({
       Toast.error(t('federated.failedToGetFederatedLoginLink'));
     }
   }, [blocklet.site?.domainAliases?.[0]?.href]);
-  const [checked, setChecked] = useState(federatedConfig.autoLogin || false);
-  const changeAutoLogin = useMemoizedFn(() => {
-    confirmApi.open({
-      title: checked ? t('federated.disableFederatedAutoLogin') : t('federated.enableFederatedAutoLogin'),
-      content: checked ? t('federated.disableFederatedAutoLoginDescription') : t('federated.enableFederatedAutoLoginDescription'),
-      async onConfirm(close) {
-        await api.configFederated({
-          input: {
-            did: blocklet.appPid,
-            autoLogin: !checked
-          }
-        });
-        setChecked(prevValue => !prevValue);
-        close();
-      }
-    });
-  }, [setChecked, checked]);
   const quitFederatedLogin = useMemoizedFn(() => {
     confirmApi.open({
       title: t('federated.quitFederatedLogin'),
@@ -323,25 +302,7 @@ function FederatedSiteList({
       customButtons: customButtons,
       title: /*#__PURE__*/_jsx(Box, {
         className: "table-toolbar-left",
-        children: mode === 'master' ? t('oauth.federated') : /*#__PURE__*/_jsx(FormControlLabel, {
-          sx: {
-            ml: 0,
-            '& span.MuiSwitch-switchBase': {
-              display: 'flex'
-            },
-            '& span.MuiSwitch-track': {
-              display: 'block'
-            }
-          },
-          control: /*#__PURE__*/_jsx(SwitchControl, {
-            checked: checked,
-            style: {
-              marginRight: '6px'
-            },
-            onChange: changeAutoLogin
-          }),
-          label: t('federated.enableFederatedAutoLogin')
-        })
+        children: t('oauth.federated')
       }),
       options: tableOptions
     }), confirmHolder, /*#__PURE__*/_jsx(FederatedInviteDialog, {

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

@@ -1,17 +1,15 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
 import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import AddIcon from '@mui/icons-material/CallMerge';
 import Spinner from '@mui/material/CircularProgress';
 import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
+import useSetState from 'react-use/lib/useSetState';
 import Confirm from '../../../confirm';
 import { useNodeContext } from '../../../contexts/node';
-import { formatError, sleep } from '../../../util';
-import DNSTip from '../dns-tip';
-import { parseDomainFromURL, validateDomain } from '../util';
+import { sleep } from '../../../util';
+import { parseDomainFromURL } from '../util';
+import AddDomain from '../add-domain';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -20,7 +18,9 @@ export default function AddDomainAlias({
   children,
   title,
   teamDid,
-  systemDomains
+  systemDomains,
+  appId,
+  appPk
 }) {
   const {
     t
@@ -28,18 +28,24 @@ export default function AddDomainAlias({
   const {
     api
   } = useNodeContext();
-  const [loading, setLoading] = useState(false);
-  const [confirmSetting, setConfirmSetting] = useState(null);
+  const [state, setState] = useSetState({
+    loading: false,
+    confirmSetting: null
+  });
   const cnameDomain = systemDomains.find(item => 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: {
@@ -49,73 +55,41 @@ export default function AddDomainAlias({
         }
       });
       await sleep(2000);
-      setConfirmSetting(null);
-    } finally {
-      setLoading(false);
-    }
-  };
-  const onEnter = async (params, confirm, setError) => {
-    try {
-      await confirm(params);
-    } catch (err) {
-      setError(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__*/_jsxs(Typography, {
-      component: "div",
-      children: [/*#__PURE__*/_jsx(TextField, {
-        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 = validateDomain(domain, t);
+    description: function Description(params, setParams, setError) {
+      return /*#__PURE__*/_jsx(AddDomain, {
+        siteId: id,
+        teamDid: teamDid,
+        cnameDomain: cnameDomain,
+        onSuccess: () => setState({
+          confirmSetting: null
+        }),
+        onInputDomain: ({
+          domain,
+          error
+        }) => {
           setParams({
             ...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 = validateDomain(domain, t);
-            if (errMsg) {
-              setError(errMsg);
-            } else {
-              onEnter(params, onConfirm, setError);
-            }
-          }
-        }
-      }), /*#__PURE__*/_jsx(DNSTip, {
-        domain: params.domain,
-        resolvedTarget: cnameDomain
-      })]
-    }),
+        appId: appId,
+        appPk: appPk
+      });
+    },
     confirm: t('common.confirm'),
     cancel: t('common.cancel'),
     params: {
@@ -127,18 +101,19 @@ export default function AddDomainAlias({
   };
   const onMenuItemClick = e => {
     e.stopPropagation();
-    // eslint-disable-next-line no-unused-expressions
-    setConfirmSetting(setting);
+    setState({
+      confirmSetting: setting
+    });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [typeof children === 'function' ? children({
-      loading,
+      loading: state.loading,
       open: onMenuItemClick
     }) : /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onMenuItemClick,
       className: "rule-action",
       "data-cy": "action-add-domain-alias",
-      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+      children: [state.loading ? /*#__PURE__*/_jsx(Spinner, {
         size: 16
       }) : /*#__PURE__*/_jsx(AddIcon, {
         style: {
@@ -146,16 +121,16 @@ export default function AddDomainAlias({
           marginRight: 5
         }
       }), t('router.domainAlias.add.title')]
-    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
-      title: confirmSetting.title,
-      description: confirmSetting.description,
-      confirm: confirmSetting.confirm,
-      cancel: confirmSetting.cancel,
-      params: confirmSetting.params,
-      onConfirm: confirmSetting.onConfirm,
-      onCancel: confirmSetting.onCancel,
+    }), state.confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      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"
     })]
   });
@@ -165,10 +140,13 @@ AddDomainAlias.propTypes = {
   children: PropTypes.any,
   title: PropTypes.string,
   teamDid: PropTypes.string,
-  systemDomains: PropTypes.arrayOf(PropTypes.string).isRequired
+  systemDomains: PropTypes.arrayOf(PropTypes.string).isRequired,
+  appId: PropTypes.string,
+  appPk: PropTypes.string.isRequired
 };
 AddDomainAlias.defaultProps = {
   children: null,
   title: '',
-  teamDid: ''
+  teamDid: '',
+  appId: null
 };