@arcblock/ux 2.7.14 → 2.7.16

package/src/Locale/{selector.js → selector.jsx}

@@ -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';
 
@@ -82,7 +75,7 @@ export default function LocaleSelector(props) {
         </Box>
       </ButtonComponent>
 
-      <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
+      <StyledPopper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
@@ -98,7 +91,7 @@ export default function LocaleSelector(props) {
             </MenuList>
           </ClickAwayListener>
         </div>
-      </Popper>
+      </StyledPopper>
     </Div>
   );
 }
@@ -166,3 +159,9 @@ const Div = styled('div', {
     }
   }
 `;
+
+const StyledPopper = styled(Popper)`
+  z-index: ${({ theme }) => {
+    return theme.zIndex.tooltip + 10;
+  }};
+`;

package/src/SessionManager/account-item.jsx

@@ -0,0 +1,111 @@
+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';
+
+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 (
+    <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">
+      <Avatar did={account.did} />
+      <Box
+        sx={{
+          flex: 1,
+          overflow: 'hidden',
+          fontSize: 0,
+          '.did-address-avatar': {
+            display: 'none !important',
+          },
+        }}>
+        <DID did={account.did} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
+        <Typography variant="caption">
+          {t('from')}{' '}
+          {account.provider === 'federated' ? (
+            <Link href={account.appUrl} target="_blank" underline="none">
+              {account.appName}
+            </Link>
+          ) : (
+            account.appName
+          )}
+        </Typography>
+      </Box>
+      <Box className="account-item-actions">
+        {active ? (
+          <Box className="account-item-action" style={{ display: 'flex' }} key="CheckIcon">
+            <IconButton color="success">
+              <Icon icon={CheckIcon} color="success" />
+            </IconButton>
+          </Box>
+        ) : (
+          <Box className="account-item-action" key="TrashCanOutlineIcon">
+            <IconButton color="error" onClick={_onDelete}>
+              <Icon icon={TrashCanOutlineIcon} color="error" />
+            </IconButton>
+          </Box>
+        )}
+      </Box>
+    </MenuItem>
+  );
+}
+
+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/src/SessionManager/add-account-item.jsx

@@ -0,0 +1,115 @@
+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';
+
+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 (
+    <>
+      <MenuItem
+        ref={addRef}
+        onClick={_onAdd}
+        className="session-manager-menu-item"
+        sx={{ display: 'flex', gap: '8px' }}
+        data-cy="sessionManager-switch-trigger">
+        <Icon icon={AddIcon} width={24} height={24} />
+        <Typography>{t('addAnotherAccount')}</Typography>
+      </MenuItem>
+      {addRef.current ? (
+        <Menu
+          anchorEl={addRef.current}
+          open={state.open}
+          onClose={onClose}
+          elevation={0}
+          PaperProps={{
+            variant: 'outlined',
+          }}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}>
+          {apps.map((app) => (
+            <MenuItem key={app.appId} onClick={() => onAdd(app)}>
+              Connect with {app.appName} account
+            </MenuItem>
+          ))}
+        </Menu>
+      ) : null}
+    </>
+  );
+}
+
+AddAccountItem.propTypes = {
+  onAdd: PropTypes.func,
+  locale: PropTypes.string,
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en',
+};

package/src/SessionManager/federated-login-detecter.jsx

@@ -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';
@@ -18,7 +18,7 @@ const translations = {
     useToConnect({ master, member }) {
       return (
         <>
-          Use {master} account to connect {member}
+          Connect {member} with {master} account
         </>
       );
     },
@@ -63,6 +63,15 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
     );
   }, [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 && (
       <UserPopper
@@ -74,14 +83,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
         <Box p={2}>
           {siteInfo && (
             <Box display="flex" alignItems="center">
-              <Box
-                component="img"
-                mr={2}
-                src={`${siteInfo.appUrl}${siteInfo.appLogo}`}
-                alt={siteInfo.appName}
-                width="30px"
-                height="30px"
-              />
+              <Box component="img" mr={2} src={appLogoUrl.href} alt={siteInfo.appName} width="30px" height="30px" />
               <Box sx={{ maxWidth: '260px' }}>
                 {translations[locale].useToConnect({
                   master: (
@@ -117,7 +119,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
                       size="small"
                       variant="outlined"
                       sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
-                      icon={<SvgIcon component={ShieldCheck} style={{ fontSize: '14px' }} />}
+                      icon={<Icon icon={ShieldCheckIcon} fontSize={14} />}
                     />
                   )}
                 </Box>