@abtnode/ux 1.16.30-beta-b7f31b10 → 1.16.30-beta-2876881d

package/lib/blocklet/actions.js

@@ -28,7 +28,6 @@ import Toast from '@arcblock/ux/lib/Toast';
 import Confirm from '../confirm';
 import { useNodeContext } from '../contexts/node';
 import { formatError, isDownloading, sleep } from '../util';
-import joinUrlKeepSearch from '../util/join-url-keep-search';
 import Icons from './icons';
 import { getServerUrl } from './util';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -86,14 +85,6 @@ export default function BlockletActions({
   const {
     inService
   } = node;
-  const handleOpenDashboard = () => {
-    const mountPoint = `/${blocklet.mountPoint || '/'}`.replace(/\/+/g, '/');
-    const href = getComponentUrl?.({
-      mountPoint,
-      blocklet
-    });
-    window.open(joinUrlKeepSearch(href, '.well-known/service/admin'));
-  };
   const createHandler = (action, fn, requireUserConfirm = false) => async () => {
     const onConfirm = async params => {
       onStart({
@@ -362,52 +353,15 @@ export default function BlockletActions({
   }, isDownloading(blocklet.status) ? cancelDownloadAction : removeAction, {
     separator: true
   }, !inService ? {
-    action: 'dashboard',
-    icon: ({
-      style,
-      ...restProps
-    }) => /*#__PURE__*/_jsx(Icons.Dashboard, {
-      ...restProps,
-      style: {
-        ...style,
-        width: '26px',
-        height: '26px',
-        paddingRight: '3px'
-      }
-    }),
-    name: t('sidebar.dashboard'),
-    handler: handleOpenDashboard,
-    disabled: disableStart || blocklet.status !== 'running'
-  } : null, {
-    separator: true
-  }, {
-    onlyInMenu: true,
-    action: 'config',
-    icon: Icons.Config,
-    name: t('common.config'),
-    handler: () => {
-      navigate(`/blocklets/${blocklet.meta.did}/configuration`);
-    },
-    disabled: isDownloading(blocklet.status)
-  }, {
-    onlyInMenu: true,
-    action: 'team',
-    icon: Icons.Group,
-    name: t('common.manageTeam'),
-    handler: () => {
-      navigate(`/blocklets/${blocklet.meta.did}/members`);
-    },
-    disabled: isDownloading(blocklet.status)
-  }, {
     onlyInMenu: true,
-    action: 'log',
-    icon: Icons.Log,
-    name: t('common.log'),
+    action: 'overview',
+    icon: Icons.Overview,
+    name: t('common.overview'),
     handler: () => {
-      navigate(`/logs/blocklet-${blocklet.meta.did}`);
+      navigate(`/blocklets/${blocklet.meta.did}/overview`);
     },
     disabled: isDownloading(blocklet.status)
-  }].filter(Boolean);
+  } : null].filter(Boolean);
   if (variant === 'menu') {
     return /*#__PURE__*/_jsxs(Div, {
       "data-cy": "blocklet-actions",

package/lib/blocklet/{storage/auto-check-update.js → auto-check-update.js}

@@ -4,8 +4,9 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import PropTypes from 'prop-types';
 import Tooltip from '@mui/material/Tooltip';
-import SwitchControl from '../component/switch-control';
-import { useBlockletAutoCheckUpdateContext } from '../../contexts/blocklet-auto-check-update';
+import SwitchControl from './component/switch-control';
+import { useBlockletContext } from '../contexts/blocklet';
+import { useNodeContext } from '../contexts/node';
 
 /**
  * @description
@@ -23,9 +24,20 @@ function AutoCheckUpdate({
     t
   } = useLocaleContext();
   const {
-    updateAutoCheckUpdate,
-    autoCheckUpdate
-  } = useBlockletAutoCheckUpdateContext();
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const autoCheckUpdate = blocklet?.settings?.autoCheckUpdate;
+  const updateAutoCheckUpdate = async value => {
+    await api.updateAutoCheckUpdate({
+      input: {
+        did: blocklet.meta.did,
+        autoCheckUpdate: value
+      }
+    });
+  };
   const configAutoBackup = async () => {
     try {
       const enabled = !autoCheckUpdate?.enabled;

package/lib/blocklet/component/index.js

@@ -23,7 +23,7 @@ import Empty from '@arcblock/ux/lib/Empty';
 import { forEachChildSync, isInProgress } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import { useDeletingBlockletContext } from '../../contexts/deleting-blocklets';
-import AutoCheckUpdate from '../storage/auto-check-update';
+import AutoCheckUpdate from '../auto-check-update';
 import { useNodeContext } from '../../contexts/node';
 import { formatError, sleep, BlockletAdminRoles } from '../../util';
 import Permission from '../../permission';
@@ -37,7 +37,6 @@ 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,
@@ -249,35 +248,33 @@ 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(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')]
-                })
+          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/icons.js

@@ -8,6 +8,7 @@ import Log from '@mui/icons-material/Receipt';
 import Group from '@mui/icons-material/Group';
 import Cancel from '@mui/icons-material/NotInterested';
 import Dashboard from '@arcblock/icons/lib/Dashboard';
+import Overview from '@mui/icons-material/ViewInAr';
 export default {
   Start,
   Stop,
@@ -18,5 +19,6 @@ export default {
   Log,
   Group,
   Cancel,
-  Dashboard
+  Dashboard,
+  Overview
 };

package/lib/blocklet/notification/push-kit.js

@@ -84,28 +84,30 @@ function NotificationPushKit() {
         await onSubmit(data, event, false);
       }
       const appUrl = (blocklet?.configs || []).find(x => x.key === 'BLOCKLET_APP_URL')?.value;
+      const logo = withQuery(joinURL(appUrl, '/.well-known/service/blocklet/logo'), {
+        v: blocklet?.meta?.version,
+        t: new Date(blocklet?.updatedAt || 0).getTime()
+      });
+      const notification = {
+        type: 'passthrough',
+        passthroughType: 'messageStatus',
+        data: {
+          message: {
+            title: 'Test push-kit notification',
+            body: 'This is message from push-kit config test',
+            sender: {
+              did: blocklet?.appDid,
+              fullName: blocklet?.meta?.title,
+              avatar: logo
+            }
+          }
+        }
+      };
       await api.sendPush({
         input: {
           did,
           receiver: pageState.testReceiver,
-          notification: JSON.stringify({
-            type: 'passthrough',
-            passthroughType: 'messageStatus',
-            data: {
-              message: {
-                title: 'Test push-kit notification',
-                body: 'This is message from push-kit config test',
-                sender: {
-                  did: blocklet?.appDid,
-                  fullName: blocklet?.meta?.title,
-                  avatar: withQuery(joinURL(appUrl, '/.well-known/service/blocklet/logo'), {
-                    v: blocklet?.meta?.version,
-                    t: new Date(blocklet?.updatedAt || 0).getTime()
-                  })
-                }
-              }
-            }
-          })
+          notification: JSON.stringify(notification)
         }
       });
       Toast.success(t('notification.pushKit.testSuccess'));
@@ -114,7 +116,8 @@ function NotificationPushKit() {
     }
   });
   const showTestEmailModal = useMemoizedFn((data, event) => {
-    pageState.testReceiver = '';
+    // 保持展示上一次的数据，不做重置
+    // pageState.testReceiver = '';
     pageState.testReceiverError = '';
     confirmApi.open({
       title: t('notification.pushKit.testSend'),
@@ -122,7 +125,8 @@ function NotificationPushKit() {
       content: () => {
         return /*#__PURE__*/_jsx(Box, {
           sx: {
-            width: '300px'
+            width: '450px',
+            maxWidth: '100%'
           },
           children: /*#__PURE__*/_jsx(TextField, {
             sx: {

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

@@ -46,7 +46,7 @@ export default function ConnectStoreButton({
     setOpen(false);
   };
   const handleToggle = () => {
-    setOpen(true);
+    setOpen(!open);
   };
   const handleClose = event => {
     if (anchorRef.current && anchorRef.current.contains(event.target)) {

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

@@ -6,12 +6,12 @@ import { PROJECT } from '@blocklet/constant';
 import styled from '@emotion/styled';
 import { Icon } from '@iconify/react';
 import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
-import { Box, Breadcrumbs, Button, ButtonGroup, IconButton, Dialog as MaterialDialog, Typography, useMediaQuery } from '@mui/material';
+import { Box, Breadcrumbs, Button, ButtonGroup, Dialog as MaterialDialog, Typography, useMediaQuery } from '@mui/material';
 import Spinner from '@mui/material/CircularProgress';
 import pick from 'lodash/pick';
 import pAll from 'p-all';
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import semver from 'semver';
 import { joinURL } from 'ufo';
@@ -27,6 +27,7 @@ import ConnectStoreList from './connect-store-list';
 import ProjectSetting from './project-setting';
 import { uploadResource } from './resource-select';
 import UploadedToast from './uploaded-toast';
+import InstallButton from './install-button';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const serverEndpoint = window.env?.serverEndpoint;
 function Header({
@@ -66,7 +67,15 @@ function Header({
   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';
+  const releaseType = useMemo(() => {
+    if (params?.blockletComponents?.length > 0) {
+      const res = params?.blockletComponents.find(x => {
+        return x.included;
+      });
+      return res ? 'resource' : 'pack';
+    }
+    return 'resource';
+  }, [params?.blockletComponents]);
   const onPublish = () => {
     window.parent.postMessage({
       event: 'studioDialog.uploaded',
@@ -249,97 +258,12 @@ function Header({
   const handleShowSetting = () => {
     setShowSetting(true);
   };
-  let installButton = null;
-  if (isPublished && serverEndpoint) {
-    const blockletMetaUrl = joinURL(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
-    if (projectType === 'pack') {
-      const url = new URL(serverEndpoint);
-      url.pathname = joinURL(url.pathname, '/launch-blocklet/agreement');
-      url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
-      installButton = isMobile ? /*#__PURE__*/_jsx(IconButton, {
-        component: "a",
-        disabled: loading,
-        href: url.href,
-        target: "_blank",
-        rel: "noreferrer",
-        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
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "ic:baseline-install-desktop"
-          })
-        }) : /*#__PURE__*/_jsx(Button, {
-          disabled: loading,
-          variant: "outlined",
-          sx: {
-            mr: 1
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('blocklet.publish.copyInstallUrl')
-        }), /*#__PURE__*/_jsx(MaterialDialog, {
-          fullWidth: true,
-          maxWidth: "sm",
-          open: installResourceTip,
-          onClose: () => setInstallResourceTip(''),
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              py: 5,
-              px: 4,
-              wordBreak: 'break-all'
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              sx: {
-                mb: 2
-              },
-              children: t('blocklet.publish.installResourceTip')
-            }), /*#__PURE__*/_jsx(ClickToCopy, {
-              children: installResourceTip
-            }), /*#__PURE__*/_jsxs(Typography, {
-              sx: {
-                mt: 2
-              },
-              children: [t('blocklet.publish.installResourceTip2'), /*#__PURE__*/_jsx("a", {
-                style: {
-                  marginLeft: 4
-                },
-                href: "https://www.arcblock.io/docs/blocklet-developer/R3weqCy7WPI8ggudt0C2alWv",
-                target: "_blank",
-                rel: "noreferrer",
-                children: t('blocklet.publish.installResourceHelp')
-              })]
-            })]
-          })
-        })]
-      });
-    }
-  }
+  const blockletMetaUrl = joinURL(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
+  const url = new URL(serverEndpoint);
+  url.pathname = joinURL(url.pathname, '/launch-blocklet/agreement');
+  url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
+  const installUrl = url.href;
+  const handleSetTip = () => setInstallResourceTip(blockletMetaUrl);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Content, {
       className: "sticky-header",
@@ -393,20 +317,44 @@ function Header({
             })
           })]
         }), 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')
+          children: [/*#__PURE__*/_jsx(MaterialDialog, {
+            fullWidth: true,
+            maxWidth: "sm",
+            open: installResourceTip,
+            onClose: () => setInstallResourceTip(''),
+            children: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                py: 5,
+                px: 4,
+                wordBreak: 'break-all'
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h6",
+                sx: {
+                  mb: 2
+                },
+                children: t('blocklet.publish.installResourceTip')
+              }), /*#__PURE__*/_jsx(ClickToCopy, {
+                children: installResourceTip
+              }), /*#__PURE__*/_jsxs(Typography, {
+                sx: {
+                  mt: 2
+                },
+                children: [t('blocklet.publish.installResourceTip2'), /*#__PURE__*/_jsx("a", {
+                  style: {
+                    marginLeft: 4
+                  },
+                  href: "https://www.arcblock.io/docs/blocklet-developer/R3weqCy7WPI8ggudt0C2alWv",
+                  target: "_blank",
+                  rel: "noreferrer",
+                  children: t('blocklet.publish.installResourceHelp')
+                })]
+              })]
+            })
           }), /*#__PURE__*/_jsxs(ButtonGroup, {
             disabled: loading,
             variant: "contained",
             children: [/*#__PURE__*/_jsxs(Button, {
-              variant: "contained",
               onClick: () => setShowStoreDialog(true),
               children: [loading ? /*#__PURE__*/_jsx(Spinner, {
                 size: 14,
@@ -420,8 +368,12 @@ function Header({
                   mr: 1
                 }
               }), isMobile ? t('common.upload') : t('blocklet.publish.connectOrUpload')]
+            }), /*#__PURE__*/_jsx(InstallButton, {
+              isPack: releaseType === 'pack',
+              downloadUrl: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
+              installUrl: installUrl,
+              handleSetTip: handleSetTip
             }), /*#__PURE__*/_jsx(Button, {
-              variant: "contained",
               onClick: handleShowSetting,
               children: /*#__PURE__*/_jsx(Icon, {
                 icon: "mage:settings-fill",

package/lib/blocklet/publish/create-release/install-button.js

@@ -0,0 +1,140 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Button, ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper, Typography } from '@mui/material';
+import { Icon } from '@iconify/react';
+import PropTypes from 'prop-types';
+import { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function InstallButton({
+  downloadUrl,
+  installUrl,
+  handleSetTip,
+  isPack,
+  disabled
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      disabled: disabled,
+      ref: anchorRef,
+      onClick: handleToggle,
+      children: /*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        sx: {
+          fontSize: 18
+        },
+        icon: "bxs:download"
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      sx: {
+        zIndex: 10
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      role: undefined,
+      transition: true,
+      disablePortal: true,
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Grow, {
+        ...TransitionProps,
+        style: {
+          transformOrigin: 'center top'
+        },
+        children: /*#__PURE__*/_jsx(Paper, {
+          children: /*#__PURE__*/_jsx(ClickAwayListener, {
+            onClickAway: handleClose,
+            children: /*#__PURE__*/_jsxs(MenuList, {
+              id: "split-button-menu",
+              autoFocusItem: true,
+              sx: {
+                maxHeight: 300,
+                overflowY: 'auto',
+                zIndex: 10
+              },
+              children: [isPack && /*#__PURE__*/_jsx(Box, {
+                component: "a",
+                href: installUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                sx: {
+                  textDecoration: 'none'
+                },
+                children: /*#__PURE__*/_jsxs(MenuItem, {
+                  sx: {
+                    color: '#333'
+                  },
+                  children: [/*#__PURE__*/_jsx(Box, {
+                    component: Icon,
+                    sx: {
+                      mr: 1
+                    },
+                    icon: "ic:round-install-desktop"
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "inherit",
+                    children: t('blocklet.publish.installToThisServer')
+                  })]
+                })
+              }), /*#__PURE__*/_jsxs(MenuItem, {
+                onClick: handleSetTip,
+                children: [/*#__PURE__*/_jsx(Box, {
+                  component: Icon,
+                  sx: {
+                    mr: 1
+                  },
+                  icon: "iconamoon:copy"
+                }), /*#__PURE__*/_jsx(Typography, {
+                  variant: "inherit",
+                  children: t('blocklet.publish.copyInstallUrl')
+                })]
+              }), /*#__PURE__*/_jsx(Box, {
+                component: "a",
+                href: downloadUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                sx: {
+                  textDecoration: 'none'
+                },
+                children: /*#__PURE__*/_jsxs(MenuItem, {
+                  sx: {
+                    color: '#333'
+                  },
+                  children: [/*#__PURE__*/_jsx(Box, {
+                    component: Icon,
+                    sx: {
+                      mr: 1
+                    },
+                    icon: "ph:download"
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "inherit",
+                    children: t('common.download')
+                  })]
+                })
+              })]
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+InstallButton.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  isPack: PropTypes.bool.isRequired,
+  downloadUrl: PropTypes.string.isRequired,
+  installUrl: PropTypes.string.isRequired,
+  handleSetTip: PropTypes.func.isRequired
+};

package/lib/blocklet/storage/auto-backup.js

@@ -25,7 +25,7 @@ function AutoBackup({
   } = useBlockletStorageContext();
   const configAutoBackup = async () => {
     try {
-      const enabled = !autoBackup.enabled;
+      const enabled = !autoBackup?.enabled;
       await updateAutoBackup({
         enabled
       });