@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/invitation/invitation-app.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 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 InvitationApp(_ref) {
+  let {
+      invitation
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      did: invitation.info.did,
+      src: invitation.info.logo,
+      style: {
+        flexShrink: 0
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "invite-app__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite-app__title",
+        children: invitation.info.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite-app__description",
+        children: 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-login.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/did-connect/lib/Button"));
+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 InvitationLogin(_ref) {
+  let {
+    onLogin
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      size: "large",
+      variant: "contained",
+      className: "invite-receive__button",
+      "data-cy": "invite-receive-passport",
+      color: "primary",
+      onClick: () => onLogin(),
+      children: t('common.connect')
+    })
+  });
+}
+InvitationLogin.propTypes = {
+  onLogin: _propTypes.default.func
+};
+InvitationLogin.defaultProps = {
+  onLogin: () => {}
+};
+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    white-space: nowrap;\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 = InvitationLogin;
+exports.default = _default;

package/lib/invitation/invitation-passport.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = 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 _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 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
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invitation, roleName]);
+  const onViewPermission = (0, _react.useCallback)(() => {
+    setOpen(true);
+  }, []);
+  const onClose = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite-passport__card",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: display,
+          alt: "passport",
+          className: "invite-passport__cover"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "invite-passport__content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "invite-passport__title",
+          children: roleName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "invite-passport__description",
+          title: invitation.role.description,
+          children: invitation.role.description
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            flex: 1
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "invite-passport__view-permission",
+          onClick: onViewPermission,
+          children: t('invite.viewPermission')
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open: open,
+      title: t('invite.viewPermission'),
+      PaperProps: {
+        style: {
+          minHeight: 'auto',
+          paddingBottom: '20px'
+        }
+      },
+      onClose: onClose,
+      children: invitation.role.permissions && invitation.role.permissions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        style: {
+          listStyle: 'circle',
+          padding: '0 20px'
+        },
+        children: invitation.role.permissions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          style: {
+            listStyle: 'circle'
+          },
+          children: item.description
+        }, item.name))
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          color: '#999',
+          textAlign: 'center'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Inbox, {
+          style: {
+            width: '30px',
+            height: '30px'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: 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,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = 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 _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 InvitationReceive(_ref) {
+  let {
+    invitation,
+    checkFn,
+    onLogin,
+    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 onSuccess = (0, _react.useCallback)(function () {
+    setOpen(false);
+    onLogin(...arguments);
+  }, [onLogin]);
+  const onClickReceive = (0, _react.useCallback)(() => {
+    if (typeof onReceive === 'function') {
+      onReceive();
+      return;
+    }
+    setOpen(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        size: "large",
+        variant: "contained",
+        className: "invite-receive__button",
+        "data-cy": "invite-receive-passport",
+        color: "primary",
+        onClick: onClickReceive,
+        children: t('invite.receive')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "invite-receive__until",
+        children: [t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate)]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      popup: true,
+      open: open,
+      className: "connect",
+      action: "invite",
+      checkFn: checkFn,
+      forceConnected: false,
+      autoConnect: false,
+      checkTimeout: 10 * 60 * 1000,
+      onSuccess: onSuccess,
+      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,
+  onLogin: _propTypes.default.func,
+  onReceive: _propTypes.default.func
+};
+InvitationReceive.defaultProps = {
+  onLogin: () => {},
+  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    white-space: nowrap;\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-success.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _util = require("../util");
+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 InvitationSuccess(_ref) {
+  let {
+    invitation,
+    type
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const message = (0, _react.useMemo)(() => {
+    return t('invite.success', {
+      dapp: '{{dapp}}'
+    });
+  }, [t]);
+  const accountLink = (0, _util.getExplorerLink)(invitation.info.chainHost, invitation.inviter.did, 'account');
+  const user = type === 'receiver' ? invitation.receiver : invitation.inviter;
+  const messageList = (0, _util.patchJsxToLocale)(message, {
+    name() {
+      return accountLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        target: "_blank",
+        href: accountLink,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: user.fullName
+      }, "name") : user.fullName;
+    },
+    dapp() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        target: "_blank",
+        href: invitation.info.url,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.info.name
+      }, "dapp");
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      pt: 1,
+      color: "success.main",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+        style: {
+          fontSize: 80
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "invite-user__message",
+      children: messageList
+    })]
+  });
+}
+InvitationSuccess.propTypes = {
+  invitation: _propTypes.default.object.isRequired,
+  type: _propTypes.default.oneOf('inviter', 'receiver')
+};
+InvitationSuccess.defaultProps = {
+  type: 'inviter'
+};
+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 = InvitationSuccess;
+exports.default = _default;

package/lib/invitation/invitation-user.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = 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 _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 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__*/(0, _jsxRuntime.jsx)("a", {
+        target: "_blank",
+        href: accountLink,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.inviter.fullName
+      }, "name") : invitation.inviter.fullName;
+    },
+    dapp() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        target: "_blank",
+        href: invitation.info.url,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.info.name
+      }, "dapp");
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      did: invitation.inviter.did,
+      src: encodeURI(invitation.inviter.avatar),
+      size: 80,
+      shape: "circle",
+      variant: "circle"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "invite-user__message",
+      children: 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,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ahooks = require("ahooks");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Result = _interopRequireDefault(require("@arcblock/ux/lib/Result"));
+var _invitationPassport = _interopRequireDefault(require("./invitation-passport"));
+var _invitationReceive = _interopRequireDefault(require("./invitation-receive"));
+var _invitationLogin = _interopRequireDefault(require("./invitation-login"));
+var _invitationUser = _interopRequireDefault(require("./invitation-user"));
+var _invitationSuccess = _interopRequireDefault(require("./invitation-success"));
+var _invitationApp = _interopRequireDefault(require("./invitation-app"));
+var _wrapLocale = _interopRequireDefault(require("../wrap-locale"));
+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 Invitation(_ref) {
+  let {
+    getDataFn,
+    passportColor,
+    onLoginSuccess,
+    checkFn,
+    onReceive
+  } = _ref;
+  const state = (0, _ahooks.useRequest)(getDataFn);
+  if (state.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
+  }
+  if (state.error) {
+    var _state$error, _state$error$response;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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: ""
+    });
+  }
+  const isSuccess = state.data.status === 'success';
+  const Section1 = isSuccess ? _invitationSuccess.default : _invitationUser.default;
+  const Section2 = isSuccess ? _invitationLogin.default : _invitationReceive.default;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    className: "page-invite__wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_invitationApp.default, {
+      invitation: state.data
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "page-invite__card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Section1, {
+        invitation: state.data
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_invitationPassport.default, {
+        invitation: state.data,
+        passportColor: passportColor
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Section2, {
+        invitation: state.data,
+        onLogin: 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;