@abtnode/ux 1.16.25-next-bc2f4c63 → 1.16.25

package/lib/blocklet/overview.js

@@ -54,18 +54,21 @@ function BlockletOverview() {
   const infoRows = [appDid ? {
     name: t('blocklet.appId'),
     value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-      did: appDid
+      did: appDid,
+      showQrcode: true
     })
   } : null, appPid ? {
     name: t('blocklet.appPid'),
     value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-      did: appPid
+      did: appPid,
+      showQrcode: true
     })
   } : null, (migratedFrom === null || migratedFrom === void 0 ? void 0 : migratedFrom.length) > 1 ? {
     name: t('blocklet.alsoKnownAs'),
     value: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [(showAllDIDs ? migratedFrom.slice(1) : migratedFrom.slice(1, 2)).map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-        did: x.appDid
+        did: x.appDid,
+        showQrcode: true
       })), migratedFrom.length > 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         style: {
           marginLeft: '18px'
@@ -90,7 +93,8 @@ function BlockletOverview() {
     value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
       external: true,
       href: (0, _util2.getExplorerLink)(blocklet === null || blocklet === void 0 || (_blocklet$controller = blocklet.controller) === null || _blocklet$controller === void 0 ? void 0 : _blocklet$controller.chainHost, blocklet === null || blocklet === void 0 || (_blocklet$controller2 = blocklet.controller) === null || _blocklet$controller2 === void 0 ? void 0 : _blocklet$controller2.nftId, 'asset'),
-      did: blocklet === null || blocklet === void 0 || (_blocklet$controller3 = blocklet.controller) === null || _blocklet$controller3 === void 0 ? void 0 : _blocklet$controller3.nftId
+      did: blocklet === null || blocklet === void 0 || (_blocklet$controller3 = blocklet.controller) === null || _blocklet$controller3 === void 0 ? void 0 : _blocklet$controller3.nftId,
+      showQrcode: true
     })
   } : null, {
     name: t('blocklet.installedAt'),
@@ -101,8 +105,9 @@ function BlockletOverview() {
   }, {
     name: t('common.owner'),
     value: (_blocklet$settings = blocklet.settings) !== null && _blocklet$settings !== void 0 && _blocklet$settings.owner ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-      did: blocklet.settings.owner.did
-    }) : '--'
+      did: blocklet.settings.owner.did,
+      showQrcode: true
+    }) : '-'
   }, {
     name: t('blocklet.config.walletType.name'),
     value: WalletType[chainType || 'arcblock'] || chainType
@@ -114,7 +119,8 @@ function BlockletOverview() {
     infoRows.push({
       name: t('common.serverDid'),
       value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-        did: nodeInfo.did
+        did: nodeInfo.did,
+        showQrcode: true
       })
     }, {
       name: t('common.serverVersion'),

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

@@ -21,6 +21,7 @@ var _DeleteOutline = _interopRequireDefault(require("@mui/icons-material/DeleteO
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
@@ -30,6 +31,7 @@ var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
 var _constant = require("@blocklet/constant");
 var _constant2 = require("@abtnode/constant");
 var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
+var _session = require("../../contexts/session");
 var _node = require("../../contexts/node");
 var _blocklet = require("../../contexts/blocklet");
 var _emptySpinner = _interopRequireDefault(require("../../empty-spinner"));
@@ -126,8 +128,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 => _objectSpread(_objectSpread({}, x), {}, {
@@ -143,11 +145,15 @@ function CreateRelease(_ref2) {
   const {
     projectId,
     releaseId: inputReleaseId,
-    componentDid
+    componentDid = ''
   } = (0, _reactRouterDom.useParams)();
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
+  const {
+    api: sessionApi
+  } = (0, _session.useSessionContext)();
   const {
     blocklet
   } = (0, _blocklet.useBlockletContext)();
@@ -161,10 +167,14 @@ function CreateRelease(_ref2) {
   } = (0, _node.useNodeContext)();
   const uploaderLogoRef = (0, _react.useRef)(null);
   const uploaderScreenshotRef = (0, _react.useRef)(null);
-  const [projectType, setProjectType] = (0, _react.useState)();
   const [installResourceTip, setInstallResourceTip] = (0, _react.useState)();
+  const [openConnect, setOpenConnect] = (0, _react.useState)(false);
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
+  const projectType = (0, _react.useMemo)(() => {
+    var _params$blockletCompo;
+    return params !== null && params !== void 0 && (_params$blockletCompo = params.blockletComponents) !== null && _params$blockletCompo !== void 0 && _params$blockletCompo.some(x => x.included) ? 'pack' : 'resource';
+  }, [params === null || params === void 0 ? void 0 : params.blockletComponents]);
   const tabs = [];
   const resourceComponents = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.children) || []).filter(x => {
     var _x$meta$resource;
@@ -181,10 +191,11 @@ function CreateRelease(_ref2) {
   const [tab, setTab] = (0, _react.useState)((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.value);
   const isPublished = (release === null || release === void 0 ? void 0 : release.status) === 'published';
   const readOnly = isPublished;
-  const getProject = function getProject() {
-    let {
-      typeOnly
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const getProject = () => {
+    if (!projectId) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     api.getProject({
       input: {
         did: blocklet.meta.did,
@@ -193,17 +204,16 @@ function CreateRelease(_ref2) {
     }).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.default.valid(data.blockletVersion)) {
         data.blockletVersion = _semver.default.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.default.error((0, _util.formatError)(err));
@@ -232,19 +242,18 @@ function CreateRelease(_ref2) {
         return;
       }
       getRelease();
-      getProject({
-        typeOnly: true
-      });
+      // getProject({ typeOnly: true });
     }
     if (mode === 'create') {
       getProject();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, releaseId]);
-  (0, _react.useEffect)(() => {
-    getData();
-  }, [getData]);
   const onRelease = status => {
+    if (!projectId) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     const errors = validateParams(params, status, t);
     if (errors) {
       _Toast.default.error(errors.map(x => x.message).join('; '));
@@ -266,11 +275,7 @@ function CreateRelease(_ref2) {
     _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 => (0, _pick.default)(x, ['did', 'required'])).map(JSON.stringify);
-    } else {
-      delete _params.blockletComponents;
-    }
+    _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => (0, _pick.default)(x, ['did', 'required'])).map(JSON.stringify);
     setCreateLoading(status);
     setLoading(true);
     api.createRelease({
@@ -309,12 +314,98 @@ function CreateRelease(_ref2) {
       }
     });
   };
+  const handleDidConnectShow = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!params.blockletTitle) {
+      setParamsErrTip({
+        blockletTitle: t('blocklet.publish.errorTip.noTitle')
+      });
+      _Toast.default.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.default.error(err.message);
+    setOpenConnect(false);
+  };
+  const handleCreate = nextProjectDid => {
+    var _params$blockletCompo2;
+    if (!nextProjectDid) {
+      _Toast.default.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$blockletCompo2 = params.blockletComponents) === null || _params$blockletCompo2 === void 0 ? void 0 : _params$blockletCompo2.length) > 0 ? 'pack' : 'resource',
+        componentDid
+      }
+    }).then(() => {
+      setLoading(false);
+      navigate("/.well-known/service/admin/publish/".concat(nextProjectDid, "/create"), {
+        replace: true
+      });
+    }).catch(err => {
+      setLoading(false);
+      _Toast.default.error(err.message);
+    });
+  };
+  const handleCreateBlockletDidSuccess = result => {
+    var _result$blockletWalle;
+    const did = result === null || result === void 0 || (_result$blockletWalle = result.blockletWallet) === null || _result$blockletWalle === void 0 ? void 0 : _result$blockletWalle.address;
+    if (!did) {
+      _Toast.default.error('Empty Blocklet DID');
+    } else {
+      handleCreate(did);
+    }
+    setOpenConnect(false);
+  };
+  (0, _react.useEffect)(() => {
+    getData();
+  }, [getData]);
   if (!params && loading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_emptySpinner.default, {});
   }
   if (!params) {
     return null;
   }
+  const connect = openConnect ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+    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 = "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/logo/upload");
   const uploadScreenshotPrefix = "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/screenshot/upload");
   const logoUrl = params !== null && params !== void 0 && params.blockletLogo ? "".concat(uploadLogoPrefix, "/").concat(params.blockletLogo) : "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/static/images/logo.png");
@@ -374,7 +465,7 @@ function CreateRelease(_ref2) {
             marginRight: 8
           },
           onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('common.install')
+          children: t('blocklet.publish.copyInstallUrl')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
           fullWidth: true,
           maxWidth: "sm",
@@ -414,7 +505,7 @@ function CreateRelease(_ref2) {
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Main, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    children: [connect, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: "sticky-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Breadcrumbs.default, {
         className: "breadcrumbs",
@@ -468,14 +559,8 @@ function CreateRelease(_ref2) {
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      children: [projectType === 'pack' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        type: "info",
-        style: {
-          width: '100%'
-        },
-        children: t('blocklet.publish.packTip')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        pt: 3
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        pt: 5
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         className: "section",
@@ -509,6 +594,30 @@ function CreateRelease(_ref2) {
             },
             error: !!paramsErrTip.blockletTitle,
             helperText: paramsErrTip.blockletTitle || ''
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            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__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+                position: "end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  onClick: handleDidConnectShow,
+                  children: t('common.create')
+                })
+              })
+            },
+            helperText: "",
+            value: projectId === '0' ? '' : projectId,
+            sx: {
+              mt: 3
+            }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
             label: "Blocklet ".concat(t('common.description')),
             placeholder: "Blocklet ".concat(t('common.description')),
@@ -795,7 +904,7 @@ function CreateRelease(_ref2) {
             children: resourceContent
           })]
         })]
