@blocklet/launcher-workflow 1.5.18

package/lib/locales/zh.js

@@ -0,0 +1,78 @@
+"use strict";
+
+module.exports = {
+  common: {
+    paymentMethod: '付款方式',
+    serverType: '节点信息',
+    paying: '支付中',
+    pay: '支付',
+    name: '名称',
+    description: '描述',
+    retry: '重试',
+    launch: '启动',
+    next: '下一步',
+    redeem: '兑换',
+    purchase: '购买'
+  },
+  plan: {
+    title: '创建节点',
+    subTitle: '请选择节点类型和支付方式',
+    loadListFailed: '加载节点类型列表出错',
+    paymentCredit: {
+      status: {
+        unpaid: '支付中',
+        paid: '支付完成, 等待订单完成',
+        completed: '已完成，跳转中',
+        expired: '订单已过期'
+      }
+    },
+    useCrypto: 'ABT 支付',
+    useFiat: '信用卡支付'
+  },
+  prepare: {
+    title: '命名节点',
+    subTitle: '请输入要创建的节点名称和描述'
+  },
+  launch: {
+    title: '创建节点',
+    invalidFftId: '无效的购买凭证',
+    launchApp: '启动应用',
+    launching: '节点正在启动中, 大约需要 5 分钟',
+    launched: '节点已启动',
+    launchSuccess: '创建节点成功',
+    launchBlockletTip: '点击下面的按钮启动应用',
+    loadStatusFailed: '加载实例状态失败',
+    waitingForLaunching: '节点正在启动中，大约需要 5 分钟',
+    accessServer: '访问节点',
+    dialog: {
+      title: '创建节点',
+      scan: '用您的 DID 钱包扫描下面的二维码',
+      confirm: '在您的 DID 钱包上确认',
+      success: '正在启动'
+    },
+    error: {
+      launchFailed: '节点启动失败',
+      launchFailedDescription: '您可以点击下面按钮重试',
+      notFound: '没有正在启动的节点',
+      notFoundDescription: '您可以点击下面按钮启动节点'
+    }
+  },
+  redeem: {
+    title: '启动节点',
+    subTitle: '为你的节点起个名字吧',
+    dialog: {
+      title: '兑换节点',
+      scan: '用您的 DID 钱包扫描下面的二维码，提供 NFT',
+      confirm: '在您的 DID 钱包上确认',
+      success: '兑换成功'
+    }
+  },
+  addServer: {
+    purchase: {
+      title: '创建节点',
+      scan: '用您的 DID 钱包扫描下面的二维码',
+      confirm: '在您的 DID 钱包上确认',
+      success: '支付成功'
+    }
+  }
+};

