@abtnode/ux 1.7.19 → 1.7.22

package/lib/invitation/invitation-app.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _templateObject;
+
+const _excluded = ["invitation"];
+
+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 _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 InvitationApp(_ref) {
+  let {
+    invitation
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Root, rest, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: invitation.info.did,
+    src: invitation.info.logo,
+    style: {
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-app__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-app__title"
+  }, invitation.info.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-app__description"
+  }, invitation.info.description)));
+}
+
+InvitationApp.propTypes = {
+  invitation: _propTypes.default.object.isRequired
+};
+
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  overflow: hidden;\n  .invite-app__content {\n    flex: 1;\n    margin: 0 12px;\n    font-weight: 700;\n    overflow: hidden;\n  }\n  .invite-app__title {\n    line-height: 1;\n    margin-bottom: 2px;\n    overflow: hidden;\n  }\n  .invite-app__description {\n    font-size: 12px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    height: 1.3em;\n    color: #999;\n    overflow: hidden;\n  }\n"])));
+
+var _default = InvitationApp;
+exports.default = _default;

package/lib/invitation/invitation-passport.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+
+var _iconsMaterial = require("@mui/icons-material");
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function InvitationPassport(_ref) {
+  let {
+    invitation,
+    passportColor
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const roleName = (0, _react.useMemo)(() => {
+    const roleRaw = invitation.role.title || invitation.role.name;
+    return roleRaw.toUpperCase();
+  }, [invitation.role.title, invitation.role.name]);
+  const display = (0, _react.useMemo)(() => {
+    return (0, _createPassportSvg.default)({
+      title: roleName,
+      issuer: invitation.info.name,
+      issuerDid: invitation.info.appDid,
+      ownerName: 'Your Name',
+      // can't get avatar, cause user is not login
+      // ownerAvatarUrl: user.avatar,
+      isDataUrl: true,
+      preferredColor: invitation.info.passportColor || passportColor
+    });
+  }, [invitation, roleName]);
+  const onViewPermission = (0, _react.useCallback)(() => {
+    setOpen(true);
+  }, []);
+  const onClose = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-passport__card"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: display,
+    alt: "passport",
+    className: "invite-passport__cover"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-passport__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-passport__title"
+  }, roleName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-passport__description",
+    title: invitation.role.description
+  }, invitation.role.description), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-passport__view-permission",
+    onClick: onViewPermission
+  }, t('invite.viewPermission')))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: open,
+    title: t('invite.viewPermission'),
+    PaperProps: {
+      style: {
+        minHeight: 'auto',
+        paddingBottom: '20px'
+      }
+    },
+    onClose: onClose
+  }, invitation.role.permissions && invitation.role.permissions.length > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+    style: {
+      listStyle: 'circle',
+      padding: '0 20px'
+    }
+  }, invitation.role.permissions.map(item => /*#__PURE__*/_react.default.createElement("li", {
+    key: item.name,
+    style: {
+      listStyle: 'circle'
+    }
+  }, item.description))) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: '#999',
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Inbox, {
+    style: {
+      width: '30px',
+      height: '30px'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, t('invite.emptyPermission')))));
+}
+
+InvitationPassport.propTypes = {
+  invitation: _propTypes.default.object.isRequired,
+  passportColor: _propTypes.default.string
+};
+InvitationPassport.defaultProps = {
+  passportColor: 'auto'
+};
+
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 350px;\n  margin: 30px auto;\n  .invite-passport__card {\n    margin-right: 12px;\n    width: 100px;\n    height: 100px;\n    flex-shrink: 0;\n    .invite-passport__cover {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .invite-passport__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .invite-passport__title {\n    font-weight: 700;\n    font-size: 16px;\n  }\n  .invite-passport__description {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    height: 3em;\n    color: #999;\n    font-size: 14px;\n  }\n  .invite-passport__view-permission {\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: ", ";\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.palette.primary.main;
+});
+
+var _default = InvitationPassport;
+exports.default = _default;

package/lib/invitation/invitation-receive.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+
+var _Button = _interopRequireDefault(require("@arcblock/did-connect/lib/Button"));
+
+var _utils = require("@arcblock/did-connect/lib/utils");
+
+var _util = require("../util");
+
+var _usePassportId = _interopRequireDefault(require("../../lib/hooks/use-passport-id"));
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function InvitationReceive(_ref) {
+  let {
+    invitation,
+    checkFn,
+    onLoginSuccess,
+    onReceive
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    getPassportId
+  } = (0, _usePassportId.default)();
+  const extraParams = {
+    passportId: getPassportId(),
+    inviteId: invitation.inviteId
+  };
+  const onClose = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  const onLogin = (0, _react.useCallback)(function () {
+    setOpen(false);
+    onLoginSuccess(...arguments);
+  }, [onLoginSuccess]);
+  const onClickReceive = (0, _react.useCallback)(() => {
+    if (typeof onReceive === 'function') {
+      onReceive();
+      return;
+    }
+
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    size: "large",
+    variant: "contained",
+    className: "invite-receive__button",
+    "data-cy": "invite-receive-passport",
+    color: "primary",
+    onClick: onClickReceive
+  }, t('invite.receive')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-receive__until"
+  }, t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
+    popup: true,
+    open: open,
+    className: "connect",
+    action: "invite",
+    checkFn: checkFn,
+    checkTimeout: 10 * 60 * 1000,
+    onSuccess: onLogin,
+    onClose: onClose,
+    locale: locale,
+    webWalletUrl: (0, _utils.getWebWalletUrl)(),
+    messages: {
+      title: t('receive.dialog.title'),
+      scan: t('receive.dialog.scan'),
+      confirm: t('receive.dialog.confirm'),
+      success: t('receive.dialog.success')
+    },
+    extraParams: extraParams
+  }));
+}
+
+InvitationReceive.propTypes = {
+  invitation: _propTypes.default.object.isRequired,
+  checkFn: _propTypes.default.func.isRequired,
+  onLoginSuccess: _propTypes.default.func,
+  onReceive: _propTypes.default.func
+};
+InvitationReceive.defaultProps = {
+  onLoginSuccess: () => {},
+  onReceive: null
+};
+
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  .invite-receive__logo-wrapper {\n    display: inline-flex;\n    align-items: center;\n    color: #9397a1;\n    font-size: 14px;\n  }\n  .invite-receive__logo {\n    height: 16px;\n    margin-left: 8px;\n  }\n  .invite-receive__button {\n    width: 100%;\n    margin: 16px 0;\n  }\n  .invite-receive__until {\n    text-align: center;\n    font-size: 14px;\n  }\n  .invite-receive__description {\n    color: #999;\n    text-align: left;\n    list-style: decimal;\n    padding: 0;\n    padding-left: 1.2em;\n    margin: 40px 0;\n  }\n  .invite-receive__description-item {\n    list-style: decimal;\n  }\n  .invite-receive__link {\n    color: ", ";\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.palette.primary.main;
+});
+
+var _default = InvitationReceive;
+exports.default = _default;

