@arcblock/did-connect-react 3.3.10 → 3.4.1

package/src/Connect/index.jsx

@@ -1,618 +1,21 @@
-import { use, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Box, Divider, Skeleton } from '@mui/material';
-import {
-  useCreation,
-  useDebounceFn,
-  useMemoizedFn,
-  useMount,
-  usePrevious,
-  useSize,
-  useUpdate,
-  useUpdateEffect,
-} from 'ahooks';
-import noop from 'lodash/noop';
-import isUndefined from 'lodash/isUndefined';
-
-import CloseButton from '@arcblock/ux/lib/CloseButton';
-import {
-  LOGIN_PROVIDER,
-  LOGIN_PROVIDER_NAME,
-  OAUTH_PROVIDER,
-  DID_CONNECT_MEDIUM_WIDTH,
-  DID_CONNECT_SMALL_WIDTH,
-} from '@arcblock/ux/lib/Util/constant';
-import QRCode from '@arcblock/ux/lib/QRCode';
-import { DIDConnectFooter, withContainer, withUxTheme } from '@arcblock/ux/lib/DIDConnect';
-import { useTheme } from '@arcblock/ux/lib/Theme';
-import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-
-import '@fontsource/lexend/400.css';
-import '@fontsource/lexend/600.css';
+import { lazy, Suspense } from 'react';
+import { withContainer, withUxTheme } from '@arcblock/ux/lib/DIDConnect';
 
 import withBlocklet from './with-blocklet';
 import withBridgeCall from './with-bridge-call';
 import useSecurity from './hooks/security';
+import FallbackConnect from './fallback-connect';
 
