@abtnode/ux 1.16.39 → 1.16.40-beta-20250227-092112-1815be0a

package/lib/blocklet/component/add-component/add-component-core.js

@@ -195,6 +195,12 @@ export default function AddComponentCore({
     }
     return '';
   };
+  const onOver = () => {
+    setLoading(false);
+    setParams({});
+    component.current = {};
+    onClose();
+  };
   const setInstallErrorResult = errorMessage => {
     const update = _loading => {
       updateParams({
@@ -235,6 +241,21 @@ export default function AddComponentCore({
       }
     };
   };
+  const handleFinish = () => {
+    postInstalledMessage({
+      timeout: 0,
+      componentDid: routerParams.componentDid,
+      manual: true
+    });
+    onOver();
+    // scroll to bottom
+    setTimeout(() => {
+      const scrollDom = document.getElementsByClassName('dashboard-main')[0];
+      if (scrollDom) {
+        scrollDom.scrollTop = scrollDom.scrollHeight;
+      }
+    }, 200);
+  };
   useSubscription(BlockletEvents.statusChange, createBlockletEventHandler(e => {
     switch (e.status) {
       case BlockletStatus.upgrading:
@@ -263,13 +284,16 @@ export default function AddComponentCore({
   useSubscription(BlockletEvents.installFailed, createBlockletEventHandler(() => {
     setInstallErrorResult(t('blocklet.component.installComponentError'));
   }), [blocklet?.meta?.did]);
+  useSubscription(BlockletEvents.componentInstalled, createBlockletEventHandler(() => {
+    updateParams({
+      installResultProps: {
+        variant: 'success',
+        title: getComponentName(),
+        subTitle: t('blocklet.component.installSuccessTip')
+      }
+    });
+  }), [blocklet?.meta?.did]);
   const steps = [];
-  const onOver = () => {
-    setLoading(false);
-    setParams({});
-    component.current = {};
-    onClose();
-  };
   const alreadyInstalled = did => (blocklet?.children || []).find(x => x.meta.did === did);
   const onInstall = async payload => {
     const {
@@ -1027,21 +1051,7 @@ export default function AddComponentCore({
       })
     }),
     confirm: t('common.complete'),
-    onConfirm: () => {
-      postInstalledMessage({
-        timeout: 0,
-        componentDid: routerParams.componentDid,
-        manual: true
-      });
-      onOver();
-      // scroll to bottom
-      setTimeout(() => {
-        const scrollDom = document.getElementsByClassName('dashboard-main')[0];
-        if (scrollDom) {
-          scrollDom.scrollTop = scrollDom.scrollHeight;
-        }
-      }, 200);
-    }
+    onConfirm: handleFinish
   });
   const step = steps[activeStep] || {};
   const isDisabled = () => {

package/lib/blocklet/component/component-cell-mount-poin.js

@@ -1,10 +1,13 @@
 import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
+import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
 import { Icon } from '@iconify/react';
-import { Box, CircularProgress, IconButton, TextField } from '@mui/material';
+import { Box, CircularProgress, IconButton, TextField, Typography } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
-import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
-import Toast from '@arcblock/ux/lib/Toast';
 import { useNodeContext } from '../../contexts/node';
 import { formatError } from '../../util';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +26,13 @@ function ComponentCellMountPoint({
   } = useNodeContext();
   const isRoot = !ancestors.length;
   const rootDid = isRoot ? blocklet.meta.did : ancestors.map(x => x.meta.did)[0];
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    confirmApi,
+    confirmHolder
+  } = useConfirm();
   useEffect(() => {
     setEditing(false);
     setHover(false);
@@ -33,8 +43,7 @@ function ComponentCellMountPoint({
     setEditing(false);
     setEditValue(mountPoint);
   };
-  const onSubmitMountPoint = async e => {
-    e.preventDefault();
+  const onSubmitMountPoint = async () => {
     setLoading(true);
     setHover(false);
     try {
@@ -49,10 +58,59 @@ function ComponentCellMountPoint({
         input
       });
     } catch (err) {
-      setLoading(false);
       err.message = formatError(err);
       Toast.error(err.message);
       throw err;
+    } finally {
+      handleCancel();
+    }
+  };
+  const showConfirmDialog = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t('common.noticeTitle'),
+      content: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          color: '#9397A1',
+          '& > li': {
+            listStyle: 'disc',
+            ml: 1.5
+          }
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            mb: 1.5
+          },
+          children: t('blocklet.mountPoint.description1')
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "li",
+          children: t('blocklet.mountPoint.case1')
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "li",
+          children: t('blocklet.mountPoint.case2')
+        }), /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            mt: 1.5
+          },
+          children: t('blocklet.mountPoint.description2')
+        })]
+      }),
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      async onConfirm(close) {
+        await onSubmitMountPoint();
+        close();
+      },
+      confirmButtonProps: {
+        'data-cy': 'edit-mount-point-confirm'
+      }
+    });
+  });
+  const onShowDialog = e => {
+    e?.preventDefault();
+    if (urlPathFriendly(editValue) !== mountPoint) {
+      showConfirmDialog();
+    } else {
+      setEditing(false);
     }
   };
   const tools = editing ? /*#__PURE__*/_jsxs(Box, {
@@ -64,7 +122,7 @@ function ComponentCellMountPoint({
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       "data-cy": "edit-mount-point-submit",
-      onClick: onSubmitMountPoint,
+      onClick: onShowDialog,
       children: /*#__PURE__*/_jsx(Box, {
         component: Icon,
         icon: "material-symbols:done",
@@ -112,8 +170,8 @@ function ComponentCellMountPoint({
     },
     alignItems: "center",
     flexGrow: "1",
-    children: [editing ? /*#__PURE__*/_jsx("form", {
-      onSubmit: onSubmitMountPoint,
+    children: [confirmHolder, editing ? /*#__PURE__*/_jsx("form", {
+      onSubmit: onShowDialog,
       children: /*#__PURE__*/_jsx(TextField, {
         style: {
           flex: 1

package/lib/blocklet/component/component-cell.js

@@ -272,6 +272,7 @@ export default function ComponentCell({
                     setLoading(true);
                     await onRestart(blocklet);
                     setLoading(false);
+                    setConfirmSetting(null);
                   },
                   onCancel: () => setConfirmSetting(null)
                 });

package/lib/blocklet/configuration.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
@@ -7,7 +7,9 @@ import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
-import LoopIcon from '@mui/icons-material/Loop';
+import TransferIcon from '@mui/icons-material/VolunteerActivismOutlined';
+import VaultIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
+import { useSetState } from 'ahooks';
 import { BLOCKLET_CONFIGURABLE_KEY, BLOCKLET_TENANT_MODES, SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import Toast from '@arcblock/ux/lib/Toast';
 import FormTextInput from '../form/form-text-input';
@@ -19,10 +21,11 @@ import Permission, { withPermission } from '../permission';
 import ClearCache from '../clear-cache';
 import AppSk from './preferences/app-sk';
 import TransferOwner from './transfer-owner';
+import ConfigVault from './vault/config';
 import useAppLogo from '../hooks/use-app-logo';
 import LogoUploader from './logo-uploader';
 import RotateSessionKey from '../rotate-session-key';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: SUPPORTED_LANGUAGES[x].nativeName,
@@ -44,10 +47,13 @@ function BlockletEnvironment({
   const {
     t
   } = useContext(LocaleContext);
-  const [loading, setLoading] = useState(false);
-  const [showTransferOwner, setShowTransferOwner] = useState(false);
+  const [state, setState] = useSetState({
+    loading: false,
+    showTransferOwner: false,
+    showConfigVault: false
+  });
   const inviteEnabled = !!blocklet?.settings?.invite?.enabled;
-  const disabled = loading || !hasPermission;
+  const disabled = state.loading || !hasPermission;
   const {
     logoUrl,
     rectLogoUrl,
@@ -101,7 +107,9 @@ function BlockletEnvironment({
       value
     }];
     try {
-      setLoading(true);
+      setState({
+        loading: true
+      });
       const {
         blocklet: data
       } = await api.configBlocklet({
@@ -114,14 +122,18 @@ function BlockletEnvironment({
     } catch (err) {
       Toast.error(err.message);
     } finally {
-      setLoading(false);
+      setState({
+        loading: false
+      });
     }
   };
   const createBooleanConfigHandler = (key, value) => async e => {
-    if (loading) {
+    if (state.loading) {
       return;
     }
-    setLoading(true);
+    setState({
+      loading: true
+    });
     try {
       const {
         checked
@@ -141,16 +153,20 @@ function BlockletEnvironment({
     } catch (err) {
       Toast.error(err.message);
     } finally {
-      setLoading(false);
+      setState({
+        loading: false
+      });
     }
   };
   const onDeletableChange = createBooleanConfigHandler('BLOCKLET_DELETABLE', checked => checked ? 'no' : 'yes');
   const onTenantModeChange = createBooleanConfigHandler('BLOCKLET_APP_TENANT_MODE', checked => checked ? BLOCKLET_TENANT_MODES.MULTIPLE : BLOCKLET_TENANT_MODES.SINGLE);
   const onChangeInviteSettings = async e => {
-    if (loading) {
+    if (state.loading) {
       return;
     }
-    setLoading(true);
+    setState({
+      loading: true
+    });
     try {
       await api.updateInviteSettings({
         input: {
@@ -163,14 +179,18 @@ function BlockletEnvironment({
     } catch (err) {
       Toast.error(err.message);
     } finally {
-      setLoading(false);
+      setState({
+        loading: false
+      });
     }
   };
   const onAppSkChange = async value => {
-    if (loading) {
+    if (state.loading) {
       return;
     }
-    setLoading(true);
+    setState({
+      loading: true
+    });
     try {
       const {
         blocklet: data
@@ -187,7 +207,9 @@ function BlockletEnvironment({
     } catch (err) {
       Toast.error(err.message);
     } finally {
-      setLoading(false);
+      setState({
+        loading: false
+      });
     }
   };
   return /*#__PURE__*/_jsxs(Div, {
@@ -205,7 +227,7 @@ function BlockletEnvironment({
           marginTop: 0
         },
         disabled: disabled,
-        loading: loading,
+        loading: state.loading,
         initialValue: item.value,
         placeholder: item.description,
         onSubmit: value => onSubmitConfig(item.key, value)
@@ -382,6 +404,11 @@ function BlockletEnvironment({
     }), /*#__PURE__*/_jsxs(Box, {
       className: "config-form",
       mt: 2,
+      sx: {
+        '.form-item:last-child': {
+          marginBottom: 0
+        }
+      },
       children: [/*#__PURE__*/_jsx(Box, {
         className: "config-label",
         fontSize: 14,
@@ -392,7 +419,7 @@ function BlockletEnvironment({
           marginTop: 0
         },
         disabled: disabled,
-        loading: loading,
+        loading: state.loading,
         options: languages,
         noEmpty: true,
         initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
@@ -411,10 +438,6 @@ function BlockletEnvironment({
       className: "config-form",
       component: Divider,
       my: 3
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "config-form",
-      component: Divider,
-      my: 3
     }), /*#__PURE__*/_jsx(Box, {
       mb: 2,
       className: "config-label",
@@ -453,8 +476,9 @@ function BlockletEnvironment({
           mb: 0,
           children: t('blocklet.config.sk')
         }), /*#__PURE__*/_jsx(AppSk, {
+          inService: inService,
           disabled: disabled,
-          loading: loading,
+          loading: state.loading,
           initialValue: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_SK').value,
           onChange: onAppSkChange
         })]
@@ -463,38 +487,86 @@ function BlockletEnvironment({
       // eslint-disable-next-line jsx-a11y/aria-role
       _jsx(Permission, {
         role: "owner",
-        children: isOwner => (isOwner || enableDebug) && /*#__PURE__*/_jsxs(Box, {
-          className: "config-form",
-          mt: 2,
+        children: isOwner => (isOwner || enableDebug) && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(Box, {
-            className: "config-item",
+            className: "config-form",
+            mt: 2,
             children: [/*#__PURE__*/_jsxs(Box, {
-              className: "config-label",
-              mb: 0,
-              children: [t('team.transferApp.name'), /*#__PURE__*/_jsx(Box, {
-                className: "config-desc",
-                children: t('team.transferApp.description')
+              className: "config-item",
+              children: [/*#__PURE__*/_jsxs(Box, {
+                className: "config-label",
+                mb: 0,
+                children: [t('blocklet.config.vault.title'), /*#__PURE__*/_jsx(Box, {
+                  className: "config-desc",
+                  children: t('blocklet.config.vault.desc')
+                })]
+              }), /*#__PURE__*/_jsxs(Button, {
+                style: {
+                  flexShrink: 0
+                },
+                variant: "contained",
+                color: "primary",
+                size: "small",
+                "data-cy": "config-vault",
+                onClick: () => setState({
+                  showConfigVault: true
+                }),
+                children: [/*#__PURE__*/_jsx(VaultIcon, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('blocklet.config.vault.title')]
               })]
-            }), /*#__PURE__*/_jsxs(Button, {
-              style: {
-                flexShrink: 0
-              },
-              variant: "contained",
-              edge: "end",
-              color: "error",
-              size: "small",
-              "data-cy": "transfer-app",
-              onClick: () => setShowTransferOwner(true),
-              children: [/*#__PURE__*/_jsx(LoopIcon, {
+            }), state.showConfigVault && /*#__PURE__*/_jsx(ConfigVault, {
+              vaults: blocklet.vaults || [],
+              appId: blocklet.appDid,
+              onCancel: () => setState({
+                showConfigVault: false
+              }),
+              onSuccess: () => setState({
+                showConfigVault: false
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(Box, {
+            className: "config-form",
+            mt: 2,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              className: "config-item",
+              children: [/*#__PURE__*/_jsxs(Box, {
+                className: "config-label",
+                mb: 0,
+                children: [t('team.transferApp.name'), /*#__PURE__*/_jsx(Box, {
+                  className: "config-desc",
+                  children: t('team.transferApp.description')
+                })]
+              }), /*#__PURE__*/_jsxs(Button, {
                 style: {
-                  fontSize: '1.3em',
-                  marginRight: 4
-                }
-              }), t('team.transferApp.name')]
+                  flexShrink: 0
+                },
+                variant: "contained",
+                edge: "end",
+                color: "error",
+                size: "small",
+                "data-cy": "transfer-app",
+                onClick: () => setState({
+                  showTransferOwner: true
+                }),
+                children: [/*#__PURE__*/_jsx(TransferIcon, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('team.transferApp.name')]
+              })]
+            }), state.showTransferOwner && /*#__PURE__*/_jsx(TransferOwner, {
+              onCancel: () => setState({
+                showTransferOwner: false
+              }),
+              onSuccess: () => setState({
+                showTransferOwner: false
+              })
             })]
-          }), showTransferOwner && /*#__PURE__*/_jsx(TransferOwner, {
-            onCancel: () => setShowTransferOwner(false),
-            onSuccess: () => setShowTransferOwner(false)
           })]
         })
       }), /*#__PURE__*/_jsx(Box, {

package/lib/blocklet/overview.js

@@ -12,6 +12,7 @@ import Tag from '@arcblock/ux/lib/Tag';
 import { useBlockletContext } from '../contexts/blocklet';
 import { useNodeContext } from '../contexts/node';
 import DidAddress from '../did-address';
+import VaultStatus from './vault/status';
 import { formatToDatetime, getExplorerLink } from '../util';
 import { isServerless } from './util';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -71,8 +72,11 @@ export default function BlockletOverview() {
         did: x.appDid,
         showQrcode: true
       })), migratedFrom.length > 2 && /*#__PURE__*/_jsx(Button, {
-        style: {
-          marginLeft: '18px'
+        sx: {
+          pl: 0,
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
         },
         endIcon: showAllDIDs ? /*#__PURE__*/_jsx(Icon, {
           icon: KeyboardArrowUpRoundedIcon
@@ -97,7 +101,23 @@ export default function BlockletOverview() {
       did: blocklet.settings.owner.did,
       showQrcode: true
     }) : '-'
-  }, {
+  }, blocklet.vaults?.length ? {
+    name: t('blocklet.config.vault.name'),
+    value: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/_jsx(DidAddress, {
+        did: blocklet.vaults[blocklet.vaults.length - 1].did,
+        showQrcode: true
+      }), /*#__PURE__*/_jsx(VaultStatus, {
+        vaults: blocklet.vaults,
+        appId: blocklet.appDid
+      })]
+    })
+  } : null, {
     name: t('blocklet.installedAt'),
     value: formatToDatetime(blocklet.installedAt, locale)
   }, {

package/lib/blocklet/preferences/app-sk.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import useSetState from 'react-use/lib/useSetState';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import { APP_STRUCT_VERSION } from '@abtnode/constant';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -18,20 +19,23 @@ export default function AppSk({
   initialValue,
   onChange,
   disabled,
-  loading
+  loading,
+  inService
 }) {
   const {
     t
   } = useLocaleContext();
   const {
-    api
+    api,
+    session
   } = useSessionContext();
   const {
     blocklet
   } = useBlockletContext();
   const [state, setState] = useSetState({
     newAppSk: '',
-    isConnectOpen: false
+    isConnectOpen: false,
+    confirmDialogOpen: false
   });
   const onAppSkChange = value => {
     setState({
@@ -53,7 +57,7 @@ export default function AppSk({
   });
   const triggers = blocklet.structVersion === APP_STRUCT_VERSION ? [{
     key: 'rotate-with-did-wallet',
-    title: 'Migrate with DID Wallet',
+    title: t('blocklet.config.migrate.button'),
     handler: () => {
       if (isRunning(blocklet.status)) {
         Toast.error(t('blocklet.error.isRunning'));
@@ -64,7 +68,7 @@ export default function AppSk({
         return;
       }
       setState({
-        isConnectOpen: true
+        confirmDialogOpen: true
       });
     }
   }] : [];
@@ -93,8 +97,8 @@ export default function AppSk({
         })]
       })]
     }),
-    confirm: t('confirm'),
-    cancel: t('cancel'),
+    confirm: t('common.confirm'),
+    cancel: t('common.cancel'),
     onConfirm: () => onConfirm(state.newAppSk),
     onCancel: () => setState({
       newAppSk: ''
@@ -107,7 +111,12 @@ export default function AppSk({
     action: "rotate-key-pair",
     checkFn: api.get,
     checkTimeout: 5 * 60 * 1000,
-    onSuccess: onClose,
+    onSuccess: () => {
+      if (inService) {
+        session.logout();
+      }
+      onClose();
+    },
     extraParams: {
       appDid: blocklet.appDid
     },
@@ -118,19 +127,45 @@ export default function AppSk({
       success: t('setup.keyPair.success')
     },
     onClose: onClose
+  }), state.confirmDialogOpen && /*#__PURE__*/_jsx(Confirm, {
+    title: /*#__PURE__*/_jsx(Typography, {
+      sx: {
+        fontSize: '20px',
+        fontWeight: '500'
+      },
+      children: t('blocklet.config.migrate.title')
+    }),
+    description: /*#__PURE__*/_jsx(Typography, {
+      sx: {
+        fontSize: '14px',
+        color: '#9397A1'
+      },
+      children: t('blocklet.config.migrate.description')
+    }),
+    confirm: t('common.confirm'),
+    cancel: t('common.cancel'),
+    onConfirm: () => setState({
+      confirmDialogOpen: false,
+      isConnectOpen: true
+    }),
+    onCancel: () => setState({
+      confirmDialogOpen: false
+    })
   })];
 }
 AppSk.propTypes = {
   initialValue: PropTypes.string,
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  inService: PropTypes.bool
 };
 AppSk.defaultProps = {
   initialValue: 'default',
   onChange: () => {},
   disabled: false,
-  loading: false
+  loading: false,
+  inService: false
 };
 const UL = styled('ul')`
   padding-left: 16px;

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

@@ -188,6 +188,9 @@ function Header({
       await api.createRelease({
         input: {
           ..._params,
+          note: JSON.stringify({
+            note: _params.note
+          }),
           did: blocklet.meta.did,
           projectId,
           releaseId: releaseUsedLast ? '' : releaseId,