@arcblock/ux 2.4.44 → 2.4.46

package/src/Avatar/index.js

@@ -0,0 +1,141 @@
+/* eslint-disable react/no-unused-prop-types */
+import { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Shape } from '@arcblock/did-motif';
+import Box from '@mui/material/Box';
+import Img from '../Img';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import DIDMotif from './did-motif';
+import blockies from './etherscan-blockies';
+
+// 参考: asset-chain @arcblock/did
+const isEthereumDid = (did) => {
+  const address = did.replace('did:abt:', '');
+  // check if it has the basic requirements of an address
+  if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+    return false;
+  }
+  return true;
+};
+
+// 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+function Avatar(props) {
+  const [imgError, setImgError] = useState(false);
+  const newProps = mergeProps(props, Avatar, []);
+  const { did = '', size, src, variant, animation, shape, ...rest } = newProps;
+
+  // ethereum blockies
+  const blockyIcon = useMemo(() => {
+    if (isEthereumDid(did)) {
+      return blockies
+        .createIcon({
+          seed: did.replace('did:abt:', '').toLowerCase(),
+          size: 8,
+          scale: 16,
+        })
+        .toDataURL();
+    }
+    return null;
+  }, [did]);
+
+  // 如果显式传入 src 则直接使用 src
+  if (src && !imgError) {
+    return (
+      <StyledImg
+        width={size}
+        src={src}
+        alt={did}
+        onError={() => setImgError(true)}
+        {...rest}
+        className={`avatar-img--${variant} ${rest.className}`}
+      />
+    );
+  }
+  // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
+  if (blockyIcon) {
+    // blocky icon 要与灰色卡片矩形留有空间
+    const padding = size > 24 ? 4 : 2;
+    return (
+      <BlockyIconContainer $size={size} {...rest}>
+        <div className="blocky-icon-inner">
+          <Img width={size * 0.7 - padding * 2} src={blockyIcon} alt={did} />
+        </div>
+      </BlockyIconContainer>
+    );
+  }
+  if (did) {
+    // 渲染 did motif
+    return (
+      <DIDMotif
+        did={did.replace('did:abt:', '')}
+        size={size}
+        animation={animation}
+        shape={Shape[(shape || '').toUpperCase()]}
+        responsive={newProps.responsive}
+        {...rest}
+      />
+    );
+  }
+  throw new Error(`Invalid DID: ${did}`);
+}
+
+Avatar.propTypes = {
+  did: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
+  // animation 仅对 did motif 有效
+  animation: PropTypes.bool,
+  // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
+  shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+};
+
+Avatar.defaultProps = {
+  size: 36,
+  variant: 'default',
+  animation: false,
+  shape: '',
+};
+
+const BlockyIconContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  .blocky-icon-inner {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${(props) => props.$size}px;
+    height: ${(props) => props.$size * 0.7}px;
+    border-radius: ${(props) => Math.min(10, Math.floor(0.1 * props.$size + 2))}px;
+    background: #ddd;
+  }
+`;
+
+const StyledImg = styled(Img)`
+  &.avatar-img--rounded {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  &.avatar-img--circle {
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+
+export default function AvatarWithErrorBoundary(props) {
+  const size = props.size || 36;
+  const borderRadius = { rounded: '4px', circle: '100%' }[props.variant] || 0;
+  return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={() => <Box width={size} height={size} bgcolor="grey.300" borderRadius={borderRadius} />}>
+      <Avatar {...props} />
+    </ErrorBoundary>
+  );
+}
+
+AvatarWithErrorBoundary.propTypes = Avatar.propTypes;

package/src/DidLogo/index.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import DidLogoIcon from '@arcblock/icons/lib/DidLogo';
+
+const defaultStyle = {
+  width: 'auto',
+  height: '1em',
+  fill: 'currentColor',
+};
+
+export default function DidLogo({ style, size, className }) {
+  const height = Number(size) > 0 ? `${Number(size)}px` : size;
+  return (
+    <DidLogoIcon
+      className={`${className}`.trim()}
+      style={Object.assign({}, defaultStyle, style, height ? { height } : {})}
+    />
+  );
+}
+
+DidLogo.propTypes = {
+  style: PropTypes.object,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+DidLogo.defaultProps = {
+  style: defaultStyle,
+  size: 0,
+  className: '',
+};

package/src/SessionManager/index.js

@@ -0,0 +1,366 @@
+/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/jsx-no-bind */
+import { useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { IconButton, ClickAwayListener, MenuList, MenuItem, Paper, Popper, SvgIcon, Button, Chip } from '@mui/material';
+import AccountIcon from '@arcblock/icons/lib/Account';
+import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import OpenInIcon from '@arcblock/icons/lib/OpenIn';
+import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
+import SwitchDidIcon from '@arcblock/icons/lib/Switch';
+import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
+import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import { styled } from '../Theme';
+
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+
+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({
+  session,
+  locale,
+  showText,
+  showRole,
+  switchDid,
+  switchProfile,
+  switchPassport,
+  disableLogout,
+  onLogin,
+  onLogout,
+  onSwitchDid,
+  onSwitchProfile,
+  onSwitchPassport,
+  menu,
+  menuRender,
+  dark,
+  size,
+  ...rest
+}) {
+  const userAnchorRef = useRef(null);
+  const [userOpen, setUserOpen] = useState(false);
+
+  // base64 img maybe have some blank char, need encodeURIComponent to transform it
+  const avatar = session.user?.avatar?.replace(/\s/g, encodeURIComponent(' '));
+  const currentRole = useMemo(
+    () => session.user?.passports?.find((item) => item.name === session.user.role),
+    [session.user]
+  );
+  const browser = useBrowser();
+
+  if (!session.user) {
+    return showText ? (
+      <Button
+        sx={[{ borderRadius: '100vw' }, dark && { color: '#fff', borderColor: '#fff' }]}
+        variant="outlined"
+        onClick={_onLogin}
+        aria-label="login button"
+        {...rest}
+        data-cy="sessionManager-login">
+        <AccountIcon />
+        <span style={{ lineHeight: '25px' }}>{messages[locale].connect}</span>
+      </Button>
+    ) : (
+      <IconButton {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
+        <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
+      </IconButton>
+    );
+  }
+
+  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((...args) => {
+      setUserOpen(false);
+      onLogout(...args);
+    });
+  }
+  function _onSwitchDid() {
+    session.switchDid((...args) => {
+      setUserOpen(false);
+      onSwitchDid(...args);
+    });
+  }
+  function _onSwitchProfile() {
+    session.switchProfile((...args) => {
+      setUserOpen(false);
+      onSwitchProfile(...args);
+    });
+  }
+  function _onSwitchPassport() {
+    setUserOpen(false);
+    session.switchPassport((...args) => {
+      setUserOpen(false);
+      onSwitchPassport(...args);
+    });
+  }
+
+  const message = messages[locale] || messages.en;
+
+  return (
+    <>
+      <IconButton
+        ref={userAnchorRef}
+        onClick={onToggleUser}
+        {...rest}
+        data-cy="sessionManager-logout-popup"
+        size="medium"
+        style={{ lineHeight: 1 }}>
+        <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
+      </IconButton>
+      {userAnchorRef.current && (
+        <StyledPopper
+          open={userOpen}
+          disablePortal
+          anchorEl={userAnchorRef.current}
+          placement="bottom-end"
+          $dark={dark}>
+          <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">
+            <ClickAwayListener onClickAway={onCloseUser}>
+              <MenuList sx={{ p: 0 }}>
+                <div className="session-manager-user">
+                  <div className="session-manager-user-name">
+                    <span>{session.user.fullName}</span>
+                    {!!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && (
+                      <Chip
+                        label={currentRole?.title || session.user?.role.toUpperCase()}
+                        size="small"
+                        variant="outlined"
+                        sx={{ height: 'auto', marginRight: 0 }}
+                        icon={<SvgIcon component={ShieldCheck} size="small" />}
+                      />
+                    )}
+                  </div>
+                  <DidAddress responsive={false}>{session.user.did}</DidAddress>
+                </div>
+                {Array.isArray(menu) &&
+                  menu.map((menuItem, index) => {
+                    const { svgIcon, ...menuProps } = menuItem;
+                    return (
+                      <MenuItem
+                        key={index}
+                        className="session-manager-menu-item"
+                        {...{
+                          ...menuProps,
+                          icon: undefined,
+                          label: undefined,
+                        }}>
+                        {svgIcon
+                          ? svgIcon && <SvgIcon component={svgIcon} className="session-manager-menu-icon" />
+                          : menuItem.icon}
+                        {menuItem.label}
+                      </MenuItem>
+                    );
+                  })}
+                {menuRender({
+                  classes: {
+                    menuItem: 'session-manager-menu-item',
+                    menuIcon: 'session-manager-menu-icon',
+                  },
+                })}
+                {!browser.wallet && (
+                  <MenuItem
+                    component="a"
+                    className="session-manager-menu-item"
+                    data-cy="sessionManager-openInWallet"
+                    href="https://www.abtwallet.io/"
+                    target="_blank">
+                    <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
+                    {message.openInWallet}
+                  </MenuItem>
+                )}
+                {!!switchDid && (
+                  <MenuItem
+                    className="session-manager-menu-item"
+                    onClick={_onSwitchDid}
+                    data-cy="sessionManager-switch-trigger">
+                    <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
+                    {message.switchDid}
+                  </MenuItem>
+                )}
+                {!!switchProfile && (
+                  <MenuItem
+                    className="session-manager-menu-item"
+                    onClick={_onSwitchProfile}
+                    data-cy="sessionManager-switch-profile-trigger">
+                    <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
+                    {message.switchProfile}
+                  </MenuItem>
+                )}
+                {!!switchPassport && (
+                  <MenuItem
+                    className="session-manager-menu-item"
+                    onClick={_onSwitchPassport}
+                    data-cy="sessionManager-switch-passport-trigger">
+                    <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
+                    {message.switchPassport}
+                  </MenuItem>
+                )}
+                <MenuItem
+                  className="session-manager-menu-item"
+                  onClick={_onLogout}
+                  disabled={disableLogout}
+                  data-cy="sessionManager-logout-trigger">
+                  <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
+                  {message.disconnect}
+                </MenuItem>
+              </MenuList>
+            </ClickAwayListener>
+          </Paper>
+        </StyledPopper>
+      )}
+    </>
+  );
+}
+
+SessionManager.propTypes = {
+  session: PropTypes.shape({
+    user: PropTypes.shape({
+      did: PropTypes.string.isRequired,
+      role: PropTypes.string.isRequired,
+      fullName: PropTypes.string,
+      avatar: PropTypes.string,
+      passports: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+          title: PropTypes.string.isRequired,
+        })
+      ),
+    }),
+    login: PropTypes.func.isRequired,
+    logout: PropTypes.func.isRequired,
+    switchDid: PropTypes.func.isRequired,
+    switchProfile: PropTypes.func.isRequired,
+    switchPassport: PropTypes.func.isRequired,
+  }).isRequired,
+  locale: PropTypes.string,
+  showText: PropTypes.bool,
+  showRole: PropTypes.bool,
+  switchDid: PropTypes.bool,
+  switchProfile: PropTypes.bool,
+  switchPassport: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogin: PropTypes.func,
+  onLogout: PropTypes.func,
+  onSwitchDid: PropTypes.func,
+  onSwitchProfile: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  dark: PropTypes.bool,
+  size: PropTypes.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 = styled(Popper)`
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
+  .MuiList-root {
+    width: 280px;
+  }
+  .session-manager-user {
+    font-size: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px 24px 10px;
+  }
+  .session-manager-user-name {
+    font-size: 20px;
+    color: ${({ $dark }) => ($dark ? '#aaa' : '#222')};
+    font-weight: bold;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .session-manager-menu-item {
+    padding: 18.5px 24px;
+    color: #777;
+    font-size: 16px;
+    &:hover {
+      background-color: #fbfbfb;
+    }
+  }
+  .session-manager-menu-icon {
+    color: #999;
+    margin-right: 16px;
+  }
+`;
+
+export default SessionManager;

package/src/Util/wallet.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+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
+ */
+export const getWebWalletUrl = () => {
+  return (
+    window.localStorage.getItem(providerName) ||
+    window.env?.webWalletUrl ||
+    window.blocklet?.webWalletUrl ||
+    'https://web.abtwallet.io/'
+  );
+};
+
+// 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
+export const checkSameProtocol = (webWalletUrl) => {
+  const { protocol } = window.location;
+  let walletProtocol = '';
+  try {
+    walletProtocol = new URL(webWalletUrl).protocol;
+  } catch (error) {
+    walletProtocol = '';
+  }
+  return protocol === walletProtocol;
+};

package/src/WebWalletSWKeeper/index.js

@@ -0,0 +1,103 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useIdle from 'react-use/lib/useIdle';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
+
+// 默认最大空闲时间: 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 = `${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_${Date.now()}`;
+    injectIframe(webWalletUrl);
+  }
+};
+
+// 该组件通过嵌入一个 web wallet iframe 帮助 web wallet service worker 延最大空闲时间
+function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }) {
+  const isIdle = useIdle(maxIdleTime);
+  // 用户操作空闲时间超过 maxIdleTime 时禁用, 活跃时启用
+  useEffect(() => {
+    if (isIdle) {
+      cleanup();
+    } else {
+      enable(webWalletUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIdle]);
+  // 组件销毁时自动清理
+  useEffect(() => () => cleanup(), []);
+  return null;
+}
+
+WebWalletSWKeeper.propTypes = {
+  webWalletUrl: PropTypes.string.isRequired,
+  maxIdleTime: PropTypes.number,
+};
+
+WebWalletSWKeeper.defaultProps = {
+  maxIdleTime: DEFAULT_MAX_IDLE_TIME,
+};
+
+export default WebWalletSWKeeper;
+
+export const withWebWalletSWKeeper = (Component) => {
+  // eslint-disable-next-line react/prop-types
+  return function WithWebWalletSWKeeperComponent({ webWalletUrl, maxIdleTime, ...rest }) {
+    const browser = useBrowser();
+    // eslint-disable-next-line no-param-reassign
+    webWalletUrl = webWalletUrl || getWebWalletUrl();
+    const [disabled] = useLocalStorage(STORAGE_KEY_DISABLED);
+    const webWalletExtension = window.ABT_DEV || window.ABT;
+    const isSameProtocol = checkSameProtocol(webWalletUrl);
+    const isWalletWebview = browser.wallet;
+    // 以下几种情况不会嵌入 wallet iframe :
+    // - 通过设置 localStorage#wallet_sw_keeper_disabled = 1 明确禁止 (开发调试过程中可以使用, 避免控制台打印一堆日志影响调试)
+    // - 检查到 wallet 浏览器插件
+    // - webWalletUrl 与当前页面 url 的 protocol 不同
+    // - wallet webview
+    return (
+      <>
+        {!disabled && !webWalletExtension && isSameProtocol && !isWalletWebview && (
+          <WebWalletSWKeeper webWalletUrl={webWalletUrl} maxIdleTime={maxIdleTime} />
+        )}
+        <Component webWalletUrl={webWalletUrl} {...rest} />
+      </>
+    );
+  };
+};