@arcblock/ux 2.7.14 → 2.7.16

package/lib/SessionManager/account-item.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AccountItem;
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("@iconify/react");
+var _check = _interopRequireDefault(require("@iconify-icons/mdi/check"));
+var _trashCanOutline = _interopRequireDefault(require("@iconify-icons/mdi/trash-can-outline"));
+var _ahooks = require("ahooks");
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _DID = _interopRequireDefault(require("../DID"));
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AccountItem(_ref) {
+  let {
+    account,
+    active,
+    onDelete,
+    onChoose,
+    locale
+  } = _ref;
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  const _onChoose = (0, _ahooks.useMemoizedFn)(() => onChoose(account, {
+    active
+  }));
+  const _onDelete = (0, _ahooks.useMemoizedFn)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete(account, {
+      active
+    });
+  });
+  if (!(account !== null && account !== void 0 && account.did) || !(account !== null && account !== void 0 && account.appName)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      did: account.did
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        fontSize: 0,
+        '.did-address-avatar': {
+          display: 'none !important'
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        did: account.did,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "caption",
+        children: [t('from'), ' ', account.provider === 'federated' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          href: account.appUrl,
+          target: "_blank",
+          underline: "none",
+          children: account.appName
+        }) : account.appName]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "account-item-actions",
+      children: active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        style: {
+          display: 'flex'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "success",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _check.default,
+            color: "success"
+          })
+        })
+      }, "CheckIcon") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "error",
+          onClick: _onDelete,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _trashCanOutline.default,
+            color: "error"
+          })
+        })
+      }, "TrashCanOutlineIcon")
+    })]
+  });
+}
+AccountItem.propTypes = {
+  account: _propTypes.default.object,
+  active: _propTypes.default.bool,
+  locale: _propTypes.default.string,
+  onChoose: _propTypes.default.func,
+  onDelete: _propTypes.default.func
+};
+AccountItem.defaultProps = {
+  account: null,
+  active: false,
+  locale: 'en',
+  onChoose: () => {},
+  onDelete: () => {}
+};

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

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddAccountItem;
+var _react = require("@iconify/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _iosAddCircleOutline = _interopRequireDefault(require("@iconify-icons/ion/ios-add-circle-outline"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _ahooks = require("ahooks");
+var _react2 = require("react");
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AddAccountItem(_ref) {
+  let {
+    onAdd,
+    locale
+  } = _ref;
+  const addRef = (0, _react2.useRef)(null);
+  const state = (0, _ahooks.useReactive)({
+    open: false
+  });
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  const apps = (0, _ahooks.useCreation)(() => {
+    var _window, _blocklet$settings, _blocklet$settings$fe;
+    const appList = [];
+    if (typeof window === 'undefined') {
+      return appList;
+    }
+    const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _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 = !(0, _isEmpty.default)((_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : (_blocklet$settings$fe = _blocklet$settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.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 = (0, _ahooks.useMemoizedFn)(() => {
+    if (apps.length <= 1) {
+      onAdd(apps[0]);
+    } else {
+      state.open = true;
+    }
+  });
+  const onClose = (0, _ahooks.useMemoizedFn)(() => {
+    state.open = false;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      ref: addRef,
+      onClick: _onAdd,
+      className: "session-manager-menu-item",
+      sx: {
+        display: 'flex',
+        gap: '8px'
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _iosAddCircleOutline.default,
+        width: 24,
+        height: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t('addAnotherAccount')
+      })]
+    }), addRef.current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        onClick: () => onAdd(app),
+        children: ["Connect with ", app.appName, " account"]
+      }, app.appId))
+    }) : null]
+  });
+}
+AddAccountItem.propTypes = {
+  onAdd: _propTypes.default.func,
+  locale: _propTypes.default.string
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en'
+};

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

@@ -9,8 +9,8 @@ var _react = require("react");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
-var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
+var _react2 = require("@iconify/react");
 var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
@@ -27,7 +27,7 @@ const translations = {
         member
       } = _ref;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: ["Use ", master, " account to connect ", member]
+        children: ["Connect ", member, " with ", master, " account"]
       });
     },
     connect: 'Connect Account',
@@ -72,6 +72,14 @@ function FederatedLoginDetecter(_ref3) {
       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__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
     open: federatedLoginOpen,
     anchorEl: anchorEl,
@@ -86,7 +94,7 @@ function FederatedLoginDetecter(_ref3) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           component: "img",
           mr: 2,
-          src: "".concat(siteInfo.appUrl).concat(siteInfo.appLogo),
+          src: appLogoUrl.href,
           alt: siteInfo.appName,
           width: "30px",
           height: "30px"
@@ -141,11 +149,9 @@ function FederatedLoginDetecter(_ref3) {
                 marginRight: 0,
                 fontSize: 12
               },
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-                component: _ShieldCheck.default,
-                style: {
-                  fontSize: '14px'
-                }
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                icon: _shieldCheck.default,
+                fontSize: 14
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {