@abtnode/ux 1.16.25-next-bc2f4c63 → 1.16.25

package/es/blocklet/actions.js

@@ -296,7 +296,17 @@ export default function BlockletActions({
   } : null;
   const cancelDownloadAction = {
     action: 'remove',
-    icon: Icons.Remove,
+    icon: ({
+      sx,
+      ...restProps
+    }) => /*#__PURE__*/_jsx(Icons.Cancel, {
+      sx: {
+        ...sx,
+        paddingRight: '2px',
+        zoom: 0.95
+      },
+      ...restProps
+    }),
     name: t('common.cancel'),
     handler: createHandler('cancelDownload', node.api.cancelDownloadBlocklet, true)
   };

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

@@ -1237,6 +1237,11 @@ const ContentWrapper = styled(Box)`
   }
   return `
       position: relative;
+      .ll-container { // 通过 Launcher Layout 组件约定的 .ll-container class 自定义 Layout 样式
+        width: 100%;
+        height: 100%;
+      }
+
       .root-header {
         z-index: auto !important;
         position: fixed !important;

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

@@ -196,7 +196,8 @@ export default function ComponentCell({
   }, {
     name: t('common.did'),
     value: /*#__PURE__*/_jsx(DidAddress, {
-      did: componentInfo.meta.did
+      did: componentInfo.meta.did,
+      showQrcode: true
     })
   }, {
     name: t('common.author'),

package/es/blocklet/icons.js

@@ -6,6 +6,7 @@ import Reload from '@mui/icons-material/Autorenew';
 import Config from '@mui/icons-material/Settings';
 import Log from '@mui/icons-material/Receipt';
 import Group from '@mui/icons-material/Group';
+import Cancel from '@mui/icons-material/NotInterested';
 export default {
   Start,
   Stop,
@@ -14,5 +15,6 @@ export default {
   Remove,
   Config,
   Log,
-  Group
+  Group,
+  Cancel
 };

package/es/blocklet/overview.js

@@ -42,18 +42,21 @@ export default function BlockletOverview() {
   const infoRows = [appDid ? {
     name: t('blocklet.appId'),
     value: /*#__PURE__*/_jsx(DidAddress, {
-      did: appDid
+      did: appDid,
+      showQrcode: true
     })
   } : null, appPid ? {
     name: t('blocklet.appPid'),
     value: /*#__PURE__*/_jsx(DidAddress, {
-      did: appPid
+      did: appPid,
+      showQrcode: true
     })
   } : null, migratedFrom?.length > 1 ? {
     name: t('blocklet.alsoKnownAs'),
     value: /*#__PURE__*/_jsxs("div", {
       children: [(showAllDIDs ? migratedFrom.slice(1) : migratedFrom.slice(1, 2)).map(x => /*#__PURE__*/_jsx(DidAddress, {
-        did: x.appDid
+        did: x.appDid,
+        showQrcode: true
       })), migratedFrom.length > 2 && /*#__PURE__*/_jsx(Button, {
         style: {
           marginLeft: '18px'
@@ -78,7 +81,8 @@ export default function BlockletOverview() {
     value: /*#__PURE__*/_jsx(DidAddress, {
       external: true,
       href: getExplorerLink(blocklet?.controller?.chainHost, blocklet?.controller?.nftId, 'asset'),
-      did: blocklet?.controller?.nftId
+      did: blocklet?.controller?.nftId,
+      showQrcode: true
     })
   } : null, {
     name: t('blocklet.installedAt'),
@@ -89,8 +93,9 @@ export default function BlockletOverview() {
   }, {
     name: t('common.owner'),
     value: blocklet.settings?.owner ? /*#__PURE__*/_jsx(DidAddress, {
-      did: blocklet.settings.owner.did
-    }) : '--'
+      did: blocklet.settings.owner.did,
+      showQrcode: true
+    }) : '-'
   }, {
     name: t('blocklet.config.walletType.name'),
     value: WalletType[chainType || 'arcblock'] || chainType
@@ -102,7 +107,8 @@ export default function BlockletOverview() {
     infoRows.push({
       name: t('common.serverDid'),
       value: /*#__PURE__*/_jsx(DidAddress, {
-        did: nodeInfo.did
+        did: nodeInfo.did,
+        showQrcode: true
       })
     }, {
       name: t('common.serverVersion'),

package/es/blocklet/publish/create-release.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, useRef, useCallback } from 'react';
+import { useState, useEffect, lazy, useRef, useCallback, useMemo } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import useSetState from 'react-use/lib/useSetState';
@@ -15,6 +15,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import InputAdornment from '@mui/material/InputAdornment';
 import Spinner from '@mui/material/CircularProgress';
 import Dialog from '@mui/material/Dialog';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -24,6 +25,7 @@ import Alert from '@arcblock/ux/lib/Alert';
 import { PROJECT } from '@blocklet/constant';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import BlockletBundleAvatar from '../bundle-avatar';
+import { useSessionContext } from '../../contexts/session';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import EmptySpinner from '../../empty-spinner';
@@ -108,8 +110,8 @@ const pickParams = (release, app) => {
   if (!params.blockletComponents) {
     params.blockletComponents = (app.children || []).map(x => ({
       did: x.meta.did,
-      included: true,
-      required: true
+      included: false,
+      required: false
     }));
   } else {
     params.blockletComponents = params.blockletComponents.map(x => ({
@@ -126,11 +128,15 @@ export default function CreateRelease({
   const {
     projectId,
     releaseId: inputReleaseId,
-    componentDid
+    componentDid = ''
   } = useParams();
   const {
-    t
+    t,
+    locale
   } = useLocaleContext();
+  const {
+    api: sessionApi
+  } = useSessionContext();
   const {
     blocklet
   } = useBlockletContext();
@@ -144,10 +150,11 @@ export default function CreateRelease({
   } = useNodeContext();
   const uploaderLogoRef = useRef(null);
   const uploaderScreenshotRef = useRef(null);
-  const [projectType, setProjectType] = useState();
   const [installResourceTip, setInstallResourceTip] = useState();
+  const [openConnect, setOpenConnect] = useState(false);
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
+  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) ? 'pack' : 'resource', [params?.blockletComponents]);
   const tabs = [];
   const resourceComponents = (blocklet?.children || []).filter(x => x.meta.resource?.exportApi).filter(x => !componentDid || x.meta.did === componentDid);
   resourceComponents.forEach(item => {
@@ -161,9 +168,11 @@ export default function CreateRelease({
   const [tab, setTab] = useState(tabs[0]?.value);
   const isPublished = release?.status === 'published';
   const readOnly = isPublished;
-  const getProject = ({
-    typeOnly
-  } = {}) => {
+  const getProject = () => {
+    if (!projectId) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     api.getProject({
       input: {
         did: blocklet.meta.did,
@@ -172,17 +181,16 @@ export default function CreateRelease({
     }).then(res => {
       setLoading(false);
       const data = res.project || {};
-      if (typeOnly) {
-        setProjectType(data.type);
-        return;
-      }
       if (!data.blockletVersion) {
         data.blockletVersion = '1.0.0';
       } else if (semver.valid(data.blockletVersion)) {
         data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
       }
-      setParams(pickParams(data, blocklet));
-      setProjectType(data.type);
+      const theParams = pickParams(data, blocklet);
+      if (theParams.blockletTitle === projectId.slice(0, 8)) {
+        theParams.blockletTitle = '';
+      }
+      setParams(theParams);
     }).catch(err => {
       setLoading(false);
       Toast.error(formatError(err));
@@ -211,19 +219,18 @@ export default function CreateRelease({
         return;
       }
       getRelease();
-      getProject({
-        typeOnly: true
-      });
+      // getProject({ typeOnly: true });
     }
     if (mode === 'create') {
       getProject();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, releaseId]);
-  useEffect(() => {
-    getData();
-  }, [getData]);
   const onRelease = status => {
+    if (!projectId) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     const errors = validateParams(params, status, t);
     if (errors) {
       Toast.error(errors.map(x => x.message).join('; '));
@@ -248,11 +255,7 @@ export default function CreateRelease({
     _params.blockletDescription = (_params.blockletDescription || '').trim();
     _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
     _params.note = (_params.note || '').trim();
-    if (projectType === 'pack') {
-      _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
-    } else {
-      delete _params.blockletComponents;
-    }
+    _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
     setCreateLoading(status);
     setLoading(true);
     api.createRelease({
@@ -291,12 +294,96 @@ export default function CreateRelease({
       }
     });
   };
+  const handleDidConnectShow = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!params.blockletTitle) {
+      setParamsErrTip({
+        blockletTitle: t('blocklet.publish.errorTip.noTitle')
+      });
+      Toast.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
+    if (projectId === '0') {
+      setOpenConnect(true);
+    }
+  };
+  const handleDidConnectClose = () => {
+    setOpenConnect(false);
+  };
+  const handleChangeSelectedComponents = data => {
+    setParams({
+      blockletComponents: data
+    });
+  };
+  const handleCreateBlockletDidError = err => {
+    Toast.error(err.message);
+    setOpenConnect(false);
+  };
+  const handleCreate = nextProjectDid => {
+    if (!nextProjectDid) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
+    setLoading(true);
+    api.createProject({
+      input: {
+        did: blocklet.meta.did,
+        blockletTitle: params.blockletTitle || nextProjectDid.slice(0, 9),
+        blockletDid: nextProjectDid,
+        type: params.blockletComponents?.length > 0 ? 'pack' : 'resource',
+        componentDid
+      }
+    }).then(() => {
+      setLoading(false);
+      navigate(`/.well-known/service/admin/publish/${nextProjectDid}/create`, {
+        replace: true
+      });
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const handleCreateBlockletDidSuccess = result => {
+    const did = result?.blockletWallet?.address;
+    if (!did) {
+      Toast.error('Empty Blocklet DID');
+    } else {
+      handleCreate(did);
+    }
+    setOpenConnect(false);
+  };
+  useEffect(() => {
+    getData();
+  }, [getData]);
   if (!params && loading) {
     return /*#__PURE__*/_jsx(EmptySpinner, {});
   }
   if (!params) {
     return null;
   }
+  const connect = openConnect ? /*#__PURE__*/_jsx(DidConnect, {
+    open: true,
+    popup: true,
+    onClose: handleDidConnectClose,
+    action: "gen-blocklet-key-pair",
+    locale: locale,
+    checkFn: sessionApi.get,
+    saveConnect: false,
+    forceConnected: false,
+    checkTimeout: 5 * 60 * 1000,
+    onSuccess: handleCreateBlockletDidSuccess,
+    onError: handleCreateBlockletDidError,
+    extraParams: {
+      did: blocklet.meta.did
+    },
+    messages: {
+      title: t('blocklet.publish.connect.title'),
+      scan: t('blocklet.publish.connect.scan'),
+      confirm: t('blocklet.publish.connect.confirm'),
+      success: t('blocklet.publish.connect.success')
+    }
+  }) : null;
   const uploadLogoPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/logo/upload`;
   const uploadScreenshotPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/screenshot/upload`;
   const logoUrl = params?.blockletLogo ? `${uploadLogoPrefix}/${params.blockletLogo}` : `${WELLKNOWN_SERVICE_PATH_PREFIX}/static/images/logo.png`;
@@ -357,7 +444,7 @@ export default function CreateRelease({
             marginRight: 8
           },
           onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('common.install')
+          children: t('blocklet.publish.copyInstallUrl')
         }), /*#__PURE__*/_jsx(Dialog, {
           fullWidth: true,
           maxWidth: "sm",
@@ -398,7 +485,7 @@ export default function CreateRelease({
   }
   return /*#__PURE__*/_jsxs(Main, {
     ...rest,
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [connect, /*#__PURE__*/_jsxs(Box, {
       className: "sticky-header",
       children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
         className: "breadcrumbs",
@@ -452,14 +539,8 @@ export default function CreateRelease({
         })]
       })]
     }), /*#__PURE__*/_jsxs(Box, {
-      children: [projectType === 'pack' && /*#__PURE__*/_jsx(Alert, {
-        type: "info",
-        style: {
-          width: '100%'
-        },
-        children: t('blocklet.publish.packTip')
-      }), /*#__PURE__*/_jsx(Box, {
-        pt: 3
+      children: [/*#__PURE__*/_jsx(Box, {
+        pt: 5
       }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         className: "section",
@@ -493,6 +574,30 @@ export default function CreateRelease({
             },
             error: !!paramsErrTip.blockletTitle,
             helperText: paramsErrTip.blockletTitle || ''
+          }), /*#__PURE__*/_jsx(TextField, {
+            required: true,
+            label: "Blocklet DID",
+            fullWidth: true,
+            readonly: true,
+            disabled: projectId !== '0',
+            autoComplete: "off",
+            variant: "outlined",
+            onClick: handleDidConnectShow,
+            InputProps: {
+              'data-cy': 'export-blocklet-did',
+              endAdornment: projectId === '0' && /*#__PURE__*/_jsx(InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/_jsx(Button, {
+                  onClick: handleDidConnectShow,
+                  children: t('common.create')
+                })
+              })
+            },
+            helperText: "",
+            value: projectId === '0' ? '' : projectId,
+            sx: {
+              mt: 3
+            }
           }), /*#__PURE__*/_jsx(TextField, {
             label: `Blocklet ${t('common.description')}`,
             placeholder: `Blocklet ${t('common.description')}`,
@@ -778,7 +883,7 @@ export default function CreateRelease({
             children: resourceContent
           })]
         })]
-      }), projectType === 'pack' && /*#__PURE__*/_jsxs(Box, {
+      }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         mt: 3,
         className: "section full-width",
@@ -795,14 +900,16 @@ export default function CreateRelease({
           children: /*#__PURE__*/_jsx(SelectComponents, {
             disabled: loading || readOnly,
             app: blocklet,
-            value: params.blockletComponents,
-            onChange: data => {
-              setParams({
-                blockletComponents: data
-              });
-            }
+            value: params.blockletComponents || [],
+            onChange: handleChangeSelectedComponents
           })
         })]
+      }), projectType === 'pack' && /*#__PURE__*/_jsx(Alert, {
+        type: "info",
+        style: {
+          width: '100%'
+        },
+        children: t('blocklet.publish.packTip')
       })]
     })]
   });

package/es/blocklet/publish/index.js

@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import { useBlockletContext } from '../../contexts/blocklet';
 import ProjectList from './project-list';
-import CreateProject from './create-project';
 import ReleasesList from './release-list';
 import CreateRelease from './create-release';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,9 +44,6 @@ export default function BlockletPublish({
       children: [/*#__PURE__*/_jsx(Route, {
         path: "/",
         element: /*#__PURE__*/_jsx(ProjectList, {})
-      }), /*#__PURE__*/_jsx(Route, {
-        path: "/create",
-        element: /*#__PURE__*/_jsx(CreateProject, {})
       }), /*#__PURE__*/_jsx(Route, {
         path: "/:projectId",
         element: /*#__PURE__*/_jsx(ReleasesList, {})

package/es/blocklet/publish/project-list.js

@@ -1,16 +1,23 @@
 /* eslint-disable react/no-unstable-nested-components */
 import React, { useState, useEffect } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
+import joinUrl from 'url-join';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Box from '@mui/material/Box';
+import AddIcon from '@mui/icons-material/Add';
 import IconButton from '@mui/material/IconButton';
+import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
 import DeleteIcon from '@mui/icons-material/Delete';
+import InstallDesktopIcon from '@mui/icons-material/InstallDesktop';
+import DownloadIcon from '@mui/icons-material/Download';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
 import Tag from '@arcblock/ux/lib/Tag';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import { Tooltip } from '@mui/material';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
 import EmptySpinner from '../../empty-spinner';
@@ -18,7 +25,9 @@ import DidAddress from '../../did-address';
 import Confirm from '../../confirm';
 import BlockletBundleAvatar from '../bundle-avatar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const serverEndpoint = window.env?.serverEndpoint;
 export default function ProjectList() {
+  const navigate = useNavigate();
   const {
     t,
     locale
@@ -50,6 +59,11 @@ export default function ProjectList() {
       Toast.error(err.message);
     });
   };
+  const handleNewBlocklet = () => {
+    navigate('/.well-known/service/admin/publish/0/create', {
+      replace: true
+    });
+  };
   const onDeleteProject = project => {
     setDeleteConfirm(project);
   };
@@ -76,7 +90,15 @@ export default function ProjectList() {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!projects && loading) {
-    return /*#__PURE__*/_jsx(EmptySpinner, {});
+    return /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '40px'
+      },
+      children: /*#__PURE__*/_jsx(EmptySpinner, {})
+    });
   }
   if (!projects) {
     return null;
@@ -101,12 +123,10 @@ export default function ProjectList() {
           mb: 3
         },
         children: t('blocklet.publish.createBlockletTip')
-      }), /*#__PURE__*/_jsx(Link, {
-        to: "create",
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: t('blocklet.publish.createBlocklet')
       })]
     });
   }
@@ -191,34 +211,118 @@ export default function ProjectList() {
     options: {
       customBodyRenderLite: rawIndex => {
         const project = projects[rawIndex];
-        return /*#__PURE__*/_jsx(Box, {
+        let installUrl = '';
+        let downloadUrl = '';
+        if (project.lastReleaseId) {
+          const blockletMetaUrl = joinUrl(serverEndpoint, `/api/project/${blocklet.meta.did}/${project.id}/${project.lastReleaseId}/release/blocklet.json`);
+          const url = new URL(serverEndpoint);
+          url.pathname = joinUrl(url.pathname, '/launch-blocklet/agreement');
+          url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
+          installUrl = url.href;
+          downloadUrl = joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${project.id}/${project.lastReleaseId}/download/${(project.lastReleaseFiles || [])[0]}`);
+        }
+        return /*#__PURE__*/_jsxs(Box, {
           display: "flex",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "error",
-            "aria-label": "delete",
-            onClick: () => onDeleteProject(project),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {
-              sx: {
-                fontSize: 18
-              }
+          children: [/*#__PURE__*/_jsx(Link, {
+            to: `${project.id}/create`,
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: t('blocklet.publish.createRelease'),
+              placement: "top",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                color: "primary",
+                "aria-label": "create",
+                children: /*#__PURE__*/_jsx(LibraryAddIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && project.type === 'pack' && /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.install', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "secondary",
+              "aria-label": "create",
+              children: /*#__PURE__*/_jsx("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: installUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                children: /*#__PURE__*/_jsx(InstallDesktopIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.download', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "primary",
+              "aria-label": "create",
+              children: /*#__PURE__*/_jsx("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: downloadUrl,
+                children: /*#__PURE__*/_jsx(DownloadIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.delete', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "primary",
+              "aria-label": "delete",
+              onClick: () => onDeleteProject(project),
+              children: /*#__PURE__*/_jsx(DeleteIcon, {
+                sx: {
+                  fontSize: 18
+                }
+              })
             })
-          })
+          })]
         });
       }
     }
   }].filter(Boolean);
   return /*#__PURE__*/_jsxs(Main, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: 'right'
-      },
-      children: /*#__PURE__*/_jsx(Link, {
-        to: "create",
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
-      })
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          fontSize: '1.2rem',
+          fontWeight: 'bold'
+        },
+        children: t('blocklet.publish.productListTitle')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: [/*#__PURE__*/_jsx(AddIcon, {
+          style: {
+            fontSize: '1.3em',
+            marginRight: 4
+          }
+        }), t('blocklet.publish.createBlocklet')]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      mt: 3
     }), /*#__PURE__*/_jsx(Datatable, {
       className: "main-table",
       locale: locale,