@abtnode/ux 1.8.33 → 1.8.35

package/lib/blocklet/router/rule-list.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RuleListWithPermission;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@abtnode/constant");
+var _util = require("../../util");
+var _blocklet = require("../../contexts/blocklet");
+var _node = require("../../contexts/node");
+var _permission = require("../../permission");
+var _line = _interopRequireDefault(require("../component/line"));
+var _ruleActions = _interopRequireDefault(require("./rule-actions"));
+var _jsxRuntime = require("react/jsx-runtime");
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function RedirectRule(_ref) {
+  let {
+    domain,
+    isHttps,
+    toUrl
+  } = _ref;
+  const scheme = isHttps ? 'https' : 'http';
+  let tmpToUrl = toUrl;
+  if (!(0, _isUrl.default)(tmpToUrl)) {
+    tmpToUrl = "".concat(scheme, "://").concat(domain).concat(toUrl);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+    href: tmpToUrl,
+    target: "_blank",
+    style: {
+      fontSize: 14
+    },
+    underline: "hover",
+    children: toUrl
+  }, tmpToUrl);
+}
+RedirectRule.propTypes = {
+  domain: _propTypes.default.string.isRequired,
+  toUrl: _propTypes.default.string.isRequired,
+  isHttps: _propTypes.default.bool
+};
+RedirectRule.defaultProps = {
+  isHttps: false
+};
+function RuleList(_ref2) {
+  let {
+    hasPermission
+  } = _ref2;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const theme = (0, _useTheme.default)();
+  const {
+    blocklet,
+    recommendedDomain: domain
+  } = (0, _blocklet.useBlockletContext)();
+  const rules = blocklet.site.rules.filter(rule => rule.to.did !== blocklet.meta.did).filter(rule => rule.to.type !== _constant.ROUTING_RULE_TYPES.BLOCKLET);
+  return rules.map(rule => {
+    let avatarName = '';
+    if (rule.to.type === _constant.ROUTING_RULE_TYPES.NONE) {
+      avatarName = '404';
+    } else if (rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT) {
+      avatarName = rule.to.redirectCode;
+    }
+    const action = rule.isProtected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: t('blocklet.router.urlLockTooltip'),
+      placement: "top",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        disabled: true,
+        size: "large",
+        style: {
+          pointerEvents: 'auto',
+          // padding replace to margin, fix the tooltip position
+          paddingTop: 0,
+          paddingBottom: 0,
+          margin: '12px 0'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {
+          style: {
+            fill: theme.palette.text.disabled
+          }
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ruleActions.default, _objectSpread({}, rule));
+    return [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      py: 2,
+      className: "component-item",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        width: {
+          xs: 300,
+          md: 400
+        },
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          width: 28
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          children: avatarName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          ml: "16px",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            style: {
+              color: '#222',
+              fontSize: 18
+            },
+            children: [rule.to.type === _constant.ROUTING_RULE_TYPES.NONE && t('common.page404'), rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && t('common.redirect')]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            children: rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && /*#__PURE__*/(0, _jsxRuntime.jsx)(RedirectRule, {
+              domain: domain,
+              toUrl: rule.to.url
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        px: 2,
+        sx: {
+          display: {
+            xs: 'none',
+            md: 'flex'
+          }
+        },
+        alignItems: "center",
+        flexGrow: "1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+          href: (0, _util.getAccessUrl)(domain, rule.from.pathPrefix, (0, _util.getBlockletUrlParams)(blocklet, locale)),
+          target: "_blank",
+          style: {
+            fontSize: 18
+          },
+          underline: "hover",
+          children: rule.from.pathPrefix
+        })
+      }, rule.from.pathPrefix), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        children: hasPermission && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            textAlign: 'right'
+          },
+          children: action
+        })
+      }, "actions")]
+    }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {})];
+  });
+}
+RuleList.propTypes = {
+  hasPermission: _propTypes.default.bool
+};
+RuleList.defaultProps = {
+  hasPermission: false
+};
+const RuleListInDaemon = (0, _permission.withPermission)(RuleList, 'mutate_blockets');
+const RuleListInService = (0, _permission.withPermission)(RuleList, '', _util.BlockletAdminRoles);
+function RuleListWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RuleListInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RuleListInDaemon, _objectSpread({}, props));
+}

