@blocklet/launcher-workflow 1.5.65 → 1.5.66

package/lib/components/confirm.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ConfirmDialog;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+var _locale = require("../contexts/locale");
+
+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 ConfirmDialog(_ref) {
+  let {
+    title,
+    description,
+    cancel,
+    confirm,
+    color,
+    params: initialParams,
+    onCancel,
+    onConfirm
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_locale.LocaleContext);
+  const [params, setParams] = (0, _react.useState)(initialParams);
+  const theme = (0, _useTheme.default)();
+  const isBreakpointsDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+
+  const onCallback = cb => {
+    if (typeof cb === 'function') {
+      cb(params);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: true,
+    fullScreen: isBreakpointsDownSm
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, typeof title === 'function' ? title() : title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, typeof description === 'function' ? description(params, setParams) : description)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
+    style: {
+      padding: '8px 24px 24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => onCallback(onCancel),
+    color: "default",
+    rounded: true
+  }, cancel || t('common.cancel')), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => onCallback(onConfirm),
+    color: color,
+    variant: "outlined",
+    autoFocus: true,
+    rounded: true
+  }, confirm || t('common.confirm'))));
+}
+
+ConfirmDialog.propTypes = {
+  title: _propTypes.default.any.isRequired,
+  description: _propTypes.default.any.isRequired,
+  // can be a function that renders different content based on params
+  cancel: _propTypes.default.string,
+  color: _propTypes.default.string,
+  confirm: _propTypes.default.string,
+  params: _propTypes.default.object,
+  // This object holds states managed in the dialog
+  onCancel: _propTypes.default.func,
+  onConfirm: _propTypes.default.func.isRequired
+};
+ConfirmDialog.defaultProps = {
+  onCancel: () => {},
+  cancel: '',
+  confirm: '',
+  color: 'danger',
+  params: {}
+};

package/lib/components/instance-operation.js

@@ -9,12 +9,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _reactUse = require("react-use");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _lodash = _interopRequireDefault(require("lodash.get"));
 
+var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
+
 var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -121,7 +121,7 @@ function OperationPage(_ref) {
   };
 
   const poll = (0, _lodash2.default)(getInstanceStatus, 5000);
