@abtnode/ux 1.16.14-beta-a898bfcb → 1.16.14-beta-d802cd3c

package/lib/blocklet/oauth/federated-site-list.js

@@ -0,0 +1,318 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Stars = _interopRequireDefault(require("@mui/icons-material/Stars"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _blocklet = require("../../contexts/blocklet");
+var _node = require("../../contexts/node");
+var _confirm = _interopRequireDefault(require("../../hooks/confirm"));
+var _federatedDetailDialog = _interopRequireDefault(require("./federated-detail-dialog"));
+var _federatedInviteDialog = _interopRequireDefault(require("./federated-invite-dialog"));
+var _switchControl = _interopRequireDefault(require("../component/switch-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/no-unstable-nested-components */
+
+function FederatedSiteList(_ref) {
+  var _blocklet$settings$fe, _blocklet$settings$fe2, _blocklet$site2, _blocklet$site2$domai, _blocklet$site2$domai2;
+  let {
+    mode
+  } = _ref;
+  const federatedInviteDialogRef = (0, _react.useRef)(null);
+  const federatedDetailDialogRef = (0, _react.useRef)(null);
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    confirmApi,
+    confirmHolder
+  } = (0, _confirm.default)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const federatedSites = ((_blocklet$settings$fe = blocklet.settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.sites) || [];
+  const federatedConfig = ((_blocklet$settings$fe2 = blocklet.settings.federated) === null || _blocklet$settings$fe2 === void 0 ? void 0 : _blocklet$settings$fe2.config) || {
+    autoLogin: false
+  };
+  const isMaster = federatedConfig.isMaster !== false;
+  const viewDetail = (0, _ahooks.useMemoizedFn)(row => {
+    var _federatedDetailDialo;
+    (_federatedDetailDialo = federatedDetailDialogRef.current) === null || _federatedDetailDialo === void 0 ? void 0 : _federatedDetailDialo.open(row);
+  });
+  const approveSite = (0, _ahooks.useMemoizedFn)(row => {
+    var _federatedDetailDialo2;
+    (_federatedDetailDialo2 = federatedDetailDialogRef.current) === null || _federatedDetailDialo2 === void 0 ? void 0 : _federatedDetailDialo2.approve(row, refreshBlocklet);
+  });
+  const toRevokeSite = (0, _ahooks.useMemoizedFn)(row => {
+    confirmApi.open({
+      title: t('federated.disableFederatedLogin'),
+      content: t('federated.disableFederatedLoginDescription'),
+      async onConfirm(close) {
+        await api.auditFederatedLogin({
+          input: {
+            appId: row.appId,
+            did: blocklet.meta.did,
+            status: 'revoked'
+          }
+        });
+        close();
+      }
+    });
+  });
+  const toApproveSite = (0, _ahooks.useMemoizedFn)(row => {
+    confirmApi.open({
+      title: t('federated.enableFederatedLogin'),
+      content: t('federated.enableFederatedLoginDescription'),
+      async onConfirm(close) {
+        await api.auditFederatedLogin({
+          input: {
+            appId: row.appId,
+            did: blocklet.meta.did,
+            status: 'approved'
+          }
+        });
+        close();
+      }
+    });
+  });
+  const columns = (0, _ahooks.useCreation)(() => {
+    const list = [{
+      label: t('common.name'),
+      name: 'appName',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          const isSelfMaster = row.isMaster !== false;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            display: "inline-block",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              component: "a",
+              display: "flex",
+              alignItems: "center",
+              href: row.appUrl,
+              target: "_blank",
+              onClick: e => {
+                e.stopPropagation();
+              },
+              children: [isSelfMaster && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+                component: _Stars.default,
+                style: {
+                  marginRight: '4px'
+                }
+              }), row.appName]
+            })
+          });
+        }
+      }
+    }, {
+      label: t('common.did'),
+      name: 'appId',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+            children: row.appId
+          });
+        }
+      }
+    }, {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          const isSelfMaster = row.isMaster !== false;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: isSelfMaster ? '-' : t("federated.status.".concat(row.status))
+          });
+        }
+      }
+    }];
+    if (isMaster) {
+      list.push({
+        label: t('common.actions'),
+        name: 'actions',
+        options: {
+          customBodyRenderLite: rowIndex => {
+            const row = federatedSites[rowIndex];
+            const isSelfMaster = row.isMaster !== false;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              display: "flex",
+              gap: 1,
+              children: !isSelfMaster ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [row.status === 'pending' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    approveSite(row);
+                  },
+                  children: t('federated.status.pending')
+                }), row.status === 'approved' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "contained",
+                  color: "error",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    toRevokeSite(row);
+                  },
+                  style: {
+                    whiteSpace: 'nowrap'
+                  },
+                  children: t('federated.revoke')
+                }), row.status === 'revoked' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "contained",
+                  color: "warning",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    toApproveSite(row);
+                  },
+                  style: {
+                    whiteSpace: 'nowrap'
+                  },
+                  children: t('federated.approve')
+                })]
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [row.status === 'rejected' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "contained",
+                  color: "error",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                  },
+                  children: t('federated.status.rejected')
+                }), row.status === 'revoked' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "contained",
+                  color: "secondary",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                  },
+                  children: t('federated.status.revoked')
+                })]
+              })
+            });
+          }
+        }
+      });
+    }
+    return list;
+  }, [federatedConfig.appId, federatedSites, isMaster]);
+  const tableOptions = (0, _ahooks.useCreation)(() => {
+    return {
+      sort: true,
+      download: false,
+      filter: false,
+      print: false,
+      expandableRowsOnClick: true,
+      onRowClick(e, _ref2) {
+        let {
+          dataIndex
+        } = _ref2;
+        const x = federatedSites[dataIndex];
+        viewDetail(x);
+      }
+    };
+  }, []);
+  const showInvite = (0, _ahooks.useMemoizedFn)(() => {
+    var _blocklet$site, _blocklet$site$domain, _blocklet$site$domain2;
+    const link = (_blocklet$site = blocklet.site) === null || _blocklet$site === void 0 ? void 0 : (_blocklet$site$domain = _blocklet$site.domainAliases) === null || _blocklet$site$domain === void 0 ? void 0 : (_blocklet$site$domain2 = _blocklet$site$domain[0]) === null || _blocklet$site$domain2 === void 0 ? void 0 : _blocklet$site$domain2.href;
+    if (link) {
+      try {
+        var _federatedInviteDialo;
+        const url = new URL(link);
+        (_federatedInviteDialo = federatedInviteDialogRef.current) === null || _federatedInviteDialo === void 0 ? void 0 : _federatedInviteDialo.open({
+          link: url.origin
+        });
+      } catch (_unused) {
+        _Toast.default.error(t('federated.failedToGetFederatedLoginLink'));
+      }
+    }
+  }, [(_blocklet$site2 = blocklet.site) === null || _blocklet$site2 === void 0 ? void 0 : (_blocklet$site2$domai = _blocklet$site2.domainAliases) === null || _blocklet$site2$domai === void 0 ? void 0 : (_blocklet$site2$domai2 = _blocklet$site2$domai[0]) === null || _blocklet$site2$domai2 === void 0 ? void 0 : _blocklet$site2$domai2.href]);
+  const [checked, setChecked] = (0, _react.useState)(federatedConfig.autoLogin || false);
+  const changeAutoLogin = (0, _ahooks.useMemoizedFn)(() => {
+    confirmApi.open({
+      title: checked ? t('federated.disableFederatedAutoLogin') : t('federated.enableFederatedAutoLogin'),
+      content: checked ? t('federated.disableFederatedAutoLoginDescription') : t('federated.enableFederatedAutoLoginDescription'),
+      async onConfirm(close) {
+        await api.configFederated({
+          input: {
+            did: blocklet.meta.did,
+            autoLogin: !checked
+          }
+        });
+        setChecked(prevValue => !prevValue);
+        close();
+      }
+    });
+  }, [setChecked, checked]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      className: "main-table",
+      locale: locale,
+      data: federatedSites,
+      columns: columns,
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "table-toolbar-left",
+        children: mode === 'master' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          onClick: showInvite,
+          children: t('federated.inviteJoinFederatedLogin')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+          sx: {
+            ml: 0,
+            '& span.MuiSwitch-switchBase': {
+              display: 'flex'
+            },
+            '& span.MuiSwitch-track': {
+              display: 'block'
+            }
+          },
+          control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchControl.default, {
+            checked: checked,
+            style: {
+              marginRight: '6px'
+            },
+            onChange: changeAutoLogin
+          }),
+          label: t('federated.enableFederatedAutoLogin')
+        })
+      }),
+      options: tableOptions
+    }), confirmHolder, /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedInviteDialog.default, {
+      ref: federatedInviteDialogRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedDetailDialog.default, {
+      ref: federatedDetailDialogRef
+    })]
+  });
+}
+FederatedSiteList.propTypes = {
+  mode: _propTypes.default.oneOf(['member', 'master'])
+};
+FederatedSiteList.defaultProps = {
+  mode: 'member'
+};
+var _default = FederatedSiteList;
+exports.default = _default;

