@abtnode/ux 1.16.29-next-680cf137 → 1.16.29

package/lib/blocklet/component/blocklet-owner-info.js

@@ -0,0 +1,35 @@
+import { Box } from '@mui/material';
+import DID from '@arcblock/ux/lib/DID';
+import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function BlockletOwnerInfo({
+  owner,
+  locale
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [owner.fullName, owner.did ? /*#__PURE__*/_jsx(DID, {
+      sx: {
+        lineHeight: 'initial',
+        '&::before': {
+          content: '"("'
+        },
+        '&::after': {
+          content: '")"'
+        }
+      },
+      did: owner.did,
+      compact: true,
+      size: 14,
+      locale: locale
+    }) : null]
+  });
+}
+BlockletOwnerInfo.propTypes = {
+  owner: PropTypes.object.isRequired,
+  locale: PropTypes.string.isRequired
+};

package/lib/blocklet/component/component-info-dialog.js

@@ -6,13 +6,15 @@ import { Badge, Box } from '@mui/material';
 import InfoRow from '@arcblock/ux/lib/InfoRow';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { getDisplayName, hasStartEngine } from '@blocklet/meta/lib/util';
+import { formatPerson } from '@blocklet/meta/lib/fix';
 import { useDeletingBlockletContext } from '../../contexts/deleting-blocklets';
 import Tag from '../../tag';
-import { formatPerson, formatToDatetime } from '../../util';
+import { formatToDatetime } from '../../util';
 import DidAddress from '../../did-address';
 import BlockletSource from '../blocklet-source';
 import BlockletStatus from '../status';
 import BlockletVersion from '../version';
