@abtnode/ux 1.16.13 → 1.16.14-beta-0c29907f

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/blocklet/storage/backups.js

@@ -210,7 +210,11 @@ function SpacesBackupRecords(_ref2) {
   }];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
     children: backups !== null && backups !== void 0 && backups.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
-      title: t('storage.spaces.backup.records'),
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t('storage.spaces.backup.records')
+      }),
       data: backups,
       columns: columns,
       emptyNode: t('storage.spaces.record.emptyData', locale),
@@ -219,10 +223,23 @@ function SpacesBackupRecords(_ref2) {
         filter: false,
         print: false
       }
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      color: "#9397A1",
-      marginTop: "24px",
-      children: t('storage.spaces.record.emptyData')
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        height: "56px",
+        lineHeight: "56px",
+        alignItems: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          fontSize: "1.2rem",
+          fontWeight: "bold",
+          children: t('storage.spaces.backup.records')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        color: "#9397A1",
+        marginTop: "16px",
+        marginBottom: "24px",
+        children: t('storage.spaces.record.emptyData')
+      })]
     })
   }));
 }

package/lib/blocklet/storage/item.js

@@ -13,13 +13,11 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _constant = require("@blocklet/constant");
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
-var _Address = _interopRequireDefault(require("@arcblock/ux/lib/Address"));
-var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 var _ahooks = require("ahooks");
-var _didMotif = require("@arcblock/did-motif");
 var _lodash = require("lodash");
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _switchControl = _interopRequireDefault(require("../component/switch-control"));
 var _action = _interopRequireDefault(require("./action"));
 var _mode = require("../../util/mode");
@@ -368,29 +366,12 @@ function SpaceItem(_ref) {
               fontSize: '14px'
             },
             color: "#9397A1",
-            children: spaceGateway.did && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                fontSize: "14px",
-                color: (0, _didMotif.getDIDMotifInfo)(spaceGateway.did).color,
-                children: "DID:ABT:"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                style: {
-                  display: 'inline-flex',
-                  marginLeft: '8px'
-                },
-                copyable: false,
-                size: 14,
-                compact: true,
-                responsive: false,
-                prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-                  did: spaceGateway.did,
-                  size: 16,
-                  style: {
-                    marginRight: 8
-                  }
-                }),
-                children: spaceGateway.did
-              })]
+            children: spaceGateway.did && /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+              copyable: false,
+              size: 14,
+              compact: true,
+              responsive: false,
+              did: spaceGateway.did
             })
           })
         })]

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: {