package/lib/invitation/invitation-user.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _util = require("../util");
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function InvitationUser(_ref) {
+  let {
+    invitation
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const roleName = (0, _react.useMemo)(() => {
+    const role = invitation.role.title || invitation.role.name;
+    return role.toUpperCase();
+  }, [invitation.role.title, invitation.role.name]);
+  const message = (0, _react.useMemo)(() => {
+    return t('invite.message', {
+      name: '{{name}}',
+      role: roleName,
+      dapp: '{{dapp}}'
+    });
+  }, [t, roleName]);
+  const accountLink = (0, _util.getExplorerLink)(invitation.info.chainHost, invitation.inviter.did, 'account');
+  const messageList = (0, _util.patchJsxToLocale)(message, {
+    name() {
+      return accountLink ? /*#__PURE__*/_react.default.createElement("a", {
+        key: "name",
+        target: "_blank",
+        href: accountLink,
+        className: "invite-user__link",
+        rel: "noreferrer"
+      }, invitation.inviter.fullName) : invitation.inviter.fullName;
+    },
+
+    dapp() {
+      return /*#__PURE__*/_react.default.createElement("a", {
+        key: "dapp",
+        target: "_blank",
+        href: invitation.info.url,
+        className: "invite-user__link",
+        rel: "noreferrer"
+      }, invitation.info.name);
+    }
+
+  });
+  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: invitation.inviter.did,
+    src: encodeURI(invitation.inviter.avatar),
+    size: 80,
+    shape: "circle",
+    variant: "circle"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "invite-user__message"
+  }, messageList));
+}
+
+InvitationUser.propTypes = {
+  invitation: _propTypes.default.object.isRequired
+};
+
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  .invite-user__name {\n    font-weight: 700;\n    font-size: 16px;\n    margin: 8px 0 2px 0;\n  }\n  .invite-user__address {\n    font-size: 12px;\n  }\n  .invite-user__message {\n    margin-top: 20px;\n    font-weight: 700;\n    /* width: 90%; */\n    text-align: center;\n    font-size: 18px;\n  }\n  .invite-user__link {\n    color: ", ";\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.palette.primary.main;
+});
+
+var _default = InvitationUser;
+exports.default = _default;

