@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/util/spaces.js

@@ -0,0 +1,160 @@
+import isUrl from 'is-url';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import { isObject } from 'lodash';
+import { api } from './api';
+
+/* eslint-disable import/prefer-default-export */
+const joinUrl = require('url-join');
+
+/**
+ * @FIXME 希望之后放在 sdk 中 @jianchao
+ * @description
+ * @param {string} endpoint
+ * @returns {string}
+ */
+export function getBackupFilesUrlFromEndpoint(endpoint) {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+  const appDid = strArray.at(-2);
+  return joinUrl(prefix, 'space', spaceDid, 'apps', appDid, 'explorer', `?key=/apps/${appDid}/.did-objects/${appDid}/`);
+}
+
+/**
+ * @FIXME 希望之后放在 sdk 中 @jianchao
+ * @description
+ * @param {string} endpoint
+ * @returns {string}
+ */
+export function getDIDSpaceUrlFromEndpoint(endpoint) {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+  return joinUrl(prefix, 'space', spaceDid);
+}
+
+/**
+ * @FIXME 希望之后放在 sdk 中 @jianchao
+ * @description
+ * @param {string} endpoint
+ * @returns {string}
+ */
+export function getDIDSpaceDidFromEndpoint(endpoint) {
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+  return spaceDid;
+}
+
+/**
+ * @description
+ * @export
+ * @param {string} endpoint
+ * @return {Promise<boolean>}
+ */
+export async function hasPermissionByEndpoint(endpoint) {
+  try {
+    if (!isUrl(endpoint)) {
+      return false;
+    }
+    const {
+      headers
+    } = await api.head(endpoint, {
+      timeout: 5000
+    });
+    return headers['x-listable'] === 'true' && headers['x-readable'] === 'true' && headers['x-writeable'] === 'true';
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}
+
+/**
+ * @description
+ * @export
+ * @param {import('@abtnode/client').ConfigEntry[]} environments
+ * @return {string}
+ */
+export function getSpaceBackupEndpoint(environments) {
+  return environments?.find(e => e.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT)?.value || '';
+}
+
+/**
+ * @description
+ * @export
+ * @param {string} endpoint
+ * @return {boolean}
+ */
+export function getSpaceGatewayFromEndpoint(endpoint) {
+  return endpoint?.replace(/\/api\/space\/.+/, '');
+}
+
+/**
+ * @description
+ * @export
+ * @param {string} spaceGatewayUrl
+ * @return {Promise<boolean>}
+ */
+export async function isValidSpaceGatewayUrl(spaceGatewayUrl) {
+  try {
+    if (!isUrl(spaceGatewayUrl)) {
+      return false;
+    }
+    const didConnectTokenUrl = joinUrl(spaceGatewayUrl, 'space/api/did/one-click-authorization/token');
+    const {
+      status,
+      data
+    } = await api.get(didConnectTokenUrl, {
+      timeout: 5000
+    });
+    // note: data 必定返回一个对象才行，如果 data 返回了一个非对象，说明失败了，此时可能返回了前端的 404 页面的 html
+    return status === 200 && isObject(data);
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}
+
+/**
+ * @description
+ * @export
+ * @param {string} endpoint
+ * @return {Promise<string >}
+ */
+export async function getSpaceNameByEndpoint(endpoint) {
+  try {
+    if (!isUrl(endpoint)) {
+      return '';
+    }
+    const {
+      headers
+    } = await api.head(endpoint, {
+      timeout: 3000
+    });
+    const spaceName = headers['x-space-name'];
+    return spaceName ? decodeURIComponent(spaceName) : '';
+  } catch (error) {
+    console.error(error);
+    return '';
+  }
+}
+/**
+ * @description
+ * @export
+ * @param {string} endpoint
+ * @return {string}
+ */
+export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+  return joinUrl(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+}
+
+/**
+ * @description
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {string}
+ */
+export const getDIDSpaceEndpoint = blocklet => {
+  return blocklet?.configs?.find(item => item.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)?.value || null;
+};

package/es/who-can-access/config.js

@@ -0,0 +1,38 @@
+import LockIcon from '@mui/icons-material/Lock';
+import ContactMailIcon from '@mui/icons-material/ContactMail';
+import PublicIcon from '@mui/icons-material/Public';
+import { WHO_CAN_ACCESS } from '@abtnode/constant';
+export default [{
+  value: WHO_CAN_ACCESS.ALL,
+  icon: PublicIcon,
+  title: {
+    zh: '所有人可访问',
+    en: 'Accessible to all'
+  },
+  description: {
+    zh: '向所有人开放，无需通行证即可访问应用',
+    en: 'Open to the world anyone can access without passport'
+  }
+}, {
+  value: WHO_CAN_ACCESS.INVITED,
+  icon: ContactMailIcon,
+  title: {
+    zh: '只有被邀请的人可以访问',
+    en: 'Only invited people can access'
+  },
+  description: {
+    zh: '稍后您可以在管理页面中邀请成员',
+    en: 'You can invite members later in the admin page'
+  }
+}, {
+  value: WHO_CAN_ACCESS.OWNER,
+  icon: LockIcon,
+  title: {
+    zh: '只有应用所有者可以访问',
+    en: 'Only Owner of the blocklet can access'
+  },
+  description: {
+    zh: '必须提供所有者通行证才能访问应用',
+    en: 'You must provide owner passport to access this application'
+  }
+}];

package/es/wrap-locale.js

@@ -0,0 +1,15 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/no-extraneous-dependencies */
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+import { translations } from './locales';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function wrapLocale(Component) {
+  return function LocaleWrapper(props) {
+    return /*#__PURE__*/_jsx(LocaleProvider, {
+      translations: translations,
+      children: /*#__PURE__*/_jsx(Component, {
+        ...props
+      })
+    });
+  };
+}

package/lib/blocklet/component/add.js

@@ -64,6 +64,11 @@ const getDIDSpaceCapability = meta => {
   var _meta$capabilities;
   return meta === null || meta === void 0 ? void 0 : (_meta$capabilities = meta.capabilities) === null || _meta$capabilities === void 0 ? void 0 : _meta$capabilities.didSpace;
 };
+/**
+ * @description
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {string}
+ */
 const getDIDSpaceEndpoint = blocklet => {
   var _blocklet$configs, _blocklet$configs$fin;
   return (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$configs = blocklet.configs) === null || _blocklet$configs === void 0 ? void 0 : (_blocklet$configs$fin = _blocklet$configs.find(item => item.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)) === null || _blocklet$configs$fin === void 0 ? void 0 : _blocklet$configs$fin.value) || null;

package/lib/blocklet/component/selected/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Selected;
+var _material = require("@mui/material");
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _propTypes = require("prop-types");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+/* eslint-disable react/jsx-one-expression-per-line */
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  children: React.ReactNode,
+ *  selected?: false | true,
+ * }} { children, selected }
+ * @return {React.Component}
+ */
+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 Selected(_ref) {
+  let {
+    children,
+    selected
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BoxContainer, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "selected-container ".concat(selected ? 'selected' : ''),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+        className: "selected-icon"
+      })
+    })]
+  });
+}
+const BoxContainer = (0, _styled.default)(_material.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  .selected-container {\n    display: flex !important;\n    position: absolute;\n    right: 0px;\n    bottom: 0px;\n    -webkit-box-pack: end;\n    justify-content: flex-end;\n    align-items: flex-end;\n    width: 32px;\n    height: 32px;\n    border-radius: 0px 0px 8px;\n    color: rgb(255, 255, 255);\n    overflow: hidden;\n    transition: all 0.4s ease 0s;\n\n    &::after {\n      position: absolute;\n      z-index: 0;\n      left: 60px;\n      top: 60px;\n      display: block;\n      width: 0px;\n      height: 0px;\n      border-width: 16px;\n      border-style: solid;\n      border-color: transparent #1dc1c7 #1dc1c7 transparent;\n      transition: all 0.1s ease 0s;\n      content: '';\n    }\n\n    .selected-icon {\n      visibility: hidden;\n      width: 60%;\n      height: 60%;\n      position: relative;\n      z-index: 2;\n      margin: 0px 1px 1px 0px;\n      font-size: 16px;\n      transition: all 0.2s ease 0s;\n    }\n  }\n\n  .selected-container.selected {\n    &::after {\n      left: 0px;\n      top: 0px;\n    }\n\n    .selected-icon {\n      visibility: visible;\n    }\n  }\n"])));
+Selected.propTypes = {
+  children: _propTypes.node.isRequired,
+  selected: _propTypes.bool
+};
+Selected.defaultProps = {
+  selected: false
+};

package/lib/blocklet/component/space-connector.js

@@ -15,7 +15,7 @@ var _lodash = require("lodash");
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _util = require("@blocklet/meta/lib/util");
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
 var _spaceSelector = _interopRequireDefault(require("./space-selector"));
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/blocklet/component/space-selector.js

@@ -15,7 +15,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _session = require("../../../lib/contexts/session");
+var _session = require("../../contexts/session");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["onSelect", "endpoint", "gatewayUrl", "loading", "size", "helperText"];

package/lib/blocklet/storage/backups.js

@@ -15,7 +15,7 @@ var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 var _propTypes = require("prop-types");
 var _node = require("../../contexts/node");
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["progress", "spaceGateways"];
 /**

package/lib/blocklet/storage/connect-to.js

@@ -10,14 +10,13 @@ var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
-var _isUrl = _interopRequireDefault(require("is-url"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _constant = require("@blocklet/constant");
 var _SplitButton = _interopRequireDefault(require("@arcblock/ux/lib/SplitButton"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
 var _propTypes = require("prop-types");
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _api = require("../../util/api");
 var _util = require("../../util");
 var _node = require("../../contexts/node");
@@ -155,12 +154,12 @@ function ConnectTo(_ref) {
       name,
       did
     } = _ref2;
-    let _url = endpoint === null || endpoint === void 0 ? void 0 : (_endpoint$replace = endpoint.replace(/\/api\/.+/, '')) === null || _endpoint$replace === void 0 ? void 0 : (_endpoint$replace$tri = _endpoint$replace.trim()) === null || _endpoint$replace$tri === void 0 ? void 0 : _endpoint$replace$tri.replace(/\/$/, '');
-    if (!_url.startsWith('http')) {
+    let normalizeUrl = endpoint === null || endpoint === void 0 ? void 0 : (_endpoint$replace = endpoint.replace(/\/api\/.+/, '')) === null || _endpoint$replace === void 0 ? void 0 : (_endpoint$replace$tri = _endpoint$replace.trim()) === null || _endpoint$replace$tri === void 0 ? void 0 : _endpoint$replace$tri.replace(/\/$/, '');
+    if (!normalizeUrl.startsWith('http')) {
       // eslint-disable-next-line no-param-reassign
-      _url = "https://".concat(_url);
+      normalizeUrl = "https://".concat(normalizeUrl);
     }
-    if (!(0, _isUrl.default)(_url)) {
+    if (!(await (0, _spaces.isValidSpaceGatewayUrl)(normalizeUrl))) {
       _Toast.default.error(t('storage.spaces.gateway.add.invalidUrl'));
       return;
     }
@@ -174,7 +173,7 @@ function ConnectTo(_ref) {
     const spaceGateway = {
       name,
       did,
-      url: _url,
+      url: normalizeUrl,
       endpoint
     };
     await nodeApi.addBlockletSpaceGateway({

package/lib/blocklet/storage/connected.js

@@ -12,7 +12,7 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _connectTo = _interopRequireDefault(require("./connect-to"));
 var _item = _interopRequireDefault(require("./item"));
 var _backups = _interopRequireDefault(require("./backups"));
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
 var _spaces = require("../../util/spaces");
 var _useBackupProgress = _interopRequireDefault(require("../../hooks/use-backup-progress"));

package/lib/blocklet/storage/disconnect.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _connectTo = _interopRequireDefault(require("./connect-to"));
 var _diskInfo = _interopRequireDefault(require("../disk-info"));
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/blocklet/storage/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _spaces = require("../../util/spaces");
 var _disconnect = _interopRequireDefault(require("./disconnect"));
 var _connected = _interopRequireDefault(require("./connected"));

package/lib/blocklet/storage/item.js

@@ -23,7 +23,7 @@ var _action = _interopRequireDefault(require("./action"));
 var _mode = require("../../util/mode");
 var _api = require("../../util/api");
 var _node = require("../../contexts/node");
-var _blocklet = require("../../../lib/contexts/blocklet");
+var _blocklet = require("../../contexts/blocklet");
 var _useBlockletInfoForConnectDidSpaces = _interopRequireDefault(require("../../hooks/use-blocklet-info-for-connect-did-spaces"));
 var _spaces = require("../../util/spaces");
 var _previewNft = _interopRequireDefault(require("./preview-nft"));

package/lib/card-selector.js

@@ -9,6 +9,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+/* eslint-disable react/no-danger */
 /* eslint-disable jsx-a11y/alt-text */
 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) } })); }
