@arcblock/ux 2.7.14 → 2.7.16

package/es/Dialog/confirm.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
-import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
-import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -93,16 +92,15 @@ Confirm.defaultProps = {
   PaperProps: {}
 };
 const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    t
-  } = useContext(LocaleContext);
   const state = useReactive({
     show: false,
     title: '',
     content: '',
     onConfirm: noop,
     onCancel: noop,
-    loading: false
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel'
   });
   const open = useMemoizedFn((params = {}) => {
     state.show = true;
@@ -110,6 +108,8 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     state.content = params.content;
     state.onConfirm = params.onConfirm || noop;
     state.onCancel = params.onCancel || noop;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
     state.loading = false;
   });
   const reset = useMemoizedFn(() => {
@@ -117,6 +117,8 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     state.content = '';
     state.onConfirm = noop;
     state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -148,7 +150,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     onConfirm: onConfirm,
     onCancel: onCancel,
     confirmButton: {
-      text: t('common.confirm'),
+      text: state.confirmButtonText,
       props: {
         variant: 'contained',
         color: 'primary',
@@ -156,7 +158,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       }
     },
     cancelButton: {
-      text: t('common.cancel'),
+      text: state.cancelButtonText,
       props: {
         variant: 'outlined',
         color: 'primary'

package/es/Img/index.js

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import SvgIcon from '@mui/material/SvgIcon';
 import { useInView } from 'react-intersection-observer';
-import Alert from 'mdi-material-ui/Alert';
-import ImageIcon from 'mdi-material-ui/Image';
+import AlertIcon from '@iconify-icons/mdi/alert';
+import ImageIcon from '@iconify-icons/mdi/image';
+import { Icon } from '@iconify/react';
 import { styled } from '../Theme';
 
 /**
@@ -161,15 +161,15 @@ function Img({
         children: [!fallback && imgState === 'error' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "loading image",
-          children: /*#__PURE__*/_jsx(SvgIcon, {
-            component: Alert,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: AlertIcon,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "Image load error",
-          children: /*#__PURE__*/_jsx(SvgIcon, {
-            component: ImageIcon,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ImageIcon,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/_jsx("img", {

package/es/Locale/selector.js

@@ -1,14 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import Box from '@mui/material/Box';
+import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import GlobeIcon from '@arcblock/icons/lib/Globe';
 import { getColor, getBackground } from '../Util';
@@ -92,7 +85,7 @@ export default function LocaleSelector(props) {
           children: languages.find(x => x.code === locale).name
         }) : '']
       })
-    }), /*#__PURE__*/_jsx(Popper, {
+    }), /*#__PURE__*/_jsx(StyledPopper, {
       open: open,
       anchorEl: anchorEl.current,
       ...popperProps,
@@ -179,4 +172,11 @@ const Div = styled('div', {
       visibility: visible;
     }
   }
+`;
+const StyledPopper = styled(Popper)`
+  z-index: ${({
+  theme
+}) => {
+  return theme.zIndex.tooltip + 10;
+}};
 `;

package/es/SessionManager/account-item.js

@@ -0,0 +1,132 @@
+import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Icon } from '@iconify/react';
+import CheckIcon from '@iconify-icons/mdi/check';
+import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
+import { useMemoizedFn } from 'ahooks';
+import Avatar from '../Avatar';
+import DID from '../DID';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AccountItem({
+  account,
+  active,
+  onDelete,
+  onChoose,
+  locale
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const _onChoose = useMemoizedFn(() => onChoose(account, {
+    active
+  }));
+  const _onDelete = useMemoizedFn(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete(account, {
+      active
+    });
+  });
+  if (!account?.did || !account?.appName) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: _onChoose,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      gap: '8px',
+      position: 'relative',
+      '.account-item-actions': {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        marginRight: '12px',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      '.account-item-action': {
+        alignItems: 'center',
+        display: 'none'
+      },
+      '&:hover .account-item-action': {
+        display: 'flex'
+      }
+    },
+    className: "session-manager-menu-item",
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      did: account.did
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        fontSize: 0,
+        '.did-address-avatar': {
+          display: 'none !important'
+        }
+      },
+      children: [/*#__PURE__*/_jsx(DID, {
+        did: account.did,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }), /*#__PURE__*/_jsxs(Typography, {
+        variant: "caption",
+        children: [t('from'), ' ', account.provider === 'federated' ? /*#__PURE__*/_jsx(Link, {
+          href: account.appUrl,
+          target: "_blank",
+          underline: "none",
+          children: account.appName
+        }) : account.appName]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "account-item-actions",
+      children: active ? /*#__PURE__*/_jsx(Box, {
+        className: "account-item-action",
+        style: {
+          display: 'flex'
+        },
+        children: /*#__PURE__*/_jsx(IconButton, {
+          color: "success",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: CheckIcon,
+            color: "success"
+          })
+        })
+      }, "CheckIcon") : /*#__PURE__*/_jsx(Box, {
+        className: "account-item-action",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          color: "error",
+          onClick: _onDelete,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: TrashCanOutlineIcon,
+            color: "error"
+          })
+        })
+      }, "TrashCanOutlineIcon")
+    })]
+  });
+}
+AccountItem.propTypes = {
+  account: PropTypes.object,
+  active: PropTypes.bool,
+  locale: PropTypes.string,
+  onChoose: PropTypes.func,
+  onDelete: PropTypes.func
+};
+AccountItem.defaultProps = {
+  account: null,
+  active: false,
+  locale: 'en',
+  onChoose: () => {},
+  onDelete: () => {}
+};

package/es/SessionManager/add-account-item.js

@@ -0,0 +1,118 @@
+import { Icon } from '@iconify/react';
+import PropTypes from 'prop-types';
+import { Menu, MenuItem, Typography } from '@mui/material';
+import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
+import isEmpty from 'lodash/isEmpty';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useRef } from 'react';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+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 AddAccountItem({
+  onAdd,
+  locale
+}) {
+  const addRef = useRef(null);
+  const state = useReactive({
+    open: false
+  });
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const apps = useCreation(() => {
+    const appList = [];
+    if (typeof window === 'undefined') {
+      return appList;
+    }
+    const blocklet = window?.blocklet;
+    if (!blocklet) {
+      return appList;
+    }
+    const currentApp = {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      provider: 'wallet'
+    };
+    appList.push(currentApp);
+    const isFederatedMember = !isEmpty(blocklet.settings?.federated?.master);
+    if (isFederatedMember) {
+      const federatedMaster = blocklet.settings.federated.master;
+      const masterApp = {
+        appId: federatedMaster.appId,
+        appName: federatedMaster.appName,
+        appDescription: federatedMaster.appDescription,
+        appLogo: federatedMaster.appLogo,
+        appPid: federatedMaster.appPid,
+        appUrl: federatedMaster.appUrl,
+        version: federatedMaster.version,
+        provider: 'federated'
+      };
+      return [masterApp, currentApp];
+    }
+    return appList;
+  }, [window.blocklet]);
+  const _onAdd = useMemoizedFn(() => {
+    if (apps.length <= 1) {
+      onAdd(apps[0]);
+    } else {
+      state.open = true;
+    }
+  });
+  const onClose = useMemoizedFn(() => {
+    state.open = false;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(MenuItem, {
+      ref: addRef,
+      onClick: _onAdd,
+      className: "session-manager-menu-item",
+      sx: {
+        display: 'flex',
+        gap: '8px'
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: AddIcon,
+        width: 24,
+        height: 24
+      }), /*#__PURE__*/_jsx(Typography, {
+        children: t('addAnotherAccount')
+      })]
+    }), addRef.current ? /*#__PURE__*/_jsx(Menu, {
+      anchorEl: addRef.current,
+      open: state.open,
+      onClose: onClose,
+      elevation: 0,
+      PaperProps: {
+        variant: 'outlined'
+      },
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: apps.map(app => /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: () => onAdd(app),
+        children: ["Connect with ", app.appName, " account"]
+      }, app.appId))
+    }) : null]
+  });
+}
+AddAccountItem.propTypes = {
+  onAdd: PropTypes.func,
+  locale: PropTypes.string
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en'
+};

package/es/SessionManager/federated-login-detecter.js

@@ -3,8 +3,8 @@ import { useCallback, useState } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
-import SvgIcon from '@mui/material/SvgIcon';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
+import { Icon } from '@iconify/react';
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
@@ -21,7 +21,7 @@ const translations = {
       member
     }) {
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["Use ", master, " account to connect ", member]
+        children: ["Connect ", member, " with ", master, " account"]
       });
     },
     connect: 'Connect Account',
@@ -63,6 +63,14 @@ export default function FederatedLoginDetecter({
       mode: userInfo ? 'auto' : 'manual'
     });
   }, [session, userInfo, _locale]);
+  let appLogoUrl;
+  if (siteInfo) {
+    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+    appLogoUrl.searchParams.set('imageFilter', 'resize');
+    // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
+    appLogoUrl.searchParams.set('w', '80');
+    appLogoUrl.searchParams.set('h', '80');
+  }
   return siteInfo && /*#__PURE__*/_jsx(UserPopper, {
     open: federatedLoginOpen,
     anchorEl: anchorEl,
@@ -77,7 +85,7 @@ export default function FederatedLoginDetecter({
         children: [/*#__PURE__*/_jsx(Box, {
           component: "img",
           mr: 2,
-          src: `${siteInfo.appUrl}${siteInfo.appLogo}`,
+          src: appLogoUrl.href,
           alt: siteInfo.appName,
           width: "30px",
           height: "30px"
@@ -132,11 +140,9 @@ export default function FederatedLoginDetecter({
                 marginRight: 0,
                 fontSize: 12
               },
-              icon: /*#__PURE__*/_jsx(SvgIcon, {
-                component: ShieldCheck,
-                style: {
-                  fontSize: '14px'
-                }
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: ShieldCheckIcon,
+                fontSize: 14
               })
             })]
           }), /*#__PURE__*/_jsx(DidAddress, {