@blocklet/launcher-workflow 2.0.47 → 2.1.0

package/lib/checkout.js

@@ -4,20 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _util = require("@blocklet/launcher-util/lib/util");
 var _constant = require("@blocklet/launcher-util/lib/constant");
 var _button = _interopRequireDefault(require("@blocklet/launcher-ux/lib/button"));
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
-var _payment = _interopRequireDefault(require("@did-pay/react/lib/payment"));
+var _payment = _interopRequireDefault(require("@blocklet/payment/lib/payment"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _dsbridge = _interopRequireDefault(require("dsbridge"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _confirm = _interopRequireDefault(require("@arcblock/ux/lib/Dialog/confirm"));
 var _agreement = _interopRequireDefault(require("./components/agreement"));
@@ -30,13 +32,13 @@ var _locale = require("./contexts/locale");
 var _request = _interopRequireDefault(require("./contexts/request"));
 var _session = require("./contexts/session");
 var _workflow = require("./contexts/workflow");
-var _query = _interopRequireDefault(require("./hooks/query"));
 var _util2 = require("./util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react-hooks/exhaustive-deps */
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -88,22 +90,23 @@ function CheckoutPage(_ref) {
   const {
     session
   } = (0, _session.useSessionContext)();
-  const [showAgreement, setShowAgreement] = (0, _react.useState)(false);
-  const [showPayment, setShowPayment] = (0, _react.useState)(false);
-  const [paying, setPaying] = (0, _react.useState)(false);
-  const [agree, setAgree] = (0, _react.useState)(false);
-  const [showAgreeHint, setShowAgreeHint] = (0, _react.useState)(false);
-  const [showPaidDialog, setShowPaidDialog] = (0, _useSetState.default)({
-    open: false,
-    nftId: ''
+  const [state, setState] = (0, _useSetState.default)({
+    showAgreement: false,
+    showPayment: false,
+    showAgreeHint: false,
+    showPaidDialog: {
+      open: false,
+      nftId: ''
+    },
+    agreed: false,
+    paying: false,
+    paymentMethod: null
   });
   const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     create
   } = (0, _request.default)();
-  const [paymentMethod, setPaymentMethod] = (0, _react.useState)(null);
-  const query = (0, _query.default)();
-  const [searchParams] = (0, _reactRouterDom.useSearchParams)();
+  const [params] = (0, _reactRouterDom.useSearchParams)();
   const {
     mobileSize,
     isMobile
@@ -111,14 +114,21 @@ function CheckoutPage(_ref) {
   const {
     routerPrefix,
     didPayPrefix,
-    embed
+    embed,
+    isPurchaseOnly
   } = (0, _workflow.useWorkflowContext)();
+  (0, _react.useEffect)(() => {
+    if (session.user && !isPurchaseOnly) {
+      _util2.launchSession.connect(api, routerPrefix, sessionId, session.user.did);
+    }
+  }, [session.user]);
   const api = create({
     baseURL: didPayPrefix
   });
   const enableBlockletAgreement = !!blocklet;
-  const planId = query.get('planId');
-  const state = (0, _useAsync.default)(async () => {
+  const planId = params.get('planId');
+  const sessionId = params.get('sessionId');
+  const context = (0, _useAsync.default)(async () => {
     try {
       const [{
         data: {
@@ -130,7 +140,9 @@ function CheckoutPage(_ref) {
         }
       }] = await Promise.all([api.get('/payment-methods'), api.get("/plans/".concat(planId))]);
       if (methods.length > 0) {
-        setPaymentMethod(methods[0]);
+        setState({
+          paymentMethod: methods[0]
+        });
       }
       return {
         methods,
@@ -145,93 +157,95 @@ function CheckoutPage(_ref) {
     }
   });
   const switchPayment = method => {
-    setPaymentMethod(method);
+    setState({
+      paymentMethod: method
+    });
   };
   const handleCancelPay = () => {
-    setShowPayment(false);
-    setPaying(false);
+    setState({
+      showPayment: false,
+      paying: false
+    });
   };
   const handlePay = async () => {
-    if (enableBlockletAgreement && !agree) {
-      setShowAgreeHint(true);
+    if (enableBlockletAgreement && !state.agreed) {
+      setState({
+        showAgreeHint: true
+      });
       setTimeout(() => {
-        setShowAgreeHint(false);
+        setState({
+          showAgreeHint: false
+        });
       }, 2000);
       return;
     }
-    if (session.user) {
-      setShowPayment(true);
-      setPaying(true);
-      return;
-    }
-    setPaying(true);
-    if ((paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.provider.name) === 'ocap') {
-      const paymentTokenURL = "/did/purchase/token?productId=".concat(planId, "&paymentMethodId=").concat(paymentMethod._id);
-      const {
-        data
-      } = await api.get(paymentTokenURL);
-      session.login({
-        onSuccess: (results, decrypt) => {
-          const [, purchaseResult] = results;
-          return handlePaid(purchaseResult, decrypt);
-        },
-        onCancel: () => handleCancelPay(),
-        extraParams: {
-          nw: data.url,
-          forceConnected: false,
-          saveConnect: false
-        }
-      });
+    setState({
+      showPayment: true,
+      paying: true
+    });
+  };
+  const handleConnected = result => {
+    if (isPurchaseOnly) {
+      session.refresh();
       return;
     }
-    session.login({
-      onSuccess: () => {
-        setShowPayment(true);
-      },
-      onCancel: () => handleCancelPay(),
-      extraParams: {
-        forceConnected: false,
-        saveConnect: false
-      }
+    _util2.launchSession.connect(api, routerPrefix, sessionId, result.did, () => {
+      session.refresh();
     });
   };
   const handlePaid = async _ref2 => {
     let {
       nftId,
-      nftState
+      nftState,
+      paymentId
     } = _ref2;
     if ((nftState.tags || []).includes(_constant.NFT_TYPE_SERVERLESS)) {
       if (!embed) {
-        setShowPaidDialog({
-          open: true,
-          nftId
+        setState({
+          showPaidDialog: {
+            open: true,
+            nftId
+          }
         });
         handleCancelPay();
         return;
       }
-      searchParams.set('launchType', 'serverless');
+      params.set('launchType', 'serverless');
+    }
+    if (isPurchaseOnly) {
+      handleCancelPay();
+      _dsbridge.default.call('arcClosePage');
+      return;
     }
-    navigate({
-      pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
-      search: searchParams.toString()
+    _util2.launchSession.pay(api, routerPrefix, sessionId, nftId, 'purchase', paymentId, err => {
+      handleCancelPay();
+      if (err) {
+        _Toast.default.error(err.message);
+      } else {
+        navigate({
+          pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
+          search: params.toString()
+        });
+      }
     });
-    handleCancelPay();
   };
   const handlePayFailed = () => {
     // TODO: Toast 错误
-    handleCancelPay(false);
+    handleCancelPay();
   };
   const calculateTotalPayment = prices => {
-    if (!paymentMethod) {
+    if (!state.paymentMethod) {
       return '';
     }
-    return (0, _util2.getPrice)(prices, paymentMethod.provider.name);
+    return (0, _util2.getPrice)(prices, state.paymentMethod.provider.name);
   };
-  const toggleAgreement = () => setAgree(!agree);
+  const toggleAgreement = () => setState({
+    agreed: !state.agreed
+  });
   const {
     methods,
     plan
-  } = state.loading ? {} : state.value;
+  } = context.loading ? {} : context.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     mobileSize: mobileSize,
     enableBlockletAgreement: enableBlockletAgreement,
@@ -242,7 +256,7 @@ function CheckoutPage(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "header",
           children: t('common.details')
-        }), state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        }), context.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
           className: "skeleton",
           sx: {
             width: '100%',
@@ -269,7 +283,7 @@ function CheckoutPage(_ref) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "divider"
-      }), state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      }), context.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
         className: "skeleton",
         sx: {
           width: '100%',
@@ -291,7 +305,7 @@ function CheckoutPage(_ref) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "payment-method space",
-        children: state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        children: context.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
           className: "skeleton",
           sx: {
             width: '100%',
@@ -317,7 +331,7 @@ function CheckoutPage(_ref) {
                 xl: 2,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
                   label: method.name[locale],
-                  checked: paymentMethod._id === method._id,
+                  checked: state.paymentMethod._id === method._id,
                   onClick: () => switchPayment(method)
                 })
               }, method._id))
@@ -330,8 +344,8 @@ function CheckoutPage(_ref) {
       children: [enableBlockletAgreement && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "agreement",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
-          checked: agree,
-          showHint: showAgreeHint,
+          checked: state.agreed,
+          showHint: state.showAgreeHint,
           onClick: () => toggleAgreement(),
           label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             style: {
@@ -342,7 +356,9 @@ function CheckoutPage(_ref) {
               className: "agreement-label",
               onClick: e => {
                 e.stopPropagation();
-                setShowAgreement(true);
+                setState({
+                  showAgreement: true
+                });
               },
               children: t('checkout.agreement', {
                 name: (0, _util.getBlockletDisplayName)(blocklet)
@@ -358,25 +374,26 @@ function CheckoutPage(_ref) {
           onClick: () => navigate(-1),
           children: t('common.previous')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-          loading: paying,
+          loading: state.paying,
           className: "button-pay",
-          disabled: paying || showPayment || !planId || !paymentMethod,
+          disabled: state.paying || state.showPayment || !planId || !state.paymentMethod,
           variant: "contained",
           onClick: handlePay,
           children: t('common.pay')
         })]
       })]
-    }), showPayment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_payment.default, {
+    }), state.showPayment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_payment.default, {
       baseURL: didPayPrefix,
-      method: paymentMethod,
+      method: state.paymentMethod,
       userDid: session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.did,
       productId: planId,
       useSocket: false,
+      onConnect: handleConnected,
       onComplete: handlePaid,
       onFailed: handlePayFailed,
       onCancel: handleCancelPay
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
-      open: showPaidDialog.open,
+      open: state.showPaidDialog.open,
       disableEscapeKeyDown: true,
       title: t('purchase.serverlessDialog.title'),
       confirmButton: {
@@ -388,20 +405,27 @@ function CheckoutPage(_ref) {
           minWidth: isMobile ? undefined : 600
         }
       },
-      onCancel: () => setShowPaidDialog(false),
+      onCancel: () => setState({
+        showPaidDialog: {
+          open: false,
+          nftId: ''
+        }
+      }),
       showCancelButton: false,
       onConfirm: () => {
         const url = new URL(_util2.BLOCKLET_STORE_URL);
-        url.searchParams.set('launcher_nft_id', showPaidDialog.nftId);
+        url.searchParams.set('launcher_nft_id', state.showPaidDialog.nftId);
         window.location = url.href;
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: t('purchase.serverlessDialog.purchaseServerlessSuccess')
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
-      open: showAgreement,
+      open: state.showAgreement,
       title: t('common.agreement'),
-      onClose: () => setShowAgreement(false),
+      onClose: () => setState({
+        showAgreement: false
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_agreement.default, {})
     })]
   });

package/lib/components/launch-dedicated.js

@@ -12,7 +12,7 @@ var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
 var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _AnimationWaiter = _interopRequireDefault(require("@arcblock/ux/lib/AnimationWaiter"));
 var _constant = require("@blocklet/launcher-util/lib/constant");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
@@ -177,7 +177,7 @@ function LaunchDedicated(_ref) {
       disableBack: true
     }), launchState.status === STATUS.waiting && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "center",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
     }), launchState.status === STATUS.launching && /*#__PURE__*/(0, _jsxRuntime.jsx)(WaiterContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationWaiter.default, {
         message: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -202,8 +202,8 @@ function LaunchDedicated(_ref) {
       footer: successful ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkEle, {
         href: launchState.appUrl,
         rel: "noreferrer",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-          size: [16, 10],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16,
           style: {
             marginRight: 14
           }

package/lib/components/launch-serverless.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = LaunchServerless;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
+var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
-var _ServerLogoNotext = _interopRequireDefault(require("@arcblock/icons/lib/ServerLogoNotext"));
 var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
+var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/lib/format-error"));
+var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 var _button = _interopRequireDefault(require("@blocklet/launcher-ux/lib/button"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _locale = require("../contexts/locale");
 var _request = _interopRequireDefault(require("../contexts/request"));
-var _query = _interopRequireDefault(require("../hooks/query"));
 var _util = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
@@ -28,18 +27,18 @@ function LaunchServerless(_ref) {
   const {
     t,
     locale
-  } = (0, _react.useContext)(_locale.LocaleContext);
+  } = (0, _locale.useLocaleContext)();
   const {
     api
   } = (0, _request.default)();
   const [searchParams] = (0, _reactRouterDom.useSearchParams)();
-  const query = (0, _query.default)();
+  const sessionId = searchParams.get('sessionId');
   const state = (0, _useAsync.default)(async () => {
     const {
       data: {
         instance
       }
-    } = await api.post("/serverless/".concat(nftId, "/allocate"));
+    } = await api.post("/serverless/".concat(nftId, "/allocate?sessionId=").concat(sessionId));
     setTimeout(() => {
       var _window$blocklet;
       window.location = (0, _util.getLaunchBlockletUrl)({
@@ -48,55 +47,48 @@ function LaunchServerless(_ref) {
         locale,
         launchType: 'serverless',
         nftId,
+        sessionId,
         chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST,
-        from: query.get('from')
+        from: searchParams.get('from')
       });
-    }, 3000);
+    }, 1000);
+    return instance;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
       title: t('launch.pageTitle')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "page-body",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "page-logo",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServerLogoNotext.default, {
-          style: {
-            width: 48,
-            height: 48
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "content",
-        children: [state.loading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-            size: "3.5rem"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "description",
-            children: t('prepare.serverless.preparing')
-          })]
-        }), !state.loading && !state.error && t('prepare.serverless.prepared'), state.error && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center'
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: t('prepare.serverless.prepareFailed')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        children: [state.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
+          variant: "loading",
+          title: t('prepare.serverless.allocate'),
+          subTitle: t('prepare.serverless.preparing')
+        }), state.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
+          variant: "error",
+          title: t('prepare.serverless.allocate'),
+          subTitle: t('prepare.serverless.prepareFailed', {
+            error: (0, _formatError.default)(state.error)
+          }),
+          footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
             size: "small",
             style: {
               marginTop: '8px'
             },
             onClick: () => window.location.reload(),
             children: t('common.retry')
-          })]
+          })
+        }), state.value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
+          variant: "success",
+          title: t('prepare.serverless.allocate'),
+          subTitle: t('prepare.serverless.prepared')
         })]
