@abtnode/ux 1.16.25-next-bc2f4c63 → 1.16.26-beta-e0056285

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

@@ -21,15 +21,18 @@ 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"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _Dialog2 = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 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"));
@@ -37,6 +40,7 @@ var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
 var _util = require("../../util");
 var _resource = _interopRequireDefault(require("./resource"));
 var _selectComponents = _interopRequireDefault(require("./select-components"));
+var _connectStoreList = _interopRequireDefault(require("./connect-store-list"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _window$env, _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -121,13 +125,14 @@ const addComponentTabs = _ref => {
   });
 };
 const pickParams = (release, app) => {
-  const params = (0, _pick.default)(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'note']);
+  const params = (0, _pick.default)(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'publishedStoreIds', 'note']);
   params.blockletScreenshots || (params.blockletScreenshots = []);
+  params.publishedStoreIds || (params.publishedStoreIds = []);
   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), {}, {
@@ -137,17 +142,21 @@ const pickParams = (release, app) => {
   return params;
 };
 function CreateRelease(_ref2) {
-  var _tabs$, _params$blockletIntro, _params$note;
+  var _tabs$, _params$blockletIntro, _params$note, _params$blockletCompo3;
   let rest = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
   const navigate = (0, _reactRouterDom.useNavigate)();
   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 +170,15 @@ 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 [showStoreDialog, setShowStoreDialog] = (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 +195,18 @@ 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 === _constant2.UNOWNED_DID) {
+      setParams({
+        blockletVersion: '1.0.0',
+        blockletTitle: ''
+      });
+      return;
+    }
+    if (!projectId) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     api.getProject({
       input: {
         did: blocklet.meta.did,
@@ -193,17 +215,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 +253,17 @@ function CreateRelease(_ref2) {
         return;
       }
       getRelease();
-      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 || projectId === _constant2.UNOWNED_DID) {
+      _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 +285,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 +324,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 || projectId === _constant2.UNOWNED_DID) {
+      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(window.location.pathname.replace("".concat(_constant2.UNOWNED_DID, "/create"), "".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");
@@ -325,7 +426,7 @@ function CreateRelease(_ref2) {
       error: paramsErrTip.blockletResource,
       app: blocklet,
       component: item,
-      projectId: projectId,
+      projectId: projectId === _constant2.UNOWNED_DID ? '' : projectId,
       release: _objectSpread(_objectSpread({}, release), {}, {
         id: releaseId
       }),
@@ -374,7 +475,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 +515,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",
@@ -448,6 +549,9 @@ function CreateRelease(_ref2) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
             variant: "contained",
             disabled: loading || createLoading,
+            style: {
+              marginRight: 12
+            },
             onClick: () => onRelease(_constant.PROJECT.RELEASE_STATUS.published),
             children: [createLoading === _constant.PROJECT.RELEASE_STATUS.published && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
               size: 14,
@@ -459,23 +563,24 @@ function CreateRelease(_ref2) {
           })]
         }), isPublished && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [installButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-            variant: "contained",
+            variant: "outlined",
+            style: {
+              marginRight: 12
+            },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
               href: (0, _urlJoin.default)("".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/").concat(releaseId, "/download/").concat((release.files || [])[0])),
               children: t('common.download')
             })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            onClick: () => setShowStoreDialog(true),
+            children: t('common.uploadToStore')
           })]
         })]
       })]
     }), /*#__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 +614,31 @@ 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 !== _constant2.UNOWNED_DID,
+            autoComplete: "off",
+            variant: "outlined",
+            onClick: handleDidConnectShow,
+            onInput: handleDidConnectShow,
+            InputProps: {
+              'data-cy': 'export-blocklet-did',
+              endAdornment: projectId === _constant2.UNOWNED_DID && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+                position: "end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  onClick: handleDidConnectShow,
+                  children: t('common.create')
+                })
+              })
+            },
+            helperText: "",
+            value: projectId === _constant2.UNOWNED_DID ? '' : projectId,
+            sx: {
+              mt: 3
+            }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
             label: "Blocklet ".concat(t('common.description')),
             placeholder: "Blocklet ".concat(t('common.description')),
@@ -795,7 +925,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,15 +942,32 @@ 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')
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog2.default, {
+      title: t('common.connectToStore'),
+      disableEscapeKeyDown: true,
+      disablePortal: false,
+      fullWidth: true,
+      open: showStoreDialog,
+      onClose: () => setShowStoreDialog(false),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectStoreList.default, {
+        blocklet: blocklet,
+        releaseType: ((_params$blockletCompo3 = params.blockletComponents) === null || _params$blockletCompo3 === void 0 ? void 0 : _params$blockletCompo3.length) > 0 ? 'pack' : 'resource',
+        projectId: projectId,
+        releaseId: releaseId,
+        onPublish: getRelease,
+        publishedStoreIds: release === null || release === void 0 ? void 0 : release.publishedStoreIds
+      })
     })]
   }));
 }

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("".concat(_constant.UNOWNED_DID, "/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,