@arcblock/ux 2.7.15 → 2.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.15",
+  "version": "2.7.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -318,16 +318,19 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "a40ed26cfd0cbf892b00f98c773eff8ad7a50570",
+  "gitHead": "8adb844a1067ecca748cd70c5978c9f7497e3658",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.15",
-    "@arcblock/react-hooks": "^2.7.15",
+    "@arcblock/icons": "^2.7.16",
+    "@arcblock/react-hooks": "^2.7.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fontsource/lato": "^4.5.10",
     "@fontsource/ubuntu-mono": "^4.5.11",
+    "@iconify-icons/ion": "^1.2.10",
+    "@iconify-icons/mdi": "^1.2.47",
+    "@iconify/react": "^4.1.1",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
@@ -341,10 +344,10 @@
     "dayjs": "^1.11.5",
     "devices.css": "^0.1.15",
     "highlight.js": "^11.6.0",
+    "iconify-icon": "^1.0.8",
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^7.5.0",
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "pako": "^2.1.0",

package/src/Dialog/confirm.js

@@ -1,9 +1,8 @@
 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';
 
@@ -98,8 +97,6 @@ Confirm.defaultProps = {
 };
 
 const ConfirmHolder = forwardRef((props, ref) => {
-  const { t } = useContext(LocaleContext);
-
   const state = useReactive({
     show: false,
     title: '',
@@ -107,6 +104,8 @@ const ConfirmHolder = forwardRef((props, ref) => {
     onConfirm: noop,
     onCancel: noop,
     loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
   });
   const open = useMemoizedFn((params = {}) => {
     state.show = true;
@@ -114,6 +113,8 @@ const ConfirmHolder = 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(() => {
@@ -121,6 +122,8 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.content = '';
     state.onConfirm = noop;
     state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -158,7 +161,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
       onConfirm={onConfirm}
       onCancel={onCancel}
       confirmButton={{
-        text: t('common.confirm'),
+        text: state.confirmButtonText,
         props: {
           variant: 'contained',
           color: 'primary',
@@ -166,7 +169,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
         },
       }}
       cancelButton={{
-        text: t('common.cancel'),
+        text: state.cancelButtonText,
         props: {
           variant: 'outlined',
           color: 'primary',

package/src/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';
 
 /**
@@ -160,12 +160,12 @@ function Img({
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
-            <SvgIcon component={Alert} className="image--icon" />
+            <Icon icon={AlertIcon} className="image--icon" />
           </div>
         )}
         {!placeholder && imgState === 'loading' && (
           <div className="image--state" title="Image load error">
-            <SvgIcon component={ImageIcon} className="image--icon" />
+            <Icon icon={ImageIcon} className="image--icon" />
           </div>
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}

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';
@@ -119,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>