@abtnode/ux 1.16.20 → 1.16.21-beta-edf184e1

package/es/locales/en.js

@@ -935,8 +935,8 @@ export default {
         description: 'Please provide a valid site domain'
       },
       setup: {
-        tipStart: 'Please ensure that the domain name',
-        tipEnd: 'has been correctly resolved',
+        tipStart: 'Add the DNS records for the domain',
+        tipEnd: 'as per the following guidelines',
         recordType: 'Record Type',
         recordValue: 'Record Value'
       },
@@ -957,25 +957,27 @@ export default {
     domainAlias: {
       inputDomain: 'Manually config domain',
       nftDomain: 'Automatic config with DID Domain',
+      showTipHint: 'How do I configure domain name resolution?',
       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.'
+        helperText: 'If an HTTP or HTTPS URL is entered, it will be automatically converted into a domain name.',
+        isDidDomainError: 'This domain is a DID Domain. Please add it using the method for automatic domain configuration.'
       },
       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.',
+        showNFT: 'Configure domain automatically',
+        tips: 'DID 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, ",
+        buyTip: "If your don't have DID Domain NFT yet, ",
         buy: 'buy it now!'
       },
       delete: {

package/es/locales/zh.js

@@ -938,8 +938,8 @@ export default {
         description: '请填写你所拥有的合法的站点域名'
       },
       setup: {
-        tipStart: '请确保',
-        tipEnd: '域名已经被正确解析',
+        tipStart: '请将',
+        tipEnd: '域名的 DNS 记录按照下面的提示添加',
         recordType: '记录类型',
         recordValue: '记录值'
       },
@@ -960,26 +960,28 @@ export default {
     domainAlias: {
       inputDomain: '手动配置域名',
       nftDomain: '通过 DID Domain 自动配置域名',
+      showTipHint: '如何配置域名解析？',
       add: {
         title: '添加额外域名',
         domainDescription: '请填写有效的域名',
         forceTip: '当域名已存在时强制添加',
-        helperText: '如果输入 HTTP 或者 HTTPS URL, 则会被自动转换为域名。'
+        helperText: '如果输入 HTTP 或者 HTTPS URL, 则会被自动转换为域名。',
+        isDidDomainError: '该域名是 DID Domain, 请使用自动配置域名的方式添加该域名。'
       },
       addCustomDomain: {
         name: '自定义域名'
       },
       addDomainNFT: {
         name: 'NFT 域名',
-        showNFT: '出示 NFT',
-        tips: 'NFT 域名会自动完成域名解析，无需手动配置，并且应用会在需要的时候自动更新该域名的解析记录。',
+        showNFT: '自动配置域名',
+        tips: 'DID 域名会自动完成域名解析，无需手动配置，并且应用会在需要的时候自动更新该域名的解析记录。',
         connect: {
           title: '请出示域名 NFT',
           scan: '用 DID 钱包扫描下面的二维码, 出示域名 NFT',
           confirm: '在您的 DID 钱包上确认',
           success: '授权成功'
         },
-        buyTip: '如果还没有域名 NFT, ',
+        buyTip: '如果还没有 DID 域名 NFT, ',
         buy: '现在购买!'
       },
       delete: {

package/es/notifications/addon.js

@@ -0,0 +1,91 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Button from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Badge from '@mui/material/Badge';
+import Popper from '@mui/material/Popper';
+import NotificationIcon from '@arcblock/icons/lib/Notification';
+import NotificationList from './list';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function NotificationAddon({
+  api,
+  notifications,
+  updateNotifications,
+  viewAllUrl,
+  teamDid
+}) {
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const notificationAnchorRef = useRef(null);
+  const onToggleNotification = () => {
+    setNotificationOpen(prevOpen => !prevOpen);
+  };
+  const onCloseNotification = e => {
+    if (notificationAnchorRef.current && notificationAnchorRef.current.contains(e.target)) {
+      return;
+    }
+    setNotificationOpen(false);
+  };
+  const unreadCount = notifications.filter(x => x.read === false).length;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "notification-addon",
+    children: [/*#__PURE__*/_jsx(Button, {
+      ref: notificationAnchorRef,
+      "aria-controls": "notify-list-grow",
+      "aria-haspopup": "true",
+      "data-cy": "toggle-notification-btn",
+      onClick: onToggleNotification,
+      children: unreadCount > 0 ? /*#__PURE__*/_jsx(Badge, {
+        badgeContent: unreadCount,
+        max: 99,
+        color: "primary",
+        children: /*#__PURE__*/_jsx(NotificationIcon, {
+          style: {
+            width: 'auto',
+            height: 24
+          }
+        })
+      }) : /*#__PURE__*/_jsx(NotificationIcon, {
+        style: {
+          width: 'auto',
+          height: 24
+        }
+      })
+    }), notificationOpen && /*#__PURE__*/_jsx(Popper, {
+      open: true,
+      anchorEl: notificationAnchorRef.current,
+      disablePortal: true,
+      placement: "bottom-end",
+      children: /*#__PURE__*/_jsx(Paper, {
+        id: "notify-list-grow",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onCloseNotification,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(NotificationList, {
+              notifications: notifications,
+              updateNotifications: updateNotifications,
+              api: api,
+              viewAllUrl: viewAllUrl,
+              onHide: onCloseNotification,
+              teamDid: teamDid
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+NotificationAddon.propTypes = {
+  notifications: PropTypes.arrayOf(PropTypes.object),
+  viewAllUrl: PropTypes.string.isRequired,
+  api: PropTypes.object.isRequired,
+  updateNotifications: PropTypes.func.isRequired,
+  teamDid: PropTypes.string
+};
+NotificationAddon.defaultProps = {
+  notifications: [],
+  teamDid: ''
+};

package/es/notifications/default-icon-variants.js

@@ -0,0 +1,53 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+function CheckIcon(props) {
+  return /*#__PURE__*/_jsx(SvgIcon, {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+    })
+  });
+}
+function WarningIcon(props) {
+  return /*#__PURE__*/_jsx(SvgIcon, {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
+    })
+  });
+}
+function ErrorIcon(props) {
+  return /*#__PURE__*/_jsx(SvgIcon, {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2, 6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12, 13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+    })
+  });
+}
+function InfoIcon(props) {
+  return /*#__PURE__*/_jsx(SvgIcon, {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12A10,10 0 0,0 12,2Z"
+    })
+  });
+}
+const iconStyles = {
+  fontSize: 20,
+  marginInlineEnd: 8
+};
+const defaultIconVariants = {
+  success: /*#__PURE__*/_jsx(CheckIcon, {
+    style: iconStyles
+  }),
+  warning: /*#__PURE__*/_jsx(WarningIcon, {
+    style: iconStyles
+  }),
+  error: /*#__PURE__*/_jsx(ErrorIcon, {
+    style: iconStyles
+  }),
+  info: /*#__PURE__*/_jsx(InfoIcon, {
+    style: iconStyles
+  })
+};
+export default defaultIconVariants;

package/es/notifications/list.js

@@ -0,0 +1,251 @@
+/* eslint-disable operator-linebreak */
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { useContext, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Button from '@arcblock/ux/lib/Button';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import Spinner from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import List from '@mui/material/List';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import useTheme from '@mui/material/styles/useTheme';
+import NotificationTag from './tag';
+import Permission from '../permission';
+import RelativeTime from '../relative-time';
+import { useNodeContext } from '../contexts/node';
+import { BlockletAdminRoles } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function NotificationsList({
+  onHide,
+  api,
+  notifications,
+  updateNotifications,
+  viewAllUrl,
+  teamDid
+}) {
+  const {
+    inService
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [showRead, setShowRead] = useState(true);
+  const [isMarkingAll, setIsMarkingAll] = useState(false);
+  const navigate = useNavigate();
+  const theme = useTheme();
+  let filtered = showRead ? notifications : notifications.filter(x => x.read === false);
+  filtered = filtered.slice(0, 5);
+  const hasUnRead = notifications.filter(x => x.read === false).length > 0;
+  const onUnreadNotifications = async () => {
+    setIsMarkingAll(true);
+    const ids = notifications.filter(x => x.read === false).map(x => x.id).join(',');
+    if (inService) {
+      await api.readBlockletNotifications({
+        input: {
+          id: ids,
+          teamDid
+        }
+      });
+    } else {
+      await api.readNotifications({
+        input: {
+          id: ids
+        }
+      });
+    }
+    updateNotifications();
+    setIsMarkingAll(false);
+  };
+  const handleNotificationClick = (e, notification) => {
+    if (!notification.read) {
+      if (inService) {
+        api.readBlockletNotifications({
+          input: {
+            id: notification.id,
+            teamDid
+          }
+        }).then(() => updateNotifications());
+      } else {
+        api.readNotifications({
+          input: {
+            id: notification.id
+          }
+        }).then(() => updateNotifications());
+      }
+    }
+    onHide(e);
+    navigate(viewAllUrl);
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsxs(Typography, {
+      component: "h3",
+      variant: "h6",
+      className: "notification-header",
+      children: [t('notification.title'), /*#__PURE__*/_jsx(Button, {
+        component: Link,
+        to: viewAllUrl,
+        "data-cy": "view-all-notifications-btn",
+        onClick: onHide,
+        children: t('notification.viewAll')
+      })]
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(List, {
+      className: "notification-list",
+      style: {
+        maxHeight: 'calc(100vh - 200px)',
+        overflow: 'auto'
+      },
+      children: [filtered.length === 0 && /*#__PURE__*/_jsx(Typography, {
+        component: "p",
+        variant: "body1",
+        className: "notification-tip",
+        children: t('notification.empty')
+      }), filtered.length > 0 && filtered.map(x => /*#__PURE__*/_jsxs(ListItemButton, {
+        alignItems: "flex-start",
+        disabled: x.read,
+        onClick: e => handleNotificationClick(e, x),
+        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+          className: "list-item-avatar",
+          children: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Avatar, {
+              children: x.entityType.substr(0, 1).toUpperCase()
+            }), /*#__PURE__*/_jsx(NotificationTag, {
+              className: "notification-tag",
+              status: x.severity
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: x.title,
+          secondary: /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between'
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              component: "span",
+              sx: {
+                overflow: 'hidden',
+                '-webkit-line-clamp': '3',
+                '-webkit-box-orient': 'vertical',
+                display: '-webkit-box',
+                'text-overflow': 'ellipsis'
+              },
+              children: x.description
+            }), /*#__PURE__*/_jsx(RelativeTime, {
+              value: x.createdAt,
+              locale: locale,
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: '0.875rem',
+                marginTop: '4px'
+              }
+            })]
+          })
+        })]
+      }, x.id))]
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      className: "notification-footer",
+      children: [/*#__PURE__*/_jsx(FormControlLabel, {
+        control: /*#__PURE__*/_jsx(Checkbox, {
+          checked: showRead,
+          onChange: () => setShowRead(!showRead),
+          name: "showRead",
+          color: "primary"
+        }),
+        label: t('notification.showRead')
+      }), /*#__PURE__*/_jsx(Permission, {
+        permission: inService ? '' : 'mutate_notification',
+        role: inService ? BlockletAdminRoles : [],
+        children: hasUnRead && /*#__PURE__*/_jsxs(Button, {
+          disabled: isMarkingAll,
+          onClick: onUnreadNotifications,
+          className: "",
+          children: [isMarkingAll && /*#__PURE__*/_jsx(Spinner, {
+            size: 16,
+            style: {
+              marginRight: '1em'
+            }
+          }), t('notification.markAllAsRead')]
+        })
+      })]
+    })]
+  });
+}
+const Div = styled.div`
+  width: 420px;
+
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    width: calc(100vw - 10px);
+  }
+
+  .notification-header {
+    padding: 8px 16px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .notification-tip {
+    padding: 8px 16px;
+  }
+
+  .notification-footer {
+    padding: 8px 16px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .MuiButtonBase-root {
+    white-space: pre-wrap;
+  }
+
+  .list-item-avatar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 80px;
+
+    .notification-tag {
+      margin-top: 4px;
+    }
+  }
+
+  .MuiButtonBase-root:not(.Mui-disabled) {
+    .MuiAvatar-root {
+      background: ${props => props.theme.palette.primary.light};
+    }
+  }
+`;
+NotificationsList.propTypes = {
+  onHide: PropTypes.func,
+  api: PropTypes.shape({
+    readNotifications: PropTypes.func.isRequired,
+    readBlockletNotifications: PropTypes.func.isRequired
+  }).isRequired,
+  notifications: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    read: PropTypes.bool,
+    entityType: PropTypes.string,
+    title: PropTypes.string,
+    createdAt: PropTypes.string,
+    description: PropTypes.string
+  }).isRequired).isRequired,
+  updateNotifications: PropTypes.func.isRequired,
+  viewAllUrl: PropTypes.string.isRequired,
+  teamDid: PropTypes.string
+};
+NotificationsList.defaultProps = {
+  onHide: () => {},
+  teamDid: ''
+};