-import { SessionContext } from '../Session/context';
-import { StateProvider, useStateContext } from './contexts/state';
-import ConnectProviderList from './components/login-item/connect-provider-list';
-import AutoHeight from './components/auto-height';
-import useToken from './hooks/token';
-import { useOAuth } from '../OAuth';
-import ConnectStatus from './components/connect-status';
-import { usePasskey } from '../Passkey/context';
-import { API_DID_PREFIX, DEFAULT_TIMEOUT, BUSY_STATUS, CHECK_STATUS_INTERVAL } from '../constant';
-import { getWebWalletUrl } from '../utils';
-import DIDConnectTitle from './components/did-connect-title';
-import DownloadTips from './components/download-tips';
-import useProviderList from './hooks/provider-list';
-import useAuthUrl from './hooks/auth-url';
-import { getWalletDid } from '../User/use-did';
-
-function Connect({
-  hideCloseButton = false,
-  mode = 'dialog',
-  action,
-  baseUrl = '',
-  checkFn,
-  checkInterval = CHECK_STATUS_INTERVAL,
-  checkTimeout = DEFAULT_TIMEOUT * 1000,
-  prefix = API_DID_PREFIX,
-  tokenKey = '_t_',
-  locale = 'en',
-  encKey = '_ek_',
-  autoConnect = true,
-  forceConnected = true,
-  saveConnect = true,
-  useSocket = true,
-  allowWallet = true,
-  provider = '',
-  messages = {},
-  passkeyBehavior = 'none',
-  webWalletUrl = getWebWalletUrl(),
-  enabledConnectTypes = ['web', 'mobile', ...Object.keys(OAUTH_PROVIDER)],
-  extraContent = null,
-  disableSwitchApp = false,
-  magicToken = undefined,
-  customItems = [],
-  onClose = noop,
-  onError = noop,
-  onSuccess = noop,
-  onRecreateSession = noop,
-  setColor = noop,
-}) {
-  const theme = useTheme();
-  const forceUpdate = useUpdate();
-  const sessionCtx = use(SessionContext);
-  const currentUserDid = getWalletDid(sessionCtx?.session?.user);
-
-  const {
-    t,
-    staticState,
-    connectState,
-    extraParams,
-    currentAppInfo,
-    currentAppColor,
-    // 插件相关
-    selectedPlugin,
-    blocklet,
-    masterBlocklet,
-    showWalletOptions,
-    setShowWalletOptions,
-  } = useStateContext();
-  const { state, generate, cancelWhenScanned } = useToken({
-    action,
-    baseUrl,
-    checkFn,
-    checkInterval,
-    checkTimeout,
-    extraParams,
-    prefix,
-    onError,
-    onSuccess,
-    locale,
-    tokenKey,
-    encKey,
-    autoConnect,
-    forceConnected: forceConnected === true ? currentUserDid || true : forceConnected,
-    saveConnect,
-    useSocket,
-    allowWallet,
-    provider,
-  });
-  const refreshingToken = useRef(false);
-  const rootRef = useRef(null);
-  const size = useSize(rootRef);
-  const isSmallView = useCreation(() => {
-    if (size) {
-      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
-    }
-    return true;
-  }, [size, size?.width]);
-
-  const [isInitSmallView, setIsInitSmallView] = useState(false);
-
-  useMount(() => {
-    setIsInitSmallView(size?.width < DID_CONNECT_MEDIUM_WIDTH - 50);
-  });
-
-  const { oauthState, setBaseUrl } = useOAuth();
-  const { passkeyState, setTargetAppPid } = usePasskey();
-
-  useMount(() => {
-    setBaseUrl(baseUrl);
-    setTargetAppPid(blocklet?.appPid);
-    // 每次打开 did-connect，都重置状态
-    state.reset();
-    oauthState.reset();
-    passkeyState.reset();
-  });
-
-  useEffect(() => {
-    setColor(currentAppColor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentAppColor]);
-
-  const statusMessages = useCreation(() => {
-    return {
-      confirm: messages.confirm,
-      success: messages.success,
-      error: selectedPlugin?.state?.error || state.error || passkeyState.error || oauthState.error || '',
-    };
-  }, [
-    messages.confirm,
-    messages.success,
-    state.error,
-    oauthState.error,
-    passkeyState.error,
-    selectedPlugin?.state?.error,
-  ]);
-
-  const showStatus = useCreation(() => {
-    return (
-      BUSY_STATUS.includes(passkeyState.status) ||
-      BUSY_STATUS.includes(oauthState.status) ||
-      BUSY_STATUS.includes(state.status) ||
-      BUSY_STATUS.includes(selectedPlugin?.state?.computedStatus)
-    );
-  }, [state.status, oauthState.status, passkeyState.status, selectedPlugin?.state?.computedStatus]);
-
-  const handleReset = useMemoizedFn(async () => {
-    onRecreateSession();
-    oauthState.reset();
-    passkeyState.reset();
-    await generate(false);
-  });
-  const handleRetry = useMemoizedFn(() => {
-    connectState?.retryConnect();
-  });
-  const handleCancel = useMemoizedFn(() => {
-    onRecreateSession();
-    oauthState.reset();
-    passkeyState.reset();
-    selectedPlugin?.state?.reset();
-    staticState.current.cancelCount++;
-    cancelWhenScanned();
-  });
-
-  const { run: debounceHandleTimeout } = useDebounceFn(
-    () => {
-      if (refreshingToken.current) return;
-      if (state.status === 'timeout') {
-        refreshingToken.current = true;
-        state.reset();
-        handleReset();
-        refreshingToken.current = false;
-      }
-    },
-    { leading: true, trailing: false }
-  );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(debounceHandleTimeout, [state.status]);
-
-  const chooseMethod = useCreation(() => {
-    return LOGIN_PROVIDER_NAME[connectState.chooseMethod] || 'DID Wallet';
-  }, [connectState.chooseMethod]);
-
-  const { providerList, hideQRCode, hideChooseList } = useProviderList({
-    action: state.action,
-    sourceAppPid: connectState?.sourceAppPid,
-    allowWallet,
-    passkeyBehavior,
-    webWalletUrl,
-    mode,
-    blocklet: connectState?.sourceAppPid ? masterBlocklet : blocklet,
-    isSmallView,
-  });
-
-  const prevSourceAppPid = usePrevious(connectState?.sourceAppPid);
-
-  // 切换了当前展示的应用后，需要重新生成二维码
-  useUpdateEffect(() => {
-    // HACK: connectState.sourceAppPid 是用户在页面中执行操作修改的值，最开始的时候就是 undefined，并在 did-connect 页面加载后，会由 app-info 触发一次更新（无论如何都会触发，这一次更新不应该触发 generate）
-    if (isUndefined(prevSourceAppPid)) {
-      return;
-    }
-    generate();
-  }, [connectState?.sourceAppPid]);
-
-  const getSpacingNumber = (value) => {
-    const spacingValue = theme.spacing(value);
-    return parseInt(spacingValue, 10);
-  };
-  const closeButton = useCreation(() => {
-    return hideCloseButton ? null : (
-      <CloseButton
-        onClose={onClose}
-        sx={{
-          position: 'absolute',
-          right: 14,
-          top: 14,
-        }}
-      />
-    );
-  }, [hideCloseButton, onClose]);
-
-  let content = null;
-  if (showStatus) {
-    content = (
-      <Box
-        sx={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Box>
-          <ConnectStatus
-            status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
-            nextWorkflow={state.nextWorkflow}
-            mfaCode={state.mfaCode}
-            onCancel={handleCancel}
-            onRetry={handleRetry}
-            onClose={onClose}
-            messages={statusMessages}
-            locale={locale}
-            className="did-connect__auth-status auth-status"
-            loadingIcon={
-              connectState.chooseMethod ? (
-                <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
-              ) : null
-            }
-            chooseMethod={chooseMethod}
-            hideRetry={connectState.chooseMethod === 'email'}
-            hideBack={!!magicToken}
-          />
-        </Box>
-      </Box>
-    );
-  }
-
-  const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState: state });
-
-  // 防止二维码抖动，使用 useCreation 进行缓存
-  const qrcode = useCreation(() => {
-    const backgroundColor = theme.mode === 'dark' ? theme.palette.grey[600] : 'white';
-
-    let qrcodeSize = hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2;
-    let padding = hideChooseList ? 3 : 2;
-    // 如果显示钱包登录，将 download tips 移动到顶部，调整间距，增加二维码的尺寸和内边距
-    if (showWalletOptions) {
-      padding = 1;
-      qrcodeSize += getSpacingNumber(padding) * 2;
-    }
-    return (
-      <Box
-        className="did-connect__qrcode"
-        sx={{
-          p: padding,
-          width: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
-          height: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
-        }}>
-        {state.url ? (
-          <QRCode
-            data={urlWithParams}
-            size={qrcodeSize}
-            sx={{
-              width: qrcodeSize + getSpacingNumber(1) * 2,
-              height: qrcodeSize + getSpacingNumber(1) * 2,
-              flex: 1,
-              backgroundColor,
-              p: 1,
-              fontSize: 0,
-              textAlign: 'center',
-              boxSizing: 'border-box',
-              borderRadius: 1,
-              border: '1px solid',
-              borderColor: 'divider',
-            }}
-            config={{
-              backgroundOptions: {
-                color: backgroundColor,
-              },
-            }}
-          />
-        ) : (
-          <Skeleton
-            animation="wave"
-            variant="rectangular"
-            sx={{
-              position: 'absolute',
-              left: getSpacingNumber(2) + 1,
-              right: getSpacingNumber(2) + 1,
-              top: getSpacingNumber(2) + 1,
-              bottom: getSpacingNumber(2) + 1,
-              borderRadius: 1,
-              zIndex: 1,
-              width: 'auto',
-              height: 'auto',
-            }}
-          />
-        )}
-      </Box>
-    );
-  }, [urlWithParams, hideChooseList, showWalletOptions]);
-
-  const didConnectFlexDirection = useCreation(() => {
-    if (hideChooseList) {
-      return 'column-reverse';
-    }
-    if (!hideQRCode && isInitSmallView) {
-      return 'column';
-    }
-    return 'row';
-  }, [hideChooseList, isInitSmallView, hideQRCode]);
-
-  const qrcodeContent = useCreation(() => {
-    if (!qrcode) return null;
-    return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          overflowX: 'auto',
-          overflowY: 'visible',
-          maxWidth: '100%',
-          margin: 'auto',
-        }}>
-        <Box
-          sx={{
-            fontSize: 0,
-            position: 'relative',
-            ...(showWalletOptions
-              ? {
-                  mt: hideChooseList ? 4 : 2.5,
-                  mb: hideChooseList ? 0 : 0,
-                }
-              : {
-                  mb: hideChooseList ? 4 : 2.5,
-                  mt: 0,
-                }),
-          }}>
-          {qrcode}
-          <Box
-            sx={{
-              position: 'absolute',
-              color: 'text.secondary',
-              fontSize: 12,
-              zIndex: 1,
-              whiteSpace: 'nowrap',
-              ...(showWalletOptions
-                ? {
-                    top: hideChooseList ? -8 : -4,
-                    transform: 'translateY(-100%)',
-                  }
-                : {
-                    bottom: hideChooseList ? -8 : -4,
-                    transform: 'translateY(100%)',
-                  }),
-              left: 0,
-              right: 0,
-              textAlign: 'center',
-            }}>
-            {t('scanWithWallet1')} <DownloadTips /> {t('scanWithWallet2')}
-          </Box>
-        </Box>
-      </Box>
-    );
-  }, [qrcode, hideChooseList, showWalletOptions]);
-
-  const fallbackContent = (
-    <Box
-      className="did-connect__body"
-      sx={{
-        display: 'flex',
-        flexDirection: didConnectFlexDirection,
-        justifyContent: 'center',
-        alignItems: 'stretch',
-        flex: 1,
-        gap: !hideQRCode && isSmallView ? 0 : 1.5,
-        overflow: 'visible',
-        px: hideChooseList ? 2 : 0,
-      }}>
-      {!showStatus && !hideQRCode ? (
-        <>
-          {qrcodeContent}
-          {hideChooseList ? null : (
-            <Box>
-              <Divider
-                orientation="vertical"
-                sx={{
-                  fontSize: 12,
-                  color: 'text.hint',
-                  '&::before, &::after': {
-                    borderColor: 'divider',
-                  },
-                }}>
-                or
-              </Divider>
-            </Box>
-          )}
-        </>
-      ) : null}
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-        }}>
-        {/* eslint-disable-next-line no-nested-ternary */}
-        {content}
-        <ConnectProviderList
-          slotProps={{
-            root: {
-              sx: [showStatus ? { display: 'none' } : {}],
-            },
-          }}
-          allowWallet={allowWallet}
-          size={hideQRCode && mode !== 'dialog' ? 'normal' : 'small'}
-          tokenState={state}
-          hideQRCode={hideQRCode}
-          messages={messages}
-          tokenKey={tokenKey}
-          onSuccess={onSuccess}
-          passkeyBehavior={passkeyBehavior}
-          webWalletUrl={webWalletUrl}
-          extraContent={extraContent}
-          enabledConnectTypes={enabledConnectTypes}
-          onReset={handleReset}
-          disableSwitchApp={disableSwitchApp}
-          forceUpdate={forceUpdate}
-          magicToken={magicToken}
-          baseUrl={baseUrl}
-          customItems={customItems}
-          providerList={providerList}
-          qrcode={qrcodeContent}
-        />
-      </Box>
-    </Box>
-  );
-  let contentResult = fallbackContent;
-  if (selectedPlugin) {
-    contentResult = selectedPlugin.renderPlaceholder({
-      fallback: fallbackContent,
-      forceUpdate,
-      onSuccess,
-      onError,
-    });
-  } else {
-    contentResult = fallbackContent;
-  }
-
-  const containerWidth = hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH;
+const LazyConnect = lazy(() => import('./connect'));
 
