@arcblock/ux 2.7.16 → 2.7.18

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.16",
+  "version": "2.7.18",
   "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,11 +322,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "8adb844a1067ecca748cd70c5978c9f7497e3658",
+  "gitHead": "2866b3fba4076f10ffcfb9b3c8bd68ab68c3eb88",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.16",
-    "@arcblock/react-hooks": "^2.7.16",
+    "@arcblock/icons": "^2.7.18",
+    "@arcblock/react-hooks": "^2.7.18",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -331,8 +335,8 @@
     "@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",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
     "ahooks": "^3.7.8",
@@ -348,7 +352,7 @@
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mui-datatables": "^4.2.2",
+    "mui-datatables": "^4.3.0",
     "notistack": "^2.0.5",
     "pako": "^2.1.0",
     "react-cookie-consent": "^6.4.1",

package/src/SessionManager/account-item.jsx

@@ -54,7 +54,7 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
         },
       }}
       className="session-manager-menu-item">
-      <Avatar did={account.did} />
+      <Avatar did={account.did} size={42} />
       <Box
         sx={{
           flex: 1,
@@ -65,16 +65,14 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
           },
         }}>
         <DID did={account.did} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
-        <Typography variant="caption">
-          {t('from')}{' '}
-          {account.provider === 'federated' ? (
+        {account.sourceAppPid && (
+          <Typography variant="caption">
+            {t('from')}{' '}
             <Link href={account.appUrl} target="_blank" underline="none">
               {account.appName}
             </Link>
-          ) : (
-            account.appName
-          )}
-        </Typography>
+          </Typography>
+        )}
       </Box>
       <Box className="account-item-actions">
         {active ? (

package/src/SessionManager/add-account-item.jsx

@@ -2,11 +2,11 @@ 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 { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 export default function AddAccountItem({ onAdd, locale }) {
   const addRef = useRef(null);
@@ -23,36 +23,18 @@ export default function AddAccountItem({ onAdd, locale }) {
       return appList;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return appList;
+
+    const masterApp = getFederatedApp(blocklet);
+    const currentApp = getCurrentApp(blocklet);
+
+    if (currentApp) {
+      appList.push(currentApp);
     }
-    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];
+    if (masterApp && masterApp?.appId !== currentApp?.appId) {
+      appList.push(masterApp);
     }
-    return appList;
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
   }, [window.blocklet]);
 
   const _onAdd = useMemoizedFn(() => {
@@ -96,7 +78,7 @@ export default function AddAccountItem({ onAdd, locale }) {
           }}>
           {apps.map((app) => (
             <MenuItem key={app.appId} onClick={() => onAdd(app)}>
-              Connect with {app.appName} account
+              {t('connectWithAccount', { name: app.appName })}
             </MenuItem>
           ))}
         </Menu>

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

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import { Icon } from '@iconify/react';
+import { useCreation, useReactive } from 'ahooks';
 
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
@@ -39,10 +40,13 @@ const translations = {
 };
 
 export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
-  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+  const state = useReactive({
+    open: true,
+  });
 
-  const siteInfo = session.federatedMaster?.site;
-  const userInfo = session.federatedMaster?.user;
+  const federatedMaster = useCreation(() => {
+    return session.federatedMaster;
+  }, [session?.federatedMaster]);
 
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
@@ -53,19 +57,19 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
         if (err) {
           Toast.error(err || translations[_locale].loginFederatedFailed);
         } else {
-          setFederatedLoginOpen(false);
+          state.open = false;
         }
       },
       {
-        provider: 'federated',
-        mode: userInfo ? 'auto' : 'manual',
+        sourceAppPid: federatedMaster?.site?.appPid,
+        mode: federatedMaster?.user ? 'auto' : 'manual',
       }
     );
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
 
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster?.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
@@ -73,26 +77,35 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
   }
 
   return (
-    siteInfo && (
+    federatedMaster?.site && (
       <UserPopper
-        open={federatedLoginOpen}
+        open={state.open}
         anchorEl={anchorEl}
         dark={dark}
         autoClose={false}
-        onClose={() => setFederatedLoginOpen(false)}>
+        onClose={() => {
+          state.open = false;
+        }}>
         <Box p={2}>
-          {siteInfo && (
+          {federatedMaster.site && (
             <Box display="flex" alignItems="center">
-              <Box component="img" mr={2} src={appLogoUrl.href} alt={siteInfo.appName} width="30px" height="30px" />
+              <Box
+                component="img"
+                mr={2}
+                src={appLogoUrl.href}
+                alt={federatedMaster.site.appName}
+                width="30px"
+                height="30px"
+              />
               <Box sx={{ maxWidth: '260px' }}>
                 {translations[locale].useToConnect({
                   master: (
                     <Box
                       component="a"
-                      href={siteInfo.appUrl}
+                      href={federatedMaster.site.appUrl}
                       target="_blank"
                       sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
-                      {siteInfo.appName}
+                      {federatedMaster.site.appName}
                     </Box>
                   ),
                   member: window.blocklet.appName,
@@ -100,22 +113,22 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
               </Box>
             </Box>
           )}
-          {siteInfo && userInfo && <Divider style={{ margin: '15px 0 10px 0' }} />}
-          {userInfo && (
+          {federatedMaster?.site && federatedMaster?.user && <Divider style={{ margin: '15px 0 10px 0' }} />}
+          {federatedMaster?.user && (
             <Box display="flex" alignItems="center">
               <DidAvatar
                 variant="circle"
-                did={userInfo.did}
-                src={getUserAvatar(userInfo.avatar)}
+                did={federatedMaster.user.did}
+                src={getUserAvatar(federatedMaster.user.avatar)}
                 size={28}
                 shape="circle"
               />
               <Box ml={2}>
                 <Box display="flex" justifyContent="space-between" alignItems="center">
-                  <Box fontSize={18}>{userInfo.fullName}</Box>
-                  {userInfo.role?.toUpperCase() && (
+                  <Box fontSize={18}>{federatedMaster.user.fullName}</Box>
+                  {federatedMaster.user.role?.toUpperCase() && (
                     <Chip
-                      label={userInfo.role?.toUpperCase()}
+                      label={federatedMaster.user.role?.toUpperCase()}
                       size="small"
                       variant="outlined"
                       sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
@@ -123,11 +136,11 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
                     />
                   )}
                 </Box>
-                <DidAddress responsive={false}>{userInfo.did}</DidAddress>
+                <DidAddress responsive={false}>{federatedMaster.user.did}</DidAddress>
               </Box>
             </Box>
           )}
-          {siteInfo && (
+          {federatedMaster?.site && (
             <Box display="flex" justifyContent="center" mt={2}>
               <Button variant="contained" size="small" onClick={onLoginFederated}>
                 {translations[locale].connect}