package/lib/invitation/invitation.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _ahooks = require("ahooks");
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _Result = _interopRequireDefault(require("@arcblock/ux/lib/Result"));
+
+var _invitationPassport = _interopRequireDefault(require("./invitation-passport"));
+
+var _invitationReceive = _interopRequireDefault(require("./invitation-receive"));
+
+var _invitationUser = _interopRequireDefault(require("./invitation-user"));
+
+var _invitationApp = _interopRequireDefault(require("./invitation-app"));
+
+var _wrapLocale = _interopRequireDefault(require("../wrap-locale"));
+
+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 Invitation(_ref) {
+  let {
+    getDataFn,
+    passportColor,
+    onLoginSuccess,
+    checkFn,
+    onReceive
+  } = _ref;
+  const state = (0, _ahooks.useRequest)(getDataFn);
+
+  if (state.loading) {
+    return /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+  }
+
+  if (state.error) {
+    var _state$error, _state$error$response;
+
+    return /*#__PURE__*/_react.default.createElement(_Result.default, {
+      status: "404",
+      title: (_state$error = state.error) === null || _state$error === void 0 ? void 0 : (_state$error$response = _state$error.response) === null || _state$error$response === void 0 ? void 0 : _state$error$response.data,
+      description: ""
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    className: "page-invite__wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_invitationApp.default, {
+    invitation: state.data
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-invite__card"
+  }, /*#__PURE__*/_react.default.createElement(_invitationUser.default, {
+    invitation: state.data
+  }), /*#__PURE__*/_react.default.createElement(_invitationPassport.default, {
+    invitation: state.data,
+    passportColor: passportColor
+  }), /*#__PURE__*/_react.default.createElement(_invitationReceive.default, {
+    invitation: state.data,
+    onLoginSuccess: onLoginSuccess,
+    checkFn: checkFn,
+    onReceive: onReceive
+  })));
+}
+
+Invitation.propTypes = {
+  getDataFn: _propTypes.default.func.isRequired,
+  checkFn: _propTypes.default.func.isRequired,
+  onLoginSuccess: _propTypes.default.func,
+  onReceive: _propTypes.default.func,
+  passportColor: _propTypes.default.string
+};
+Invitation.defaultProps = {
+  onLoginSuccess: () => {},
+  passportColor: 'auto',
+  onReceive: null
+};
+
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 460px;\n  max-height: 650px;\n  min-height: 450px;\n  width: 90%;\n  height: 80%;\n  display: flex;\n  flex-direction: column;\n  .page-invite__card {\n    background-color: #fff;\n    border-radius: 4px;\n    flex: 1;\n    padding: 20px 30px;\n    margin-top: 10px;\n  }\n  .page-invite__app {\n    margin-top: 20px;\n  }\n"])));
+
+var _default = (0, _wrapLocale.default)(Invitation);
+
+exports.default = _default;

package/lib/locales/en.js

@@ -29,5 +29,26 @@ module.exports = flat({
   common: {
     next: 'Next',
     complete: 'Complete'
+  },
+  invite: {
+    message: '{name} invite you to be the {role} of {dapp}',
+    receive: 'Receive with',
+    validUntil: 'Valid until:',
+    viewPermission: 'View Permission',
+    emptyPermission: 'Empty Permission',
+    open: 'Open',
+    description: {
+      step1: 'Download and setup your {wallet}',
+      step2: 'Click above button to receive passport',
+      step3: 'Login in {dapp} with received passport'
+    }
+  },
+  receive: {
+    dialog: {
+      title: 'Use your DID Wallet to receive passport',
+      scan: 'Connect your DID Wallet to receive passport',
+      confirm: 'Confirm on your DID Wallet',
+      success: 'You are successfully connected'
+    }
   }
 });

package/lib/locales/zh.js

@@ -28,5 +28,26 @@ module.exports = flat({
   common: {
     next: '下一步',
     complete: '完成'
+  },
+  invite: {
+    message: '{name} 邀请你成为 {dapp} 的 {role}',
+    receive: '领取通行证',
+    validUntil: '过期时间：',
+    viewPermission: '查看权限',
+    emptyPermission: '没有权限',
+    open: '打开',
+    description: {
+      step1: '下载并设置好你的 {wallet}',
+      step2: '点击上面的按钮领取通行证',
+      step3: '使用通行证登录 {dapp}'
+    }
+  },
+  receive: {
+    dialog: {
+      title: '请连接 DID 钱包领取通行证',
+      scan: '用您的 DID 钱包扫描下面的二维码领取通行证',
+      confirm: '在您的 DID 钱包上确认',
+      success: '连接成功'
+    }
   }
 });

package/lib/util/index.js

@@ -3,12 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.formatDateTime = formatDateTime;
 exports.getAccessUrl = getAccessUrl;
+exports.getExplorerLink = getExplorerLink;
+exports.patchJsxToLocale = patchJsxToLocale;
 exports.sleep = sleep;
 exports.validateDomain = void 0;
 
 var _constant = require("@abtnode/constant");
 
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function sleep(t) {
   return new Promise(resolve => setTimeout(resolve, t));
 }
@@ -81,4 +88,60 @@ function getAccessUrl(hostname) {
     searchParams.append(key, params[key]);
   });
   return "".concat(url, "?").concat(searchParams.toString());
