@abtnode/ux 1.16.29-next-680cf137 → 1.16.30-beta-00e8bdd1

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/environment.js

@@ -49,6 +49,16 @@ const isCustom = (env, blocklet, ancestors = []) => {
   }
   return env.custom;
 };
+const isValidKey = key => {
+  if ([BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE].includes(key)) {
+    return true;
+  }
+  if (key.startsWith('BLOCKLET_') || key.startsWith('COMPONENT_')) {
+    return false;
+  }
+  return true;
+};
+const isCustomKey = key => [BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE].includes(key) === false;
 export default function ComponentEnvironment({
   blocklet,
   ancestors
@@ -74,11 +84,11 @@ export default function ComponentEnvironment({
       Toast.error(t('blocklet.config.environment.keyValueRequired'));
       return;
     }
-    if (data.key.startsWith('BLOCKLET_') || data.key.startsWith('COMPONENT_')) {
+    if (isValidKey(data.key) === false) {
       Toast.error(t('blocklet.config.environment.invalidKey'));
       return;
     }
-    data.custom = true;
+    data.custom = isCustomKey(data.key);
     try {
       const result = await node.api.configBlocklet({
         input: {
@@ -97,7 +107,7 @@ export default function ComponentEnvironment({
       Toast.error(t('blocklet.config.environment.keyValueRequired'));
       return;
     }
-    if (newData.key.startsWith('BLOCKLET_') && !BLOCKLET_CONFIGURABLE_KEY[newData.key]) {
+    if (isValidKey(newData.key) === false) {
       Toast.error(t('blocklet.config.environment.invalidKey'));
       return;
     }
@@ -119,7 +129,7 @@ export default function ComponentEnvironment({
       }
       configs.push({
         key: oldData.key,
-        custom: true
+        custom: isCustomKey(newData.key)
       });
     }
     try {
@@ -149,7 +159,7 @@ export default function ComponentEnvironment({
           did: dids,
           configs: [{
             key: data.key,
-            custom: true
+            custom: isCustomKey(data.key)
           }]
         }
       });
@@ -160,7 +170,7 @@ export default function ComponentEnvironment({
   };
 
   // configs
-  const componentConfigs = (blocklet.configs || []).filter(x => !BLOCKLET_CONFIGURABLE_KEY[x.key]);
+  const componentConfigs = (blocklet.configs || []).filter(x => !BLOCKLET_CONFIGURABLE_KEY[x.key] || [BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE].includes(x.key));
   const sharedConfigObj = getSharedConfigObj(ancestors[0], blocklet);
   const missingRequiredConfigs = getComponentMissingConfigs(blocklet, ancestors[0]);
   const configs = componentConfigs.map(x => ({

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/configuration.js

@@ -1,7 +1,6 @@
 import React, { useState, useContext } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
@@ -9,14 +8,13 @@ import Divider from '@mui/material/Divider';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import LoopIcon from '@mui/icons-material/Loop';
-import { EVENTS } from '@abtnode/constant';
 import { BLOCKLET_CONFIGURABLE_KEY, BLOCKLET_TENANT_MODES, SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import { getWhoCanAccess } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import FormTextInput from '../form/form-text-input';
 import FormAutocompleteInput from '../form/form-autocomplete-input';
 import { useNodeContext } from '../contexts/node';
-import { isInstalling, isValidClusterSize, BlockletAdminRoles } from '../util';
+import { isInstalling, BlockletAdminRoles } from '../util';
 import { enableDebug } from '../util/mode';
 import Permission, { withPermission } from '../permission';
 import ClearCache from '../clear-cache';
@@ -41,15 +39,11 @@ function BlockletEnvironment({
     api,
     inService,
     prefix,
-    getSessionInHeader,
-    ws: {
-      useSubscription
-    }
+    getSessionInHeader
   } = useNodeContext();
   const {
     t
   } = useContext(LocaleContext);
-  const [cpuCores, setCpuCores] = useState('');
   const [loading, setLoading] = useState('');
   const [showTransferOwner, setShowTransferOwner] = useState(false);
   const whoCanAccess = getWhoCanAccess(blocklet);
@@ -68,12 +62,6 @@ function BlockletEnvironment({
   const {
     site
   } = blocklet;
-  const clusterMode = get(blocklet.meta, 'capabilities.clusterMode', false);
-  useSubscription(EVENTS.NODE_RUNTIME_INFO, res => {
-    if (clusterMode) {
-      setCpuCores(get(res, 'cpu.physicalCores', ''));
-    }
-  });
   if (isInstalling(blocklet.status)) {
     return null;
   }
@@ -108,16 +96,6 @@ function BlockletEnvironment({
     description: t('blocklet.config.copyrightYear'),
     value: copyrightYear ? copyrightYear.value : ''
   }];
-  if (clusterMode) {
-    const exist = blocklet.configs.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE);
-    const value = exist ? exist.value : cpuCores;
-    configurableEnvs.push({
-      key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE,
-      description: t('blocklet.config.clusterSize'),
-      value,
-      cpuCores
-    });
-  }
   const onPublicToStoreChange = async e => {
     if (loading) {
       return;
@@ -143,16 +121,6 @@ function BlockletEnvironment({
     }
   };
   const onSubmitConfig = async (key, value) => {
-    if (key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
-      const errMessage = isValidClusterSize({
-        value,
-        cpuCores
-      });
-      if (errMessage) {
-        Toast.error(errMessage);
-        return;
-      }
-    }
     const params = [{
       key,
       value

package/lib/blocklet/disk-info.js

@@ -1,74 +1,85 @@
 /* eslint-disable react/jsx-one-expression-per-line */
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
+import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import InfoRow from '@arcblock/ux/lib/InfoRow';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useBlockletContext } from '../contexts/blocklet';
 import { filesize } from '../util';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function BlockletDiskInfo({
-  blocklet,
   ...rest
 }) {
   const {
     t
   } = useContext(LocaleContext);
-  if (!blocklet.diskInfo) {
-    return /*#__PURE__*/_jsx(Typography, {
-      children: t('blocklet.diskInfo.empty')
+  const {
+    blocklet,
+    loadingDiskInfo,
+    actions
+  } = useBlockletContext();
+  useEffect(() => {
+    actions.refreshBlocklet({
+      showError: false,
+      attachDiskInfo: true
+    });
+  }, []); // eslint-disable-line
+
+  if (blocklet.diskInfo) {
+    const renderDiskInfo = (dir, size, handler) => /*#__PURE__*/_jsxs(Typography, {
+      children: [handler ?
+      /*#__PURE__*/
+      /* eslint-disable-next-line no-script-url, jsx-a11y/anchor-is-valid */
+      _jsx(Link, {
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: handler,
+        underline: "hover",
+        children: dir
+      }) : dir, ' ', /*#__PURE__*/_jsx("strong", {
+        children: size ? filesize(size) : 'empty'
+      })]
+    });
+    const env = blocklet.environments.reduce((acc, x) => {
+      acc[x.key] = x.value;
+      return acc;
+    }, {});
+    const rows = [{
+      key: 'appDir',
+      name: t('blocklet.diskInfo.appDir'),
+      value: renderDiskInfo(env.BLOCKLET_APP_DIR, blocklet.diskInfo.app)
+    }, {
+      key: 'dataDir',
+      name: t('blocklet.diskInfo.dataDir'),
+      value: renderDiskInfo(env.BLOCKLET_DATA_DIR, blocklet.diskInfo.data)
+    }, {
+      key: 'logDir',
+      name: t('blocklet.diskInfo.logDir'),
+      value: renderDiskInfo(env.BLOCKLET_LOG_DIR, blocklet.diskInfo.log)
+    }, {
+      key: 'cacheDir',
+      name: t('blocklet.diskInfo.cacheDir'),
+      value: renderDiskInfo(env.BLOCKLET_CACHE_DIR, blocklet.diskInfo.cache)
+    }];
+    return /*#__PURE__*/_jsx(Div, {
+      component: "div",
+      ...rest,
+      children: rows.map(row => /*#__PURE__*/_jsx(InfoRow, {
+        valueComponent: "div",
+        nameWidth: 120,
+        name: row.name,
+        children: row.value
+      }, row.key))
     });
   }
-  const renderDiskInfo = (dir, size, handler) => /*#__PURE__*/_jsxs(Typography, {
-    children: [handler ?
-    /*#__PURE__*/
-    /* eslint-disable-next-line no-script-url, jsx-a11y/anchor-is-valid */
-    _jsx(Link, {
-      style: {
-        cursor: 'pointer'
-      },
-      onClick: handler,
-      underline: "hover",
-      children: dir
-    }) : dir, ' ', /*#__PURE__*/_jsx("strong", {
-      children: size ? filesize(size) : 'empty'
-    })]
-  });
-  const env = blocklet.environments.reduce((acc, x) => {
-    acc[x.key] = x.value;
-    return acc;
-  }, {});
-  const rows = [{
-    key: 'appDir',
-    name: t('blocklet.diskInfo.appDir'),
-    value: renderDiskInfo(env.BLOCKLET_APP_DIR, blocklet.diskInfo.app)
-  }, {
-    key: 'dataDir',
-    name: t('blocklet.diskInfo.dataDir'),
-    value: renderDiskInfo(env.BLOCKLET_DATA_DIR, blocklet.diskInfo.data)
-  }, {
-    key: 'logDir',
-    name: t('blocklet.diskInfo.logDir'),
-    value: renderDiskInfo(env.BLOCKLET_LOG_DIR, blocklet.diskInfo.log)
-  }, {
-    key: 'cacheDir',
-    name: t('blocklet.diskInfo.cacheDir'),
-    value: renderDiskInfo(env.BLOCKLET_CACHE_DIR, blocklet.diskInfo.cache)
-  }];
-  return /*#__PURE__*/_jsx(Div, {
-    component: "div",
-    ...rest,
-    children: rows.map(row => /*#__PURE__*/_jsx(InfoRow, {
-      valueComponent: "div",
-      nameWidth: 120,
-      name: row.name,
-      children: row.value
-    }, row.key))
+  if (loadingDiskInfo) {
+    return /*#__PURE__*/_jsx(CircularProgress, {});
+  }
+  return /*#__PURE__*/_jsx(Typography, {
+    children: t('blocklet.diskInfo.empty')
   });
 }
-BlockletDiskInfo.propTypes = {
-  blocklet: PropTypes.object.isRequired
-};
-BlockletDiskInfo.defaultProps = {};
 const Div = styled(Typography)``;

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
                 },