@abtnode/ux 1.16.18-beta-aa01bd8e → 1.16.18-beta-bb4ebacc

package/es/team/members/connections.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import DidAddress from '../../did-address';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function UserConnections({
+  user
+}) {
+  const connectedAccounts = user.connectedAccounts || [];
+  return connectedAccounts.map(account => {
+    return /*#__PURE__*/_jsx(InfoRow, {
+      style: {
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 120,
+      name: account.provider,
+      children: /*#__PURE__*/_jsx(DidAddress, {
+        did: account.did
+      })
+    }, account.did);
+  });
+}
+UserConnections.propTypes = {
+  user: PropTypes.object.isRequired
+};
+UserConnections.defaultProps = {};

package/es/team/members/member.js

@@ -26,6 +26,7 @@ import PassportIssuances from './passport-issuances';
 import Passports from './passports';
 import ToggleUserApproval from './toggle-user-approval';
 import { parseAvatar } from './util';
+import UserConnections from './connections';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function LinkUser({
@@ -47,31 +48,6 @@ function LinkUser({
 LinkUser.propTypes = {
   name: PropTypes.string.isRequired
 };
-function TabOAuth({
-  user
-}) {
-  const connectedAccounts = user.connectedAccounts || [];
-  return connectedAccounts.map(account => {
-    return /*#__PURE__*/_jsx(InfoRow, {
-      style: {
-        alignItems: 'flex-start'
-      },
-      valueComponent: "div",
-      nameWidth: 120,
-      name: account.provider,
-      children: /*#__PURE__*/_jsx(DidAddress, {
-        did: account.did
-      })
-    }, account.did);
-  });
-}
-TabOAuth.propTypes = {
-  user: PropTypes.object.isRequired,
-  onChangeUser: PropTypes.func
-};
-TabOAuth.defaultProps = {
-  onChangeUser: () => {}
-};
 const defaultTab = 'info';
 export default function Member({
   userDid,
@@ -232,7 +208,7 @@ export default function Member({
     oauth: {
       label: t('team.member.connectedAccounts'),
       value: 'oauth',
-      component: () => /*#__PURE__*/_jsx(TabOAuth, {
+      component: () => /*#__PURE__*/_jsx(UserConnections, {
         user: pageState.user,
         onChangeUser: handleChangeUser
       })

package/es/team/members/passport-item.js

@@ -0,0 +1,104 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import upperFirst from 'lodash/upperFirst';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PassportItem({
+  passport,
+  user,
+  color,
+  width,
+  icon,
+  children,
+  createPassportSvg,
+  ...rest
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  return /*#__PURE__*/_jsxs(Root, {
+    display: "flex",
+    alignItems: "center",
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: createPassportSvg({
+          title: passport.title || passport.name,
+          issuer: passport.issuer && passport.issuer.name,
+          issuerDid: passport.issuer && passport.issuer.id,
+          ownerName: user.fullName,
+          ownerDid: user.did,
+          ownerAvatarUrl: user.avatar,
+          revoked: passport.revoked,
+          preferredColor: color,
+          width
+        })
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "body",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "title",
+        display: "flex",
+        alignItems: "center",
+        children: [upperFirst(passport.title), /*#__PURE__*/_jsxs("div", {
+          className: "status-icons",
+          children: [icon, passport.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
+        })]
+      }), passport.expirationDate && /*#__PURE__*/_jsx(Box, {
+        className: "title",
+        display: "flex",
+        alignItems: "center",
+        children: t('team.passport.validUntil', {
+          date: passport.expirationDate
+        })
+      }), children]
+    })]
+  });
+}
+PassportItem.propTypes = {
+  passport: PropTypes.any.isRequired,
+  user: PropTypes.any.isRequired,
+  color: PropTypes.string.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  icon: PropTypes.any,
+  children: PropTypes.any,
+  width: PropTypes.number
+};
+PassportItem.defaultProps = {
+  icon: null,
+  children: null,
+  width: 150
+};
+const Root = styled(Box)`
+  .body {
+    padding: 0;
+    margin-left: 24px;
+    margin-top: 0;
+  }
+  .title {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #222222;
+  }
+  .tip {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-top: 6px;
+    color: #bbb;
+  }
+  .status-icons {
+    svg {
+      fill: #bfbfbf;
+      height: 1.2em;
+      margin-left: 0.4em;
+    }
+  }
+`;

package/es/team/members/passports.js

@@ -1,9 +1,8 @@
 /* eslint-disable prettier/prettier */
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import get from 'lodash/get';
-import upperFirst from 'lodash/upperFirst';
 import Toast from '@arcblock/ux/lib/Toast';
 import AddIcon from '@mui/icons-material/Add';
 import Box from '@mui/material/Box';
@@ -26,6 +25,7 @@ import Permission from '../../permission';
 import SearchInput from '../search-input';
 import ListHeader from '../styles/list-header';
 import IssuePassport from './issue-passport';
+import PassportItem from './passport-item';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function ConfirmDescription({
@@ -210,60 +210,30 @@ export default function Passports({
           justifyContent: "space-between",
           alignItems: "center",
           mt: 3,
-          children: [/*#__PURE__*/_jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
-            children: [/*#__PURE__*/_jsx("div", {
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML: {
-                __html: createPassportSvg({
-                  title: x.title || x.name,
-                  issuer: x.issuer && x.issuer.name,
-                  issuerDid: x.issuer && x.issuer.id,
-                  ownerName: user.fullName,
-                  ownerDid: user.did,
-                  ownerAvatarUrl: user.avatar,
-                  revoked: x.revoked,
-                  preferredColor: passportColor,
-                  width: '150px'
+          children: [/*#__PURE__*/_jsx(PassportItem, {
+            passport: x,
+            user: user,
+            color: passportColor,
+            createPassportSvg: createPassportSvg,
+            icon: !!appIdList.length && !appIdList.includes(x.issuer.id) ? /*#__PURE__*/_jsx(ExternalIssuerIcon, {}) : null,
+            children: !!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsxs("div", {
+              className: "tip",
+              children: [x.issuer.id !== teamIssuerDid && !trustedPassports.some(y => y.issuerDid === x.issuer.id) && /*#__PURE__*/_jsx(Tooltip, {
+                title: t('team.passport.notTrustedIssuerTip'),
+                children: /*#__PURE__*/_jsx(Box, {
+                  component: ErrorOutlineIcon,
+                  style: {
+                    fontSize: '1.3em'
+                  },
+                  color: "error.main",
+                  mr: 0.5
                 })
-              }
-            }), /*#__PURE__*/_jsxs("div", {
-              className: "body",
-              children: [/*#__PURE__*/_jsxs(Box, {
-                className: "title",
-                display: "flex",
-                alignItems: "center",
-                children: [upperFirst(x.title), /*#__PURE__*/_jsxs("div", {
-                  className: "status-icons",
-                  children: [!!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsx(ExternalIssuerIcon, {}), x.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
-                })]
-              }), x.expirationDate && /*#__PURE__*/_jsx(Box, {
-                className: "title",
-                display: "flex",
-                alignItems: "center",
-                children: t('team.passport.validUntil', {
-                  date: x.expirationDate
+              }), /*#__PURE__*/_jsx("span", {
+                children: t('team.passport.issueBy', {
+                  name: x.issuer.name
                 })
-              }), !!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsxs("div", {
-                className: "tip",
-                children: [x.issuer.id !== teamIssuerDid && !trustedPassports.some(y => y.issuerDid === x.issuer.id) && /*#__PURE__*/_jsx(Tooltip, {
-                  title: t('team.passport.notTrustedIssuerTip'),
-                  children: /*#__PURE__*/_jsx(Box, {
-                    component: ErrorOutlineIcon,
-                    style: {
-                      fontSize: '1.3em'
-                    },
-                    color: "error.main",
-                    mr: 0.5
-                  })
-                }), /*#__PURE__*/_jsx("span", {
-                  children: t('team.passport.issueBy', {
-                    name: x.issuer.name
-                  })
-                })]
               })]
-            })]
+            })
           }), /*#__PURE__*/_jsx(Box, {
             children: revokeInfo(can, x).revokable ? /*#__PURE__*/_jsxs(Button, {
               variant: "outlined",
@@ -326,31 +296,6 @@ Passports.defaultProps = {
 };
 const Div = styled.div`
   .passport-item {
-    .body {
-      padding: 0;
-      margin-left: 24px;
-      margin-top: 0;
-    }
-    .title {
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 19px;
-      color: #222222;
-    }
-    .tip {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      margin-top: 6px;
-      color: #bbb;
-    }
-    .status-icons {
-      svg {
-        fill: #bfbfbf;
-        height: 1.2em;
-        margin-left: 0.4em;
-      }
-    }
     .MuiButton-outlinedSecondary {
       color: #f16e6e;
       fill: #f16e6e;

package/lib/blocklet/actions.js

@@ -94,7 +94,6 @@ function BlockletActions(_ref) {
         });
         setLoading(true);
         setCurrentAction(action);
-        setConfirmSetting(null);
         let isRemoved = false;
         try {
           if (action === 'remove') {
@@ -151,6 +150,7 @@ function BlockletActions(_ref) {
           if (action === 'reload') {
             _Toast.default.success(t('blocklet.reloadSuccess'));
           }
+          setConfirmSetting(null);
           onComplete({
             action,
             blocklet
@@ -162,6 +162,7 @@ function BlockletActions(_ref) {
             blocklet,
             error: new Error(errMsg)
           });
+          throw new Error(errMsg);
         } finally {
           if (!isRemoved) {
             setLoading(false);
@@ -276,7 +277,6 @@ function BlockletActions(_ref) {
       e.preventDefault();
       // eslint-disable-next-line no-empty
     } catch (_unused3) {}
-    setAnchorEl(null);
     if (typeof action.handler === 'function') {
       try {
         setLoading(true);
@@ -287,7 +287,10 @@ function BlockletActions(_ref) {
         console.error("Blocklet ".concat(action.name, " failed: "), err);
       } finally {
         setLoading(false);
+        setAnchorEl(null);
       }
+    } else {
+      setAnchorEl(null);
     }
   };
   const removeAction = !inService && (0, _util.isDeletableBlocklet)(blocklet) ? {
@@ -413,13 +416,18 @@ function BlockletActions(_ref) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
             dense: true,
             onClick: e => onAction(action, e),
-            disabled: action.disabled,
+            disabled: loading || action.disabled,
             "data-cy": "".concat(action.action, "-blocklet"),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
               style: {
                 minWidth: 24
               },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(action.icon, {
+              children: currentAction === action.action && loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                size: 16,
+                sx: {
+                  marginRight: 1
+                }
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(action.icon, {
                 fontSize: "small"
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
@@ -447,8 +455,11 @@ function BlockletActions(_ref) {
         "data-cy": "".concat(action.action, "-blocklet"),
         onClick: () => onAction(action),
         disabled: Boolean(action.disabled) || loading,
-        children: [currentAction === action.action && loading && inProgress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-          size: 16
+        children: [currentAction === action.action && loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16,
+          sx: {
+            marginRight: 1
+          }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(action.icon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "blocklet-action-text",
           children: action.name

package/lib/blocklet/add-cert.js

@@ -19,6 +19,7 @@ var _blocklet = require("../contexts/blocklet");
 var _util = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["domain", "domainStatus"];
+/* eslint-disable react/no-unused-prop-types */
 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; }

package/lib/blocklet/configuration.js

@@ -9,15 +9,12 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _urlJoin = _interopRequireDefault(require("url-join"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Loop = _interopRequireDefault(require("@mui/icons-material/Loop"));
-var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _constant = require("@abtnode/constant");
 var _constant2 = require("@blocklet/constant");
 var _util = require("@blocklet/meta/lib/util");
@@ -32,10 +29,13 @@ var _clearCache = _interopRequireDefault(require("../clear-cache"));
 var _appSk = _interopRequireDefault(require("./preferences/app-sk"));
 var _transferOwner = _interopRequireDefault(require("./transfer-owner"));
 var _useAppLogo = _interopRequireDefault(require("../hooks/use-app-logo"));
+var _logoUploader = _interopRequireDefault(require("./logo-uploader"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["blocklet", "onUpdate", "hasPermission"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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; }
@@ -44,18 +44,10 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const languages = Object.keys(_constant2.SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: _constant2.SUPPORTED_LANGUAGES[x].nativeName
 }));
-
-// eslint-disable-next-line import/no-unresolved
-const UploaderComponent = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('@blocklet/uploader/react'))).then(res => ({
-  default: res.Uploader
-})));
-const uploadPrefix = '/blocklet/logo/upload';
 function BlockletEnvironment(_ref) {
   var _blocklet$settings;
   let {
@@ -82,7 +74,6 @@ function BlockletEnvironment(_ref) {
   const whoCanAccess = (0, _util.getWhoCanAccess)(blocklet);
   const publicToStore = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.publicToStore;
   const disabled = loading || !hasPermission;
-  const uploaderLogoRef = (0, _react.useRef)(null);
   const {
     logoUrl,
     rectLogoUrl,
@@ -90,20 +81,6 @@ function BlockletEnvironment(_ref) {
   } = (0, _useAppLogo.default)({
     blocklet
   });
-  const [apiPathProps, setApiPathProps] = (0, _react.useState)();
-  const uploadLogoPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'square', blocklet.meta.did);
-  const uploadLogoRectPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'rect', blocklet.meta.did);
-  const uploadLogoFaviconPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'favicon', blocklet.meta.did);
-  const openUploader = uploaderPrefix => {
-    if (!hasPermission) {
-      return;
-    }
-    setApiPathProps({
-      uploader: uploaderPrefix,
-      disableMediaKitPrefix: true
-    });
-    uploaderLogoRef.current.open();
-  };
   const {
     did
   } = blocklet.meta;
@@ -289,11 +266,6 @@ function BlockletEnvironment(_ref) {
       setLoading(false);
     }
   };
-  const uploaderStyle = {
-    '&::after': {
-      content: "\"".concat(t('common.switch'), "\"")
-    }
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, rest), {}, {
     children: [configurableEnvs.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: "config-form",
@@ -325,19 +297,15 @@ function BlockletEnvironment(_ref) {
         width: 'auto'
       },
       children: t('blocklet.config.logoSquare')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      className: (0, _classnames.default)('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoPrefix),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        sx: {
-          height: 80,
-          width: 80
-        },
-        variant: "square",
-        alt: "Blocklet Logo",
-        src: logoUrl
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_logoUploader.default, {
+      did: blocklet.meta.did,
+      height: 80,
+      width: 80,
+      type: "square",
+      prefix: prefix,
+      url: logoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-label",
       fontSize: 14,
@@ -347,17 +315,14 @@ function BlockletEnvironment(_ref) {
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoRectDesc')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      className: (0, _classnames.default)('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoRectPrefix),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        alt: "Blocklet Rect Logo",
-        src: rectLogoUrl,
-        style: {
-          height: '80px'
-        }
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_logoUploader.default, {
+      did: blocklet.meta.did,
+      height: 80,
+      type: "rect",
+      prefix: prefix,
+      url: rectLogoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-label",
       fontSize: 14,
@@ -367,41 +332,16 @@ function BlockletEnvironment(_ref) {
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoFaviconDesc')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_logoUploader.default, {
+      did: blocklet.meta.did,
+      height: 25,
+      width: 25,
+      type: "favicon",
+      prefix: prefix,
+      url: faviconUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      sx: {
-        display: 'inline-flex',
-        cursor: hasPermission ? 'pointer' : 'default'
-      },
-      onClick: () => openUploader(uploadLogoFaviconPrefix),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        variant: "square",
-        sx: {
-          width: 20,
-          height: 20
-        },
-        alt: "Blocklet Favicon Logo",
-        src: faviconUrl
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
-      id: "\u200Buploader-logo",
-      ref: uploaderLogoRef,
-      popup: true,
-      onUploadFinish: () => {
-        uploaderLogoRef.current.close();
-      },
-      plugins: [],
-      apiPathProps: apiPathProps,
-      coreProps: {
-        restrictions: {
-          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
-          maxFileSize: 1024 * 1024 * 10,
-          maxNumberOfFiles: 1
-        }
-      },
-      tusProps: {
-        headers: getSessionInHeader
-      }
-    }, "uploader-logo"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-form",
       children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         className: "config-item",
@@ -599,4 +539,4 @@ BlockletEnvironment.defaultProps = {
   onUpdate: () => {},
   hasPermission: false
 };
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 24px;\n  .config-form {\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n\n  .uploader-wrapper {\n    display: inline-flex;\n    position: relative;\n    font-size: 0px;\n    &.enabled {\n      cursor: pointer;\n    }\n    &::after {\n      display: none;\n    }\n    &.enabled::after {\n      display: block;\n      opacity: 0;\n      position: absolute;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.2);\n      left: 0;\n      right: 0;\n      height: 2.2em;\n      color: white;\n      text-align: center;\n      font-size: 12px;\n      line-height: 2em;\n      transition: opacity 0.3s ease;\n    }\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 24px;\n  .config-form {\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));