package/lib/blocklet/router/util.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateSite = exports.validateRule = exports.validatePathPrefix = exports.validateDomain = exports.isSpecialDomain = exports.getInitialBlockletDid = void 0;
+var _constant = require("@abtnode/constant");
+var _isPathPrefixEqual = _interopRequireDefault(require("@abtnode/util/lib/is-path-prefix-equal"));
+var _constant2 = require("@blocklet/constant");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable import/prefer-default-export */
+
+const validateRuleByServiceType = (params, localeContext) => {
+  if (params.type === _constant.ROUTING_RULE_TYPES.REDIRECT) {
+    if (!params.url) {
+      return new Error("".concat(localeContext('router.validation.redirectUrlRequired')));
+    }
+    if (!params.redirectCode) {
+      return new Error("redirect ".concat(localeContext('router.validation.redirectCodeRequired')));
+    }
+  } else if (params.type === _constant.ROUTING_RULE_TYPES.BLOCKLET) {
+    if (!params.did) {
+      return new Error(localeContext('router.validation.didRequired'));
+    }
+  }
+  return null;
+};
+const validateDomain = (domain, localeContext) => {
+  if (!domain) {
+    return localeContext('router.domain.validate.emptyTip');
+  }
+  if (domain.endsWith(_constant.DEFAULT_IP_DOMAIN_SUFFIX)) {
+    return localeContext('router.domain.validate.suffixTip', {
+      suffix: _constant.DEFAULT_IP_DOMAIN_SUFFIX
+    });
+  }
+  return null;
+};
+
+/**
+ * form validator of add site(add domain)
+ * @param {Object} params form params
+ * @param {Function} localeContext error message
+ */
+exports.validateDomain = validateDomain;
+const validateSite = (params, localeContext) => {
+  const validateResult = validateRuleByServiceType(params, localeContext);
+  if (validateResult) {
+    return validateResult;
+  }
+  const errMsg = validateDomain(params.domain, localeContext);
+  if (errMsg) {
+    return new Error(errMsg);
+  }
+  return null;
+};
+
+/**
+ * form validator of add_rule and update_rule
+ * @param {Object} params form params
+ * @param {Function} localeContext error message
+ */
+exports.validateSite = validateSite;
+const validateRule = (params, localeContext) => {
+  const validateResult = validateRuleByServiceType(params, localeContext);
+  if (validateResult) {
+    return validateResult;
+  }
+  if (!params.pathPrefix.length) {
+    return new Error(localeContext('router.validation.pathPrefixCannotBeEmpty'));
+  }
+  if (params.pathPrefix.length > 150) {
+    return new Error(localeContext('router.validation.pathPrefixTooLong', {
+      length: 150
+    }));
+  }
+  return null;
+};
+exports.validateRule = validateRule;
+const validatePathPrefix = _ref => {
+  let {
+    params,
+    blocklets,
+    blocklet: curBlocklet,
+    locale = 'en'
+  } = _ref;
+  // validate children
+  if (curBlocklet) {
+    let exist = (curBlocklet.children || []).find(x => (0, _isPathPrefixEqual.default)(x.mountPoint, params.pathPrefix));
+    if (curBlocklet.meta.group !== 'gateway' && params.pathPrefix === '/') {
+      exist = '/';
+    }
+    if (exist) {
+      return {
+        zh: "\u6302\u8F7D\u70B9 ".concat(params.pathPrefix, " \u5DF2\u5B58\u5728\uFF0C\u8BF7\u4F7F\u7528\u5176\u4ED6\u6302\u8F7D\u70B9"),
+        en: "The mount point ".concat(params.pathPrefix, " already exist, please use another mount point")
+      }[locale];
+    }
+  }
+  const blocklet = blocklets.find(item => item.meta.did === params.did);
+  if (!blocklet) {
+    return '';
+  }
+  const selected = blocklet.meta.interfaces.find(x => x.type === 'web');
+  if (!selected) {
+    return '';
+  }
+  if (selected.prefix !== _constant2.BLOCKLET_DYNAMIC_PATH_PREFIX && params.pathPrefix !== selected.prefix) {
+    return {
+      zh: "\u8BE5 blocklet \u53EA\u80FD\u6302\u8F7D\u5728 ".concat(selected.prefix),
+      en: "This blocklet can only be mounted on ".concat(selected.prefix)
+    }[locale];
+  }
+  return '';
+};
+
+/**
+ * get initial blocklet did when add rule / update rule / add domain
+ * @param {array} blocklets
+ */
+exports.validatePathPrefix = validatePathPrefix;
+const getInitialBlockletDid = blocklets => {
+  if (blocklets.length === 0) {
+    return '';
+  }
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  const fromDid = searchParams.get('fromDid');
+  if (fromDid) {
+    const blocklet = blocklets.find(x => x.meta.did === fromDid);
+    if (blocklet) {
+      return blocklet.meta.did;
+    }
+  }
+  return blocklets[0].meta.did;
+};
+exports.getInitialBlockletDid = getInitialBlockletDid;
+const isSpecialDomain = name => {
+  const specialDomains = [_constant.DOMAIN_FOR_IP_SITE_REGEXP, _constant.DOMAIN_FOR_DEFAULT_SITE, _constant.DOMAIN_FOR_IP_SITE];
+  if (typeof window !== 'undefined' && typeof window.location !== 'undefined') {
+    specialDomains.push(window.location.hostname);
+  }
+  return specialDomains.includes(name);
+};
+exports.isSpecialDomain = isSpecialDomain;