-      }), projectType === 'pack' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         mt: 3,
         className: "section full-width",
@@ -812,14 +921,16 @@ function CreateRelease(_ref2) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectComponents.default, {
             disabled: loading || readOnly,
             app: blocklet,
-            value: params.blockletComponents,
-            onChange: data => {
-              setParams({
-                blockletComponents: data
-              });
-            }
+            value: params.blockletComponents || [],
+            onChange: handleChangeSelectedComponents
           })
         })]
+      }), projectType === 'pack' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "info",
+        style: {
+          width: '100%'
+        },
+        children: t('blocklet.publish.packTip')
       })]
     })]
   }));

package/lib/blocklet/publish/index.js

@@ -11,7 +11,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _blocklet = require("../../contexts/blocklet");
 var _projectList = _interopRequireDefault(require("./project-list"));
-var _createProject = _interopRequireDefault(require("./create-project"));
 var _releaseList = _interopRequireDefault(require("./release-list"));
 var _createRelease = _interopRequireDefault(require("./create-release"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -57,9 +56,6 @@ function BlockletPublish(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
         path: "/",
         element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_projectList.default, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-        path: "/create",
-        element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createProject.default, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
         path: "/:projectId",
         element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_releaseList.default, {})

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

@@ -7,15 +7,22 @@ exports.default = ProjectList;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _LibraryAdd = _interopRequireDefault(require("@mui/icons-material/LibraryAdd"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _InstallDesktop = _interopRequireDefault(require("@mui/icons-material/InstallDesktop"));
+var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
+var _constant = require("@abtnode/constant");
 var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
 var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+var _material = require("@mui/material");
 var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
 var _emptySpinner = _interopRequireDefault(require("../../empty-spinner"));
@@ -23,13 +30,15 @@ var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _confirm = _interopRequireDefault(require("../../confirm"));
 var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
+var _window$env, _templateObject;
 /* eslint-disable react/no-unstable-nested-components */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const serverEndpoint = (_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.serverEndpoint;
 function ProjectList() {
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     t,
     locale
@@ -61,6 +70,11 @@ function ProjectList() {
       _Toast.default.error(err.message);
     });
   };
+  const handleNewBlocklet = () => {
+    navigate('/.well-known/service/admin/publish/0/create', {
+      replace: true
+    });
+  };
   const onDeleteProject = project => {
     setDeleteConfirm(project);
   };
@@ -87,7 +101,15 @@ function ProjectList() {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!projects && loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_emptySpinner.default, {});
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '40px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_emptySpinner.default, {})
+    });
   }
   if (!projects) {
     return null;
@@ -112,12 +134,10 @@ function ProjectList() {
           mb: 3
         },
         children: t('blocklet.publish.createBlockletTip')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-        to: "create",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: t('blocklet.publish.createBlocklet')
       })]
     });
   }
