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

package/es/blocklet/component/add.js

@@ -48,6 +48,11 @@ const requirePurchase = meta => meta.inStore && isFreeBlocklet(meta) === false;
 const getDIDSpaceCapability = meta => {
   return meta?.capabilities?.didSpace;
 };
+/**
+ * @description
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {string}
+ */
 const getDIDSpaceEndpoint = blocklet => {
   return blocklet?.configs?.find(item => item.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)?.value || null;
 };

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

@@ -0,0 +1,94 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { Box } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import { bool, node } from 'prop-types';
+import styled from '@emotion/styled';
+
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  children: React.ReactNode,
+ *  selected?: false | true,
+ * }} { children, selected }
+ * @return {React.Component}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Selected({
+  children,
+  selected
+}) {
+  return /*#__PURE__*/_jsxs(BoxContainer, {
+    children: [children, /*#__PURE__*/_jsx(Box, {
+      className: `selected-container ${selected ? 'selected' : ''}`,
+      children: /*#__PURE__*/_jsx(CheckIcon, {
+        className: "selected-icon"
+      })
+    })]
+  });
+}
+const BoxContainer = styled(Box)`
+  position: relative;
+
+  .selected-container {
+    display: flex !important;
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    align-items: flex-end;
+    width: 32px;
+    height: 32px;
+    border-radius: 0px 0px 8px;
+    color: rgb(255, 255, 255);
+    overflow: hidden;
+    transition: all 0.4s ease 0s;
+
+    &::after {
+      position: absolute;
+      z-index: 0;
+      left: 60px;
+      top: 60px;
+      display: block;
+      width: 0px;
+      height: 0px;
+      border-width: 16px;
+      border-style: solid;
+      border-color: transparent #1dc1c7 #1dc1c7 transparent;
+      transition: all 0.1s ease 0s;
+      content: '';
+    }
+
+    .selected-icon {
+      visibility: hidden;
+      width: 60%;
+      height: 60%;
+      position: relative;
+      z-index: 2;
+      margin: 0px 1px 1px 0px;
+      font-size: 16px;
+      transition: all 0.2s ease 0s;
+    }
+  }
+
+  .selected-container.selected {
+    &::after {
+      left: 0px;
+      top: 0px;
+    }
+
+    .selected-icon {
+      visibility: visible;
+    }
+  }
+`;
+Selected.propTypes = {
+  children: node.isRequired,
+  selected: bool
+};
+Selected.defaultProps = {
+  selected: false
+};

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

@@ -4,7 +4,6 @@ import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
 import joinUrl from 'url-join';
-import isUrl from 'is-url';
 import toast from '@arcblock/ux/lib/Toast';
 import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