package/lib/blocklet/types.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DomainType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line import/prefer-default-export
+const DomainType = _propTypes.default.shape({
+  href: _propTypes.default.string,
+  accessibility: _propTypes.default.shape({
+    loading: _propTypes.default.bool,
+    accessible: _propTypes.default.bool
+  }),
+  domainStatus: _propTypes.default.shape({
+    isHttps: _propTypes.default.bool,
+    matchedCert: _propTypes.default.object
+  }),
+  dns: _propTypes.default.shape({
+    resolved: _propTypes.default.bool,
+    ip: _propTypes.default.string
+  })
+});
+exports.DomainType = DomainType;

package/lib/blocklet/util.js

@@ -4,18 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.downloadExportedSource = downloadExportedSource;
+exports.fixBlocklet = exports.ensureDomainAliases = void 0;
 exports.genExportedMeta = genExportedMeta;
 exports.getLaunchURL = exports.getLaunchAgreementUrl = void 0;
 exports.getNameByTitle = getNameByTitle;
 exports.getServerUrl = void 0;
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
 var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 var _jszip = _interopRequireDefault(require("jszip"));
 var _jsYaml = _interopRequireDefault(require("js-yaml"));
 var _fileSaver = _interopRequireDefault(require("file-saver"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
-var _did = _interopRequireDefault(require("@blocklet/meta/lib/did"));
 var _didMotif = require("@arcblock/did-motif");
+var _normalizePathPrefix = _interopRequireDefault(require("@abtnode/util/lib/normalize-path-prefix"));
+var _did = _interopRequireDefault(require("@blocklet/meta/lib/did"));
+var _util = require("@blocklet/meta/lib/util");
+var _constant = require("@abtnode/constant");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const base64ToArrayBuffer = base64 => {
   const bufStr = window.atob(base64);
@@ -27,7 +33,7 @@ const base64ToArrayBuffer = base64 => {
 };
 const getLogo = did => {
   const url = (0, _didMotif.toDataURL)(did, {
-    size: 200
+    size: 256
   });
   const base64 = url.replace(/^[^,]*,/, '');
   return base64ToArrayBuffer(base64);
@@ -36,19 +42,23 @@ function getNameByTitle(title) {
   return title.replace(/[\s/@_]/g, '-').replace(/[^a-zA-Z0-9_-]/g, '').replace(/(^[-\s]+)|([-\s]+$)/g, '').toLowerCase();
 }
 function genExportedMeta(name, blocklet) {
-  const meta = (0, _pickBy.default)((0, _cloneDeep.default)(blocklet.meta), x => x !== null);
-  meta.name = name;
-  meta.did = (0, _did.default)(name);
-  meta.logo = 'logo.png';
+  let meta = (0, _pick.default)((0, _cloneDeep.default)(blocklet.meta), ['title', 'description', 'group', 'version', 'capabilities', 'interfaces', 'requirements']);
+
+  // filter null or undefined
+  meta = (0, _pickBy.default)(meta, x => x !== null);
+  meta.requirements = (0, _pickBy.default)(meta.requirements, x => !!x);
   meta.interfaces.forEach(x => {
-    // filter null or undefined
     if (!x.services) {
       delete x.services;
     }
   });
+  meta.name = name;
+  meta.did = (0, _did.default)(name);
+  meta.logo = 'logo.png';
+  meta.components = [];
   blocklet.children.forEach(child => {
     if (child.dynamic && child.bundleSource) {
-      meta.children.push({
+      meta.components.push({
         name: child.meta.name,
         source: child.bundleSource,
         title: child.meta.title,
@@ -122,4 +132,90 @@ const getLaunchAgreementUrl = (meta, info) => {
   url.searchParams.set('from', window.location.href);
   return url.href;
 };
-exports.getLaunchAgreementUrl = getLaunchAgreementUrl;
+exports.getLaunchAgreementUrl = getLaunchAgreementUrl;
+const ensureDomainAliases = async function ensureDomainAliases(domainAliases) {
+  let {
+    getIP
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!domainAliases || !domainAliases.length) {
+    return [];
+  }
+  if (!getIP) {
+    return domainAliases;
+  }
+  if (!domainAliases.some(x => x.value.includes(_constant.SLOT_FOR_IP_DNS_SITE))) {
+    return domainAliases;
+  }
+  const ip = await getIP();
+  if (!ip) {
+    return domainAliases;
+  }
+  return domainAliases.map(x => {
+    try {
+      x.value = (0, _util.replaceSlotToIp)(x.value, ip);
+      return x;
+    } catch (_unused) {
+      return x;
+    }
+  }).filter(Boolean);
+};
+
+/**
+ * @param {object} blocklet
+ * @param {{
+ *   fixRuntime:boolean|string // true, 'merge-old'
+ *   oldBlocklet: object
+ *   getIP: function
+ * }}
+ */
+exports.ensureDomainAliases = ensureDomainAliases;
+const fixBlocklet = async function fixBlocklet(blocklet) {
+  let {
+    fixRuntime = true,
+    oldBlocklet,
+    getIP
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!blocklet.site) {
+    blocklet.site = {
+      domainAliases: [],
+      rules: []
+    };
+  }
+  blocklet.site.rules.forEach(rule => {
+    rule.from.pathPrefix = (0, _normalizePathPrefix.default)(rule.from.pathPrefix || '/');
+  });
+  blocklet.site.rules = (0, _sortBy.default)(blocklet.site.rules, i => i.from.pathPrefix);
+  if (fixRuntime === true) {
+    blocklet.site.domainAliases = await ensureDomainAliases(blocklet.site.domainAliases, {
+      getIP
+    });
+    (0, _util.forEachBlockletSync)(blocklet, b => {
+      if (b.runtimeInfo) {
+        b.runtimeInfo.startAt = new Date() - b.runtimeInfo.uptime;
+      }
+    });
+  } else if (fixRuntime === 'merge-old' && oldBlocklet) {
+    blocklet.site.domainAliases = oldBlocklet.site.domainAliases;
+    const oldComponents = {};
+    (0, _util.forEachBlockletSync)(oldBlocklet, (component, _ref) => {
+      let {
+        id
+      } = _ref;
+      oldComponents[id] = component;
+    });
+    (0, _util.forEachBlockletSync)(blocklet, (component, _ref2) => {
+      let {
+        id
+      } = _ref2;
+      const oldComponent = oldComponents[id];
+      if (oldComponent) {
+        component.runtimeInfo = oldComponent.runtimeInfo;
+        component.diskInfo = oldComponent.diskInfo;
+        component.engine = oldComponent.engine;
+      }
+    });
+  } else {
+    blocklet.site.domainAliases = [];
+  }
+};
+exports.fixBlocklet = fixBlocklet;

package/lib/blocklet/version.js

@@ -165,7 +165,7 @@ Version.defaultProps = {
   checkUpgrade: true,
   hasPermission: false
 };
-const BlockletVersionInDaemon = (0, _permission.withPermission)(Version, 'mutate_blocklet');
+const BlockletVersionInDaemon = (0, _permission.withPermission)(Version, 'mutate_blockets');
 const BlockletVersionInService = (0, _permission.withPermission)(Version, '', _util2.BlockletAdminRoles);
 function BlockletVersion(props) {
   const {

package/lib/certificate.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Certificate;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _Https = _interopRequireDefault(require("@mui/icons-material/Https"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _util = require("./util");
+var _node = require("./contexts/node");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Certificate(_ref) {
+  let {
+    certificate
+  } = _ref;
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const node = (0, _node.useNodeContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const handlePopoverOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Https.default, {
+      "aria-owns": open ? 'mouse-over-popover' : undefined,
+      onMouseEnter: handlePopoverOpen,
+      onMouseLeave: handlePopoverClose,
+      style: {
+        color: '#44cdc6',
+        fontSize: 20,
+        marginLeft: 8,
+        cursor: 'pointer'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: "mouse-over-popover",
+      style: {
+        pointerEvents: 'none'
+      },
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      onClose: handlePopoverClose,
+      disableRestoreFocus: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
+          style: {
+            display: 'flex'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: "".concat(node.prefix, "/https-certificate-icon.png"),
+              alt: "certificate icon",
+              style: {
+                maxHeight: '100%',
+                maxWidth: '100%'
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+            component: "div",
+            style: {
+              marginLeft: '16px'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              component: "div",
+              style: {
+                fontWeight: 'bold'
+              },
+              children: certificate.domain
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              component: "div",
+              children: "".concat(t('common.issuer'), ": ").concat((0, _get.default)(certificate, 'issuer.commonName', ''))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              component: "div",
+              children: "".concat(t('router.cert.issuedOn'), ": ").concat((0, _util.formatToDate)(certificate.validFrom))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              component: "div",
+              children: "".concat(t('router.cert.expiryOn'), ": ").concat((0, _util.formatToDate)(certificate.validTo))
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+Certificate.propTypes = {
+  certificate: _propTypes.default.object
+};
+Certificate.defaultProps = {
+  certificate: {}
+};

package/lib/contexts/blocklet.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockletProvider = exports.BlockletContext = exports.BlockletConsumer = void 0;
+exports.useBlockletContext = useBlockletContext;
+var _react = require("react");
+const BlockletContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.BlockletContext = BlockletContext;
+const {
+  Provider,
+  Consumer
+} = BlockletContext;
+exports.BlockletConsumer = Consumer;
+exports.BlockletProvider = Provider;
+function useBlockletContext() {
+  return (0, _react.useContext)(BlockletContext);
+}