@@ -202,34 +222,118 @@ function ProjectList() {
     options: {
       customBodyRenderLite: rawIndex => {
         const project = projects[rawIndex];
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        let installUrl = '';
+        let downloadUrl = '';
+        if (project.lastReleaseId) {
+          const blockletMetaUrl = (0, _urlJoin.default)(serverEndpoint, "/api/project/".concat(blocklet.meta.did, "/").concat(project.id, "/").concat(project.lastReleaseId, "/release/blocklet.json"));
+          const url = new URL(serverEndpoint);
+          url.pathname = (0, _urlJoin.default)(url.pathname, '/launch-blocklet/agreement');
+          url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
+          installUrl = url.href;
+          downloadUrl = (0, _urlJoin.default)("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(project.id, "/").concat(project.lastReleaseId, "/download/").concat((project.lastReleaseFiles || [])[0]));
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-            color: "error",
-            "aria-label": "delete",
-            onClick: () => onDeleteProject(project),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
-              sx: {
-                fontSize: 18
-              }
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+            to: "".concat(project.id, "/create"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t('blocklet.publish.createRelease'),
+              placement: "top",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                color: "primary",
+                "aria-label": "create",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LibraryAdd.default, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && project.type === 'pack' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t('blocklet.publish.install', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              color: "secondary",
+              "aria-label": "create",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: installUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InstallDesktop.default, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t('blocklet.publish.download', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              color: "primary",
+              "aria-label": "create",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: downloadUrl,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Download.default, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t('blocklet.publish.delete', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              color: "primary",
+              "aria-label": "delete",
+              onClick: () => onDeleteProject(project),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+                sx: {
+                  fontSize: 18
+                }
+              })
             })
-          })
+          })]
         });
       }
     }
   }].filter(Boolean);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Main, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      sx: {
-        textAlign: 'right'
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-        to: "create",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          fontSize: '1.2rem',
+          fontWeight: 'bold'
+        },
+        children: t('blocklet.publish.productListTitle')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+          style: {
+            fontSize: '1.3em',
+            marginRight: 4
+          }
+        }), t('blocklet.publish.createBlocklet')]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 3
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
       className: "main-table",
       locale: locale,