package/lib/blocklet/oauth/federated.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FederatedLogin;
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _material = require("@mui/material");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _blocklet = require("../../contexts/blocklet");
+var _federatedSiteList = _interopRequireDefault(require("./federated-site-list"));
+var _federatedJoinDialog = _interopRequireDefault(require("./federated-join-dialog"));
+var _federatedInviteDialog = _interopRequireDefault(require("./federated-invite-dialog"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/no-unstable-nested-components */
+
+function FederatedLogin() {
+  var _blocklet$site2, _blocklet$site2$domai, _blocklet$site2$domai2, _blocklet$settings$fe;
+  const federatedInviteRef = (0, _react.useRef)(null);
+  const federatedJoinRef = (0, _react.useRef)(null);
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = (0, _blocklet.useBlockletContext)();
+  const showInvite = (0, _ahooks.useMemoizedFn)(() => {
+    var _blocklet$site, _blocklet$site$domain, _blocklet$site$domain2;
+    const link = (_blocklet$site = blocklet.site) === null || _blocklet$site === void 0 ? void 0 : (_blocklet$site$domain = _blocklet$site.domainAliases) === null || _blocklet$site$domain === void 0 ? void 0 : (_blocklet$site$domain2 = _blocklet$site$domain[0]) === null || _blocklet$site$domain2 === void 0 ? void 0 : _blocklet$site$domain2.href;
+    if (link) {
+      try {
+        var _federatedInviteRef$c;
+        const url = new URL(link);
+        (_federatedInviteRef$c = federatedInviteRef.current) === null || _federatedInviteRef$c === void 0 ? void 0 : _federatedInviteRef$c.open({
+          link: url.origin
+        });
+      } catch (_unused) {
+        _Toast.default.error(t('federated.failedToGetFederatedLoginLink'));
+      }
+    }
+  }, [(_blocklet$site2 = blocklet.site) === null || _blocklet$site2 === void 0 ? void 0 : (_blocklet$site2$domai = _blocklet$site2.domainAliases) === null || _blocklet$site2$domai === void 0 ? void 0 : (_blocklet$site2$domai2 = _blocklet$site2$domai[0]) === null || _blocklet$site2$domai2 === void 0 ? void 0 : _blocklet$site2$domai2.href]);
+  const joinInvite = (0, _ahooks.useMemoizedFn)(() => {
+    var _federatedJoinRef$cur;
+    (_federatedJoinRef$cur = federatedJoinRef.current) === null || _federatedJoinRef$cur === void 0 ? void 0 : _federatedJoinRef$cur.open(() => {
+      refreshBlocklet();
+    });
+  }, [refreshBlocklet]);
+  if (((_blocklet$settings$fe = blocklet.settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.sites.length) > 0) {
+    var _blocklet$settings$fe2;
+    const isMaster = ((_blocklet$settings$fe2 = blocklet.settings.federated) === null || _blocklet$settings$fe2 === void 0 ? void 0 : _blocklet$settings$fe2.config.isMaster) !== false;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedSiteList.default, {
+      mode: isMaster ? 'master' : 'member'
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "200px",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "contained",
+        onClick: showInvite,
+        children: t('federated.inviteJoinFederatedLogin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+        sx: {
+          width: '150px',
+          color: 'rgba(0, 0, 0, 0.3)'
+        },
+        children: "OR"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "outlined",
+        onClick: joinInvite,
+        children: t('federated.joinFederatedLogin')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedInviteDialog.default, {
+      ref: federatedInviteRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_federatedJoinDialog.default, {
+      ref: federatedJoinRef
+    })]
+  });
+}

package/lib/blocklet/oauth/index.js

@@ -12,6 +12,7 @@ var _ahooks = require("ahooks");
 var _react = require("react");
 var _auth = _interopRequireDefault(require("./auth0"));
 var _commonSettings = _interopRequireDefault(require("./common-settings"));
+var _federated = _interopRequireDefault(require("./federated"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function OAuth() {
@@ -25,6 +26,13 @@ function OAuth() {
       children: t('oauth.commonSettings')
     }),
     value: 'settings'
+  }, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      textAlign: "center",
+      width: "100%",
+      children: t('oauth.federated')
+    }),
+    value: 'federated'
   }, {
     label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       textAlign: "center",
@@ -43,6 +51,7 @@ function OAuth() {
   const [currentTab, setCurrentTab] = (0, _react.useState)(tabs[0].value);
   const contents = (0, _ahooks.useCreation)(() => ({
     auth0: /*#__PURE__*/(0, _jsxRuntime.jsx)(_auth.default, {}),
+    federated: /*#__PURE__*/(0, _jsxRuntime.jsx)(_federated.default, {}),
     more: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
         children: t('oauth.comingSoon')

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 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) } })); }
 function CardSelector(_ref) {
@@ -70,7 +71,7 @@ function CardSelector(_ref) {
         transform: "translate(".concat(-translateX, "px, 0)")
       },
       children: list.map((e, i) => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "card-item ".concat(i === selectedId ? 'selected' : ''),
           style: {
             width,
@@ -81,16 +82,18 @@ function CardSelector(_ref) {
           ,
 
           onClick: () => selectedItem(i),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: e.src,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("object", {
+            data: e.src,
             alt: e.name
-          })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "card-item-cover"
+          })]
         }, i);
       })
     })
   });
 }