+function WrapConnect(props) {
   return (
-    <Box
-      ref={rootRef}
-      className="did-connect__root"
-      sx={{
-        backgroundColor: 'background.default',
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        position: 'relative',
-        maxWidth: '100%',
-        width:
-          // eslint-disable-next-line no-nested-ternary
-          mode === 'drawer' ? '100%' : showWalletOptions ? containerWidth - 20 : containerWidth,
-        transition: 'width 0.2s ease-in-out',
-        margin: 'auto',
-        p: 3,
-        pb: 0,
-        gap: 2.5,
-      }}>
-      <Box data-did-auth-url={state.url} sx={{ display: 'none' }} />
-      <DIDConnectTitle
-        title={messages.title}
-        description={messages.scan}
-        extraContent={extraContent}
-        disableSwitchApp={disableSwitchApp}
-        showWalletOptions={showWalletOptions}
-        onBack={() => setShowWalletOptions(false)}
-      />
-      <AutoHeight initHeight={24 + 16 + 32}>{contentResult}</AutoHeight>
-      <DIDConnectFooter currentAppInfo={currentAppInfo} currentAppColor={currentAppColor} />
-      {closeButton}
-    </Box>
+    <Suspense fallback={<FallbackConnect />}>
+      <LazyConnect {...props} />
+    </Suspense>
   );
 }
 
