@arcblock/ux 2.4.43 → 2.4.45

package/lib/SessionManager/index.js

@@ -0,0 +1,408 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _material = require("@mui/material");
+
+var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
+
+var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+
+var _OpenIn = _interopRequireDefault(require("@arcblock/icons/lib/OpenIn"));
+
+var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect"));
+
+var _Switch = _interopRequireDefault(require("@arcblock/icons/lib/Switch"));
+
+var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
+
+var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
+
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
+
+var _Theme = require("../Theme");
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _Address = _interopRequireDefault(require("../Address"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+const _excluded = ["session", "locale", "showText", "showRole", "switchDid", "switchProfile", "switchPassport", "disableLogout", "onLogin", "onLogout", "onSwitchDid", "onSwitchProfile", "onSwitchPassport", "menu", "menuRender", "dark", "size"],
+      _excluded2 = ["svgIcon"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const messages = {
+  zh: {
+    switchDid: '切换账户',
+    switchProfile: '切换用户信息',
+    switchPassport: '切换通行证',
+    disconnect: '退出',
+    connect: '登录',
+    openInWallet: '打开 DID 钱包'
+  },
+  en: {
+    switchDid: 'Switch DID',
+    switchProfile: 'Switch Profile',
+    switchPassport: 'Switch Passport',
+    disconnect: 'Disconnect',
+    connect: 'Connect',
+    openInWallet: 'Open DID Wallet'
+  }
+};
+
+function SessionManager(_ref) {
+  var _session$user, _session$user$avatar, _session$user3, _session$user4;
+
+  let {
+    session,
+    locale,
+    showText,
+    showRole,
+    switchDid,
+    switchProfile,
+    switchPassport,
+    disableLogout,
+    onLogin,
+    onLogout,
+    onSwitchDid,
+    onSwitchProfile,
+    onSwitchPassport,
+    menu,
+    menuRender,
+    dark,
+    size
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const userAnchorRef = (0, _react.useRef)(null);
+  const [userOpen, setUserOpen] = (0, _react.useState)(false); // base64 img maybe have some blank char, need encodeURIComponent to transform it
+
+  const avatar = (_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' '));
+  const currentRole = (0, _react.useMemo)(() => {
+    var _session$user2, _session$user2$passpo;
+
+    return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
+  }, [session.user]);
+  const browser = (0, _useBrowser.default)();
+
+  if (!session.user) {
+    return showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
+      sx: [{
+        borderRadius: '100vw'
+      }, dark && {
+        color: '#fff',
+        borderColor: '#fff'
+      }],
+      variant: "outlined",
+      onClick: _onLogin,
+      "aria-label": "login button"
+    }, rest), {}, {
+      "data-cy": "sessionManager-login",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          lineHeight: '25px'
+        },
+        children: messages[locale].connect
+      })]
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+      onClick: _onLogin,
+      "data-cy": "sessionManager-login",
+      size: "medium",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
+        style: {
+          width: size,
+          height: size,
+          color: dark ? '#fff' : ''
+        }
+      })
+    }));
+  }
+
+  function onToggleUser() {
+    setUserOpen(prevOpen => !prevOpen);
+  }
+
+  function onCloseUser(e) {
+    if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
+      return;
+    }
+
+    setUserOpen(false);
+  }
+
+  function _onLogin() {
+    session.login(onLogin);
+  }
+
+  function _onLogout() {
+    session.logout(function () {
+      setUserOpen(false);
+      onLogout(...arguments);
+    });
+  }
+
+  function _onSwitchDid() {
+    session.switchDid(function () {
+      setUserOpen(false);
+      onSwitchDid(...arguments);
+    });
+  }
+
+  function _onSwitchProfile() {
+    session.switchProfile(function () {
+      setUserOpen(false);
+      onSwitchProfile(...arguments);
+    });
+  }
+
+  function _onSwitchPassport() {
+    setUserOpen(false);
+    session.switchPassport(function () {
+      setUserOpen(false);
+      onSwitchPassport(...arguments);
+    });
+  }
+
+  const message = messages[locale] || messages.en;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
+      ref: userAnchorRef,
+      onClick: onToggleUser
+    }, rest), {}, {
+      "data-cy": "sessionManager-logout-popup",
+      size: "medium",
+      style: {
+        lineHeight: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: size,
+        shape: "circle"
+      })
+    })), userAnchorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, {
+      open: userOpen,
+      disablePortal: true,
+      anchorEl: userAnchorRef.current,
+      placement: "bottom-end",
+      $dark: dark,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+        sx: [theme => ({
+          borderColor: '#F0F0F0',
+          boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
+          borderRadius: theme.spacing(2),
+          overflow: 'hidden',
+          maxWidth: 'calc(100vw - 10px)',
+          '& .MuiChip-root .MuiChip-icon': {
+            color: theme.palette.success.main
+          }
+        }), dark && {
+          backgroundColor: '#27282c',
+          color: '#fff',
+          border: 0,
+          '& .MuiChip-root': {
+            borderColor: '#aaa'
+          },
+          '& .MuiListItem-root, & .MuiChip-label': {
+            color: '#aaa'
+          },
+          '& .MuiListItem-root:hover': {
+            backgroundColor: '#363434'
+          }
+        }],
+        variant: "outlined",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+          onClickAway: onCloseUser,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
+            sx: {
+              p: 0
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "session-manager-user",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "session-manager-user-name",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: session.user.fullName
+                }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                  label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role.toUpperCase()),
+                  size: "small",
+                  variant: "outlined",
+                  sx: {
+                    height: 'auto',
+                    marginRight: 0
+                  },
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                    component: _ShieldCheck.default,
+                    size: "small"
+                  })
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                responsive: false,
+                children: session.user.did
+              })]
+            }), Array.isArray(menu) && menu.map((menuItem, index) => {
+              const {
+                svgIcon
+              } = menuItem,
+                    menuProps = _objectWithoutProperties(menuItem, _excluded2);
+
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
+                className: "session-manager-menu-item"
+              }, _objectSpread(_objectSpread({}, menuProps), {}, {
+                icon: undefined,
+                label: undefined
+              })), {}, {
+                children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                  component: svgIcon,
+                  className: "session-manager-menu-icon"
+                }) : menuItem.icon, menuItem.label]
+              }), index);
+            }), menuRender({
+              classes: {
+                menuItem: 'session-manager-menu-item',
+                menuIcon: 'session-manager-menu-icon'
+              }
+            }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              component: "a",
+              className: "session-manager-menu-item",
+              "data-cy": "sessionManager-openInWallet",
+              href: "https://www.abtwallet.io/",
+              target: "_blank",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _OpenIn.default,
+                className: "session-manager-menu-icon"
+              }), message.openInWallet]
+            }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              className: "session-manager-menu-item",
+              onClick: _onSwitchDid,
+              "data-cy": "sessionManager-switch-trigger",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _Switch.default,
+                className: "session-manager-menu-icon"
+              }), message.switchDid]
+            }), !!switchProfile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              className: "session-manager-menu-item",
+              onClick: _onSwitchProfile,
+              "data-cy": "sessionManager-switch-profile-trigger",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _PersonOutline.default,
+                className: "session-manager-menu-icon"
+              }), message.switchProfile]
+            }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              className: "session-manager-menu-item",
+              onClick: _onSwitchPassport,
+              "data-cy": "sessionManager-switch-passport-trigger",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _VpnKeyOutlined.default,
+                className: "session-manager-menu-icon"
+              }), message.switchPassport]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              className: "session-manager-menu-item",
+              onClick: _onLogout,
+              disabled: disableLogout,
+              "data-cy": "sessionManager-logout-trigger",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+                component: _Disconnect.default,
+                className: "session-manager-menu-icon"
+              }), message.disconnect]
+            })]
+          })
+        })
+      })
+    })]
+  });
+}
+
+SessionManager.propTypes = {
+  session: _propTypes.default.shape({
+    user: _propTypes.default.shape({
+      did: _propTypes.default.string.isRequired,
+      role: _propTypes.default.string.isRequired,
+      fullName: _propTypes.default.string,
+      avatar: _propTypes.default.string,
+      passports: _propTypes.default.arrayOf(_propTypes.default.shape({
+        name: _propTypes.default.string.isRequired,
+        title: _propTypes.default.string.isRequired
+      }))
+    }),
+    login: _propTypes.default.func.isRequired,
+    logout: _propTypes.default.func.isRequired,
+    switchDid: _propTypes.default.func.isRequired,
+    switchProfile: _propTypes.default.func.isRequired,
+    switchPassport: _propTypes.default.func.isRequired
+  }).isRequired,
+  locale: _propTypes.default.string,
+  showText: _propTypes.default.bool,
+  showRole: _propTypes.default.bool,
+  switchDid: _propTypes.default.bool,
+  switchProfile: _propTypes.default.bool,
+  switchPassport: _propTypes.default.bool,
+  disableLogout: _propTypes.default.bool,
+  onLogin: _propTypes.default.func,
+  onLogout: _propTypes.default.func,
+  onSwitchDid: _propTypes.default.func,
+  onSwitchProfile: _propTypes.default.func,
+  onSwitchPassport: _propTypes.default.func,
+  menu: _propTypes.default.array,
+  menuRender: _propTypes.default.func,
+  dark: _propTypes.default.bool,
+  size: _propTypes.default.number
+};
+
+const noop = () => {};
+
+SessionManager.defaultProps = {
+  locale: 'en',
+  showText: false,
+  showRole: false,
+  switchDid: true,
+  switchProfile: true,
+  switchPassport: true,
+  disableLogout: false,
+  menu: [],
+  menuRender: noop,
+  onLogin: noop,
+  onLogout: noop,
+  onSwitchDid: noop,
+  onSwitchProfile: noop,
+  onSwitchPassport: noop,
+  dark: false,
+  size: 24
+};
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.zIndex.tooltip;
+}, _ref3 => {
+  let {
+    $dark
+  } = _ref3;
+  return $dark ? '#aaa' : '#222';
+});
+var _default = SessionManager;
+exports.default = _default;

