@arcblock/did-connect-react 3.4.14 → 3.5.0

package/src/Connect/components/login-item/mobile-login-item.jsx

@@ -1,181 +0,0 @@
-import PropTypes from 'prop-types';
-import { CircularProgress } from '@mui/material';
-import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import bridge from '@arcblock/bridge';
-import { useBrowser } from '@arcblock/react-hooks';
-import noop from 'lodash/noop';
-import { useImperativeHandle } from 'react';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
-
-import { useStateContext } from '../../contexts/state';
-import LoginMethodItem from './login-method-item';
-import { logger } from '../../../utils';
-import useAuthUrl from '../../hooks/auth-url';
-
-export default function MobileLoginItem({
-  isTablet = false,
-  ref = null,
-  tokenState,
-  locale,
-  tokenKey,
-  onClick = noop,
-  disableSwitchApp = false,
-  ...rest
-}) {
-  const currentState = useReactive({
-    loading: false,
-  });
-  const { isWalletWebview } = useStateContext();
-  const title = 'DID Wallet';
-  const browser = useBrowser();
-
-  const callbackUrl = new URL(window.location.href);
-  const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState });
-
-  const deepLink = useCreation(() => {
-    if (!tokenState.url) {
-      return '';
-    }
-
-    callbackUrl.searchParams.set('tokenKey', tokenState.token);
-
-    const link = new URL(urlWithParams);
-    if (!browser.wallet) {
-      link.searchParams.set('callback', encodeURIComponent(callbackUrl));
-      link.searchParams.set('callback_delay', 1500);
-    }
-    link.searchParams.set('locale', locale);
-    const encoder = new TextEncoder();
-    const currentUrlLength = link.href.length;
-
-    let appInfo = '';
-    let memberAppInfo = '';
-    try {
-      if (tokenState.appInfo) {
-        const encoded = encoder.encode(JSON.stringify(tokenState.appInfo));
-        appInfo = btoa(String.fromCharCode(...encoded));
-      }
-      if (tokenState.memberAppInfo) {
-        const encoded = encoder.encode(JSON.stringify(tokenState.memberAppInfo));
-        memberAppInfo = btoa(String.fromCharCode(...encoded));
-      }
-      // NOTICE: 当长度过长时，不再添加 appInfo & memberAppInfo
-      if (
-        currentUrlLength + 'appInfo='.length + appInfo.length + 'memberAppInfo='.length + memberAppInfo.length >
-        2000
-      ) {
-        logger.warn('URL too long, drop appInfo & memberAppInfo', { appInfo, memberAppInfo });
-        throw new Error('URL too long');
-      }
-
-      if (memberAppInfo) {
-        if (appInfo) {
-          // 在有 memberAppInfo 的情况下，两个值必须一起写入
-          link.searchParams.set('appInfo', appInfo);
-          link.searchParams.set('memberAppInfo', memberAppInfo);
-        }
-      } else if (appInfo) {
-        link.searchParams.set('appInfo', appInfo);
-      }
-    } catch (error) {
-      logger.warn('Failed to convert appInfo & memberAppInfo', error);
-    }
-    return link.href.replace(/^https?:\/\//, 'abt://');
-  }, [tokenKey, tokenState.token, tokenState.appInfo, tokenState.memberAppInfo, tokenState.url]);
-
-  const handleWalletConnect = useMemoizedFn(() => {
-    currentState.loading = true;
-    setTimeout(() => {
-      bridge.call('authAction', { action: 'auth', deepLink });
-    }, 600);
-    setTimeout(() => {
-      currentState.loading = false;
-    }, 2000);
-  });
-
-  // 此处用于在 mobile 浏览器中，用户在点击打开按钮时，直接渲染 scanned 的样式（解决 safari 在页面隐藏后，无法正常发起请求带来的体验较差）
-  // 需要在页面再次可见时，将状态设置为正确的值
-  const handleOpenDeeplink = useMemoizedFn(() => {
-    tokenState.checking = true;
-    tokenState.status = 'scanned';
-  });
-
-  const modifyProps = {};
-  if (!isWalletWebview && browser.mobile.any) {
-    modifyProps.component = 'a';
-    modifyProps.href = deepLink;
-  }
-
-  if (!tokenState.url) {
-    modifyProps.sx = {
-      cursor: 'not-allowed',
-    };
-  }
-
-  const handleConnectFn = useMemoizedFn((fallback) => {
-    if (!tokenState.url) {
-      return;
-    }
-
-    if (isWalletWebview) {
-      handleWalletConnect();
-    } else if (browser.mobile.any || isTablet) {
-      handleOpenDeeplink();
-    } else {
-      fallback();
-    }
-  });
-
-  const handleConnect = useMemoizedFn(() => {
-    handleConnectFn(onClick);
-  });
-
-  useImperativeHandle(ref, () => ({
-    connect: handleConnectFn,
-  }));
-
-  return (
-    <LoginMethodItem
-      {...rest}
-      {...modifyProps}
-      sx={mergeSx(rest?.sx, modifyProps?.sx)}
-      title={title}
-      icon={
-        currentState.loading || !tokenState.url ? (
-          <CircularProgress
-            color="primary"
-            size={LOGIN_PROVIDER_ICON_SIZE}
-            sx={{
-              '& svg': {
-                transform: 'scale(0.75)',
-              },
-            }}
-          />
-        ) : (
-          <ProviderIcon
-            provider={LOGIN_PROVIDER.DID_WALLET}
-            sx={{
-              width: LOGIN_PROVIDER_ICON_SIZE,
-              height: LOGIN_PROVIDER_ICON_SIZE,
-              transform: 'scale(0.9)',
-            }}
-          />
-        )
-      }
-      iconScale={1}
-      onClick={handleConnect}
-    />
-  );
-}
-
-MobileLoginItem.propTypes = {
-  tokenState: PropTypes.object.isRequired,
-  tokenKey: PropTypes.string.isRequired,
-  locale: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  disableSwitchApp: PropTypes.bool,
-  ref: PropTypes.any,
-  isTablet: PropTypes.bool,
-};