+import BlockletOwnerInfo from './blocklet-owner-info';
 import { jsx as _jsx } from "react/jsx-runtime";
 const isResource = component => !component?.meta?.group;
 const getEngineRows = (engine, t) => {
@@ -171,7 +173,10 @@ export default function ComponentInfoDialog({
     })
   }, {
     name: t('common.author'),
-    value: formatPerson(componentInfo.meta.author)
+    value: componentInfo.meta.owner ? /*#__PURE__*/_jsx(BlockletOwnerInfo, {
+      owner: componentInfo.meta.owner,
+      locale: locale
+    }) : formatPerson(componentInfo.meta.author)
   }, {
     name: t('common.engine'),
     value: getEngineRows(componentInfo.engine, t).map(({

package/lib/blocklet/component/index.js

@@ -37,6 +37,7 @@ import ComponentCell, { StyledBadge, StyledComponentRow } from './component-cell
 import OptionalComponentCell from './optional-component-cell';
 import AddComponentDialog from './add-component/add-component-dialog';
 import Actions from '../../actions';
+import { BlockletAutoCheckUpdateProvider } from '../../contexts/blocklet-auto-check-update';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function BlockletComponent({
   blocklet,
@@ -248,33 +249,35 @@ export default function BlockletComponent({
         children: [components?.length ? `${t('common.components')} (${components.length})` : `${t('common.components')}`, !needMigration && /*#__PURE__*/_jsx(Permission, {
           permission: inService ? '' : 'mutate_blocklets',
           role: inService ? BlockletAdminRoles : [],
-          children: /*#__PURE__*/_jsx(AutoCheckUpdate, {
-            children: /*#__PURE__*/_jsx(StyledBadge, {
-              top: 1.2,
-              right: 0.4,
-              color: "error",
-              badgeContent: "",
-              variant: "dot",
-              invisible: !showUpdateDot,
-              children: /*#__PURE__*/_jsxs(Button, {
-                disabled: loading || isInProgress(blocklet.status),
-                color: "secondary",
-                onClick: () => {
-                  checkForUpdates();
-                },
-                "data-cy": "check-for-updates",
-                children: [/*#__PURE__*/_jsx(Box, {
-                  ml: 0.5,
-                  mr: 0.5,
-                  display: "flex",
-                  children: loading ? /*#__PURE__*/_jsx(Spinner, {
-                    size: 16
-                  }) : /*#__PURE__*/_jsx(UpdateIcon, {
-                    style: {
-                      fontSize: '1em'
-                    }
-                  })
-                }), t('blocklet.component.checkUpdateTitle')]
+          children: /*#__PURE__*/_jsx(BlockletAutoCheckUpdateProvider, {
+            children: /*#__PURE__*/_jsx(AutoCheckUpdate, {
+              children: /*#__PURE__*/_jsx(StyledBadge, {
+                top: 1.2,
+                right: 0.4,
+                color: "error",
+                badgeContent: "",
+                variant: "dot",
+                invisible: !showUpdateDot,
+                children: /*#__PURE__*/_jsxs(Button, {
+                  disabled: loading || isInProgress(blocklet.status),
+                  color: "secondary",
+                  onClick: () => {
+                    checkForUpdates();
+                  },
+                  "data-cy": "check-for-updates",
+                  children: [/*#__PURE__*/_jsx(Box, {
+                    ml: 0.5,
+                    mr: 0.5,
+                    display: "flex",
+                    children: loading ? /*#__PURE__*/_jsx(Spinner, {
+                      size: 16
+                    }) : /*#__PURE__*/_jsx(UpdateIcon, {
+                      style: {
+                        fontSize: '1em'
+                      }
+                    })
+                  }), t('blocklet.component.checkUpdateTitle')]
+                })
               })
             })
           })

package/lib/blocklet/install-from-url.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { formatPerson } from '@blocklet/meta/lib/fix';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import Spinner from '@mui/material/CircularProgress';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -16,9 +17,10 @@ import Alert from '@mui/material/Alert';
 import { getDisplayName } from '@blocklet/meta/lib/util';
 import { useNodeContext } from '../contexts/node';
 import { useSessionContext } from '../contexts/session';
-import { formatError, formatPerson } from '../util';
+import { formatError } from '../util';
 import { getWalletType } from './util';
 import DidAddress from '../did-address';
+import BlockletOwnerInfo from './component/blocklet-owner-info';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function InstallFromUrl({
   defaultUrl,
@@ -37,7 +39,8 @@ export default function InstallFromUrl({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const {
-    t
+    t,
+    locale
   } = useLocaleContext();
   const initMeta = {
     dist: {}
@@ -134,7 +137,10 @@ export default function InstallFromUrl({
     })
   }, {
     name: t('common.author'),
-    value: formatPerson(meta.author)
+    value: meta.owner ? /*#__PURE__*/_jsx(BlockletOwnerInfo, {
+      owner: meta.owner,
+      locale: locale
+    }) : formatPerson(meta.author)
   }, {
     name: t('blocklet.dist.downloadLink'),
     value: meta.dist.tarball

package/lib/blocklet/publish/create-release/blocklets.js

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import classnames from 'classnames';
 import pick from 'lodash/pick';
-import Checkbox from '@mui/material/Checkbox';
-import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Alert } from '@mui/material';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
 import { EmptyIcon } from '@arcblock/icons';
+import { Alert } from '@mui/material';
 import BlockletBundleAvatar from '../../bundle-avatar';
 import StopBox from './stop-box';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";

package/lib/blocklet/publish/create-release/branding.js

@@ -1,19 +1,19 @@
 import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
-import { Box, InputAdornment, TextField, Typography, Avatar, IconButton } from '@mui/material';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast/index';
-import { useNavigate } from 'react-router-dom';
-import { Suspense, lazy, useRef } from 'react';
+import styled from '@emotion/styled';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import ConnectStoreButton from './connect-store-button';
-import { createMessageId, waitGetConnectedByStudio } from '../utils/wait-connect';
+import { Avatar, Box, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Suspense, lazy, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useNodeContext } from '../../../contexts/node';
+import EmptySpinner from '../../../empty-spinner';
 import usePromiseWindowOpen from '../../../hooks/use-promise-window-open';
 import { formatError } from '../../../util';
-import { useNodeContext } from '../../../contexts/node';
 import useWantToConnectStore from '../hooks/use-want-to-connect-store';
-import EmptySpinner from '../../../empty-spinner';
+import { createMessageId, waitGetConnectedByStudio } from '../utils/wait-connect';
+import ConnectStoreButton from './connect-store-button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const allowedFileExts = ['.webp', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
 const maxFileSize = 1024 * 1024 * 10; // 10 MB
@@ -72,8 +72,8 @@ function Branding({
       Toast.error(t('blocklet.publish.errorTip.noTitle'));
       return;
     }
-    if (!wantToConnectStore) {
-      Toast.error('No store found');
+    if (!wantToConnectStore?.url) {
+      Toast.error(t('blocklet.publish.noStoreSelected'));
       return;
     }
     const messageId = createMessageId();
@@ -348,6 +348,9 @@ function Branding({
           });
           uploaderScreenshotRef.current.close();
         },
+        installerProps: {
+          disabled: true
+        },
         plugins: ['ImageEditor'],
         apiPathProps: {
           uploader: uploadScreenshotPrefix,

package/lib/blocklet/publish/create-release/connect-store-button.js

@@ -1,24 +1,24 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Icon } from '@iconify/react';
 import AddIcon from '@mui/icons-material/Add';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { Box, Button, ButtonGroup, CircularProgress, ClickAwayListener, Divider, Grow, IconButton, MenuItem, MenuList, Paper, Popper, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import { Icon } from '@iconify/react';
 import { useRef, useState } from 'react';
-import Toast from '@arcblock/ux/lib/Toast';
 import formatError from '@abtnode/util/lib/format-error';
-import { useSessionContext } from '../../../contexts/session';
-import AddStore from '../../../store/add';
-import { useNodeContext } from '../../../contexts/node';
+import Toast from '@arcblock/ux/lib/Toast';
 import ConfirmDialog from '../../../confirm';
 import { useBlockletContext } from '../../../contexts/blocklet';
+import { useNodeContext } from '../../../contexts/node';
+import { useSessionContext } from '../../../contexts/session';
+import AddStore from '../../../store/add';
 import ShortenLabel from '../../component/shorten-label';
 import canDeleteStore from '../utils/can-delete-store';
 import getStudioStoreList from '../utils/get-studio-store-list';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function ConnectStoreButton({
   blocklet,
-  store,
+  store = {},
   onChangeStore,
   onClick,
   disabled,
@@ -104,7 +104,7 @@ export default function ConnectStoreButton({
           sx: {
             mr: 0.5
           }
-        }), `${t('common.connect')} ${store?.name || ''}`]
+        }), `${t('common.connect')} ${store.name || ''}`]
       }), /*#__PURE__*/_jsx(Button, {
         size: "small",
         "aria-controls": open ? 'split-button-menu' : undefined,
@@ -139,10 +139,11 @@ export default function ConnectStoreButton({
               autoFocusItem: true,
               sx: {
                 maxHeight: 300,
-                overflowY: 'auto'
+                overflowY: 'auto',
+                zIndex: 10
               },
-              children: [storeList.map(option => /*#__PURE__*/_jsxs(MenuItem, {
-                selected: option.id === store.id,
+              children: [storeList?.map(option => /*#__PURE__*/_jsxs(MenuItem, {
+                selected: option.id === store?.id,
                 sx: {
                   height: 56
                 },

package/lib/blocklet/publish/create-release/header.js

@@ -1,29 +1,31 @@
 import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Breadcrumbs, Button, Typography, Dialog as MaterialDialog, IconButton, useMediaQuery } from '@mui/material';
-import styled from '@emotion/styled';
-import { Link, useNavigate } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { joinURL } from 'ufo';
+import Toast from '@arcblock/ux/lib/Toast/index';
 import { PROJECT } from '@blocklet/constant';
-import Spinner from '@mui/material/CircularProgress';
+import styled from '@emotion/styled';
+import { Icon } from '@iconify/react';
 import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
-import semver from 'semver';
-import { useState } from 'react';
-import Toast from '@arcblock/ux/lib/Toast/index';
-import pAll from 'p-all';
-import Dialog from '@arcblock/ux/lib/Dialog';
+import { Box, Breadcrumbs, Button, ButtonGroup, IconButton, Dialog as MaterialDialog, Typography, useMediaQuery } from '@mui/material';
+import Spinner from '@mui/material/CircularProgress';
 import pick from 'lodash/pick';
-import { Icon } from '@iconify/react';
-import ConnectStoreList from './connect-store-list';
-import { validateParams } from '../utils/validate-params';
-import { waitGetConnectedStore } from '../utils/wait-connect';
-import uploadImageToProject from '../utils/upload-image-to-project';
-import { uploadResource } from './resource-select';
+import pAll from 'p-all';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import semver from 'semver';
+import { joinURL } from 'ufo';
 import ClickToCopy from '../../../click-to-copy';
-import { formatError } from '../../../util';
 import { useNodeContext } from '../../../contexts/node';
+import { formatError } from '../../../util';
 import ShortenLabel from '../../component/shorten-label';
+import parseResourceRelateComponents from '../utils/parse-resource-relate-components';
+import uploadImageToProject from '../utils/upload-image-to-project';
+import { validateParams } from '../utils/validate-params';
+import { waitGetConnectedStore } from '../utils/wait-connect';
+import ConnectStoreList from './connect-store-list';
+import ProjectSetting from './project-setting';
+import { uploadResource } from './resource-select';
 import UploadedToast from './uploaded-toast';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const serverEndpoint = window.env?.serverEndpoint;
@@ -61,6 +63,7 @@ function Header({
   } = useNodeContext();
   const navigate = useNavigate();
   const [showStoreDialog, setShowStoreDialog] = useState(false);
+  const [showSetting, setShowSetting] = useState(false);
   const [installResourceTip, setInstallResourceTip] = useState();
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const releaseType = params?.blockletComponents?.length > 0 ? 'pack' : 'resource';
@@ -90,32 +93,7 @@ function Header({
     const _params = {
       ...params
     };
-    const componentMaps = (blocklet?.children || []).reduce((acc, curr) => {
-      acc[curr.meta.did] = true;
-      return acc;
-    }, {});
-    Object.keys(resourceRelateComponents).forEach(blockletDid => {
-      if (!componentMaps[blockletDid]) {
-        return;
-      }
-      let included = false;
-      if (!disabledSelectComponents) {
-        _params.blockletComponents.forEach(item => {
-          if (item.did === blockletDid) {
-            item.included = true;
-            item.required = true;
-            included = true;
-          }
-        });
-      }
-      if (!included) {
-        _params.blockletComponents.push({
-          did: blockletDid,
-          included: true,
-          required: true
-        });
-      }
-    });
+    _params.blockletComponents = parseResourceRelateComponents(_params.blockletComponents, blocklet, resourceRelateComponents, disabledSelectComponents);
     _params.blockletVersion = semver.valid(_params.blockletVersion);
     if (!_params.blockletVersion) {
       Toast.error('Invalid Blocklet Version');
@@ -222,35 +200,37 @@ function Header({
       }
     });
     const newReleased = lastProject.project.lastReleaseId;
-    await pAll(lastProject.project.connectedStores.map(store => {
-      return async () => {
-        try {
-          // eslint-disable-next-line no-await-in-loop
-          const res = await api.publishToStore({
-            input: {
-              did: blocklet.meta.did,
-              storeId: store.storeId,
+    if (params.autoUpload) {
+      await pAll(lastProject.project.connectedStores.map(store => {
+        return async () => {
+          try {
+            // eslint-disable-next-line no-await-in-loop
+            const res = await api.publishToStore({
+              input: {
+                did: blocklet.meta.did,
+                storeId: store.storeId,
+                storeName: store.storeName,
+                projectId,
+                releaseId: newReleased,
+                type: releaseType
+              }
+            });
+            Toast.success( /*#__PURE__*/_jsx(UploadedToast, {
               storeName: store.storeName,
-              projectId,
-              releaseId: newReleased,
-              type: releaseType
-            }
-          });
-          Toast.success( /*#__PURE__*/_jsx(UploadedToast, {
-            storeName: store.storeName,
-            storeUrl: store.storeUrl,
-            developerDid: store.developerDid,
-            published: res.url === 'published'
-          }), {
-            duration: 10000
-          });
-        } catch (err) {
-          Toast.error(formatError(err));
-        }
-      };
-    }), {
-      concurrency: 4
-    });
+              storeUrl: store.storeUrl,
+              developerDid: store.developerDid,
+              published: res.url === 'published'
+            }), {
+              duration: 10000
+            });
+          } catch (err) {
+            Toast.error(formatError(err));
+          }
+        };
+      }), {
+        concurrency: 4
+      });
+    }
     onPublish?.();
     navigate(`../${projectId}/view/${newReleased}`, {
       replace: true
@@ -266,6 +246,9 @@ function Header({
     await waitGetConnectedStore(api, param);
     getData();
   };
+  const handleShowSetting = () => {
+    setShowSetting(true);
+  };
   let installButton = null;
   if (isPublished && serverEndpoint) {
     const blockletMetaUrl = joinURL(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
@@ -273,31 +256,36 @@ function Header({
       const url = new URL(serverEndpoint);
       url.pathname = joinURL(url.pathname, '/launch-blocklet/agreement');
       url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
-      installButton = /*#__PURE__*/_jsx("a", {
+      installButton = isMobile ? /*#__PURE__*/_jsx(IconButton, {
+        component: "a",
+        disabled: loading,
         href: url.href,
         target: "_blank",
         rel: "noreferrer",
-        children: isMobile ? /*#__PURE__*/_jsx(IconButton, {
-          color: "primary",
-          sx: {
-            mr: 1
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "ic:baseline-install-desktop"
-          })
-        }) : /*#__PURE__*/_jsx(Button, {
-          variant: "outlined",
-          sx: {
-            mr: 1
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('common.install')
+        color: "primary",
+        sx: {
+          mr: 1
+        },
+        onClick: () => setInstallResourceTip(blockletMetaUrl),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "ic:baseline-install-desktop"
         })
+      }) : /*#__PURE__*/_jsx(Button, {
+        href: url.href,
+        disabled: loading,
+        target: "_blank",
+        rel: "noreferrer",
+        variant: "outlined",
+        sx: {
+          mr: 1
+        },
+        onClick: () => setInstallResourceTip(blockletMetaUrl),
+        children: t('common.install')
       });
     } else {
       installButton = /*#__PURE__*/_jsxs(_Fragment, {
         children: [isMobile ? /*#__PURE__*/_jsx(IconButton, {
+          disabled: loading,
           color: "primary",
           sx: {
             mr: 1
@@ -307,6 +295,7 @@ function Header({
             icon: "ic:baseline-install-desktop"
           })
         }) : /*#__PURE__*/_jsx(Button, {
+          disabled: loading,
           variant: "outlined",
           sx: {
             mr: 1
@@ -382,46 +371,63 @@ function Header({
           })]
         }), /*#__PURE__*/_jsx(Box, {
           flex: "1"
-        }), !isPublished && /*#__PURE__*/_jsxs(Button, {
-          variant: "contained",
+        }), !isPublished && /*#__PURE__*/_jsxs(ButtonGroup, {
           disabled: loading,
-          style: {
-            marginRight: 12
-          },
-          onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
-          children: [loading && /*#__PURE__*/_jsx(Spinner, {
-            size: 14,
-            sx: {
-              mr: 0.5
-            },
-            color: "inherit"
-          }), t('blocklet.publish.createRelease')]
-        }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [installButton, /*#__PURE__*/_jsx("a", {
-            href: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
-            children: isMobile ? null : /*#__PURE__*/_jsx(Button, {
-              variant: "outlined",
-              sx: {
-                mr: 1
-              },
-              children: t('common.download')
-            })
-          }), /*#__PURE__*/_jsxs(Button, {
-            disabled: loading,
+          variant: "contained",
+          children: [/*#__PURE__*/_jsxs(Button, {
             variant: "contained",
-            onClick: () => setShowStoreDialog(true),
-            children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+            onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
+            children: [loading && /*#__PURE__*/_jsx(Spinner, {
               size: 14,
               sx: {
-                mr: 1
+                mr: 0.5
               },
               color: "inherit"
-            }) : /*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
-              sx: {
-                fontSize: '1.3em',
-                mr: 1
-              }
-            }), isMobile ? t('common.upload') : t('blocklet.publish.connectOrUpload')]
+            }), t('blocklet.publish.createRelease')]
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            onClick: handleShowSetting,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "mage:settings-fill",
+              fontSize: "16px"
+            })
+          })]
+        }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [installButton, isMobile ? null : /*#__PURE__*/_jsx(Button, {
+            component: "a",
+            disabled: loading,
+            href: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
+            variant: "outlined",
+            sx: {
+              mr: 1
+            },
+            children: t('common.download')
+          }), /*#__PURE__*/_jsxs(ButtonGroup, {
+            disabled: loading,
+            variant: "contained",
+            children: [/*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              onClick: () => setShowStoreDialog(true),
+              children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+                size: 14,
+                sx: {
+                  mr: 1
+                },
+                color: "inherit"
+              }) : /*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
+                sx: {
+                  fontSize: '1.3em',
+                  mr: 1
+                }
+              }), isMobile ? t('common.upload') : t('blocklet.publish.connectOrUpload')]
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              onClick: handleShowSetting,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "mage:settings-fill",
+                fontSize: "16px"
+              })
+            })]
           })]
         })]
       })
@@ -445,6 +451,13 @@ function Header({
         connectedStores: params.connectedStores || [],
         publishedStoreIds: release?.publishedStoreIds
       })
+    }), /*#__PURE__*/_jsx(ProjectSetting, {
+      did: blocklet?.meta?.did,
+      params: params,
+      projectId: projectId,
+      open: showSetting,
+      setParams: setParams,
+      onClose: () => setShowSetting(false)
     })]
   });
 }