@blocklet/launcher-workflow 2.0.5 → 2.0.6

package/lib/assets/images/next.svg

@@ -0,0 +1,8 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 40 40"
+  width="40"
+  height="40"
+  focusable="false">
+  <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
+</svg>

package/lib/assets/images/prev.svg

@@ -0,0 +1,8 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 40 40"
+  width="40"
+  height="40"
+  focusable="false">
+  <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
+</svg>

package/lib/checkout.js

@@ -93,7 +93,8 @@ function CheckoutPage() {
   const query = (0, _query.default)();
   const [searchParams] = (0, _reactRouterDom.useSearchParams)();
   const {
-    mobileSize
+    mobileSize,
+    isMobile
   } = (0, _useMobile.default)();
   const {
     routerPrefix,
@@ -202,12 +203,15 @@ function CheckoutPage() {
           className: "space details",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "basic",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "basic-info",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "title",
                 children: plan.name[locale]
-              })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "sub-title",
+                children: t('common.space')
+              })]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "price",
@@ -275,13 +279,13 @@ function CheckoutPage() {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {
       className: "footer",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "left",
+        className: "agreement",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
           checked: agree,
           onClick: () => toggleAgreement(),
           label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [t('common.agreeTo'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              className: "agreement",
+              className: "agreement-label",
               onClick: e => {
                 e.stopPropagation();
                 setShowAgreement(true);
@@ -290,16 +294,22 @@ function CheckoutPage() {
             })]
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "right",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "actions",
+        children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          loading: paying,
+          className: "button-previous",
+          variant: "outlined",
+          onClick: () => navigate(-1),
+          children: t('common.previous')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
           loading: paying,
           className: "button-pay",
           disabled: paying || showPayment || !planId || !paymentMethod || !agree,
           variant: "contained",
           onClick: handlePay,
           children: t('common.pay')
-        })
+        })]
       })]
     }), showPayment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_payment.default, {
       baseURL: didPayPrefix,
@@ -317,6 +327,6 @@ function CheckoutPage() {
     })]
   });
 }