package/src/Connect/components/login-item/passkey-login-item.jsx

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import { useImperativeHandle, useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
-
-import PasskeyActions from '../../../Passkey/actions';
-import { getAppId } from '../../../utils';
-import { useStateContext } from '../../contexts/state';
-
-export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, behavior = 'none', ...rest }) {
-  const { extraParams, lastLoginMethod } = useStateContext();
-  const passkeyActionRef = useRef(null);
-
-  const handleSuccess = useMemoizedFn((result) =>
-    onSuccess(
-      {
-        ...result,
-        encrypted: false,
-      },
-      (val) => val,
-      {
-        sourceAppPid: extraParams?.sourceAppPid,
-        connected_app: getAppId(tokenState.appInfo, tokenState.memberAppInfo),
-      }
-    )
-  );
-
-  useImperativeHandle(ref, () => ({
-    connect: passkeyActionRef.current.click,
-  }));
-
-  if (behavior === 'none') {
-    return null;
-  }
-
-  return (
-    <PasskeyActions
-      {...rest}
-      ref={passkeyActionRef}
-      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.PASSKEY}
-      action={tokenState.action}
-      behavior={behavior}
-      onSuccess={handleSuccess}
-      extraParams={extraParams}
-    />
-  );
-}
-
-PasskeyLoginItem.propTypes = {
-  onSuccess: PropTypes.func.isRequired,
-  tokenState: PropTypes.object.isRequired,
-  behavior: PropTypes.oneOf(['none', 'both', 'only-existing', 'only-new']),
-  ref: PropTypes.any,
-};

package/src/Connect/components/login-item/wallet-login-options.jsx