-      })]
+      })
     })]
   });
 }
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .page-logo {\n    display: flex;\n    justify-content: center;\n    margin-top: 62px;\n    ", " {\n      margin-top: 48px;\n    }\n  }\n\n  .page-body {\n    .content {\n      display: flex;\n      align-items: center;\n      flex-direction: column;\n      text-align: center;\n      margin-top: 64px;\n\n      .loading-description {\n        margin-top: 8px;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .page-logo {\n    display: flex;\n    justify-content: center;\n    margin-top: 62px;\n    ", " {\n      margin-top: 48px;\n    }\n  }\n\n  .page-body {\n    margin-top: 128px;\n\n    .content {\n      display: flex;\n      align-items: center;\n      flex-direction: column;\n      text-align: center;\n\n      .loading-description {\n        margin-top: 8px;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
 LaunchServerless.propTypes = {
   nftId: _propTypes.default.string.isRequired
 };

package/lib/contexts/workflow.js

@@ -7,6 +7,8 @@ exports.WorkflowProvider = WorkflowProvider;
 exports.useWorkflowContext = useWorkflowContext;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _locale = require("./locale");
 var _request = require("./request");
 var _locales = require("../locales");
@@ -25,11 +27,16 @@ function WorkflowProvider(_ref) {
     locale,
     children
   } = _ref;
+  const [params] = (0, _reactRouterDom.useSearchParams)();
+  const browser = (0, _useBrowser.default)();
+  // FIXME: @wangshijun this is not working in android wallet
+  const isPurchaseOnly = browser.wallet && params.get('source') === 'acquireUrl' || !params.get('blocklet_meta_url');
   const value = {
     embed,
     baseURL,
     didPayPrefix,
-    routerPrefix
+    routerPrefix,
+    isPurchaseOnly
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: value,

package/lib/locales/en.js

@@ -33,9 +33,10 @@ module.exports = {
   },
   prepare: {
     serverless: {
-      preparing: 'Preparing...',
-      prepared: 'The Blocklet Space is ready, redirecting...',
-      prepareFailed: 'Prepare for instance failure!'
+      allocate: 'Waiting for space',
+      preparing: 'Preparing blocklet space for you launch request...',
+      prepared: 'The blocklet space is ready, redirecting...',
+      prepareFailed: 'Failed to prepare space! {error}'
     }
   },
   launch: {

package/lib/locales/zh.js

@@ -33,9 +33,10 @@ module.exports = {
   },
   prepare: {
     serverless: {
-      preparing: '准备中...',
+      allocate: '等待空间就绪',
+      preparing: '正在为应用启动准备空间...',
       prepared: '已准备好应用空间，跳转中...',
-      prepareFailed: '准备空间失败!'
+      prepareFailed: '准备空间失败! {error}'
     }
   },
   launch: {

package/lib/purchase.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _Connect = _interopRequireWildcard(require("@arcblock/did-connect/lib/Connect"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
 var _constant = require("@blocklet/launcher-util/lib/constant");
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
@@ -17,12 +17,13 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _reactSplide = require("@splidejs/react-splide");
 var _splideExtensionGrid = require("@splidejs/splide-extension-grid");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
-var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
 var _useMeasure = _interopRequireDefault(require("react-use/lib/useMeasure"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
 require("@splidejs/splide/dist/css/splide.min.css");
+var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/lib/format-error"));
 var _layout = _interopRequireDefault(require("./components/layout"));
 var _body = _interopRequireDefault(require("./components/layout/body"));
 var _footer = _interopRequireDefault(require("./components/layout/footer"));
@@ -32,8 +33,10 @@ var _locale = require("./contexts/locale");
 var _request = _interopRequireDefault(require("./contexts/request"));
 var _session = require("./contexts/session");
 var _workflow = require("./contexts/workflow");
+var _util = require("./util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+/* eslint-disable react-hooks/exhaustive-deps */
 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; }
@@ -69,8 +72,17 @@ PrevIcon.defaultProps = {
 };
 const SLIDE_WIDTH = 300;
 const SLIDE_MIN_WIDTH = 280;
+const getSlideConfig = (maxLength, planLength) => {
+  const factor = Math.min(maxLength, planLength);
+  const width = factor < 3 ? SLIDE_MIN_WIDTH : SLIDE_WIDTH;
+  return {
+    perPage: factor,
+    width: "".concat(factor * width, "px"),
+    gap: '24px'
+  };
+};
 function PurchasePage(_ref) {
-  var _planState$value4, _planState$value5;
+  var _state$plans3, _session$user;
   let {
     disableBack
   } = _ref;
@@ -84,112 +96,193 @@ function PurchasePage(_ref) {
   const {
     isMobile
   } = (0, _useMobile.default)();
+  const {
+    decrypt
+  } = (0, _Connect.useSecurity)();
   const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     session
   } = (0, _session.useSessionContext)();
-  const [searchParams] = (0, _reactRouterDom.useSearchParams)();
-  const [selectedPlanId, setSelectedPlanId] = (0, _react.useState)();
-  const [openMorePlanPrompt, setOpenMorePlanPrompt] = (0, _react.useState)(false);
-  const [splideConfig, setSplideConfig] = (0, _useSetState.default)({
-    arrows: false,
-    perPage: 100,
-    width: "".concat(SLIDE_WIDTH, "px"),
-    gap: '16px'
-  });
+  const [params, setParams] = (0, _reactRouterDom.useSearchParams)();
   const {
     routerPrefix,
     embed,
-    didPayPrefix
+    didPayPrefix,
+    isPurchaseOnly
   } = (0, _workflow.useWorkflowContext)();
   const [planListRef, {
-    width: planListWidth
+    width
   }] = (0, _useMeasure.default)();
   const [showRedeem, setShowRedeem] = (0, _react.useState)(false);
+  const [state, setState] = (0, _useSetState.default)({
+    launch: null,
+    loading: true,
+    error: '',
+    plans: [],
+    sessionId: params.get('sessionId'),
+    planId: params.get('planId'),
+    showMorePrompt: false,
+    arrows: false,
+    perPage: 100,
+    width: "".concat(SLIDE_WIDTH, "px"),
+    gap: '16px'
+  });
   const api = create({
     baseURL: didPayPrefix
   });
-  const planState = (0, _useAsync.default)(async () => {
-    const {
-      data
-    } = await api.get('/plans');
-    const plans = (data || []).sort((itemX, itemY) => itemY.weight - itemX.weight);
-    if (plans.length > 0) {
-      const recommendPlan = plans.find(x => !!x.isRecommended) || plans[0];
-      setSelectedPlanId(recommendPlan._id);
-    }
-    return plans;
-  });
-  const calculateConfig = (maxLength, tmpPlanLength) => {
-    const factor = Math.min(maxLength, tmpPlanLength);
-    const width = factor < 3 ? SLIDE_MIN_WIDTH : SLIDE_WIDTH;
-    return {
-      perPage: factor,
-      width: "".concat(factor * width, "px"),
-      gap: '24px'
-    };
-  };
   const selectCurrent = (perPage, curIndex) => {
-    var _planState$value;
-    if (!((_planState$value = planState.value) !== null && _planState$value !== void 0 && _planState$value.length)) {
+    if (!state.plans.length) {
       return;
     }
 
     // 如果每页只有一个，则在翻页的时候默认选中当前项
     if (perPage === 1) {
-      var _planState$value$curI;
-      setSelectedPlanId((_planState$value$curI = planState.value[curIndex]) === null || _planState$value$curI === void 0 ? void 0 : _planState$value$curI._id);
+      var _state$plans$curIndex;
+      setState({
+        planId: (_state$plans$curIndex = state.plans[curIndex]) === null || _state$plans$curIndex === void 0 ? void 0 : _state$plans$curIndex._id
+      });
     }
   };
   (0, _react.useEffect)(() => {
-    selectCurrent(splideConfig.perPage, 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [splideConfig]);
+    selectCurrent(state.perPage, 0);
+  }, [state.perPage]);
+  const selectPlan = launch => {
+    if (!state.plans.length) {
+      return;
+    }
+    if (launch && launch.planId && state.plans.find(x => x._id === launch.planId)) {
+      setState({
+        planId: launch.planId
+      });
+    }
+    const recommended = state.plans.find(x => !!x.isRecommended);
+    if (recommended) {
+      setState({
+        planId: recommended._id
+      });
+    } else {
+      setState({
+        planId: state.plans[0]._id
+      });
+    }
+  };
+
+  // 创建启动会话或者加载现有的会话
   (0, _react.useEffect)(() => {
-    var _planState$value2;
-    if (!((_planState$value2 = planState.value) !== null && _planState$value2 !== void 0 && _planState$value2.length) || typeof splideConfig.perPage === 'undefined') {
+    api.get('/plans').then(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      const plans = (data || []).sort((a, b) => b.weight - a.weight);
+      setState({
+        plans,
+        loading: false
+      });
+      if (isPurchaseOnly) {
+        selectPlan();
+        return;
+      }
+      const metaUrl = params.get('blocklet_meta_url');
+      if (params.get('sessionId')) {
+        _util.launchSession.load(api, routerPrefix, params.get('sessionId'), metaUrl, (err, launch) => {
+          setState({
+            launch
+          });
+          selectPlan(launch);
+        });
+      } else if (metaUrl) {
+        _util.launchSession.create(api, routerPrefix, metaUrl, (err, launch) => {
+          setState({
+            launch,
+            sessionId: launch._id
+          });
+          selectPlan(launch);
+        });
+      }
+    }).catch(err => {
+      setState({
+        error: (0, _formatError.default)(err)
+      });
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!state.sessionId) {
+      return;
+    }
+    if (state.sessionId !== params.get('sessionId')) {
+      params.set('sessionId', state.sessionId);
+      setParams(params);
+    }
+  }, [state.sessionId]);
+  (0, _react.useEffect)(() => {
+    var _state$plans;
+    if (!((_state$plans = state.plans) !== null && _state$plans !== void 0 && _state$plans.length) || typeof state.perPage === 'undefined') {
       return;
     }
-    const index = planState.value.findIndex(x => !!x.isRecommended);
-    const pageIndex = Math.floor(index / splideConfig.perPage);
+    const index = state.plans.findIndex(x => !!x.isRecommended);
+    const pageIndex = Math.floor(index / state.perPage);
 
     // 如果推荐 Plan 不在第一页，则将推荐 Plan 放在第一个
     if (pageIndex >= 1) {
-      const recommend = planState.value[index];
-      const copy = [...planState.value];
+      const recommend = state.plans[index];
+      const copy = [...state.plans];
       copy.splice(index, 1);
       copy.unshift(recommend);
-      planState.value = copy;
+      setState({
+        plans: copy
+      });
     }
-  }, [splideConfig.perPage, planState]);
+  }, [state.perPage, state.plans]);
   (0, _react.useEffect)(() => {
-    var _planState$value3;
-    if (!((_planState$value3 = planState.value) !== null && _planState$value3 !== void 0 && _planState$value3.length)) {
+    var _state$plans2;
+    if (!((_state$plans2 = state.plans) !== null && _state$plans2 !== void 0 && _state$plans2.length)) {
       return;
     }
-    if (Number.isNaN(planListWidth)) {
+    if (Number.isNaN(width)) {
       return;
     }
-    const planLength = planState.value.length;
 
     // 最小得有1个
-    const temp = Math.max(Math.floor(planListWidth / SLIDE_WIDTH) - 1, 1);
-    setSplideConfig(calculateConfig(temp, planLength));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [planListWidth, planState, setSplideConfig, isMobile]);
+    const tmp = Math.max(Math.floor(width / SLIDE_WIDTH) - 1, 1);
+    setState(getSlideConfig(tmp, state.plans.length));
+  }, [width, state.plans, isMobile]);
   const handleSelect = planId => {
-    setSelectedPlanId(planId);
+    if (state.planId === planId) {
+      return;
+    }
+    setState({
+      planId
+    });
+    if (isPurchaseOnly) {
+      return;
+    }
+
+    // FIXME: @wangshijun should not always be serverless
+    _util.launchSession.select(api, routerPrefix, state.sessionId, 'serverless', planId, (err, launch) => {
+      setState({
+        launch
+      });
+    });
   };
+  (0, _react.useEffect)(() => {
+    if (!state.planId) {
+      return;
+    }
+    if (state.planId !== params.get('planId')) {
+      params.set('planId', state.planId);
+      setParams(params);
+    }
+  }, [state.planId]);
   const productFeatures = [];
-  if (!planState.loading && ((_planState$value4 = planState.value) === null || _planState$value4 === void 0 ? void 0 : _planState$value4.length) > 0) {
+  if (!state.loading && ((_state$plans3 = state.plans) === null || _state$plans3 === void 0 ? void 0 : _state$plans3.length) > 0) {
     // TODO: Pricing Table: 临时做法
     try {
       const {
         features
-      } = planState.value[0];
+      } = state.plans[0];
       if (features && features.length > 0) {
-        const temp = JSON.parse(features[0].en);
-        temp.forEach(item => {
+        const tmp = JSON.parse(features[0].en);
+        tmp.forEach(item => {
           productFeatures.push({
             _id: item.featureId,
             name: item.name,
@@ -203,40 +296,43 @@ function PurchasePage(_ref) {
   }
   const handleRedeem = async () => {
     if (session.user) {
+      _util.launchSession.connect(api, routerPrefix, state.sessionId, session.user.did, () => {
+        setShowRedeem(true);
+      });
+    } else {
       setShowRedeem(true);
-      return;
     }
-    const redeemConnectURL = (0, _urlJoin.default)(routerPrefix, '/did/redeem/token');
-    const {
-      data
-    } = await api.get(redeemConnectURL);
-    session.login({
-      onSuccess: results => {
-        const [, redeemResult] = results;
-        handleRedeemed(redeemResult);
-      },
-      oncancel: () => setShowRedeem(false),
-      extraParams: {
-        nw: data.url,
-        forceConnected: false,
-        saveConnect: false
-      }
-    });
   };
-  const handleRedeemed = _ref2 => {
+  const handleRedeemed = _ref3 => {
     let {
+      did,
+      loginToken,
       nftId,
       type
-    } = _ref2;
+    } = _ref3;
     if (type === _constant.NFT_TYPE_SERVERLESS) {
-      searchParams.set('launchType', 'serverless');
+      params.set('launchType', 'serverless');
+    }
+    const updateSessionAndRedirect = () => {
+      _util.launchSession.pay(api, routerPrefix, state.sessionId, nftId, 'redeem', '', err => {
+        if (err) {
+          _Toast.default.error(err.message);
+        } else {
+          navigate({
+            pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
+            search: params.toString()
+          });
+        }
+      });
+    };
+    if (session.user) {
+      updateSessionAndRedirect();
+    } else if (loginToken) {
+      _util.connectStorage.setToken(decrypt(loginToken));
+      session.refresh();
+      _util.launchSession.connect(api, routerPrefix, state.sessionId, did, updateSessionAndRedirect);
     }
-    navigate({
-      pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
-      search: searchParams.toString()
-    });
   };
-  searchParams.set('planId', selectedPlanId);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     embed: embed,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
@@ -256,7 +352,7 @@ function PurchasePage(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactLayout.default, {
             bottom: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {
               className: "footer",
-              children: [embed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [embed && isPurchaseOnly === false && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "footer-left",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
                   onClick: () => handleRedeem(),
@@ -270,8 +366,8 @@ function PurchasePage(_ref) {
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
                 component: _reactRouterDom.Link,
-                disabled: planState.loading || !selectedPlanId,
-                to: (0, _urlJoin.default)(routerPrefix, "/purchase/checkout?".concat(searchParams.toString())),
+                disabled: state.loading || !state.planId,
+                to: (0, _urlJoin.default)(routerPrefix, "/purchase/checkout?".concat(params.toString())),
                 className: "button-next",
                 variant: "contained",
                 children: t('common.next')
@@ -280,7 +376,7 @@ function PurchasePage(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               ref: planListRef,
               className: "plan-list",
-              children: planState.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
+              children: state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
                 relative: "parent",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
               }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -288,21 +384,25 @@ function PurchasePage(_ref) {
                   toc: true,
                   productFeatures: productFeatures,
                   className: "toc"
-                }), ((_planState$value5 = planState.value) === null || _planState$value5 === void 0 ? void 0 : _planState$value5.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
+                }), state.plans.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
                   extensions: {
                     Grid: _splideExtensionGrid.Grid
                   },
                   onPaginationMounted: splide => {
-                    const pageCount = Math.ceil(planState.value.length / splide.options.perPage);
+                    const pageCount = Math.ceil(state.plans.length / splide.options.perPage);
                     const showArrows = pageCount > 1;
-                    setSplideConfig({
+                    setState({
                       arrows: showArrows
                     });
                     if (showArrows) {
                       setTimeout(() => {
-                        setOpenMorePlanPrompt(true);
+                        setState({
+                          showMorePrompt: true
+                        });
                         // 3s 后隐藏
-                        setTimeout(() => setOpenMorePlanPrompt(false), 3000);
+                        setTimeout(() => setState({
+                          showMorePrompt: false
+                        }), 3000);
                       }, 1000);
                     }
                   },
@@ -313,14 +413,14 @@ function PurchasePage(_ref) {
                   },
                   options: {
                     pagination: true,
-                    arrows: splideConfig.arrows,
+                    arrows: state.arrows,
                     classes: {
                       pagination: 'splide__pagination splide__pagination-custom'
                     },
                     trimSpace: true,
-                    width: splideConfig.width,
-                    perPage: splideConfig.perPage,
-                    gap: splideConfig.gap
+                    width: state.width,
+                    perPage: state.perPage,
+                    gap: state.gap
                   },
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                     className: "splide__arrows",
@@ -333,7 +433,7 @@ function PurchasePage(_ref) {
                         viewBox: "0 0 40 40"
                       })
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-                      open: openMorePlanPrompt,
+                      open: state.showMorePrompt,
                       title: t('purchase.morePlanPrompt'),
                       placement: "top",
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -346,13 +446,13 @@ function PurchasePage(_ref) {
                       })
                     })]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideTrack, {
-                    children: planState.value.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
+                    children: state.plans.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
                       style: {
                         width: 'auto'
                       },
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
                         recommend: !!plan.isRecommended,
-                        checked: plan._id === selectedPlanId,
+                        checked: plan._id === state.planId,
                         plan: plan,
                         onClick: () => handleSelect(plan._id)
                       })
@@ -369,8 +469,9 @@ function PurchasePage(_ref) {
       popup: true,
       useSocket: false,
       locale: locale,
-      action: "redeem",
-      checkFn: api.create().get,
+      action: (_session$user = session.user) !== null && _session$user !== void 0 && _session$user.did ? 'redeem' : 'redeem-with-connect',
+      prefix: "/did",
+      checkFn: create().get,
       onSuccess: handleRedeemed,
       onClose: () => setShowRedeem(false),
       checkTimeout: 60 * 5000,

package/lib/util.js

@@ -3,18 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAsset = exports.getAPIResponseError = exports.BLOCKLET_STORE_URL = void 0;
+exports.getAsset = exports.getAPIResponseError = exports.connectStorage = exports.BLOCKLET_STORE_URL = void 0;
 exports.getBlockletMetaUrl = getBlockletMetaUrl;
-exports.loadURL = exports.getPrice = exports.getLaunchBlockletUrl = void 0;
+exports.loadURL = exports.launchSession = exports.getPrice = exports.getLaunchBlockletUrl = void 0;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _lodash = _interopRequireDefault(require("lodash.get"));
+var _lodash2 = _interopRequireDefault(require("lodash.noop"));
 var _axios = _interopRequireDefault(require("axios"));
+var _Storage = _interopRequireDefault(require("@arcblock/did-connect/lib/Storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const connectStorage = (0, _Storage.default)('login_token', 'cookie', {
+  returnDomain: false,
+  path: window.blocklet.groupPathPrefix || window.blocklet.pathPrefix || '/'
+});
+exports.connectStorage = connectStorage;
 const BLOCKLET_STORE_URL = (0, _lodash.default)(window, 'blocklet.LAUNCHER_BLOCKLET_STORE_URL') || 'https://store.blocklet.dev';
 exports.BLOCKLET_STORE_URL = BLOCKLET_STORE_URL;
 function getBlockletMetaUrl(registry, did) {
   return (0, _urlJoin.default)(registry, "/api/blocklets/".concat(did, "/blocklet.json?source=webapp"));
 }
+
+// FIXME: @wangshijun just use sessionId and launcherUrl to make the whole workflow more simple
 const getLaunchBlockletUrl = _ref => {
   let {
     serverUrl,
@@ -22,16 +31,18 @@ const getLaunchBlockletUrl = _ref => {
     locale,
     launchType,
     nftId,
+    sessionId,
     chainHost,
     from
   } = _ref;
   if (!blockletMetaUrl) {
     return serverUrl;
   }
+  const launcherUrl = window.blocklet.LAUNCHER_URL || window.blocklet.appUrl;
   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"));
+  // FIXME: @zhenqiang 这里为何要写这个 TODO？我看 server 代码里面还有不少地方有 `fromLauncher`
+  let result = (0, _urlJoin.default)(serverUrl, serverPath, "?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl), "&fromLauncher=true&from=launcher&launcherUrl=").concat(encodeURIComponent(launcherUrl)));
   if (launchType) {
     result += "&launchType=".concat(launchType);
   }
@@ -41,6 +52,9 @@ const getLaunchBlockletUrl = _ref => {
   if (nftId) {
     result += "&nftId=".concat(nftId);
   }
+  if (sessionId) {
+    result += "&launcherSessionId=".concat(sessionId);
+  }
   result += "&chainHost=".concat(encodeURIComponent(chainHost));
   return result;
 };
@@ -105,4 +119,60 @@ const getPrice = (prices, providerName) => {
   }
   return formatPrice(price, providerName);
 };
-exports.getPrice = getPrice;
+exports.getPrice = getPrice;
+const launchSession = {
+  load: (api, prefix, sessionId, url, done) => {
+    api.get((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId))).then(result => {
+      done(null, result.data.launch);
+    }).catch(err => {
+      console.error('Failed to load launch session', err);
+      launchSession.create(api, prefix, url, done);
+    });
+  },
+  create: (api, prefix, url, done) => {
+    api.post((0, _urlJoin.default)(prefix, '/launches'), {
+      blockletMetaUrl: url,
+      referrer: document.referrer
+    }).then(result => {
+      done(null, result.data.launch);
+    }).catch(err => {
+      console.error('Failed to create launch session', err);
+      done(err);
+    });
+  },
+  connect: function connect(api, prefix, sessionId, userDid) {
+    let done = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : _lodash2.default;
+    api.post((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId, "/connect")), {
+      userDid
+    }).then(result => {
+      done(null, result.data.launch);
+    }).catch(err => {
+      console.error('Failed to set launch session as connected', err);
+      done(err);
+    });
+  },
+  pay: (api, prefix, sessionId, nftDid, nftSource, paymentId, done) => {
+    api.post((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId, "/paid")), {
+      nftDid,
+      nftSource,
+      paymentId
+    }).then(result => {
+      done(null, result.data.launch);
+    }).catch(err => {
+      console.error('Failed to set launch session as paid', err);
+      done(err);
+    });
+  },
+  select: (api, prefix, sessionId, type, planId, done) => {
+    api.post((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId, "/select")), {
+      type,
+      planId
+    }).then(result => {
+      done(null, result.data.launch);
+    }).catch(err => {
+      console.error('Failed to select launch session', err);
+      done(err);
+    });
+  }
+};
+exports.launchSession = launchSession;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.0.47",
+  "version": "2.1.0",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -23,10 +23,9 @@
   },
   "scripts": {
     "lint": "eslint src",
+    "lint:fix": "npm run lint -- --fix",
     "build": "rm -rf lib && babel src --out-dir lib --copy-files",
     "watch": "babel src --out-dir lib -w --copy-files",
-    "precommit": "CI=1 yarn test",
-    "prepush": "CI=1 yarn test",
     "prepublish": "npm run build"
   },
   "bugs": {
@@ -39,11 +38,12 @@
     "@arcblock/did-connect": "^2.5.47",
     "@arcblock/icons": "^2.5.47",
     "@arcblock/license": "^2.5.47",
+    "@arcblock/react-hooks": "^2.5.47",
     "@arcblock/ux": "^2.5.47",
-    "@blocklet/launcher-layout": "2.0.47",
-    "@blocklet/launcher-util": "2.0.47",
-    "@blocklet/launcher-ux": "2.0.47",
-    "@did-pay/react": "^1.10.4",
+    "@blocklet/launcher-layout": "2.1.0",
+    "@blocklet/launcher-util": "2.1.0",
+    "@blocklet/launcher-ux": "2.1.0",
+    "@blocklet/payment": "^1.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
@@ -54,10 +54,12 @@
     "@splidejs/splide-extension-grid": "^0.4.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.53.0",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
+    "dsbridge": "^3.1.4",
     "flat": "^5.0.2",
     "js-cookie": "^3.0.5",
     "lodash.get": "^4.4.2",
+    "lodash.noop": "^3.0.1",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.8.1",
     "react-lottie-player": "^1.5.4",
@@ -70,7 +72,8 @@
     "@babel/core": "^7.22.1",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
-    "babel-plugin-inline-react-svg": "^2.0.2"
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "jest": "^27.5.1"
   },
-  "gitHead": "430ea38cd0d899a69247d3979b67823f8eed5b9f"
+  "gitHead": "97e5570a03831f25b8ea796c9e523e65a3e821dd"
 }