@arcblock/ux 2.7.15 → 2.7.17

package/lib/SessionManager/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSourceProvider = exports.getConnectedAccounts = void 0;
+const getSourceProvider = user => {
+  var _user$extraConfigs;
+  return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.sourceProvider) || 'wallet';
+};
+exports.getSourceProvider = getSourceProvider;
+const getConnectedAccounts = user => {
+  var _user$extraConfigs2;
+  return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.connectedAccounts) || [];
+};
+exports.getConnectedAccounts = getConnectedAccounts;

package/lib/Typography/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Typography;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["minFontSize", "fontSize", "children", "sx"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Typography(_ref) {
+  let {
+      minFontSize,
+      fontSize,
+      children,
+      sx
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const refMock = (0, _react.useRef)(null);
+  const refContainer = (0, _react.useRef)(null);
+  const state = (0, _ahooks.useReactive)({
+    fontSize,
+    loading: true,
+    initialSize: undefined
+  });
+  const mockSize = (0, _ahooks.useSize)(refMock.current);
+  const containerSize = (0, _ahooks.useSize)(refContainer.current);
+  (0, _react.useEffect)(() => {
+    if (state.loading) {
+      if (fontSize === 'auto') {
+        if (mockSize && !state.initialSize) {
+          const styleSize = getComputedStyle(refMock.current).fontSize;
+          state.initialSize = Number(styleSize.replace('px', ''));
+          state.fontSize = state.initialSize;
+        }
+        if (containerSize && mockSize) {
+          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
+            state.fontSize--;
+          } else {
+            state.loading = false;
+          }
+        }
+      } else {
+        state.loading = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSize, mockSize === null || mockSize === void 0 ? void 0 : mockSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
+  return state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref: refContainer,
+    flex: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
+      sx: sx,
+      noWrap: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: '1rem'
+        }
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({
+      ref: refMock
+    }, rest), {}, {
+      sx: _objectSpread(_objectSpread({}, sx), {}, {
+        fontSize: "".concat(state.fontSize, "px !important"),
+        position: 'fixed',
+        top: -1000,
+        left: -1000
+      }),
+      noWrap: true,
+      children: children
+    }))]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {
+    sx: _objectSpread(_objectSpread({}, sx), {}, {
+      fontSize: "".concat(state.fontSize, "px !important")
+    }),
+    children: children
+  }));
+}
+Typography.propTypes = {
+  fontSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  children: _propTypes.default.any.isRequired,
+  minFontSize: _propTypes.default.number,
+  sx: _propTypes.default.object
+};
+Typography.defaultProps = {
+  fontSize: undefined,
+  minFontSize: 12,
+  sx: {}
+};

package/lib/Util/federated.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAutoLoginFederated = getAutoLoginFederated;
+exports.getConfig = getConfig;
+exports.getCurrentApp = getCurrentApp;
+exports.getFederatedApp = getFederatedApp;
+exports.getMaster = getMaster;
+exports.getSourceAppPid = getSourceAppPid;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getMaster() {
+  var _blocklet$settings;
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const federated = (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.federated) || {};
+  return federated.master;
+}
+function getConfig() {
+  var _blocklet$settings2;
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const federated = (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings2 = blocklet.settings) === null || _blocklet$settings2 === void 0 ? void 0 : _blocklet$settings2.federated) || {};
+  return federated.config;
+}
+function getAutoLoginFederated() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const config = getConfig(blocklet);
+  return Boolean(config === null || config === void 0 ? void 0 : config.autoLogin) && (config === null || config === void 0 ? void 0 : config.status) === 'approved';
+}
+function getSourceAppPid() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const master = getMaster(blocklet);
+  return master === null || master === void 0 ? void 0 : master.appPid;
+}
+function getFederatedApp() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const master = getMaster(blocklet);
+  const isFederatedMode = !(0, _isEmpty.default)(master);
+  return isFederatedMode ? {
+    appId: master.appId,
+    appName: master.appName,
+    appDescription: master.appDescription,
+    appLogo: master.appLogo,
+    appPid: master.appPid,
+    appUrl: master.appUrl,
+    version: master.version,
+    sourceAppPid: master.appPid,
+    provider: 'wallet'
+  } : null;
+}
+function getCurrentApp() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  // 适用于 blocklet 项目
+  if (blocklet) {
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet'
+    };
+  }
+  // HACK: 适用于 blockelt-server
+  if (window.env) {
+    // eslint-disable-next-line no-param-reassign
+    blocklet = window.env;
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appUrl: blocklet.baseUrl,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet',
+      type: 'server'
+    };
+  }
+  return null;
+}

package/lib/Util/index.js

@@ -16,7 +16,7 @@ exports.mergeProps = mergeProps;
 exports.openWebWallet = openWebWallet;
 exports.parseQuery = parseQuery;
 exports.setDateTool = setDateTool;
-exports.str2color = void 0;
+exports.str2color = exports.sleep = void 0;
 exports.stringifyQuery = stringifyQuery;
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -339,4 +339,13 @@ const getUserAvatar = function getUserAvatar(avatar) {
   }
   return avatar;
 };
-exports.getUserAvatar = getUserAvatar;
+exports.getUserAvatar = getUserAvatar;
+const sleep = function sleep() {
+  let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
+};
+exports.sleep = sleep;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.15",
+  "version": "2.7.17",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -277,6 +277,10 @@
       "import": "./es/Toast/index.js",
       "require": "./lib/Toast/index.js"
     },
+    "./lib/Typography": {
+      "import": "./es/Typography/index.js",
+      "require": "./lib/Typography/index.js"
+    },
     "./lib/Util": {
       "import": "./es/Util/index.js",
       "require": "./lib/Util/index.js"
@@ -318,16 +322,19 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "a40ed26cfd0cbf892b00f98c773eff8ad7a50570",
+  "gitHead": "3a169b96cef38680f727a9d0aa0dc4588eaf85fd",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.15",
-    "@arcblock/react-hooks": "^2.7.15",
+    "@arcblock/icons": "^2.7.17",
+    "@arcblock/react-hooks": "^2.7.17",
     "@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 +348,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,109 @@
+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} size={42} />
+      <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 }} />
+        {account.sourceAppPid && (
+          <Typography variant="caption">
+            {t('from')}{' '}
+            <Link href={account.appUrl} target="_blank" underline="none">
+              {account.appName}
+            </Link>
+          </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,97 @@
+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 { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useRef } from 'react';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
+
+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;
+
+    const masterApp = getFederatedApp(blocklet);
+    const currentApp = getCurrentApp(blocklet);
+
+    if (currentApp) {
+      appList.push(currentApp);
+    }
+    if (masterApp && masterApp?.appId !== currentApp?.appId) {
+      appList.push(masterApp);
+    }
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
+  }, [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)}>
+              {t('connectWithAccount', { name: app.appName })}
+            </MenuItem>
+          ))}
+        </Menu>
+      ) : null}
+    </>
+  );
+}
+
+AddAccountItem.propTypes = {
+  onAdd: PropTypes.func,
+  locale: PropTypes.string,
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en',
+};