@@ -23,7 +24,7 @@ function CardSelector(_ref) {
   } = _ref;
   const [selectedId, setSelectedId] = (0, _react.useState)(0);
   const [translateX, setTranslateX] = (0, _react.useState)(0);
-  const outterCon = (0, _react.useRef)(null);
+  const outerCon = (0, _react.useRef)(null);
 
   // 选择卡片
   const selectedItem = i => {
@@ -33,14 +34,14 @@ function CardSelector(_ref) {
     setSelectedId(i);
 
     // 外部容器大小
-    const outerWidth = outterCon.current.clientWidth;
+    const outerWidth = outerCon.current.clientWidth;
     setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
     onSelect(i);
   };
   (0, _react.useEffect)(() => {
     selectedItem(defaultIndex);
     const func = e => e.preventDefault();
-    outterCon.current.addEventListener('touchmove', func, {
+    outerCon.current.addEventListener('touchmove', func, {
       passive: false
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -62,7 +63,7 @@ function CardSelector(_ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: outterCon,
+    ref: outerCon,
     onTouchStart: touchstart,
     onTouchEnd: touchend,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -70,28 +71,27 @@ function CardSelector(_ref) {
       style: {
         transform: "translate(".concat(-translateX, "px, 0)")
       },
-      children: list.map((e, i) => {
+      children: list.map((x, i) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "card-item ".concat(i === selectedId ? 'selected' : ''),
           style: {
             width,
             height,
             margin: cardSpace / 2
-          }
-          // eslint-disable-next-line react/no-array-index-key
-          ,
-
+          },
           onClick: () => selectedItem(i),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("object", {
-            data: e.src,
-            alt: e.name
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "card-content",
+            dangerouslySetInnerHTML: {
+              __html: x.src
+            }
           })
-        }, i);
+        }, x.id);
       })
     })
   });
 }
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n\n    object {\n      pointer-events: none;\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      object {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n\n    .card-content {\n      pointer-events: none;\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      .card-content {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
 CardSelector.propTypes = {
   list: _propTypes.default.array,
   width: _propTypes.default.number,

package/lib/invitation/invitation-passport.js

@@ -12,6 +12,7 @@ var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+/* eslint-disable react/no-danger */
 /* eslint-disable jsx-a11y/alt-text */
 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) } })); }