-const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header {\n    font-weight: bolder;\n    font-size: 1.2em;\n  }\n\n  .divider {\n    margin-top: 20px;\n    border: 1.2px solid #f6f6f6;\n  }\n\n  .skeleton {\n    height: 64px;\n  }\n\n  .space {\n    margin-top: 18px;\n  }\n\n  .total-order {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: bolder;\n  }\n\n  .total-payment {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ", ";\n    font-size: 22px;\n    font-weight: bolder;\n  }\n\n  .details {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    height: 40px;\n\n    .basic {\n      display: flex;\n      height: 40px;\n\n      .basic-info {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        margin-left: 8px;\n\n        .title {\n          font-weight: bolder;\n        }\n\n        .sub-title {\n          color: grey;\n          font-size: 0.8em;\n        }\n      }\n    }\n\n    .period {\n      display: flex;\n      align-items: center;\n\n      .info-icon {\n        color: grey;\n        margin-left: 8px;\n      }\n    }\n  }\n\n  .payment-method {\n    background-color: #fbfbfb;\n    padding: 18px;\n\n    .payment-method__title {\n      color: #9397a1;\n    }\n\n    .payment-method__list {\n      margin-top: 8px;\n    }\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .left {\n      .agreement {\n        margin-left: 5px;\n        color: ", ";\n      }\n    }\n\n    .right {\n      .button-pay {\n        width: 200px;\n      }\n    }\n\n    @media (max-width: ", ") {\n      flex-direction: column;\n      align-items: center;\n\n      .right {\n        width: 100%;\n\n        .button-pay {\n          width: 100%;\n          margin-top: 18px;\n        }\n      }\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.mobileSize);
+const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header {\n    font-weight: bolder;\n    font-size: 1.2em;\n  }\n\n  .divider {\n    margin-top: 20px;\n    border: 1.2px solid #f6f6f6;\n  }\n\n  .skeleton {\n    height: 64px;\n  }\n\n  .space {\n    margin-top: 18px;\n  }\n\n  .total-order {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: bolder;\n  }\n\n  .total-payment {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ", ";\n    font-size: 22px;\n    font-weight: bolder;\n  }\n\n  .details {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    height: 40px;\n\n    .basic {\n      display: flex;\n      height: 40px;\n\n      .basic-info {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        margin-left: 8px;\n\n        .title {\n          font-weight: bolder;\n        }\n\n        .sub-title {\n          color: grey;\n          font-size: 0.8em;\n        }\n      }\n    }\n\n    .period {\n      display: flex;\n      align-items: center;\n\n      .info-icon {\n        color: grey;\n        margin-left: 8px;\n      }\n    }\n  }\n\n  .payment-method {\n    background-color: #fbfbfb;\n    padding: 18px;\n\n    .payment-method__title {\n      color: #9397a1;\n    }\n\n    .payment-method__list {\n      margin-top: 8px;\n    }\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .agreement {\n      .agreement-label {\n        margin-left: 4px;\n        color: ", ";\n      }\n    }\n\n    @media (min-width: ", ") {\n      .actions {\n        .button-pay {\n          width: 200px;\n        }\n      }\n    }\n\n    @media (max-width: ", ") {\n      flex-direction: column;\n      align-items: center;\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        width: 100%;\n        margin-top: 20px;\n\n        & > button {\n          width: 48%;\n        }\n      }\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.mobileSize, props => props.mobileSize);
 var _default = CheckoutPage;
 exports.default = _default;

package/lib/components/launch-dedicated.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.get"));
-var _urlJoin = _interopRequireDefault(require("url-join"));
 var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
 var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -45,8 +44,7 @@ const STATUS = {
 };
 function LaunchDedicated(_ref) {
   let {
-    type,
-    routerPrefix
+    type
   } = _ref;
   const query = (0, _query.default)();
   const blockletMetaUrl = query.get('blocklet_meta_url');
@@ -66,6 +64,7 @@ function LaunchDedicated(_ref) {
   } = (0, _request.default)();
   const [progressStepIndex, setProgressStepIndex] = (0, _react.useState)(0);
   const [isDone, setIsDone] = (0, _react.useState)(false);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   let createServerTime = sessionStorage.getItem("launcher-create-server-".concat(nftId, "-time"));
   if (!createServerTime) {
     createServerTime = Date.now();
@@ -78,7 +77,8 @@ function LaunchDedicated(_ref) {
         serverUrl: instance.serverUrl,
         blockletMetaUrl,
         locale,
-        chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST
+        chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST,
+        from: query.get('from')
       });
       setIsDone(true);
       setTimeout(() => {
@@ -217,8 +217,7 @@ function LaunchDedicated(_ref) {
         color: "primary",
         variant: "contained",
         className: "button",
-        component: _reactRouterDom.Link,
-        to: (0, _urlJoin.default)(routerPrefix, "/prepare/".concat(nftId).concat(window.location.search)),
+        onClick: () => navigate(0),
         children: t('common.retry')
       })
     }), launchState.status === STATUS.notFoundError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
@@ -239,10 +238,8 @@ const LinkEle = _styled.default.a(_templateObject || (_templateObject = _taggedT
 const WaiterContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #1dc1c7;\n"])));
 const Content = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: auto;\n  height: 100%;\n\n  .link {\n    color: ", ";\n  }\n\n  .link:hover {\n    text-decoration: underline !important;\n  }\n\n  .status {\n    color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .status-spinner {\n      color: inherit !important;\n    }\n\n    .status-text {\n      display: inline-block;\n      padding: 0 20px;\n      max-width: 420px;\n      margin-top: 24px;\n      text-align: center;\n    }\n  }\n\n  .button {\n    min-width: 150px;\n    margin-bottom: 100px;\n  }\n  .center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n  .launch-page-header {\n    transition: all ease 0.3s;\n    &.header-hide {\n      opacity: 0;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
 LaunchDedicated.propTypes = {
-  type: _propTypes.default.oneOf(['launch', 'start']),
-  routerPrefix: _propTypes.default.string
+  type: _propTypes.default.oneOf(['launch', 'start'])
 };
 LaunchDedicated.defaultProps = {
-  type: 'launch',
-  routerPrefix: ''
+  type: 'launch'
 };

package/lib/components/launch-serverless.js

@@ -15,6 +15,7 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 var _locale = require("../contexts/locale");
 var _util = require("../util");
 var _request = _interopRequireDefault(require("../contexts/request"));
+var _query = _interopRequireDefault(require("../hooks/query"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,6 +32,7 @@ function LaunchServerless(_ref) {
     api
   } = (0, _request.default)();
   const [searchParams] = (0, _reactRouterDom.useSearchParams)();
+  const query = (0, _query.default)();
   const state = (0, _useAsync.default)(async () => {
     const {
       data: {
@@ -45,7 +47,8 @@ function LaunchServerless(_ref) {
         locale,
         launchType: 'serverless',
         nftId,
-        chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST
+        chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST,
+        from: query.get('from')
       });
     }, 3000);
   });

package/lib/locales/en.js

@@ -21,6 +21,7 @@ module.exports = {
     loadFailed: 'Failed to load the resource, please refresh the page and try again.',
     payFailed: 'Payment failed',
     details: 'Details',
+    previous: 'Previous',
     pay: 'Pay',
     space: 'Space'
   },
@@ -62,24 +63,24 @@ module.exports = {
       success: 'Launching'
     },
     error: {
-      launchFailed: 'Blocklet Server Launch Failed',
+      launchFailed: 'Launch Space Failed',
       launchFailedDescription: 'You can retry by clicking the button below',
       notFound: 'No Blocklet Server being started',
-      notFoundDescription: 'You can launch the Blocklet Server by clicking the button below'
+      notFoundDescription: 'You can launch the Space by clicking the button below'
     }
   },
   start: {
-    title: 'Starting Blocklet Server',
+    title: 'Starting Space',
     error: {
-      launchFailed: 'Blocklet Server Launch Failed',
-      notFound: 'No Blocklet Server being started'
+      launchFailed: 'Start Space Failed',
+      notFound: 'No Spacebeing started'
     }
   },
   redeem: {
-    title: 'Redeem Blocklet Server',
+    title: 'Redeem Space',
     subTitle: 'Name the blocklet server you are going to redeem, the name will exist on server passport',
     dialog: {
-      title: 'Redeem Blocklet Server',
+      title: 'Redeem Space',
       scan: 'Scan the QR code below with your DID wallet to complete redeem',
       confirm: 'Confirm on your DID Wallet',
       success: 'Your redeem request is being processing'
@@ -97,6 +98,7 @@ module.exports = {
   purchase: {
     pageTitle: 'Purchase Space',
     selectSpaceHint: 'Already have dedicated space? Click here to select >',
+    morePlanPrompt: 'Flip the page to see more plans',
     dialog: {
       title: 'Purchase Blocklet Server NFT',
       scan: 'Scan the QR code below with your DID wallet to complete purchase',

package/lib/locales/zh.js

@@ -22,6 +22,7 @@ module.exports = {
     loadFailed: '加载资源失败, 请刷新页面重试。',
     details: '明细',
     pay: '支付',
+    previous: '上一步',
     space: '空间'
   },
   license: {
@@ -62,17 +63,17 @@ module.exports = {
       success: '正在启动'
     },
     error: {
-      launchFailed: '节点启动失败',
+      launchFailed: '节点空间失败',
       launchFailedDescription: '您可以点击下面按钮重试',
-      notFound: '没有正在启动的节点',
+      notFound: '没有正在启动的空间',
       notFoundDescription: '您可以点击下面按钮启动节点'
     }
   },
   start: {
-    title: '启动节点',
+    title: '启动空间',
     error: {
-      launchFailed: '节点启动失败',
-      notFound: '没有正在启动的节点'
+      launchFailed: '启动空间失败',
+      notFound: '没有正在启动的空间'
     }
   },
   redeem: {
@@ -97,6 +98,7 @@ module.exports = {
   purchase: {
     pageTitle: '选购空间',
     selectSpaceHint: '已有专用空间？点击这里选择 >',
+    morePlanPrompt: '翻页看更多方案',
     dialog: {
       title: '购买 Blocklet Server NFT',
       scan: '用您的 DID 钱包扫描下面的二维码完成购买',

package/lib/purchase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
@@ -17,6 +17,7 @@ var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 require("@splidejs/splide/dist/css/splide.min.css");
 var _body = _interopRequireDefault(require("./components/layout/body"));
 var _plan = _interopRequireDefault(require("./components/plan"));
@@ -29,9 +30,40 @@ var _workflow = require("./contexts/workflow");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var PrevIcon = function PrevIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "m15.5.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4L15.5.912z"
+    })
+  }));
+};
+PrevIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "40",
+  height: "40"
+};
+var NextIcon = function NextIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "m15.5.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4L15.5.912z"
+    })
+  }));
+};
+NextIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "40",
+  height: "40"
+};
 function PurchasePage(_ref) {
-  var _planState$value;
+  var _planState$value, _planState$value2;
   let {
     disableBack
   } = _ref;
@@ -48,6 +80,7 @@ function PurchasePage(_ref) {
     search
   } = (0, _reactRouterDom.useLocation)();
   const [selectedPlanId, setSelectedPlanId] = (0, _react.useState)();
+  const [openMorePlanPrompt, setOpenMorePlanPrompt] = (0, _react.useState)(true);
   const [splideConfig, setSplideConfig] = (0, _useSetState.default)({
     arrows: false
   });
@@ -59,13 +92,18 @@ function PurchasePage(_ref) {
   const api = create({
     baseURL: didPayPrefix
   });
+  (0, _react.useEffect)(() => {
+    // 3s 后隐藏
+    setTimeout(() => setOpenMorePlanPrompt(false), 3000);
+  }, []);
   const planState = (0, _useAsync.default)(async () => {
     const {
       data
     } = await api.get('/plans');
-    const plans = (data || []).sort((itemX, itemY) => itemX.weight - itemY.weight);
+    const plans = (data || []).sort((itemX, itemY) => itemY.weight - itemX.weight);
     if (plans.length > 0) {
-      setSelectedPlanId(plans[0]._id);
+      const recommendPlan = plans.find(x => !!x.isRecommended) || plans[0];
+      setSelectedPlanId(recommendPlan._id);
     }
     return plans;
   });
@@ -111,7 +149,7 @@ function PurchasePage(_ref) {
             toc: true,
             productFeatures: productFeatures,
             className: "toc"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.Splide, {
+          }), ((_planState$value2 = planState.value) === null || _planState$value2 === void 0 ? void 0 : _planState$value2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
             className: "plan-splide",
             extensions: {
               Grid: _splideExtensionGrid.Grid
@@ -124,12 +162,7 @@ function PurchasePage(_ref) {
                 arrows: items.length > 1
               });
             },
-            onActive: (_, _ref3) => {
-              let {
-                index
-              } = _ref3;
-              handleSelect(planState.value[index]._id);
-            },
+            hasTrack: false,
             options: {
               pagination: true,
               arrows: splideConfig.arrows,
@@ -155,14 +188,39 @@ function PurchasePage(_ref) {
                 }
               }
             },
-            children: (planState.value || []).map((plan, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
-                recommend: index === 0,
-                checked: plan._id === selectedPlanId,
-                plan: plan,
-                onClick: () => handleSelect(plan._id)
-              })
-            }, plan._id))
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "splide__arrows",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                className: "splide__arrow splide__arrow--prev",
+                type: "button",
+                disabled: "",
+                "aria-label": "Previous slide",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PrevIcon, {
+                  viewBox: "0 0 40 40"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                open: openMorePlanPrompt,
+                title: t('purchase.morePlanPrompt'),
+                placement: "top",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                  className: "splide__arrow splide__arrow--next",
+                  type: "button",
+                  "aria-label": "Next slide",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NextIcon, {
+                    viewBox: "0 0 40 40"
+                  })
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideTrack, {
+              children: planState.value.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
+                  recommend: !!plan.isRecommended,
+                  checked: plan._id === selectedPlanId,
+                  plan: plan,
+                  onClick: () => handleSelect(plan._id)
+                })
+              }, plan._id))
+            })]
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {

package/lib/util.js

@@ -22,12 +22,16 @@ const getLaunchBlockletUrl = _ref => {
     locale,
     launchType,
     nftId,
-    chainHost
+    chainHost,
+    from
   } = _ref;
   if (!blockletMetaUrl) {
     return serverUrl;
   }
-  let result = (0, _urlJoin.default)(serverUrl, "/launch-blocklet/install?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl), "&fromLauncher=true&from=").concat(encodeURIComponent(window.location.href)));
+  const serverPath = from === 'did-spaces' ? '/blocklets/restore/verify-ownership' : '/launch-blocklet/install';
+
+  // TODO: 废除 fromLauncher
+  let result = (0, _urlJoin.default)(serverUrl, serverPath, "?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl), "&fromLauncher=true&from=launcher"));
   if (launchType) {
     result += "&launchType=".concat(launchType);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -36,24 +36,24 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.5.10",
-    "@arcblock/icons": "^2.5.10",
-    "@arcblock/license": "^2.5.10",
-    "@arcblock/ux": "^2.5.10",
-    "@blocklet/launcher-layout": "2.0.5",
-    "@blocklet/launcher-util": "2.0.5",
-    "@blocklet/launcher-ux": "2.0.5",
-    "@did-pay/react": "^1.9.41",
+    "@arcblock/did-connect": "^2.5.14",
+    "@arcblock/icons": "^2.5.14",
+    "@arcblock/license": "^2.5.14",
+    "@arcblock/ux": "^2.5.14",
+    "@blocklet/launcher-layout": "2.0.6",
+    "@blocklet/launcher-util": "2.0.6",
+    "@blocklet/launcher-ux": "2.0.6",
+    "@did-pay/react": "^1.9.44",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.13",
-    "@ocap/util": "^1.18.58",
+    "@ocap/util": "^1.18.62",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-grid": "^0.4.1",
     "@stripe/react-stripe-js": "^1.16.5",
-    "@stripe/stripe-js": "^1.49.0",
+    "@stripe/stripe-js": "^1.50.0",
     "axios": "^0.26.1",
     "flat": "^5.0.2",
     "js-cookie": "^3.0.1",
@@ -72,5 +72,5 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^2.0.2"
   },
-  "gitHead": "e8dfa1e5aa7384efbd60c38a73fdec4e5bdbdc25"
+  "gitHead": "f79a79117418142d7a4805950de4e62e80d2d032"
 }