@arcblock/did-connect-react 3.1.0

package/src/Connect/index.jsx

@@ -0,0 +1,600 @@
+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 withBlocklet from './with-blocklet';
+import withBridgeCall from './with-bridge-call';
+import useSecurity from './hooks/security';
+
+import { SessionContext } from '../Session/context';
+import { StateProvider, useStateContext } from './contexts/state';
+import ConnectChooseList from './components/login-item/connect-choose-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 useMethodList from './hooks/method-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,
+  } = 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 {
+    showMobileLogin,
+    hideChooseList,
+    oauthProviderList,
+    showOAuthLogin,
+    showPasskeyLogin,
+    showWebLogin,
+    showEmailLogin,
+    hideQRCode,
+  } = useMethodList({
+    action: state.action,
+    sourceAppPid: connectState?.sourceAppPid,
+    enabledConnectTypes,
+    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[500] : 'white';
+    return (
+      <Box
+        sx={{
+          p: hideChooseList ? 3 : 2,
+          width: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
+          height: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
+        }}>
+        {state.url ? (
+          <QRCode
+            data={urlWithParams}
+            size={hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2}
+            sx={{
+              width:
+                (hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2) +
+                getSpacingNumber(1) * 2,
+              height:
+                (hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2) +
+                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]);
+
+  const didConnectFlexDirection = useCreation(() => {
+    if (hideChooseList) {
+      return 'column-reverse';
+    }
+    if (!hideQRCode && isInitSmallView) {
+      return 'column';
+    }
+    return 'row';
+  }, [hideChooseList, isInitSmallView, hideQRCode]);
+
+  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 ? (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              overflowX: 'auto',
+              overflowY: 'visible',
+              maxWidth: '100%',
+              margin: 'auto',
+            }}>
+            <Box
+              sx={{
+                fontSize: 0,
+                position: 'relative',
+                mb: hideChooseList ? 4 : 2.5,
+              }}>
+              {qrcode}
+              <Box
+                sx={{
+                  position: 'absolute',
+                  color: 'text.secondary',
+                  fontSize: 12,
+                  bottom: hideChooseList ? 8 : 4,
+                  transform: 'translateY(100%)',
+                  left: 0,
+                  right: 0,
+                  textAlign: 'center',
+                }}>
+                {t('scanWithWallet1')} <DownloadTips /> {t('scanWithWallet2')}
+              </Box>
+            </Box>
+          </Box>
+          {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}
+        <ConnectChooseList
+          slotProps={{
+            root: {
+              sx: [showStatus ? { display: 'none' } : {}],
+            },
+          }}
+          allowWallet={allowWallet}
+          size={hideQRCode && mode !== 'dialog' ? 'normal' : 'small'}
+          tokenState={state}
+          messages={messages}
+          tokenKey={tokenKey}
+          onSuccess={onSuccess}
+          passkeyBehavior={passkeyBehavior}
+          webWalletUrl={webWalletUrl}
+          extraContent={extraContent}
+          enabledConnectTypes={enabledConnectTypes}
+          onRest={handleReset}
+          showMobileLogin={showMobileLogin}
+          showOAuthLogin={showOAuthLogin}
+          showPasskeyLogin={showPasskeyLogin}
+          showWebLogin={showWebLogin}
+          showEmailLogin={showEmailLogin}
+          oauthProviderList={oauthProviderList}
+          disableSwitchApp={disableSwitchApp}
+          forceUpdate={forceUpdate}
+          magicToken={magicToken}
+          baseUrl={baseUrl}
+          customItems={customItems}
+        />
+      </Box>
+    </Box>
+  );
+  let contentResult = fallbackContent;
+  if (selectedPlugin) {
+    contentResult = selectedPlugin.renderPlaceholder({
+      fallback: fallbackContent,
+      forceUpdate,
+      onSuccess,
+      onError,
+    });
+  } else {
+    contentResult = fallbackContent;
+  }
+
+  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%'
+            : hideQRCode || showStatus || hideChooseList
+              ? DID_CONNECT_SMALL_WIDTH
+              : DID_CONNECT_MEDIUM_WIDTH,
+        transition: 'width 0.2s ease-in-out',
+        margin: 'auto',
+        p: isSmallView ? 2 : 3,
+        pb: 0,
+        gap: 2,
+      }}>
+      <Box data-did-auth-url={state.url} sx={{ display: 'none' }} />
+      <DIDConnectTitle
+        title={messages.title}
+        description={messages.scan}
+        extraContent={extraContent}
+        disableSwitchApp={disableSwitchApp}
+      />
+      <AutoHeight initHeight={24 + 16 + 32}>{contentResult}</AutoHeight>
+      <DIDConnectFooter currentAppInfo={currentAppInfo} currentAppColor={currentAppColor} />
+      {closeButton}
+    </Box>
+  );
+}
+
+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/landing-page.jsx

@@ -0,0 +1,3 @@
+import LandingPage from '@arcblock/ux/lib/DIDConnect/landing-page';
+
+export default LandingPage;

package/src/Connect/plugins/email/index.jsx

@@ -0,0 +1,82 @@
+import { useMemoizedFn, useReactive } from 'ahooks';
+import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+
+import EmailListItem from './list-item';
+import EmailPlaceholder from './placeholder';
+
+export default function useEmailPlugin({ baseUrl }) {
+  const state = useReactive({
+    baseUrl,
+    status: 'idle',
+    get computedStatus() {
+      if (this.status === 'idle') {
+        return 'creating';
+      }
+      if (this.status === 'creating') {
+        return 'scanned';
+      }
+      if (this.status === 'sending') {
+        return 'scanned';
+      }
+      if (this.status === 'verifying') {
+        return 'scanned';
+      }
+      return this.status;
+    },
+    error: '',
+    magicToken: '',
+    reset() {
+      this.status = 'idle';
+      this.error = '';
+      this.magicToken = '';
+    },
+  });
+  const name = LOGIN_PROVIDER.EMAIL;
+  const title = 'Email';
+  const icon = mailOutlineRoundedIcon;
+  const translations = {
+    zh: {
+      email: '邮箱地址',
+      emailPlaceholder: '请输入邮箱地址',
+      sendCode: '发送验证邮件',
+      confirm: '确认',
+      verifyEmail: '登录链接已发送至邮箱，请登录邮箱查看',
+      useCode: '使用验证码',
+      codePlaceholder: '请输入验证码',
+      orUseCodePlaceholder: '或使用验证码',
+      emailInvalid: '邮箱格式不正确',
+      emailRequired: '邮箱地址不能为空',
+    },
+    en: {
+      email: 'Email',
+      emailPlaceholder: 'Enter your email address',
+      sendCode: 'Send Verification Email',
+      confirm: 'Confirm',
+      verifyEmail: 'Login link sent! Please check your email.',
+      useCode: 'Use Verification Code',
+      codePlaceholder: 'Enter your verification code.',
+      orUseCodePlaceholder: 'Or use verification code.',
+      emailInvalid: 'Email format is incorrect',
+      emailRequired: 'Email is required',
+    },
+  };
+  const t = useMemoizedFn((key, data = {}, locale = 'en') => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  return {
+    name,
+    title,
+    icon,
+    renderListItem(props) {
+      return <EmailListItem {...props} state={state} name={name} title={title} icon={icon} t={t} />;
+    },
+    renderPlaceholder(props) {
+      return <EmailPlaceholder {...props} state={state} name={name} title={title} icon={icon} t={t} />;
+    },
+    order: 100,
+    state,
+  };
+}