@@ -1,129 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box, Divider } from '@mui/material';
-import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
-import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
-import { detectWalletExtension } from '@arcblock/ux/lib/Util';
-import { useCreation } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-
-import MobileLoginItem from './mobile-login-item';
-import WebLoginItem from './web-login-item';
-import BackButton from '../back-button';
-import { useStateContext } from '../../contexts/state';
-
-export default function WalletLoginOptions({
-  qrcode,
-  tokenState,
-  webWalletUrl = getWebWalletUrl(),
-  size = 'small',
-  disableSwitchApp = false,
-  tokenKey,
-  walletLoginRef = null,
-  webLoginRef = null,
-  onMobileLoginClick,
-  onWebLoginClick,
-  onBack,
-}) {
-  const { t, locale } = useStateContext();
-  const browser = useBrowser();
-  const isSameProtocol = checkSameProtocol(webWalletUrl);
-  const extension = detectWalletExtension();
-
-  const isTablet = useCreation(() => {
-    const ua = navigator.userAgent.toLowerCase();
-
-    // 1. 判断是否是 iPad (iOS 13+ 可能会显示为 Macintosh，需要结合触控点判断)
-    const isIpad = /ipad/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-
-    // 2. 判断是否是 Android 平板 (即 User Agent 包含 Android 但不包含 Mobile)
-    const isAndroidTablet = /android/.test(ua) && !/mobile/.test(ua);
-
-    // 3. 综合判断平板
-    if (isIpad || isAndroidTablet) {
-      return true;
-    }
-    return false;
-  }, []);
-  return (
-    <>
-      {qrcode}
-
-      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-        <Box sx={{ width: '100%' }}>
-          <Divider
-            orientation="horizontal"
-            sx={{
-              fontSize: 12,
-              color: 'text.hint',
-              '&::before, &::after': {
-                borderColor: 'divider',
-              },
-            }}>
-            or
-          </Divider>
-        </Box>
-        <Box
-          sx={{
-            width: '100%',
-            '.arc-login-item': {
-              width: '100%',
-              justifyContent: 'center',
-              '& > .arc-login-item__body': {
-                flex: 'unset',
-              },
-              '& > .other-item-icon': {
-                display: 'none !important',
-              },
-            },
-          }}>
-          {isTablet ? (
-            <MobileLoginItem
-              t={t}
-              key={LOGIN_PROVIDER.WALLET}
-              ref={walletLoginRef}
-              tokenState={tokenState}
-              isTablet={isTablet}
-              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-              locale={locale}
-              tokenKey={tokenKey}
-              disableSwitchApp={disableSwitchApp}
-              onClick={onMobileLoginClick}
-            />
-          ) : (
-            // eslint-disable-next-line react/jsx-no-useless-fragment
-            <>
-              {(isSameProtocol || extension) && (!browser.mobile.any || extension) ? (
-                <WebLoginItem
-                  t={t}
-                  key={LOGIN_PROVIDER.WALLET}
-                  ref={webLoginRef}
-                  tokenState={tokenState}
-                  webWalletUrl={webWalletUrl}
-                  sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-                  disableSwitchApp={disableSwitchApp}
-                  onClick={onWebLoginClick}
-                />
-              ) : null}
-            </>
-          )}
-        </Box>
-
-        {onBack && <BackButton variant="text" onClick={onBack} />}
-      </Box>
-    </>
-  );
-}
-
-WalletLoginOptions.propTypes = {
-  qrcode: PropTypes.node.isRequired,
-  tokenState: PropTypes.object.isRequired,
-  webWalletUrl: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'normal', 'large']),
-  disableSwitchApp: PropTypes.bool,
-  tokenKey: PropTypes.string.isRequired,
-  walletLoginRef: PropTypes.object,
-  webLoginRef: PropTypes.object,
-  onMobileLoginClick: PropTypes.func.isRequired,
-  onWebLoginClick: PropTypes.func.isRequired,
-  onBack: PropTypes.func.isRequired,
-};

package/src/Connect/components/login-item/web-login-item.jsx