+}
+
+function formatDateTime(date) {
+  return (0, _dayjs.default)(date).format('YYYY-MM-DD HH:mm');
+}
+
+function getExplorerLink(chainHost, did, type) {
+  if (!chainHost) return undefined;
+
+  try {
+    const chainUrl = new URL(chainHost);
+
+    switch (type) {
+      case 'account':
+        chainUrl.pathname = "/explorer/accounts/".concat(did);
+        break;
+
+      case 'tx':
+        chainUrl.pathname = "/explorer/txs/".concat(did);
+        break;
+
+      case 'token':
+        chainUrl.pathname = "/explorer/tokens/".concat(did);
+        break;
+
+      case 'factory':
+        chainUrl.pathname = "/explorer/factories/".concat(did);
+        break;
+
+      case 'bridge':
+        chainUrl.pathname = "/explorer/bridges/".concat(did);
+        break;
+
+      default:
+        chainUrl.pathname = '/';
+    }
+
+    return chainUrl.href;
+  } catch (_unused) {
+    return undefined;
+  }
+}
+
+function patchJsxToLocale(rawStr) {
+  let replaceMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return rawStr.split(/{{|}}/).map(item => {
+    if (replaceMap[item]) {
+      if (replaceMap[item] instanceof Function) {
+        return replaceMap[item]();
+      }
+
+      return replaceMap[item];
+    }
+
+    return item;
+  }).filter(Boolean);
 }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.7.19",
+  "version": "1.7.22",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -21,15 +21,18 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@abtnode/constant": "1.7.19",
-    "@arcblock/did-connect": "^2.1.6",
-    "@arcblock/ux": "^2.1.6",
-    "@blocklet/meta": "1.7.19",
+    "@abtnode/auth": "1.7.22",
+    "@abtnode/constant": "1.7.22",
+    "@arcblock/did-connect": "^2.1.14",
+    "@arcblock/ux": "^2.1.14",
+    "@blocklet/meta": "1.7.22",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "@mui/styles": "^5.6.2",
+    "ahooks": "^3.4.0",
+    "dayjs": "^1.11.2",
     "notistack": "2.0.5",
     "prop-types": "^15.7.2",
     "react": "^18.1.0",
@@ -46,5 +49,5 @@
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "73c02fe34d02270e59c5edfeedd7e2a878b772c4"
+  "gitHead": "6190972e62b5e6b1039aa71a291b3e2c521df367"
 }