-Connect.propTypes = {
-  mode: PropTypes.oneOf(['dialog', 'drawer', 'page']),
-
-  action: PropTypes.string.isRequired,
-  baseUrl: PropTypes.string,
-  checkFn: PropTypes.func.isRequired,
-  checkInterval: PropTypes.number,
-  checkTimeout: PropTypes.number,
-  // extraParams: PropTypes.object, // 需要使用 useStateContext 中导出的
-  prefix: PropTypes.string,
-  messages: PropTypes.object,
-  tokenKey: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'zh', '']),
-  encKey: PropTypes.string,
-  autoConnect: PropTypes.bool,
-  forceConnected: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  saveConnect: PropTypes.bool,
-  useSocket: PropTypes.bool,
-  extraContent: PropTypes.any,
-  passkeyBehavior: PropTypes.oneOf(['none', 'both', 'only-existing', 'only-new']),
-  enabledConnectTypes: PropTypes.arrayOf(PropTypes.oneOf(['web', 'mobile', ...Object.keys(OAUTH_PROVIDER)])),
-  webWalletUrl: PropTypes.string,
-
-  allowWallet: PropTypes.bool,
-  provider: PropTypes.oneOf([LOGIN_PROVIDER.WALLET, ...Object.keys(OAUTH_PROVIDER), '']),
-  hideCloseButton: PropTypes.bool,
-  disableSwitchApp: PropTypes.bool,
-  onClose: PropTypes.func,
-  onError: PropTypes.func,
-  onSuccess: PropTypes.func,
-  onRecreateSession: PropTypes.func,
-  setColor: PropTypes.func,
-  magicToken: PropTypes.string,
-  customItems: PropTypes.arrayOf(PropTypes.node),
-};
-
-function WrapConnect({ testOnlyBorderColor = undefined, ...props }) {
-  const { checkFn, extraParams = {}, blocklet, masterBlocklet, action, locale = 'en' } = props;
-  if (typeof checkFn !== 'function') {
-    throw new Error('Cannot initialize did connect component without a fetchFn');
-  }
-
-  return (
-    <StateProvider
-      blocklet={blocklet}
-      masterBlocklet={masterBlocklet}
-      action={action}
-      locale={locale}
-      extraParams={extraParams}
-      testOnlyBorderColor={testOnlyBorderColor}
-      sx={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        lineHeight: 1.2,
-        color: 'grey.700',
-        '&, & *, & *:before, & *:after': {
-          fontFamily: 'Lexend', // 保持跟 DID Wallet 一致
-          boxSizing: 'border-box',
-        },
-      }}>
-      <Connect {...props} />
-    </StateProvider>
-  );
-}
-
-WrapConnect.propTypes = {
-  checkFn: PropTypes.func.isRequired,
-  extraParams: PropTypes.object,
-  blocklet: PropTypes.object.isRequired,
-  masterBlocklet: PropTypes.object,
-  action: PropTypes.string.isRequired,
-  locale: PropTypes.string,
-  testOnlyBorderColor: PropTypes.string,
-};
-
 export default withUxTheme(withBridgeCall(withBlocklet(withContainer(WrapConnect))));
 
 export { useSecurity };