package/lib/prepare.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PreparePage;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+
+var _utils = require("@arcblock/did-connect/lib/utils");
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+
+var _pageHeader = _interopRequireDefault(require("./components/page-header"));
+
+var _request = _interopRequireDefault(require("./contexts/request"));
+
+var _locale = require("./contexts/locale");
+
+var _constant = require("./constant");
+
+var _router = _interopRequireWildcard(require("./contexts/router"));
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var BlockletServerIcon = function BlockletServerIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 4.9A1.1 1.1 0 0 1 3.1 6v12c0 .195.084.463.404.799.326.342.849.7 1.579 1.024C6.54 20.471 8.632 20.9 11 20.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.604.404-.8V6a1.1 1.1 0 0 1 2.2 0v12c0 .911-.42 1.696-1.01 2.317-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.466-6.81-1.266-.899-.4-1.694-.903-2.28-1.518C1.32 19.695.9 18.91.9 18V6A1.1 1.1 0 0 1 2 4.9Z",
+    fill: "#BFBFBF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 10.9A1.1 1.1 0 0 1 3.1 12c0 .194.084.463.404.799.326.342.849.7 1.579 1.024C6.54 14.471 8.632 14.9 11 14.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.604.404-.8a1.1 1.1 0 0 1 2.2 0c0 .911-.42 1.696-1.01 2.317-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.466-6.81-1.266-.899-.4-1.694-.903-2.28-1.518C1.32 13.695.9 12.91.9 12A1.1 1.1 0 0 1 2 10.9Z",
+    fill: "#BFBFBF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.504 5.2c-.32.337-.404.605-.404.8 0 .195.084.463.404.799.326.342.849.7 1.579 1.024C6.54 8.471 8.632 8.9 11 8.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.604.404-.8 0-.194-.084-.462-.404-.798-.326-.342-.849-.7-1.579-1.025C15.46 3.53 13.368 3.1 11 3.1s-4.46.429-5.917 1.076c-.73.325-1.253.683-1.579 1.025Zm.686-3.034C5.99 1.366 8.398.9 11 .9c2.602 0 5.01.466 6.81 1.266.899.4 1.694.903 2.28 1.518.59.621 1.01 1.406 1.01 2.316 0 .91-.42 1.695-1.01 2.316-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.466-6.81-1.266-.899-.4-1.694-.903-2.28-1.518C1.32 7.695.9 6.91.9 6c0-.91.42-1.695 1.01-2.316.586-.615 1.381-1.119 2.28-1.518ZM24 24.9a1.1 1.1 0 0 1 1.1 1.1v12c0 .194.084.463.404.799.326.342.849.7 1.579 1.024C28.54 40.471 30.632 40.9 33 40.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.605.404-.8V26a1.1 1.1 0 0 1 2.2 0v12c0 .911-.42 1.696-1.01 2.317-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.467-6.81-1.266-.899-.4-1.694-.903-2.28-1.518-.59-.621-1.01-1.406-1.01-2.316V26a1.1 1.1 0 0 1 1.1-1.1Z",
+    fill: "#BFBFBF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 30.9a1.1 1.1 0 0 1 1.1 1.1c0 .194.084.463.404.799.326.342.849.7 1.579 1.024C28.54 34.471 30.632 34.9 33 34.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.605.404-.8a1.1 1.1 0 0 1 2.2 0c0 .911-.42 1.696-1.01 2.317-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.467-6.81-1.266-.899-.4-1.694-.903-2.28-1.518-.59-.621-1.01-1.406-1.01-2.316a1.1 1.1 0 0 1 1.1-1.1Z",
+    fill: "#BFBFBF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.504 25.2c-.32.337-.404.605-.404.8 0 .195.084.463.404.799.326.342.849.7 1.579 1.024C28.54 28.471 30.632 28.9 33 28.9s4.46-.429 5.917-1.077c.73-.324 1.253-.682 1.579-1.024.32-.336.404-.604.404-.8 0-.194-.084-.462-.404-.798-.326-.342-.849-.7-1.579-1.025C37.46 23.53 35.368 23.1 33 23.1s-4.46.428-5.917 1.076c-.73.325-1.253.683-1.579 1.025Zm.686-3.034c1.8-.8 4.208-1.266 6.81-1.266 2.602 0 5.01.466 6.81 1.266.899.4 1.694.903 2.28 1.518.59.621 1.01 1.405 1.01 2.316 0 .91-.42 1.695-1.01 2.316-.586.615-1.381 1.119-2.28 1.518-1.8.8-4.208 1.266-6.81 1.266-2.602 0-5.01-.466-6.81-1.266-.899-.4-1.694-.903-2.28-1.518-.59-.621-1.01-1.406-1.01-2.316 0-.91.42-1.695 1.01-2.316.586-.615 1.381-1.119 2.28-1.518ZM28.9 4A1.1 1.1 0 0 1 30 2.9h6A5.1 5.1 0 0 1 41.1 8v6a1.1 1.1 0 0 1-2.2 0V8A2.9 2.9 0 0 0 36 5.1h-6A1.1 1.1 0 0 1 28.9 4ZM4 28.9A1.1 1.1 0 0 1 5.1 30v6A2.9 2.9 0 0 0 8 38.9h6a1.1 1.1 0 0 1 0 2.2H8A5.1 5.1 0 0 1 2.9 36v-6A1.1 1.1 0 0 1 4 28.9Z",
+    fill: "#BFBFBF"
+  }));
+};
+
+BlockletServerIcon.defaultProps = {
+  width: "46",
+  height: "46",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const MAX_NAME_LENGTH = 30;
+const MAX_DESC_LENGTH = 50;
+
+function PreparePage() {
+  const {
+    t
+  } = (0, _react.useContext)(_locale.LocaleContext);
+  const [name, setName] = (0, _react.useState)('');
+  const [description, setDescription] = (0, _react.useState)('');
+  const [error, setError] = (0, _react.useState)({
+    name: '',
+    description: ''
+  });
+  const routerPrefix = (0, _router.usePrefix)();
+  const [showLaunchInstanceDialog, setShowLaunchInstanceDialog] = (0, _react.useState)(false);
+  const {
+    nftId
+  } = (0, _reactRouterDom.useParams)();
+  const history = (0, _reactRouterDom.useHistory)();
+  const {
+    create: createRequest
+  } = (0, _request.default)();
+
+  const handleInput = id => e => {
+    if (id === 'name') {
+      setName(e.target.value);
+    }
+
+    if (id === 'description') {
+      setDescription(e.target.value);
+    }
+
+    validate();
+  };
+
+  const validate = () => {
+    let isError = false;
+
+    if (name.length > MAX_NAME_LENGTH) {
+      isError = true;
+      setError(value => _objectSpread(_objectSpread({}, value), {}, {
+        name: t('launchPrepare.error.nameExceed', {
+          length: MAX_NAME_LENGTH
+        })
+      }));
+    } else {
+      setError(value => _objectSpread(_objectSpread({}, value), {}, {
+        name: ''
+      }));
+    }
+
+    if (description.length > MAX_DESC_LENGTH) {
+      isError = true;
+      setError(value => _objectSpread(_objectSpread({}, value), {}, {
+        description: t('launchPrepare.error.descriptionExceed', {
+          length: MAX_DESC_LENGTH
+        })
+      }));
+    } else {
+      setError(value => _objectSpread(_objectSpread({}, value), {}, {
+        description: ''
+      }));
+    }
+
+    return isError;
+  };
+
+  const handleLaunch = () => {
+    if (validate()) {
+      return;
+    }
+
+    setShowLaunchInstanceDialog(true);
+  }; // eslint-disable-next-line no-shadow
+
+
+  const handleAuthSuccess = _ref => {
+    let {
+      nftId
+    } = _ref;
+    history.push((0, _router.default)(routerPrefix, "/in-progress/".concat(nftId).concat(window.location.search)));
+  };
+
+  const handleCloseAuthDialog = () => setShowLaunchInstanceDialog(false);
+
+  const isRedeem = nftId === _constant.REDEEM_NFT_ID;
+  const headerScope = isRedeem ? 'redeem' : 'prepare';
+  const buttonScope = isRedeem ? 'redeem' : 'launch';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+    title: t("".concat(headerScope, ".title")),
+    subTitle: t("".concat(headerScope, ".subTitle"))
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-logo"
+  }, /*#__PURE__*/_react.default.createElement(BlockletServerIcon, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "inputs"
+  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    className: "input-item",
+    error: !!error.name
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    id: "name",
+    variant: "outlined",
+    label: t('common.name'),
+    onChange: handleInput('name'),
+    value: name,
+    labelWidth: 0,
+    autoFocus: true
+  }), error.name && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, error.name)), /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    className: "input-item",
+    error: !!error.description
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    id: "description",
+    variant: "outlined",
+    label: t('common.description'),
+    error: !!error.desc,
+    onChange: handleInput('description'),
+    multiline: true,
+    maxRows: 5,
+    value: description,
+    labelWidth: 0
+  }), error.description && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, error.description)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-footer"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    disabled: !name.trim() || !description.trim(),
+    style: {
+      width: 300
+    },
+    color: "primary",
+    variant: "contained",
+    rounded: true,
+    onClick: handleLaunch
+  }, t('common.next')))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
+    open: showLaunchInstanceDialog,
+    popup: true,
+    action: "launch-instance",
+    checkFn: createRequest().get,
+    onSuccess: handleAuthSuccess,
+    onClose: handleCloseAuthDialog,
+    checkTimeout: 60 * 5000,
+    extraParams: {
+      nftId,
+      name,
+      description
+    },
+    webWalletUrl: (0, _utils.getWebWalletUrl)(),
+    disableClose: true,
+    showDownload: false,
+    messages: {
+      title: t("".concat(buttonScope, ".dialog.title")),
+      scan: t("".concat(buttonScope, ".dialog.scan")),
+      confirm: t("".concat(buttonScope, ".dialog.confirm")),
+      success: t("".concat(buttonScope, ".dialog.success"))
+    }
+  }));
+}
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "prepare__Container",
+  componentId: "sc-1ddofcz-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;.page-logo{display:flex;justify-content:center;margin-top:80px;}.inputs{display:flex;align-items:center;flex-direction:column;text-align:center;}.input-item{margin-top:24px;width:90%;max-width:343px;font-size:14px;input,textarea{font-size:14px;}}@media (max-width:640px){.page-footer{margin-top:auto;}}"]);