@@ -144,12 +143,12 @@ function ConnectTo({
     name,
     did
   }) => {
-    let _url = endpoint?.replace(/\/api\/.+/, '')?.trim()?.replace(/\/$/, '');
-    if (!_url.startsWith('http')) {
+    let normalizeUrl = endpoint?.replace(/\/api\/.+/, '')?.trim()?.replace(/\/$/, '');
+    if (!normalizeUrl.startsWith('http')) {
       // eslint-disable-next-line no-param-reassign
-      _url = `https://${_url}`;
+      normalizeUrl = `https://${normalizeUrl}`;
     }
-    if (!isUrl(_url)) {
+    if (!(await isValidSpaceGatewayUrl(normalizeUrl))) {
       toast.error(t('storage.spaces.gateway.add.invalidUrl'));
       return;
     }
@@ -163,7 +162,7 @@ function ConnectTo({
     const spaceGateway = {
       name,
       did,
-      url: _url,
+      url: normalizeUrl,
       endpoint
     };
     await nodeApi.addBlockletSpaceGateway({

package/es/card-selector.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 /* eslint-disable jsx-a11y/alt-text */
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
@@ -13,7 +14,7 @@ export default function CardSelector({
 }) {
   const [selectedId, setSelectedId] = useState(0);
   const [translateX, setTranslateX] = useState(0);
-  const outterCon = useRef(null);
+  const outerCon = useRef(null);
 
   // 选择卡片
   const selectedItem = i => {
@@ -23,14 +24,14 @@ export default function CardSelector({
     setSelectedId(i);
 
     // 外部容器大小
-    const outerWidth = outterCon.current.clientWidth;
+    const outerWidth = outerCon.current.clientWidth;
     setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
     onSelect(i);
   };
   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
@@ -52,7 +53,7 @@ export default function CardSelector({
     }
   };
   return /*#__PURE__*/_jsx(Container, {
-    ref: outterCon,
+    ref: outerCon,
     onTouchStart: touchstart,
     onTouchEnd: touchend,
     children: /*#__PURE__*/_jsx("div", {
@@ -60,23 +61,22 @@ export default function CardSelector({
       style: {
         transform: `translate(${-translateX}px, 0)`
       },
-      children: list.map((e, i) => {
+      children: list.map((x, i) => {
         return /*#__PURE__*/_jsx("div", {
           className: `card-item ${i === selectedId ? 'selected' : ''}`,
           style: {
             width,
             height,
             margin: cardSpace / 2
-          }
-          // eslint-disable-next-line react/no-array-index-key
-          ,
-
+          },
           onClick: () => selectedItem(i),
-          children: /*#__PURE__*/_jsx("object", {
-            data: e.src,
-            alt: e.name
+          children: /*#__PURE__*/_jsx("div", {
+            className: "card-content",
+            dangerouslySetInnerHTML: {
+              __html: x.src
+            }
           })
-        }, i);
+        }, x.id);
       })
     })
   });
@@ -98,7 +98,7 @@ const Container = styled.div`
     flex-shrink: 0;
     cursor: pointer;
 
-    object {
+    .card-content {
       pointer-events: none;
       max-width: 100%;
       max-height: 100%;
@@ -110,7 +110,7 @@ const Container = styled.div`
     }
     &.selected {
       cursor: default;
-      object {
+      .card-content {
         outline: #526ded solid 5px;
       }
     }

package/es/invitation/invitation-passport.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 /* eslint-disable jsx-a11y/alt-text */
 import { useCallback, useContext, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -30,7 +31,6 @@ function InvitationPassport({
       // 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
@@ -46,10 +46,11 @@ function InvitationPassport({
       children: /*#__PURE__*/_jsx("div", {
         className: "invite-passport__card",
         onClick: onViewPermission,
-        children: /*#__PURE__*/_jsx("object", {
-          data: display,
-          alt: "passport",
-          className: "invite-passport__cover"
+        children: /*#__PURE__*/_jsx("div", {
+          className: "invite-passport__cover",
+          dangerouslySetInnerHTML: {
+            __html: display
+          }
         })
       })
     }), /*#__PURE__*/_jsx(Dialog, {
@@ -108,6 +109,7 @@ const Root = styled.div`
     height: 258px;
     flex-shrink: 0;
     .invite-passport__cover {
+      cursor: pointer;
       width: 100%;
       height: 100%;
     }

package/es/locales/en.js

@@ -310,7 +310,8 @@ module.exports = {
     manual: 'Manual',
     progress: 'In progress',
     startTime: 'Start time',
-    endTime: 'End time'
+    endTime: 'End time',
+    selected: 'Selected'
   },
   blocklet: {
     external: 'External',
@@ -1354,6 +1355,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',
@@ -1389,7 +1391,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',
@@ -1419,14 +1422,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/es/locales/zh.js

@@ -315,7 +315,8 @@ module.exports = {
     manual: '手动',
     progress: '进行中',
     startTime: '开始时间',
-    endTime: '结束时间'
+    endTime: '结束时间',
+    selected: '已选中'
   },
   blocklet: {
     external: '外部',
@@ -1358,6 +1359,7 @@ module.exports = {
         tag: '已连接'
       },
       connectedWithName: '你已成功连接至 {name}',
+      addedWithName: '你已成功添加 {name}',
       connects: '连接',
       reconnect: '重新连接',
       addressCannotEmpty: '地址不能为空',
@@ -1392,7 +1394,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',
@@ -1425,11 +1428,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/es/lost-passport.js

@@ -207,10 +207,10 @@ function LostPassport({
                   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({

package/es/schema-form/passport-input.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import createPassportSvg from '@abtnode/auth/lib/util/create-passport-svg';
@@ -21,21 +22,21 @@ export default function PassportInput({
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
-    children: [/*#__PURE__*/_jsx("img", {
+    children: [/*#__PURE__*/_jsx("div", {
       style: {
         width: 96,
         marginRight: 12
       },
-      alt: "",
-      src: createPassportSvg({
-        title: 'Owner',
-        issuer: getDisplayName(blocklet),
-        issuerDid: blocklet.appDid,
-        ownerName: 'Your Name',
-        ownerDid: blocklet.appDid,
-        isDataUrl: true,
-        preferredColor: value || 'auto'
-      })
+      dangerouslySetInnerHTML: {
+        __html: createPassportSvg({
+          title: 'Owner',
+          issuer: getDisplayName(blocklet),
+          issuerDid: blocklet.appDid,
+          ownerName: 'Your Name',
+          ownerDid: blocklet.appDid,
+          preferredColor: value || 'auto'
+        })
+      }
     }), /*#__PURE__*/_jsx(ColorInput, {
       ...rest,
       editing: editing,

package/es/team/passports/color.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
@@ -85,21 +86,21 @@ function PassportColor({
       children: [/*#__PURE__*/_jsx(ChromePicker, {
         color: color,
         onChange: c => setColor(c.hex)
-      }), /*#__PURE__*/_jsx("img", {
+      }), /*#__PURE__*/_jsx("div", {
         style: {
-          width: 96,
-          marginLeft: 48
+          width: 220,
+          marginLeft: 24
         },
-        alt: "",
-        src: createPassportSvg({
-          title: 'Owner',
-          issuer: getDisplayName(blocklet),
-          issuerDid: blocklet.appDid,
-          ownerName: 'Your Name',
-          ownerDid: blocklet.appDid,
-          isDataUrl: true,
-          preferredColor: color
-        })
+        dangerouslySetInnerHTML: {
+          __html: createPassportSvg({
+            title: 'Owner',
+            issuer: getDisplayName(blocklet),
+            issuerDid: blocklet.appDid,
+            ownerName: 'Your Name',
+            ownerDid: blocklet.appDid,
+            preferredColor: color
+          })
+        }
       })]
     })
   });

package/es/util/spaces.js

@@ -148,4 +148,13 @@ export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
   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/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/storage/connect-to.js

@@ -10,7 +10,6 @@ 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"));
@@ -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/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/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({

package/lib/schema-form/passport-input.js

@@ -13,6 +13,7 @@ var _colorInput = _interopRequireDefault(require("./color-input"));
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["editing", "value", "onChange", "componentProps"];
+/* eslint-disable react/no-danger */
 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; }
@@ -36,21 +37,21 @@ function PassportInput(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     display: "flex",
     alignItems: "center",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         width: 96,
         marginRight: 12
       },
-      alt: "",
-      src: (0, _createPassportSvg.default)({
-        title: 'Owner',
-        issuer: (0, _util.getDisplayName)(blocklet),
-        issuerDid: blocklet.appDid,
-        ownerName: 'Your Name',
-        ownerDid: blocklet.appDid,
-        isDataUrl: true,
-        preferredColor: value || 'auto'
-      })
+      dangerouslySetInnerHTML: {
+        __html: (0, _createPassportSvg.default)({
+          title: 'Owner',
+          issuer: (0, _util.getDisplayName)(blocklet),
+          issuerDid: blocklet.appDid,
+          ownerName: 'Your Name',
+          ownerDid: blocklet.appDid,
+          preferredColor: value || 'auto'
+        })
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorInput.default, _objectSpread(_objectSpread({}, rest), {}, {
       editing: editing,
       value: editing ? color : value,

package/lib/team/passports/color.js

@@ -27,7 +27,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 _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); } /* eslint-disable react/no-danger */
 function PassportColor(_ref) {
   let {
     onCancel,
@@ -96,21 +96,21 @@ function PassportColor(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.ChromePicker, {
         color: color,
         onChange: c => setColor(c.hex)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
-          width: 96,
-          marginLeft: 48
+          width: 220,
+          marginLeft: 24
         },
-        alt: "",
-        src: (0, _createPassportSvg.default)({
-          title: 'Owner',
-          issuer: (0, _util.getDisplayName)(blocklet),
-          issuerDid: blocklet.appDid,
-          ownerName: 'Your Name',
-          ownerDid: blocklet.appDid,
-          isDataUrl: true,
-          preferredColor: color
-        })
+        dangerouslySetInnerHTML: {
+          __html: (0, _createPassportSvg.default)({
+            title: 'Owner',
+            issuer: (0, _util.getDisplayName)(blocklet),
+            issuerDid: blocklet.appDid,
+            ownerName: 'Your Name',
+            ownerDid: blocklet.appDid,
+            preferredColor: color
+          })
+        }
       })]
     })
   });

package/lib/util/spaces.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getBackupFilesUrlFromEndpoint = getBackupFilesUrlFromEndpoint;
 exports.getDIDSpaceDidFromEndpoint = getDIDSpaceDidFromEndpoint;
+exports.getDIDSpaceEndpoint = void 0;
 exports.getDIDSpaceUrlFromEndpoint = getDIDSpaceUrlFromEndpoint;
 exports.getSpaceBackupEndpoint = getSpaceBackupEndpoint;
 exports.getSpaceGatewayFromEndpoint = getSpaceGatewayFromEndpoint;
@@ -163,4 +164,15 @@ function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
   const strArray = endpoint.replace(/\/$/, '').split('/');
   const spaceDid = strArray.at(-4);
   return joinUrl(prefix, "/api/space/nft/display?spaceDid=".concat(spaceDid));
-}
+}
+
+/**
+ * @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;
+};
+exports.getDIDSpaceEndpoint = getDIDSpaceEndpoint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.14-beta-cb53c14b",
+  "version": "1.16.14-beta-963cb583",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
     "build:lib": "babel src --out-dir lib --copy-files",
     "build:es": "babel --config-file ./babel.config.es.js src --out-dir es --copy-files",
     "autoexports": "node tools/auto-exports.js",
-    "watch": "babel src --out-dir lib -w --copy-files",
+    "watch": "npm run build:es -- -w",
     "coverage": "npm run test -- --coverage",
     "test": "node tools/jest.js"
   },
@@ -27,23 +27,23 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.14-beta-cb53c14b",
-    "@abtnode/constant": "1.16.14-beta-cb53c14b",
-    "@abtnode/util": "1.16.14-beta-cb53c14b",
+    "@abtnode/auth": "1.16.14-beta-963cb583",
+    "@abtnode/constant": "1.16.14-beta-963cb583",
+    "@abtnode/util": "1.16.14-beta-963cb583",
     "@ahooksjs/use-url-state": "^3.5.1",
-    "@arcblock/did": "^1.18.88",
-    "@arcblock/did-connect": "^2.7.0",
+    "@arcblock/did": "^1.18.89",
+    "@arcblock/did-connect": "^2.7.5",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.0",
-    "@arcblock/nft-display": "2.7.0",
-    "@arcblock/react-hooks": "^2.7.0",
-    "@arcblock/terminal": "^2.7.0",
-    "@arcblock/ux": "^2.7.0",
-    "@blocklet/constant": "1.16.14-beta-cb53c14b",
-    "@blocklet/launcher-layout": "2.1.85",
+    "@arcblock/icons": "^2.7.5",
+    "@arcblock/nft-display": "2.7.5",
+    "@arcblock/react-hooks": "^2.7.5",
+    "@arcblock/terminal": "^2.7.5",
+    "@arcblock/ux": "^2.7.5",
+    "@blocklet/constant": "1.16.14-beta-963cb583",
+    "@blocklet/launcher-layout": "2.1.90",
     "@blocklet/list": "^0.12.25",
-    "@blocklet/meta": "1.16.14-beta-cb53c14b",
-    "@blocklet/ui-react": "^2.7.0",
+    "@blocklet/meta": "1.16.14-beta-963cb583",
+    "@blocklet/ui-react": "^2.7.5",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -53,7 +53,7 @@
     "@mui/material": "^5.10.8",
     "@mui/styles": "^5.10.8",
     "@mui/x-date-pickers": "^6.9.0",
-    "@ocap/client": "1.18.88",
+    "@ocap/client": "1.18.89",
     "@uiw/react-markdown-preview": "4.0.6",
     "ahooks": "^3.7.1",
     "axios": "^0.27.2",
@@ -98,7 +98,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "3dcea777b632f9236c10ca888db63c7282992c56",
+  "gitHead": "82bae80cd584a096719d6985740e13f15b4f46bf",
   "exports": {
     ".": {
       "import": "./es/index.js",
@@ -116,6 +116,10 @@
       "import": "./es/blocklet/component/index.js",
       "require": "./lib/blocklet/component/index.js"
     },
+    "./lib/blocklet/component/selected": {
+      "import": "./es/blocklet/component/selected/index.js",
+      "require": "./lib/blocklet/component/selected/index.js"
+    },
     "./lib/blocklet/notification": {
       "import": "./es/blocklet/notification/index.js",
       "require": "./lib/blocklet/notification/index.js"