package/src/Connect/plugins/email/list-item.jsx

@@ -8,9 +8,9 @@ import LoginMethodItem from '../../components/login-item/login-method-item';
 import { useStateContext } from '../../contexts/state';
 
 export default function EmailListItem({ ...rest }) {
-  const { setSelectedPlugin, getPlugin, connectState } = useStateContext();
+  const { setSelectedPlugin, getPlugin, connectState, lastLoginMethod } = useStateContext();
   const handleConnect = useMemoizedFn(() => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'email');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
     const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
     plugin.state.reset();
     plugin.state.status = 'creating';
@@ -21,6 +21,7 @@ export default function EmailListItem({ ...rest }) {
   return (
     <LoginMethodItem
       {...rest}
+      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.EMAIL}
       title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
       icon={mailFilledIcon}
       onClick={handleConnect}

package/src/Connect/use-connect.jsx

@@ -6,12 +6,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import isFunction from 'lodash/isFunction';
 import isUndefined from 'lodash/isUndefined';
 import { joinURL, withQuery } from 'ufo';
-import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
 import PQueue from 'p-queue';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import { getCookieOptions } from '@arcblock/ux/lib/Util';
 import Cookie from 'js-cookie';
 import { useBrowser } from '@arcblock/react-hooks';
+import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
 
 import { SessionContext } from '../Session/context';
 import { runPopup, openPopup, updateConnectedInfo, getAppId } from '../utils';

package/src/Passkey/actions.jsx

@@ -67,6 +67,7 @@ export default function PasskeyActions({
   sx = {},
   mode = 'normal',
   onClick = noop,
+  isLatest = false,
 }) {
   const currentAction = useRef('');
   const passkeyDialogRef = useRef(null);
@@ -149,6 +150,8 @@ export default function PasskeyActions({
     <>
       {['both', 'only-existing'].includes(behavior) ? (
         <PasskeyAction
+          isLatest={isLatest}
+          t={t}
           action="verifying"
           state={passkeyState}
           title={t('usePasskey')}
@@ -167,6 +170,7 @@ export default function PasskeyActions({
       {['both', 'only-new'].includes(behavior) ? (
         <>
           <PasskeyAction
+            t={t}
             action="creating"
             state={passkeyState}
             title={createButtonText || t('createPasskey')}
@@ -209,4 +213,5 @@ PasskeyActions.propTypes = {
   mode: PropTypes.oneOf(['simple', 'normal']),
   onClick: PropTypes.func,
   ref: PropTypes.any,
+  isLatest: PropTypes.bool,
 };