package/lib/purchase.js

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _reactUse = require("react-use");
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _util = require("@ocap/util");
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+
+var _utils = require("@arcblock/did-connect/lib/utils");
+
+var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
+
+var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
+
+var _plan = _interopRequireDefault(require("./components/plan"));
+
+var _paymentType = _interopRequireDefault(require("./components/payment-type"));
+
+var _pageHeader = _interopRequireDefault(require("./components/page-header"));
+
+var _checkout = _interopRequireDefault(require("./components/stripe/checkout"));
+
+var _query = _interopRequireDefault(require("./hooks/query"));
+
+var _locale = require("./contexts/locale");
+
+var _session = require("./contexts/session");
+
+var _constant = require("./constant");
+
+var _request = _interopRequireDefault(require("./contexts/request"));
+
+var _router = _interopRequireWildcard(require("./contexts/router"));
+
+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; }
+
+const formatTokenPrice = token => "".concat((0, _util.fromUnitToToken)(token.value, token.decimal), " ").concat(token.symbol);
+
+const formatFiatPrice = price => "".concat(price.unit).concat(price.value);
+
+function PurchasePage() {
+  const {
+    api,
+    create: createRequest
+  } = (0, _request.default)();
+  const query = (0, _query.default)();
+  const history = (0, _reactRouterDom.useHistory)();
+  const [plan, setPlan] = (0, _react.useState)(null);
+  const {
+    session
+  } = (0, _session.useSessionContext)();
+  const {
+    t,
+    locale
+  } = (0, _locale.useLocaleContext)();
+  const [paying, setPaying] = (0, _react.useState)(false);
+  const [paymentInfo, setPaymentInfo] = (0, _react.useState)(null);
+  const [paymentType, setPaymentType] = (0, _react.useState)('crypto');
+  const routerPrefix = (0, _router.usePrefix)();
+  const userDid = query.get('userDid') || (0, _lodash.default)(session, 'user.did');
+  const isEmbed = !!query.get('blocklet_meta_url');
+  (0, _react.useEffect)(() => {
+    if (!session.loading && paymentType === 'fiat' && !userDid) {
+      session.login();
+    } // eslint-disable-next-line
+
+  }, [paymentType, userDid]);
+  const paymentTypes = [{
+    name: 'crypto'
+  }, {
+    name: 'fiat'
+  }];
+  const plansState = (0, _reactUse.useAsync)(async () => {
+    const {
+      data
+    } = await api.get('/plans');
+    const plans = (data || []).map(item => {
+      item.prices = {
+        crypto: formatTokenPrice(item.prices.crypto),
+        fiat: formatFiatPrice(item.prices.fiat)
+      };
+      return item;
+    }).sort((itemX, itemY) => itemX.weight - itemY.weight);
+    return {
+      plans
+    };
+  });
+  (0, _react.useEffect)(() => {
+    if (plansState.loading === false) {
+      setPaymentType('crypto');
+
+      if (plansState.value) {
+        const {
+          plans
+        } = plansState.value;
+
+        if (plans.length > 0) {
+          selectPlan(plans[0]);
+        }
+      }
+    }
+  }, [plansState.loading, plansState.value]);
+
+  if (plansState.loading) {
+    return /*#__PURE__*/_react.default.createElement(Center, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, null));
+  }
+
+  if (plansState.error) {
+    console.error('load plans error', plansState.error);
+    return /*#__PURE__*/_react.default.createElement(_Alert.default, {
+      severity: "error"
+    }, t('plan.loadListFailed'));
+  }
+
+  const {
+    plans
+  } = plansState.value;
+
+  const handleAuthSuccess = _ref => {
+    let {
+      nftId
+    } = _ref;
+    const url = "/prepare/".concat(nftId).concat(window.location.search);
+    history.push((0, _router.default)(routerPrefix, url));
+  };
+
+  const handleCloseAuthDialog = () => {
+    setPaying(false);
+  };
+
+  const selectPaymentType = value => {
+    setPaymentType(value);
+  };
+
+  const selectPlan = value => {
+    setPlan(value);
+  };
+
+  const getPurchaseParams = () => {
+    const obj = {
+      planId: plan ? plan._id : null,
+      userDid
+    };
+    const params = {};
+    Object.keys(obj).forEach(key => {
+      if (obj[key] !== undefined && obj[key] !== null) {
+        params[key] = obj[key];
+      }
+    });
+    return params;
+  };
+
+  const handleCancelPay = () => {
+    setPaying(false);
+    setPaymentInfo(null);
+  };
+
+  const handlePay = async payment => {
+    if (!userDid) {
+      session.login();
+      return;
+    }
+
+    const params = getPurchaseParams();
+
+    if (!params.planId) {
+      return;
+    }
+
+    setPaying(true);
+
+    if (payment === 'crypto') {
+      return;
+    }
+
+    if (payment === 'fiat') {
+      try {
+        const {
+          data
+        } = await api.post("/pay/stripe/intent?locale=".concat(locale, "&userDid=").concat(userDid), params);
+        setPaymentInfo({
+          orderId: data.orderId,
+          clientSecret: data.clientSecret
+        });
+      } catch (error) {
+        console.error(error);
+        setPaying(false);
+      }
+    }
+  };
+
+  const handleRedeem = () => {
+    handleAuthSuccess({
+      nftId: _constant.REDEEM_NFT_ID
+    });
+  };
+
+  const PayButton = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => handlePay(paymentType),
+    disabled: paying,
+    rounded: true,
+    variant: "contained",
+    color: "primary"
+  }, paying && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    size: 14
+  }), paying ? t('common.paying') : t('common.purchase'));
+
+  const RedeemButton = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => handleRedeem(),
+    rounded: true,
+    variant: "outlined",
+    color: "primary",
+    style: {
+      marginLeft: '24px'
+    }
+  }, t('common.redeem'));
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+    title: t('plan.title'),
+    subTitle: t('plan.subTitle')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-body body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-body-article"
+  }, /*#__PURE__*/_react.default.createElement(_compactLayout.default, {
+    bottom: /*#__PURE__*/_react.default.createElement("div", {
+      className: "button-container"
+    }, /*#__PURE__*/_react.default.createElement(PayButton, null), /*#__PURE__*/_react.default.createElement(RedeemButton, null))
+  }, !isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+    title: t('plan.title'),
+    subTitle: t('plan.subTitle')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-payment"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-title"
+  }, t('common.paymentMethod')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-row",
+    style: {
+      flexWrap: 'nowrap'
+    }
+  }, paymentTypes.map(item => /*#__PURE__*/_react.default.createElement(_paymentType.default, {
+    key: item.name,
+    className: "".concat(paymentType === item.name ? 'selected' : ''),
+    type: item.name,
+    onClick: () => selectPaymentType(item.name)
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-plan small-select-plan-".concat(plans.length)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-title"
+  }, t('common.serverType')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "selector-container"
+  }, plans.map(item => /*#__PURE__*/_react.default.createElement(_plan.default, {
+    key: item._id,
+    paymentType: paymentType,
+    onClick: () => selectPlan(item),
+    className: "select-body-item ".concat(plan && plan._id === item._id ? 'selected' : ''),
+    data: item
+  }))))))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
+    open: paying && paymentType === 'crypto',
+    popup: true,
+    action: "purchase",
+    checkFn: createRequest().get,
+    onSuccess: handleAuthSuccess,
+    onClose: handleCloseAuthDialog,
+    checkTimeout: 60 * 5000,
+    extraParams: getPurchaseParams(),
+    webWalletUrl: (0, _utils.getWebWalletUrl)(),
+    showDownload: false,
+    messages: {
+      title: t('purchase.dialog.title'),
+      scan: t('purchase.dialog.scan'),
+      confirm: t('purchase.dialog.confirm'),
+      success: t('purchase.dialog.success')
+    }
+  }), paymentInfo && /*#__PURE__*/_react.default.createElement(_checkout.default, {
+    clientSecret: paymentInfo.clientSecret,
+    orderId: paymentInfo.orderId,
+    userDid: userDid,
+    onPaid: handleAuthSuccess,
+    onCancel: handleCancelPay
+  }));
+}
+
+const Center = _styledComponents.default.div.withConfig({
+  displayName: "purchase__Center",
+  componentId: "sc-1knmtel-0"
+})(["display:flex;justify-content:center;align-items:center;height:100%;"]);
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "purchase__Container",
+  componentId: "sc-1knmtel-1"
+})(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{padding-top:40px;}.select-plan{margin:40px auto 0;&.small-select-plan-2{max-width:780px;}&.small-select-plan-1{max-width:460px;}}.select-title{text-align:center;font-size:16px;color:", ";}.page-body{position:relative;flex:1;padding:0 24px;margin-top:0;}.page-body-article{position:absolute;left:24px;top:0;width:calc(100% - 48px);height:100%;overflow-y:auto;}.select-row{display:flex;margin-top:18px;justify-content:center;flex-wrap:wrap;> div{margin-left:12px;margin-right:12px;}}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;margin-top:24px;padding-bottom:16px;> button{width:200px;}}.select-body-item{cursor:pointer;transition:background-color ease 0.2s,border ease 0.2s;}@media screen and (max-width:600px){.select-title{text-align:left;}.select-row{flex-direction:column;> div{margin-bottom:24px;margin-right:0;margin-left:0;&:last-child{margin-bottom:0;}}}.page-body{padding:0 24px;}}.selected{border-color:", ";cursor:default;}"], props => props.theme.palette.grey[900], props => props.theme.palette.primary.main);
+
+var _default = (0, _reactRouterDom.withRouter)(PurchasePage);
+
+exports.default = _default;

package/lib/util.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockletMetaUrl = getBlockletMetaUrl;
+exports.getLaunchBlockletUrl = void 0;
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getBlockletMetaUrl(registry, did) {
+  return (0, _urlJoin.default)(registry, "/api/blocklets/".concat(did, "/blocklet.json?source=webapp"));
+}
+
+const getLaunchBlockletUrl = (serverUrl, blockletMetaUrl, locale) => {
+  if (!blockletMetaUrl) {
+    return serverUrl;
+  }
+
+  let result = (0, _urlJoin.default)(serverUrl, "/launch-blocklet?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl)));
+
+  if (locale) {
+    result += "&locale=".concat(locale);
+  }
+
+  return result;
+};
+
+exports.getLaunchBlockletUrl = getLaunchBlockletUrl;