package/lib/Util/wallet.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.providerName = exports.getWebWalletUrl = exports.checkSameProtocol = void 0;
+
+/* eslint-disable import/prefer-default-export */
+const providerName = 'wallet_url';
+/**
+ * 获取 web wallet url, 常用于为 did connect 组件传递 webWalletUrl 参数,
+ * 更明确的说, 这里获取的应该是 **default web wallet url**,
+ * 如果用户使用自定义的 web wallet url, 不应该使用该方法, 应该显式的将自定义的 web wallet url 传递给 did connect 组件
+ * (参考: https://github.com/blocklet/ocap-playground/issues/98)
+ *
+ * 获取优先级:
+ * - localStorage  使用 provider 注册
+ * - window.env.webWalletUrl
+ * - window.blocklet.webWalletUrl
+ * - production web wallet url
+ */
+
+exports.providerName = providerName;
+
+const getWebWalletUrl = () => {
+  var _window$env, _window$blocklet;
+
+  return window.localStorage.getItem(providerName) || ((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.webWalletUrl) || ((_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.webWalletUrl) || 'https://web.abtwallet.io/';
+}; // 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
+
+
+exports.getWebWalletUrl = getWebWalletUrl;
+
+const checkSameProtocol = webWalletUrl => {
+  const {
+    protocol
+  } = window.location;
+  let walletProtocol = '';
+
+  try {
+    walletProtocol = new URL(webWalletUrl).protocol;
+  } catch (error) {
+    walletProtocol = '';
+  }
+
+  return protocol === walletProtocol;
+};
+
+exports.checkSameProtocol = checkSameProtocol;

package/lib/WebWalletSWKeeper/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withWebWalletSWKeeper = exports.default = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useIdle = _interopRequireDefault(require("react-use/lib/useIdle"));
+
+var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
+
+var _wallet = require("../Util/wallet");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["webWalletUrl", "maxIdleTime"];
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// 默认最大空闲时间: 30min
+const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30; // 可使用 localStorage.setItem('wallet_sw_keeper_disabled', 1) 来禁用嵌入 wallet iframe
+
+const STORAGE_KEY_DISABLED = 'wallet_sw_keeper_disabled'; // iframe id, 如果存在多个 WebWalletSWKeeper 组件实例, 共享此 id, 保证只有一个 iframe
+
+let id;
+
+const injectIframe = webWalletUrl => {
+  const iframe = document.createElement('iframe');
+  iframe.title = 'abt wallet';
+  iframe.id = id;
+  iframe.style.width = 0;
+  iframe.style.height = 0;
+  iframe.style.border = 0; // https://stackoverflow.com/questions/27858989/iframe-with-0-height-creates-a-gap
+
+  iframe.style.display = 'block'; // fix: 页面自动滚动到底部问题 (https://github.com/blocklet/abt-wallet/issues/1160)
+  //      top: 0 可能不是必须的, 但测试中发现, 如果不设置, 在某些特殊情况下似乎也会导致页面自动滚动到底部
+
+  iframe.style.position = 'absolute';
+  iframe.style.top = 0;
+  iframe.src = "".concat(webWalletUrl, "?action=iframe");
+  document.body.appendChild(iframe);
+};
+
+const removeIframe = () => {
+  const iframe = document.getElementById(id);
+
+  if (iframe) {
+    document.body.removeChild(iframe);
+  }
+};
+
+const cleanup = () => {
+  removeIframe();
+  id = null;
+};
+
+const enable = webWalletUrl => {
+  if (!id) {
+    id = "web_wallet_sw_keeper_".concat(Date.now());
+    injectIframe(webWalletUrl);
+  }
+}; // 该组件通过嵌入一个 web wallet iframe 帮助 web wallet service worker 延最大空闲时间
+
+
+function WebWalletSWKeeper(_ref) {
+  let {
+    webWalletUrl,
+    maxIdleTime
+  } = _ref;
+  const isIdle = (0, _useIdle.default)(maxIdleTime); // 用户操作空闲时间超过 maxIdleTime 时禁用, 活跃时启用
+
+  (0, _react.useEffect)(() => {
+    if (isIdle) {
+      cleanup();
+    } else {
+      enable(webWalletUrl);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isIdle]); // 组件销毁时自动清理
+
+  (0, _react.useEffect)(() => () => cleanup(), []);
+  return null;
+}
+
+WebWalletSWKeeper.propTypes = {
+  webWalletUrl: _propTypes.default.string.isRequired,
+  maxIdleTime: _propTypes.default.number
+};
+WebWalletSWKeeper.defaultProps = {
+  maxIdleTime: DEFAULT_MAX_IDLE_TIME
+};
+var _default = WebWalletSWKeeper;
+exports.default = _default;
+
+const withWebWalletSWKeeper = Component => {
+  // eslint-disable-next-line react/prop-types
+  return function WithWebWalletSWKeeperComponent(_ref2) {
+    let {
+      webWalletUrl,
+      maxIdleTime
+    } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+
+    const browser = (0, _useBrowser.default)(); // eslint-disable-next-line no-param-reassign
+
+    webWalletUrl = webWalletUrl || (0, _wallet.getWebWalletUrl)();
+    const [disabled] = (0, _useLocalStorage.default)(STORAGE_KEY_DISABLED);
+    const webWalletExtension = window.ABT_DEV || window.ABT;
+    const isSameProtocol = (0, _wallet.checkSameProtocol)(webWalletUrl);
+    const isWalletWebview = browser.wallet; // 以下几种情况不会嵌入 wallet iframe :
+    // - 通过设置 localStorage#wallet_sw_keeper_disabled = 1 明确禁止 (开发调试过程中可以使用, 避免控制台打印一堆日志影响调试)
+    // - 检查到 wallet 浏览器插件
+    // - webWalletUrl 与当前页面 url 的 protocol 不同
+    // - wallet webview
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!disabled && !webWalletExtension && isSameProtocol && !isWalletWebview && /*#__PURE__*/(0, _jsxRuntime.jsx)(WebWalletSWKeeper, {
+        webWalletUrl: webWalletUrl,
+        maxIdleTime: maxIdleTime
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
+        webWalletUrl: webWalletUrl
+      }, rest))]
+    });
+  };
+};
+
+exports.withWebWalletSWKeeper = withWebWalletSWKeeper;