@@ -1,157 +0,0 @@
-import PropTypes from 'prop-types';
-import { CircularProgress } from '@mui/material';
-import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import { openWebWallet, detectWalletExtension } from '@arcblock/ux/lib/Util';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import noop from 'lodash/noop';
-import omit from 'lodash/omit';
-import { useImperativeHandle } from 'react';
-import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
-
-import LoginMethodItem from './login-method-item';
-import { useStateContext } from '../../contexts/state';
-import { EXT_DOWNLOAD_URL } from '../../../constant';
-import useAuthUrl from '../../hooks/auth-url';
-
-export default function WebLoginItem({
-  ref = null,
-  tokenState,
-  locale = 'en',
-  webWalletUrl,
-  onClick = noop,
-  disableSwitchApp = false,
-  autoConnect = true,
-  ...rest
-}) {
-  const { browserBrand } = useStateContext();
-  const extension = detectWalletExtension();
-  const currentState = useReactive({
-    loading: false,
-  });
-
-  const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState });
-
-  const handleConnectFn = useMemoizedFn(() => {
-    if (!autoConnect) {
-      return;
-    }
-    currentState.loading = true;
-    const openResult = openWebWallet({
-      webWalletUrl,
-      url: urlWithParams,
-      locale,
-      appInfo: tokenState.appInfo,
-      memberAppInfo: tokenState.memberAppInfo,
-    });
-    if (openResult?.type === 'web') {
-      currentState.loading = false;
-    } else {
-      // 后续需要通过插件回传消息，才能准确的关闭 loading 状态
-      setTimeout(() => {
-        currentState.loading = false;
-      }, 3000);
-    }
-  });
-  const handleConnect = useMemoizedFn((e) => {
-    if (!tokenState.url) {
-      return;
-    }
-
-    onClick(e);
-    e?.preventDefault();
-    handleConnectFn();
-  });
-
-  useImperativeHandle(ref, () => ({
-    connect: handleConnectFn,
-  }));
-
-  const extDownloadUrl = useCreation(() => {
-    if (browserBrand === 'edge') {
-      return EXT_DOWNLOAD_URL.edge;
-    }
-    if (browserBrand === 'chrome') {
-      return EXT_DOWNLOAD_URL.chrome;
-    }
-    return null;
-  }, [browserBrand]);
-
-  const buttonProps = useCreation(() => {
-    const result = {};
-    if (extension || !autoConnect) {
-      result.onClick = handleConnect;
-    } else if (extDownloadUrl && autoConnect) {
-      result.component = 'a';
-      result.href = extDownloadUrl;
-      result.target = '_blank';
-      result.rel = 'noopener';
-    } else {
-      result.onClick = handleConnect;
-    }
-
-    if (!tokenState.url) {
-      result.sx = {
-        cursor: 'not-allowed',
-      };
-    }
-    return result;
-  }, [handleConnect, tokenState.url]);
-
-  const title = useCreation(() => {
-    if (!autoConnect) {
-      return 'DID Wallet';
-    }
-    if (extension || extDownloadUrl) {
-      return 'DID Wallet (Extension)';
-    }
-    return 'DID Wallet (Web)';
-  }, [extension, extDownloadUrl]);
-
-  return (
-    <LoginMethodItem
-      {...rest}
-      sx={mergeSx(
-        {
-          textDecoration: 'none',
-        },
-        rest?.sx,
-        buttonProps.sx
-      )}
-      title={title}
-      icon={
-        currentState.loading || !tokenState.url ? (
-          <CircularProgress
-            color="primary"
-            size={LOGIN_PROVIDER_ICON_SIZE}
-            sx={{
-              '& svg': {
-                transform: 'scale(0.75)',
-              },
-            }}
-          />
-        ) : (
-          <ProviderIcon
-            sx={{
-              width: LOGIN_PROVIDER_ICON_SIZE,
-              height: LOGIN_PROVIDER_ICON_SIZE,
-              transform: 'scale(0.9)',
-            }}
-            provider={LOGIN_PROVIDER.DID_WALLET}
-          />
-        )
-      }
-      {...omit(buttonProps, 'sx')}
-    />
-  );
-}
-
-WebLoginItem.propTypes = {
-  tokenState: PropTypes.object.isRequired,
-  locale: PropTypes.string,
-  webWalletUrl: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  disableSwitchApp: PropTypes.bool,
-  autoConnect: PropTypes.bool, // 点击后是否自动连接，默认true
-  ref: PropTypes.any,
-};

