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

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/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
 };

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

@@ -0,0 +1,258 @@
+import Connect from '@arcblock/did-connect/lib/Connect';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DiamondIcon from '@mui/icons-material/Diamond';
+import EditIcon from '@mui/icons-material/Edit';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import TextField from '@mui/material/TextField';
+import useTheme from '@mui/material/styles/useTheme';
+import noop from 'lodash/noop';
+import PropTypes from 'prop-types';
+import useSetState from 'react-use/lib/useSetState';
+import joinURL from 'url-join';
+import { validateDomain } from '../../../lib/util';
+import { useNodeContext } from '../../contexts/node';
+import { sleep } from '../../util';
+import { axios } from '../../util/api';
+import DNSTip from './dns-tip';
+import { parseDomainFromURL } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AddDomain({
+  siteId,
+  teamDid,
+  cnameDomain,
+  defaultCustomDomain,
+  onInputDomain,
+  appId,
+  appPk,
+  onSuccess,
+  ...props
+}) {
+  const theme = useTheme();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    api,
+    info
+  } = useNodeContext();
+  const [state, setState] = useSetState({
+    domain: defaultCustomDomain,
+    error: null,
+    type: info?.nftDomainUrl ? 'nftDomain' : 'inputDomain',
+    showNFTDomainAuth: false
+  });
+  let nftDomainURL = '';
+  if (info.nftDomainUrl) {
+    nftDomainURL = joinURL(info.nftDomainUrl, '/api');
+  }
+  const handleAuthSuccess = async ({
+    domain,
+    nftDid,
+    chainHost
+  }) => {
+    try {
+      await api.addDomainAlias({
+        input: {
+          id: siteId,
+          type: 'nft-domain',
+          domainAlias: parseDomainFromURL(domain),
+          nftDid,
+          chainHost,
+          teamDid
+        }
+      });
+      await sleep(2000);
+      setState({
+        confirmSetting: null,
+        showNFTDomainAuth: false
+      });
+      onSuccess({
+        domain,
+        type: state.type
+      });
+    } finally {
+      setState({
+        openAuthNFTDomain: false
+      });
+    }
+  };
+  const domainTypes = {
+    inputDomain: {
+      name: t('router.domainAlias.inputDomain'),
+      icon: /*#__PURE__*/_jsx(EditIcon, {}),
+      component: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextField, {
+          style: {
+            marginTop: '8px'
+          },
+          label: t('router.domainAlias.add.domainDescription'),
+          helperText: state.error || t('router.domainAlias.add.helperText'),
+          inputProps: {
+            'data-cy': 'domain-name-input'
+          },
+          fullWidth: true,
+          value: state.domain,
+          onChange: e => {
+            const {
+              value
+            } = e.target;
+            setState({
+              domain: value
+            });
+            const errMessage = validateDomain(value, locale);
+            setState({
+              domain: value,
+              error: errMessage
+            });
+            onInputDomain({
+              domain: value,
+              error: errMessage
+            });
+          },
+          autoFocus: true,
+          size: "small",
+          variant: "outlined",
+          error: !!state.error
+        }), /*#__PURE__*/_jsx(DNSTip, {
+          domain: state.domain,
+          resolvedTarget: cnameDomain,
+          style: {
+            marginTop: '8px'
+          }
+        })]
+      })
+    }
+  };
+  if (info?.nftDomainUrl) {
+    domainTypes.nftDomain = {
+      name: t('router.domainAlias.nftDomain'),
+      icon: /*#__PURE__*/_jsx(DiamondIcon, {}),
+      component: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          marginTop: '12px'
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            maxWidth: '640px',
+            color: 'text.secondary',
+            fontSize: '14px'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            children: t('router.domainAlias.addDomainNFT.tips')
+          }), /*#__PURE__*/_jsxs("div", {
+            children: [t('router.domainAlias.addDomainNFT.buyTip'), /*#__PURE__*/_jsxs(Link, {
+              href: info.nftDomainUrl,
+              sx: {
+                fontSize: '14px',
+                display: 'inline-flex',
+                alignItems: 'center'
+              },
+              target: "_blank",
+              children: [/*#__PURE__*/_jsx("i", {
+                children: t('router.domainAlias.addDomainNFT.buy')
+              }), /*#__PURE__*/_jsx(OpenInNewIcon, {
+                fontSize: "small"
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(Button, {
+          sx: {
+            marginTop: '8px'
+          },
+          onClick: () => setState({
+            showNFTDomainAuth: true
+          }),
+          variant: "contained",
+          children: t('router.domainAlias.addDomainNFT.showNFT')
+        }), /*#__PURE__*/_jsx(Connect, {
+          open: state.showNFTDomainAuth,
+          popup: true,
+          useSocket: false,
+          action: "authorize",
+          baseUrl: nftDomainURL,
+          checkFn: axios.create({
+            baseURL: nftDomainURL
+          }).get,
+          extraParams: {
+            delegatee: appId,
+            delegateePk: appPk
+          },
+          onSuccess: handleAuthSuccess,
+          onClose: () => setState({
+            showNFTDomainAuth: false
+          }),
+          checkTimeout: 60 * 5000,
+          showDownload: false,
+          messages: {
+            title: t('router.domainAlias.addDomainNFT.connect.title'),
+            scan: t('router.domainAlias.addDomainNFT.connect.scan'),
+            confirm: t('router.domainAlias.addDomainNFT.connect.confirm'),
+            success: t('router.domainAlias.addDomainNFT.connect.success')
+          }
+        })]
+      })
+    };
+  }
+  const inputDomainTypes = Object.keys(domainTypes);
+  inputDomainTypes.sort(x => {
+    // 优先展示 nft domain
+    if (x === 'inputDomain') {
+      return 1;
+    }
+    return -1;
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        gap: '16px'
+      },
+      children: inputDomainTypes.map(type => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          width: '128px',
+          height: '64px',
+          padding: '8px',
+          cursor: 'pointer',
+          borderRadius: '8px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          color: type === state.type ? theme.palette.primary.main : theme.palette.common.main,
+          border: `1px solid ${type === state.type ? theme.palette.primary.main : '#E0E0E0'}`
+        },
+        onClick: () => setState({
+          type
+        }),
+        children: [domainTypes[type].icon, domainTypes[type].name]
+      }, type))
+    }), /*#__PURE__*/_jsx(Box, {
+      marginTop: "12px",
+      children: domainTypes[state.type]?.component
+    })]
+  });
+}
+AddDomain.propTypes = {
+  siteId: PropTypes.string.isRequired,
+  teamDid: PropTypes.string.isRequired,
+  cnameDomain: PropTypes.string.isRequired,
+  defaultCustomDomain: PropTypes.string,
+  onInputDomain: PropTypes.func,
+  onSuccess: PropTypes.func,
+  appId: PropTypes.string,
+  appPk: PropTypes.string
+};
+AddDomain.defaultProps = {
+  defaultCustomDomain: '',
+  onInputDomain: noop,
+  onSuccess: noop,
+  appId: '',
+  appPk: ''
+};

package/es/confirm.js

@@ -113,7 +113,10 @@ export default function ConfirmDialog({
         "data-cy": "submit-confirm-dialog",
         autoFocus: true,
         children: [(loading || inputLoading) && /*#__PURE__*/_jsx(Spinner, {
-          size: 16
+          size: 16,
+          sx: {
+            mr: 1
+          }
         }), confirm]
       })]
     })]