-  (0, _reactUse.useInterval)(poll, launchState.status === STATUS.launching && nftId ? 5000 : null);
+  (0, _useInterval.default)(poll, launchState.status === STATUS.launching && nftId ? 5000 : null);
   (0, _react.useEffect)(() => {
     if (!nftId) {
       return;

package/lib/components/server-eula.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ServerEula;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _CheckCircleRounded = _interopRequireDefault(require("@material-ui/icons/CheckCircleRounded"));
+
+var _CheckCircleOutlineRounded = _interopRequireDefault(require("@material-ui/icons/CheckCircleOutlineRounded"));
+
+var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _server = _interopRequireDefault(require("@arcblock/license/lib/server"));
+
+var _locale = require("../contexts/locale");
+
+var _confirm = _interopRequireDefault(require("./confirm"));
+
+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; }
+
+/* eslint-disable react/jsx-wrap-multilines */
+function ServerEula(_ref) {
+  let {
+    onContinue,
+    nextDisabled
+  } = _ref;
+  const [agreed, setAgreed] = (0, _useLocalStorage.default)('server-eula-checked', false);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const {
+    t
+  } = (0, _react.useContext)(_locale.LocaleContext);
+
+  const handleChecked = () => setAgreed(x => !x);
+
+  const handleOpen = () => setOpen(x => !x);
+
+  const handleCancel = () => setOpen(false);
+
+  const handleConfirm = () => {
+    setAgreed(true);
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "eula-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    checked: agreed,
+    onChange: handleChecked,
+    color: "primary",
+    checkedIcon: /*#__PURE__*/_react.default.createElement(_CheckCircleRounded.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_CheckCircleOutlineRounded.default, null)
+  }), /*#__PURE__*/_react.default.createElement(_FormLabel.default, {
+    className: "eula-trigger",
+    onClick: handleOpen
+  }, t('license.footer'))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    disabled: !agreed || nextDisabled,
+    color: "primary",
+    variant: "contained",
+    className: "next-button",
+    onClick: onContinue
+  }, t('common.next'))), open && /*#__PURE__*/_react.default.createElement(_confirm.default, {
+    title: t('license.title'),
+    description: /*#__PURE__*/_react.default.createElement(_server.default, {
+      className: "eula-content"
+    }),
+    color: "primary",
+    onCancel: handleCancel,
+    onConfirm: handleConfirm
+  }));
+}
+
+ServerEula.propTypes = {
+  onContinue: _propTypes.default.func.isRequired,
+  nextDisabled: _propTypes.default.bool
+};
+ServerEula.defaultProps = {
+  nextDisabled: false
+};
+
+const Div = _styledComponents.default.div.withConfig({
+  displayName: "server-eula__Div",
+  componentId: "sc-16uy00s-0"
+})(["width:90%;max-width:450px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-checkbox{display:flex;align-items:center;.eula-trigger{cursor:pointer;font-size:14px;&:hover{color:", ";}}}.next-button{width:120px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.palette.primary.main);

package/lib/locales/en.js

@@ -17,11 +17,13 @@ module.exports = {
     next: 'Next',
     purchase: 'Purchase',
     redeem: 'Redeem',
-    redirecting: 'Redirecting'
+    redirecting: 'Redirecting',
+    cancel: 'Cancel',
+    confirm: 'Confirm'
   },
   plan: {
-    title: 'Select Blocklet Server Type',
-    subTitle: 'Please select payment method and Blocklet Server type',
+    title: 'Select Blocklet Server Plan',
+    subTitle: 'Select payment method and plan',
     loadListFailed: 'Plan list load error',
     paymentCredit: {
       status: {
@@ -35,9 +37,13 @@ module.exports = {
     useFiat: 'Credit Card',
     noPlan: 'No blocklet server available for purchase'
   },
+  license: {
+    title: 'End User License Agreement',
+    footer: 'I agree to the Blocklet Server EULA'
+  },
   prepare: {
     title: 'Naming Blocklet Server',
-    subTitle: 'Please enter the name and description of the Blocklet Server'
+    subTitle: 'Please enter server name and description, they will appear in your server passport'
   },
   launch: {
     title: 'Create Blocklet Server',
@@ -71,7 +77,7 @@ module.exports = {
   },
   redeem: {
     title: 'Redeem Blocklet Server',
-    subTitle: 'Name and describe the Blocklet Server you are going to redeem',
+    subTitle: 'Name the blocklet server you are going to redeem, the name will exist on server passport',
     dialog: {
       title: 'Redeem Blocklet Server',
       scan: 'Scan the QR code below with your DID wallet to complete redeem',

package/lib/locales/zh.js

@@ -12,10 +12,12 @@ module.exports = {
     description: '描述',
     retry: '重试',
     launch: '启动',
-    next: '下一步',
+    next: '继续',
     redeem: '兑换',
     purchase: '购买',
-    redirecting: '跳转中'
+    redirecting: '跳转中',
+    cancel: '取消',
+    confirm: '同意'
   },
   plan: {
     title: '创建节点',
@@ -33,9 +35,13 @@ module.exports = {
     useFiat: '信用卡支付',
     noPlan: '没有可购买的节点类型'
   },
+  license: {
+    title: '节点用户协议',
+    footer: '我已经阅读并同意节点的用户协议'
+  },
   prepare: {
     title: '命名节点',
-    subTitle: '请输入要创建的节点名称和描述'
+    subTitle: '请输入要创建的节点名称和描述，它们将显示在您的节点通行证中'
   },
   launch: {
     title: '创建节点',
@@ -69,7 +75,7 @@ module.exports = {
   },
   redeem: {
     title: '启动节点',
-    subTitle: '为你的节点起个名字吧',
+    subTitle: '为你的节点起个名字吧，节点名字将会打印在节点通行证上',
     dialog: {
       title: '兑换节点',
       scan: '用您的 DID 钱包扫描下面的二维码，提供 NFT',

package/lib/prepare.js

@@ -11,8 +11,6 @@ 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");
@@ -27,6 +25,8 @@ var _launcherConstant = require("@blocklet/launcher-constant");
 
 var _pageHeader = _interopRequireDefault(require("./components/page-header"));
 
+var _serverEula = _interopRequireDefault(require("./components/server-eula"));
+
 var _request = _interopRequireDefault(require("./contexts/request"));
 
 var _locale = require("./contexts/locale");
@@ -203,16 +203,10 @@ function PreparePage() {
     labelWidth: 0
   }), error.description && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, error.description)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "botton-container"
-  }, /*#__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, {
+  }, /*#__PURE__*/_react.default.createElement(_serverEula.default, {
+    onContinue: handleLaunch,
+    nextDisabled: !name.trim() || !description.trim()
+  }))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
     open: showLaunchInstanceDialog,
     popup: true,
     action: "launch-instance",
@@ -240,4 +234,4 @@ function PreparePage() {
 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:62px;", "{margin-top:48px;}}.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;}}.botton-container{margin-top:24px;text-align:center;}"], props => props.theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;width:100%;height:100%;.page-logo{display:flex;justify-content:center;margin-top:62px;", "{margin-top:48px;}}.inputs{display:flex;align-items:center;flex-direction:column;text-align:center;}.input-item{margin-top:24px;width:90%;max-width:450px;font-size:14px;input,textarea{font-size:14px;}}.botton-container{margin-top:24px;text-align:center;}"], props => props.theme.breakpoints.down('sm'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.5.65",
+  "version": "1.5.66",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -39,9 +39,10 @@
   "dependencies": {
     "@arcblock/did-connect": "^1.16.49",
     "@arcblock/icons": "^1.16.49",
+    "@arcblock/license": "^1.16.49",
     "@arcblock/ux": "^1.16.49",
-    "@blocklet/launcher-constant": "1.5.65",
-    "@blocklet/launcher-layout": "1.5.65",
+    "@blocklet/launcher-constant": "1.5.66",
+    "@blocklet/launcher-layout": "1.5.66",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -67,5 +68,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "f0d418d80249fc4d18fe2fd8481bd64a1010d4f4"
+  "gitHead": "054ff34e86c6c725fc76bd94a62664c690f6df15"
 }