package/es/notifications/notification.js

@@ -0,0 +1,148 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable operator-linebreak */
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@mui/styles';
+import styled from '@emotion/styled';
+import { amber, green } from '@mui/material/colors';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useNavigate } from 'react-router-dom';
+import { useSnackbar, SnackbarContent } from 'notistack';
+import useWidth from '../hooks/use-width';
+import variants from './default-icon-variants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles(theme => {
+  const breakpointsMap = {
+    xl: '400px',
+    lg: '400px',
+    md: '400px',
+    sm: '300px'
+  };
+  // const backgroundColor = emphasize(theme.palette.background.default, theme.palette.mode === 'light' ? 0.8 : 0.98);
+  const backgroundColor = theme.palette.background.default;
+  return {
+    lessPadding: {
+      paddingLeft: 8 * 2.5
+    },
+    contentRoot: {
+      ...theme.typography.body2,
+      display: 'flex',
+      backgroundColor,
+      color: '#fff',
+      alignItems: 'center',
+      padding: '6px 16px',
+      borderRadius: '4px',
+      boxShadow: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)'
+    },
+    success: props => ({
+      backgroundColor: `${green[600]} !important`,
+      width: breakpointsMap[props.breakpoint]
+    }),
+    error: props => ({
+      backgroundColor: `${theme.palette.error.dark} !important`,
+      width: breakpointsMap[props.breakpoint]
+    }),
+    info: props => ({
+      backgroundColor: `${theme.palette.primary.main} !important`,
+      width: breakpointsMap[props.breakpoint]
+    }),
+    warning: props => ({
+      backgroundColor: `${amber[700]} !important`,
+      width: breakpointsMap[props.breakpoint]
+    }),
+    icon: {
+      fontSize: 20
+    },
+    message: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '8px 0',
+      flex: 1,
+      width: 0
+    },
+    action: {
+      display: 'flex',
+      alignItems: 'center',
+      marginLeft: 'auto',
+      marginRight: -8,
+      width: 44
+    }
+  };
+});
+function NotificationComponent({
+  keyId: key,
+  notification = {},
+  viewAllUrl
+}, ref) {
+  const classes = useStyles({
+    breakpoint: useWidth()
+  });
+  const combinedClassname = [classes.contentRoot, classes.lessPadding, classes[notification.severity]].join(' ');
+  const icon = variants[notification.severity];
+  const {
+    closeSnackbar
+  } = useSnackbar();
+  const onClickDismiss = () => closeSnackbar(key);
+  const navigate = useNavigate();
+  const onGoNotification = () => {
+    closeSnackbar(key);
+    navigate(viewAllUrl);
+  };
+  return /*#__PURE__*/_jsxs(SnackbarContent, {
+    ref: ref,
+    className: combinedClassname,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classes.message,
+      children: [icon, /*#__PURE__*/_jsxs(Div, {
+        onClick: onGoNotification,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "title",
+          children: notification.title
+        }), /*#__PURE__*/_jsx("span", {
+          className: "desc",
+          children: notification.description
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.action,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "close",
+        color: "inherit",
+        onClick: onClickDismiss,
+        size: "large",
+        children: /*#__PURE__*/_jsx(CloseIcon, {
+          className: classes.icon
+        })
+      }, "close")
+    })]
+  });
+}
+export default /*#__PURE__*/forwardRef(NotificationComponent);
+NotificationComponent.propTypes = {
+  viewAllUrl: PropTypes.string.isRequired,
+  keyId: PropTypes.number.isRequired,
+  notification: PropTypes.object.isRequired
+};
+const Div = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-weight: bold;
+  }
+  .desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+`;