-const Contianer = _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    img {\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      img {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+const Contianer = _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    position: relative;\n\n    .card-item-cover {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      cursor: pointer;\n      z-index: 99;\n    }\n\n    object {\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"])));
 CardSelector.propTypes = {
   list: _propTypes.default.array,
   width: _propTypes.default.number,

package/lib/contexts/audit-log.js

@@ -25,10 +25,13 @@ function AuditLogProvider(_ref) {
   let {
     children,
     scope = '',
-    categories = []
+    categories = [],
+    showScope,
+    scopeFormatter
   } = _ref;
   const {
-    api: client
+    api: client,
+    info: nodeInfo
   } = (0, _node.useNodeContext)();
   const [auditLogs, setAuditLogs] = (0, _react.useState)([]);
   const [paging, setPaging] = (0, _react.useState)({
@@ -101,6 +104,15 @@ function AuditLogProvider(_ref) {
           scope
         }
       });
+
+      // add link for blocklet audit logs
+      if (showScope) {
+        (res.list || []).forEach(x => {
+          if (x.scope !== nodeInfo.did) {
+            x.link = "/blocklets/".concat(x.scope, "/components");
+          }
+        });
+      }
       setAuditLogs(res.list);
       setPaging(res.paging);
       setLoading(false);
@@ -133,7 +145,9 @@ function AuditLogProvider(_ref) {
     categories: filterCategories,
     setCategory,
     data: auditLogs,
-    paging
+    paging,
+    showScope,
+    scopeFormatter
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: {

package/lib/hooks/blocklet.js

@@ -20,7 +20,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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-next-line import/prefer-default-export
 function useBlocklet(_ref) {
-  var _blocklet$site, _blocklet$site$domain, _blocklet$meta, _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _blocklet$meta5, _blocklet$meta6, _blocklet$meta7;
+  var _blocklet$site, _blocklet$site$domain, _blocklet$meta, _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _blocklet$meta5, _blocklet$meta6;
   let {
     did,
     client,
@@ -212,8 +212,7 @@ function useBlocklet(_ref) {
   useSubscription(_constant.BlockletEvents.storeChange, handleRefreshWithoutRuntime, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta3 = blocklet.meta) === null || _blocklet$meta3 === void 0 ? void 0 : _blocklet$meta3.did, !disableSubscription]);
   useSubscription(_constant.BlockletEvents.installed, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta4 = blocklet.meta) === null || _blocklet$meta4 === void 0 ? void 0 : _blocklet$meta4.did, !disableSubscription]);
   useSubscription(_constant.BlockletEvents.upgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta5 = blocklet.meta) === null || _blocklet$meta5 === void 0 ? void 0 : _blocklet$meta5.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.downgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta6 = blocklet.meta) === null || _blocklet$meta6 === void 0 ? void 0 : _blocklet$meta6.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.updated, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta7 = blocklet.meta) === null || _blocklet$meta7 === void 0 ? void 0 : _blocklet$meta7.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.updated, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta6 = blocklet.meta) === null || _blocklet$meta6 === void 0 ? void 0 : _blocklet$meta6.did, !disableSubscription]);
   const data = blocklet ? (0, _merge.default)(blocklet, {
     site: {
       domainAliases: blocklet.site.domainAliases.map(x => {

package/lib/hooks/confirm.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useConfirm;
+var _react = require("react");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const state = (0, _ahooks.useReactive)({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: _noop.default,
+    onCancel: _noop.default
+  });
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || _noop.default;
+    state.onCancel = params.onCancel || _noop.default;
+  });
+  const reset = (0, _ahooks.useMemoizedFn)(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = _noop.default;
+    state.onCancel = _noop.default;
+  });
+  const close = (0, _ahooks.useMemoizedFn)(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = (0, _ahooks.useMemoizedFn)(() => {
+    close();
+    state === null || state === void 0 ? void 0 : state.onCancel();
+  }, []);
+  const onConfirm = (0, _ahooks.useMemoizedFn)(() => {
+    state === null || state === void 0 ? void 0 : state.onConfirm(close);
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary'
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+function useConfirm() {
+  const confirmRef = (0, _react.useRef)(null);
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
+  });
+  const close = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current2;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    (_confirmRef$current2 = confirmRef.current) === null || _confirmRef$current2 === void 0 ? void 0 : _confirmRef$current2.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}