@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/issue-passport.js

@@ -4,36 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactRouterDom = require("react-router-dom");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
-
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
-
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
-
 var _context = require("@arcblock/ux/lib/Locale/context");
-
+var _constant = require("@abtnode/constant");
 var _wrapLocale = _interopRequireDefault(require("./wrap-locale"));
-
+var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable react/jsx-one-expression-per-line, no-undef */
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 // eslint-disable-next-line react/prop-types
 function IssuePassport(_ref) {
   let {
@@ -49,81 +36,94 @@ function IssuePassport(_ref) {
     locale
   } = (0, _react.useContext)(_context.LocaleContext);
   const [success, setSuccess] = (0, _react.useState)(false);
-  const history = (0, _reactRouterDom.useHistory)();
-
-  const onSuccess = () => {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    setPassportId
+  } = (0, _usePassportId.default)();
+  const onReceivePassport = result => {
+    if (result !== null && result !== void 0 && result.passportId) {
+      setPassportId(result.passportId);
+    }
     setSuccess(true);
   };
-
   const extraParams = {};
   const {
     searchParams
   } = new URL(window.location.href);
   const id = searchParams.get('id');
-
   if (id) {
     extraParams.id = id;
   }
-
-  const onLogin = () => {
+  const onUsePassport = () => {
+    var _window$env;
     try {
       session.logout();
-    } catch (err) {// Do nothing
+    } catch (err) {
+      // Do nothing
     }
-
-    history.replace('/');
-  };
-
-  return /*#__PURE__*/_react.default.createElement(Div, null, success ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "login"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "connect"
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    textAlign: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    mb: 3,
-    color: "success.main"
-  }, /*#__PURE__*/_react.default.createElement(_CheckCircle.default, {
-    style: {
-      fontSize: 60
+    if ((((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '').startsWith(_constant.WELLKNOWN_SERVICE_PATH_PREFIX)) {
+      navigate("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"), {
+        replace: true
+      });
+      return;
     }
-  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    component: "p",
-    variant: "body1",
-    className: "subheader"
-  }, t('issuePassport.dialog.success')), /*#__PURE__*/_react.default.createElement(_Box.default, {
-    mt: 3
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    rounded: true,
-    variant: "contained",
-    color: "primary",
-    onClick: onLogin
-  }, t('issuePassport.dialog.loginWithPassport')))))) : /*#__PURE__*/_react.default.createElement(_Connect.default, {
-    className: "connect",
-    action: "issue-passport",
-    checkFn: api.get,
-    checkTimeout: 10 * 60 * 1000,
-    socketUrl: api.socketUrl,
-    webWalletUrl: webWalletUrl,
-    onSuccess: onSuccess,
-    locale: locale,
-    messages: {
-      title: t('issuePassport.title'),
-      scan: t('issuePassport.description', {
-        name: window.env.appName
-      }),
-      confirm: t('issuePassport.dialog.confirm'),
-      success: t('issuePassport.dialog.success')
-    },
-    extraParams: extraParams
-  }));
+    navigate('/', {
+      replace: true
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+    children: success ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "login",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "connect",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          textAlign: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            mb: 3,
+            color: "success.main",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+              style: {
+                fontSize: 60
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            component: "p",
+            variant: "body1",
+            className: "subheader",
+            children: t('issuePassport.dialog.success')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            mt: 3,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "contained",
+              color: "primary",
+              onClick: onUsePassport,
+              children: t('issuePassport.dialog.loginWithPassport')
+            })
+          })]
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      className: "connect",
+      action: "issue-passport",
+      forceConnected: false,
+      autoConnect: false,
+      checkFn: api.get,
+      checkTimeout: 10 * 60 * 1000,
+      webWalletUrl: webWalletUrl,
+      onSuccess: onReceivePassport,
+      locale: locale,
+      messages: {
+        title: t('issuePassport.title'),
+        scan: t('issuePassport.description', {
+          name: window.env.appName
+        }),
+        confirm: t('issuePassport.dialog.confirm'),
+        success: t('issuePassport.dialog.success')
+      },
+      extraParams: extraParams
+    })
+  });
 }