@@ -38,7 +39,6 @@ function InvitationPassport(_ref) {
       // can't get avatar, cause user is not login
       // ownerAvatarUrl: user.avatar,
       ownerDid: invitation.info.appDid,
-      isDataUrl: true,
       preferredColor: invitation.info.passportColor || passportColor
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,10 +54,11 @@ function InvitationPassport(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "invite-passport__card",
         onClick: onViewPermission,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("object", {
-          data: display,
-          alt: "passport",
-          className: "invite-passport__cover"
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "invite-passport__cover",
+          dangerouslySetInnerHTML: {
+            __html: display
+          }
         })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
@@ -106,7 +107,7 @@ InvitationPassport.propTypes = {
 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: 0 auto;\n    width: 228px;\n    height: 258px;\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 => {
+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: 0 auto;\n    width: 228px;\n    height: 258px;\n    flex-shrink: 0;\n    .invite-passport__cover {\n      cursor: pointer;\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;

package/lib/invitation/invitation-receive.js

@@ -12,7 +12,7 @@ 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 _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 }; }

package/lib/locales/en.js

@@ -312,7 +312,8 @@ module.exports = {
     manual: 'Manual',
     progress: 'In progress',
     startTime: 'Start time',
-    endTime: 'End time'
+    endTime: 'End time',
+    selected: 'Selected'
   },
   blocklet: {
     external: 'External',
@@ -1356,6 +1357,7 @@ module.exports = {
         tag: 'Connected'
       },
       connectedWithName: 'You have successfully connected to {name}',
+      addedWithName: 'You have successfully added {name}',
       connects: 'Connect',
       reconnect: 'Reconnect',
       addressCannotEmpty: 'Address cannot be empty',
@@ -1391,7 +1393,8 @@ module.exports = {
           title: 'Delete gateway',
           succeeded: 'Delete DID Spaces{name} Success',
           failed: 'Delete gateway failed',
-          failedForConnected: 'Unable to delete a connected DID Spaces'
+          failedForConnected: 'Unable to delete a connected DID Spaces',
+          failedForSelected: 'Unable to delete a selected DID Spaces'
         },
         connect: {
           title: 'Connect DID Spaces',
@@ -1421,14 +1424,18 @@ module.exports = {
       },
       notYet: "You don't have a backup in progress yet...",
       connect: {
-        now: 'Connect',
+        now: 'Connect now',
         title: 'Connect DID Spaces',
         provider: 'Provide your DID Spaces to start backups',
-        useWallet: 'Connect DID Spaces',
+        providerForStorage: 'Please connect your DID Spaces',
+        useWallet: 'Connect with DID Wallet',
+        useWalletReconnect: 'Reconnect with DID Wallet',
         useSpaceGateway: 'Connect using the DID Spaces gateway',
+        useSpaceGatewayReconnect: 'Reconnect using the DID Spaces gateway',
         switchToSpace: 'Switch to Space',
         switchToSpaceSucceeded: 'Switched to Space{name}',
-        succeeded: 'You have successfully connected to DID Spaces'
+        succeeded: 'You have successfully connected to DID Spaces',
+        disconnect: 'disconnect'
       },
       disconnected: {
         tag: 'Disconnected',

package/lib/locales/zh.js

@@ -317,7 +317,8 @@ module.exports = {
     manual: '手动',
     progress: '进行中',
     startTime: '开始时间',
-    endTime: '结束时间'
+    endTime: '结束时间',
+    selected: '已选中'
   },
   blocklet: {
     external: '外部',
@@ -1360,6 +1361,7 @@ module.exports = {
         tag: '已连接'
       },
       connectedWithName: '你已成功连接至 {name}',
+      addedWithName: '你已成功添加 {name}',
       connects: '连接',
       reconnect: '重新连接',
       addressCannotEmpty: '地址不能为空',
@@ -1394,7 +1396,8 @@ module.exports = {
           title: '删除 DID Spaces',
           succeeded: '删除 DID Spaces{name} 成功',
           failed: '删除 DID Spaces 失败',
-          failedForConnected: '无法删除一个已连接的 DID Spaces'
+          failedForConnected: '无法删除一个已连接的 DID Spaces',
+          failedForSelected: '无法删除一个已选中的 DID Spaces'
         },
         connect: {
           title: '连接到 DID Spaces',
@@ -1427,11 +1430,15 @@ module.exports = {
         now: '立即连接',
         title: '使用 DID Wallet 连接',
         provider: '提供您的 DID Spaces 开始备份',
+        providerForStorage: '请连接您的 DID Spaces',
         useWallet: '使用 DID Wallet 连接',
+        useWalletReconnect: '使用 DID Wallet 重新连接',
         useSpaceGateway: '使用 DID Spaces 网关连接',
+        useSpaceGatewayReconnect: '使用 DID Spaces 网关重新连接',
         switchToSpace: '切换至 Space',
         switchToSpaceSucceeded: '已切换至 Space{name}',
-        succeeded: '你已成功连接至 DID Spaces'
+        succeeded: '你已成功连接至 DID Spaces',
+        disconnect: '断开连接'
       },
       disconnected: {
         tag: '连接已断开',

package/lib/lost-passport.js

@@ -218,10 +218,10 @@ function LostPassport(_ref2) {
                   ownerDid: user.did,
                   ownerName: user.fullName,
                   ownerAvatarUrl: user.avatar,
-                  isDataUrl: true,
                   preferredColor: passportColor || 'auto'
                 }),
-                name: x.title
+                name: x.title,
+                id: x.id
               };
             }),
             onSelect: index => handleChange({