package/src/Connect/components/mask-overlay.jsx

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import { alpha, Box } from '@mui/material';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-
-// 需要父元素设置 relative position
-export default function MaskOverlay({ children, ...rest }) {
-  return (
-    <Box
-      {...rest}
-      sx={mergeSx(
-        {
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: ({ palette }) => alpha(palette.background.default, 0.75),
-          backdropFilter: 'blur(3px)',
-        },
-        rest?.sx
-      )}>
-      {children}
-    </Box>
-  );
-}
-
-MaskOverlay.propTypes = {
-  children: PropTypes.any.isRequired,
-};

package/src/Connect/components/refresh-overlay.jsx

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box, useTheme } from '@mui/material';
-import { Icon } from '@iconify/react';
-import RefreshRoundedIcon from '@iconify-icons/material-symbols/refresh-rounded';
-
-// 需要父元素设置 relative position
-export default function RefreshOverlay({ onRefresh, ...rest }) {
-  const { palette } = useTheme();
-  const handleOnRefresh = (e) => {
-    e.stopPropagation();
-    onRefresh();
-  };
-
-  return (
-    <Box
-      {...rest}
-      onClick={handleOnRefresh}
-      sx={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.75)',
-        cursor: 'pointer',
-        ...rest.sx,
-      }}>
-      <Box
-        sx={{
-          backgroundColor: 'secondary.main',
-          borderRadius: '100%',
-          fontSize: 0,
-        }}>
-        <Icon
-          icon={RefreshRoundedIcon}
-          fontSize={52}
-          style={{
-            transform: 'scale(0.7)',
-            color: palette.secondary.contrastText,
-          }}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-RefreshOverlay.propTypes = {
-  onRefresh: PropTypes.func.isRequired,
-};

package/src/Connect/components/switch-app.jsx

@@ -1,69 +0,0 @@
-import { useRef } from 'react';
-import { Box, Menu, MenuItem } from '@mui/material';
-import { useReactive } from 'ahooks';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import PropTypes from 'prop-types';
-import { AppInfoItem } from '@arcblock/ux/lib/DIDConnect';
-
-import { useStateContext } from '../contexts/state';
-
-export default function SwitchApp({ sx = {}, children }) {
-  const { appInfoList, extraParams, connectState } = useStateContext();
-  const switchAppRef = useRef(null);
-  const currentState = useReactive({
-    open: false,
-  });
-  if (appInfoList.length <= 1) return null;
-
-  return (
-    <>
-      <Box
-        component="span"
-        ref={switchAppRef}
-        sx={mergeSx(
-          {
-            color: 'text.secondary',
-            cursor: 'pointer',
-          },
-          sx
-        )}
-        onClick={() => {
-          currentState.open = true;
-        }}>
-        {children}
-      </Box>
-      <Menu
-        anchorEl={switchAppRef.current}
-        open={currentState.open}
-        onClose={() => {
-          currentState.open = false;
-        }}
-        slotProps={{
-          paper: {
-            variant: 'outlined',
-            sx: {
-              border: 0,
-              boxShadow: ({ palette }) => `0px 4px 8px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`,
-              borderRadius: 1,
-            },
-          },
-        }}>
-        {appInfoList.map((item) => (
-          <MenuItem
-            key={item.appPid}
-            onClick={() => {
-              currentState.open = false;
-              connectState.sourceAppPid = item.sourceAppPid;
-            }}>
-            <AppInfoItem appInfo={item} active={item.sourceAppPid === extraParams?.sourceAppPid} />
-          </MenuItem>
-        ))}
-      </Menu>
-    </>
-  );
-}
-
-SwitchApp.propTypes = {
-  sx: PropTypes.object,
-  children: PropTypes.any.isRequired,
-};