-
-const Div = (0, _styledComponents.default)(_Center.default).withConfig({
-  displayName: "issue-passport__Div",
-  componentId: "sc-ovfail-0"
-})([".header{text-align:center;margin-bottom:8px;}.subheader{text-align:center;margin-bottom:24px;}.login{padding:24px;height:auto;min-height:480px;display:flex;flex-direction:column;}.connect{background:#fafafa;}"]);
-
+const Div = (0, _styled.default)(_Center.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header {\n    text-align: center;\n    margin-bottom: 8px;\n  }\n\n  .subheader {\n    text-align: center;\n    margin-bottom: 24px;\n  }\n\n  .login {\n    padding: 24px;\n    height: auto;\n    min-height: 480px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .connect {\n    background: #fafafa;\n  }\n"])));
 var _default = (0, _wrapLocale.default)(IssuePassport);
-
 exports.default = _default;

package/lib/launch-blocklet/content-layout.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ContentLayout;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ContentLayout(_ref) {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+}
+ContentLayout.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n\n  .header {\n    text-align: center;\n  }\n\n  .body {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 30px;\n    width: 100%;\n    min-height: 200px;\n    flex: 1;\n\n    ", " {\n      padding: 24px;\n    }\n\n    ", " {\n      padding: 0 16px 16px;\n    }\n  }\n\n  .footer {\n    display: flex;\n    justify-content: center;\n\n    ", " {\n      padding-bottom: 34px;\n    }\n\n    ", " {\n      margin-top: auto;\n      padding-bottom: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));

package/lib/launch-blocklet/page-header.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function PageHeader(_ref) {
+  let {
+    title,
+    subTitle
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "title",
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sub-title",
+      children: subTitle
+    })]
+  });
+}
+const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n\n  .title {\n    font-size: 24px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  .sub-title {\n    margin: 0 auto;\n    max-width: 90%;\n    font-size: 14px;\n    color: ", ";\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
+var _default = PageHeader;
+exports.default = _default;
+PageHeader.propTypes = {
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.string
+};
+PageHeader.defaultProps = {
+  title: '',
+  subTitle: ''
+};

package/lib/layout/addon.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeaderAddon;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _reactRouterDom = require("react-router-dom");
+var _SessionManager = _interopRequireDefault(require("@arcblock/did-connect/lib/SessionManager"));
+var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Globe = _interopRequireDefault(require("@arcblock/icons/lib/Globe"));
+var _QuestionMarkCircle = _interopRequireDefault(require("@arcblock/icons/lib/QuestionMarkCircle"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function HeaderAddon(_ref) {
+  let {
+    SessionContext,
+    extraItems,
+    showLocale,
+    showHelper,
+    showSessionManager,
+    sessionManagerProps
+  } = _ref;
+  const {
+    session
+  } = (0, _react.useContext)(SessionContext);
+  const {
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const location = (0, _reactRouterDom.useLocation)();
+  const defaultEndpoint = 'https://developer.blocklet.io/docs';
+  const docMap = {
+    '/store': {
+      endpoint: 'https://store.blocklet.io'
+    },
+    '/dashboard': {
+      path: '/conceptual/overview'
+    },
+    '/settings/router': {
+      path: '/conceptual/server-architecture'
+    }
+  };
+  const onHelpClick = () => {
+    const pathName = location.pathname;
+    let doc = {};
+    if (pathName.indexOf('/store') > -1) {
+      doc = docMap['/store'];
+    } else if (docMap[pathName]) {
+      doc = docMap[pathName];
+    }
+    window.open("".concat(doc.endpoint || defaultEndpoint, "/").concat(locale).concat(doc.path || ''), '_blank');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [extraItems.map((x, index) => /*#__PURE__*/(0, _react.cloneElement)(x, {
+      key: index
+    })), showLocale && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selector.default, {
+      "data-cy": "locale-addon",
+      icon: _Globe.default,
+      size: 23,
+      showText: false,
+      className: "locale-addon"
+    }), showHelper && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      onClick: onHelpClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuestionMarkCircle.default, {})
+    }), showSessionManager && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionManager.default, _objectSpread({
+      session: session,
+      size: 24,
+      showRole: true
+    }, sessionManagerProps))]
+  });
+}
+HeaderAddon.propTypes = {
+  SessionContext: _propTypes.default.object.isRequired,
+  webWalletUrl: _propTypes.default.string,
+  extraItems: _propTypes.default.array,
+  showLocale: _propTypes.default.bool,
+  showSessionManager: _propTypes.default.bool,
+  showHelper: _propTypes.default.bool,
+  sessionManagerProps: _propTypes.default.object
+};
+HeaderAddon.defaultProps = {
+  webWalletUrl: '',
+  extraItems: [],
+  showLocale: true,
+  showSessionManager: true,
+  showHelper: true,
+  sessionManagerProps: {}
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .MuiIconButton-root svg {\n    width: 26px;\n    height: 26px;\n  }\n\n  .user-addon {\n    .user-avatar {\n      width: 28px;\n      border-radius: 14px;\n      height: auto;\n    }\n  }\n\n  ", " {\n    > button,\n    > a {\n      padding-left: 8px;\n      padding-right: 8px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));

package/lib/layout/feedback.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Feedback;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** @jsxImportSource @emotion/react */
+
+function Feedback(_ref) {
+  let {
+    infos
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const infoStr = infos.map(x => "* ".concat(x.label, ": ").concat(x.value)).join('\n');
+  const feedbackUrl = new URL('https://github.com/blocklet/blocklet-site/issues/new');
+  feedbackUrl.searchParams.set('title', '[Feedback]');
+  feedbackUrl.searchParams.set('body', "<!-- [Enter feedback here] -->\n\n\n\n<!--\nDocument Details\n".concat(infoStr, "\n* Page: ").concat(window.location.href, "\n-->\n"));
+  return (0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      mx: {
+        xs: 0,
+        md: 2
+      }
+    },
+    children: (0, _jsxRuntime.jsx)(_Link.default, {
+      sx: {
+        color: 'text.primary'
+      },
+      target: "_blank",
+      href: feedbackUrl.href,
+      rel: "noreferrer",
+      style: {
+        textDecoration: 'underline'
+      },
+      children: t('common.reportIssue')
+    })
+  });
+}
+Feedback.propTypes = {
+  infos: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    value: _propTypes.default.string
+  }))
+};
+Feedback.defaultProps = {
+  infos: []
+};