@arcblock/did-connect-react 3.4.15 → 3.5.0

package/src/Connect/hooks/use-quick-connect.js

@@ -1,119 +0,0 @@
-import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
-import { joinURL } from 'ufo';
-import pick from 'lodash/pick';
-import unionBy from 'lodash/unionBy';
-import sortBy from 'lodash/sortBy';
-import Toast from '@arcblock/ux/lib/Toast';
-
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../constant';
-import { createAxios, logger } from '../../utils';
-
-const prefix = joinURL(BLOCKLET_SERVICE_PATH_PREFIX, '/api/user-session');
-
-export default function useQuickConnect({
-  appPid,
-  sourceAppPid,
-  loginAppPid,
-  autoFetch = true,
-  baseUrl = '/',
-  fetchAll = false,
-} = {}) {
-  const api = useCreation(() => {
-    return createAxios(
-      {
-        baseURL: joinURL(baseUrl, prefix),
-      },
-      { lazy: true, lazyTime: 500 }
-    );
-  }, [baseUrl]);
-
-  const getUserSessions = useMemoizedFn(async () => {
-    if (!window.blocklet) {
-      return [];
-    }
-
-    let userSessions = [];
-    try {
-      ({ data: userSessions = [] } = await api.get(''));
-    } catch (err) {
-      logger.error('Failed to get user-sessions', err);
-    }
-    // NOTICE: 已经包含了 federated master userSessions
-    const result = userSessions
-      .filter((x) => {
-        if (!fetchAll) {
-          return !x.appUrl;
-        }
-        return true;
-      })
-      .map((x) => ({
-        appUrl: baseUrl,
-        ...x,
-      }));
-    return result;
-  });
-  const currentState = useReactive({
-    loaded: false,
-    loadingId: null,
-  });
-  const userSessionsState = useRequest(getUserSessions, {
-    manual: !autoFetch,
-    onFinally() {
-      currentState.loaded = true;
-    },
-    refreshDeps: [baseUrl],
-  });
-
-  const loginUserSession = async (userSession) => {
-    const params = pick(userSession, ['userDid', 'visitorId', 'passportId', 'id']);
-    try {
-      currentState.loadingId = userSession.id;
-      const { data } = await api.post(
-        'login',
-        { ...params, appPid: loginAppPid },
-        {
-          baseURL: joinURL(userSession.appUrl || '/', prefix),
-        }
-      );
-      return data;
-    } catch (err) {
-      const errorMsg = err.response ? err.response?.data?.error || err.response?.data : err.message;
-      Toast.error(errorMsg);
-      logger.error('Quick login error', err);
-      throw err;
-    } finally {
-      currentState.loadingId = null;
-    }
-  };
-
-  const onlineUserSessions = useCreation(() => {
-    if (!userSessionsState.data) return [];
-    return userSessionsState.data.filter((x) => x.status !== 'expired');
-  }, [userSessionsState.data]);
-
-  const uniqueUserSessions = useCreation(() => {
-    const now = new Date().getTime();
-    const sortedUserSessions = sortBy(onlineUserSessions, (x) => now - new Date(x.updatedAt).getTime());
-    return unionBy(sortedUserSessions, (x) =>
-      [
-        x.userDid,
-        // 暂不以用户角色来做去重的因子
-        // x.user.role
-      ].join('_')
-    );
-  }, [onlineUserSessions, sourceAppPid, appPid]);
-
-  const quickLoginEnabled = useCreation(() => {
-    return Boolean(uniqueUserSessions && uniqueUserSessions.length > 0);
-  }, [uniqueUserSessions]);
-
-  return {
-    loadingId: currentState.loadingId,
-    userSessions: uniqueUserSessions,
-    quickLoginEnabled,
-    loginUserSession,
-    loading: userSessionsState.loading,
-    loaded: userSessionsState.loaded,
-    refresh: userSessionsState.refreshAsync,
-  };
-}

package/src/Connect/index.jsx

@@ -1,21 +0,0 @@
-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';
-
-const LazyConnect = lazy(() => import('./connect'));
-
-function WrapConnect(props) {
-  return (
-    <Suspense fallback={<FallbackConnect />}>
-      <LazyConnect {...props} />
-    </Suspense>
-  );
-}
-
-export default withUxTheme(withBridgeCall(withBlocklet(withContainer(WrapConnect))));
-
-export { useSecurity };

package/src/Connect/landing-page.jsx

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

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

@@ -1,85 +0,0 @@
-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';
-import defaultTranslations from '../../assets/locale';
-
-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: {
-      ...defaultTranslations.zh,
-      email: '邮箱地址',
-      emailPlaceholder: '请输入邮箱地址',
-      sendCode: '发送验证邮件',
-      confirm: '确认',
-      verifyEmail: '登录链接已发送至邮箱，请登录邮箱查看',
-      useCode: '使用验证码',
-      codePlaceholder: '请输入验证码',
-      orUseCodePlaceholder: '或使用验证码',
-      emailInvalid: '邮箱格式不正确',
-      emailRequired: '邮箱地址不能为空',
-    },
-    en: {
-      ...defaultTranslations.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,
-  };
-}

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

@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemoizedFn } from 'ahooks';
-import mailFilledIcon from '@iconify-icons/tabler/mail-filled';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
-import { GA_LAST_LOGIN_METHOD } from '@arcblock/ux/lib/withTracker/constant';
-
-import LoginMethodItem from '../../components/login-item/login-method-item';
-import { useStateContext } from '../../contexts/state';
-
-export default function EmailListItem({ ...rest }) {
-  const { setSelectedPlugin, getPlugin, connectState, lastLoginMethod } = useStateContext();
-  const handleConnect = useMemoizedFn(() => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
-    const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
-    plugin.state.reset();
-    plugin.state.status = 'creating';
-    connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
-    connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
-    setSelectedPlugin(plugin);
-  });
-
-  return (
-    <LoginMethodItem
-      {...rest}
-      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.EMAIL}
-      title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
-      icon={mailFilledIcon}
-      onClick={handleConnect}
-    />
-  );
-}
-
-EmailListItem.propTypes = {
-  onClick: PropTypes.func,
-};

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

@@ -1,372 +0,0 @@
-import LoadingMask from '@arcblock/ux/lib/LoadingMask';
-import { Box, CircularProgress, TextField, Typography } from '@mui/material';
-import { useCreation, useInterval, useMemoizedFn, useReactive } from 'ahooks';
-import PropTypes from 'prop-types';
-import { joinURL, withQuery } from 'ufo';
-import Toast from '@arcblock/ux/lib/Toast';
-import VerificationCode from '@arcblock/ux/lib/VerificationCode';
-import { useEffect } from 'react';
-import noop from 'lodash/noop';
-import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { LOGIN_PROVIDER, LAST_USED_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
-
-import BackButton from '../../components/back-button';
-import ActionButton from '../../components/action-button';
-import { useStateContext } from '../../contexts/state';
-import { BLOCKLET_SERVICE_PATH_PREFIX, CHECK_STATUS_INTERVAL, VERIFY_CODE_LENGTH } from '../../../constant';
-import { createAxios, debug } from '../../../utils';
-
-export default function EmailPlaceholder({
-  fallback = null,
-  state,
-  forceUpdate = noop,
-  onSuccess = noop,
-  t: rawT = noop,
-}) {
-  const { setSelectedPlugin, locale, connectState, action, extraParams } = useStateContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return rawT(key, data, locale);
-  });
-  const api = useCreation(() => {
-    return createAxios({
-      baseURL: joinURL(state.baseUrl, BLOCKLET_SERVICE_PATH_PREFIX, '/api/user'),
-    });
-  }, [state.baseUrl]);
-
-  const currentState = useReactive({
-    email: '',
-    code: '',
-    codeId: '',
-    defaultVerifyMode: 'magicLink',
-    verifyMode: 'magicLink', // magicLink, code
-    loadingSendCode: false,
-    loadingVerifyCode: false,
-    error: '',
-  });
-
-  const reset = useMemoizedFn(() => {
-    currentState.email = '';
-    currentState.code = '';
-    currentState.codeId = '';
-    currentState.verifyMode = currentState.defaultVerifyMode;
-    currentState.loadingSendCode = false;
-    currentState.loadingVerifyCode = false;
-    currentState.error = '';
-  });
-
-  const sendCode = useMemoizedFn(async () => {
-    if (!currentState.email || !currentState.email.trim()) {
-      currentState.error = t('emailRequired');
-      return;
-    }
-
-    // 检查邮箱格式
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(currentState.email)) {
-      currentState.error = t('emailInvalid');
-      return;
-    }
-    currentState.error = '';
-
-    try {
-      currentState.loadingSendCode = true;
-      let useMagicLink = false;
-      // FIXME: @zhanghan 暂时只允许登录时使用 magicLink，否则其他的事件无法调用正确的回调
-      if (['login'].includes(action)) {
-        // FIXME: @zhanghan 如果 sourceAppPid 存在，则不使用 magicLink，暂无法获得正确的 magicLink 地址
-        if (!connectState.sourceAppPid) {
-          useMagicLink = true;
-        }
-      }
-      const { data } = await api.post(withQuery('/email/sendCode', { locale }), {
-        email: currentState.email,
-        sourceAppPid: connectState.sourceAppPid,
-        useMagicLink,
-      });
-      currentState.verifyMode = currentState.defaultVerifyMode;
-      currentState.codeId = data.id;
-      state.status = 'sending';
-    } catch (error) {
-      const errorMessage = error?.response?.data?.error || error?.message;
-      state.status = 'error';
-      state.error = errorMessage;
-    } finally {
-      currentState.loadingSendCode = false;
-      forceUpdate();
-    }
-  });
-  const verifyCode = useMemoizedFn(async () => {
-    if (currentState.code.length !== VERIFY_CODE_LENGTH) {
-      return;
-    }
-
-    try {
-      currentState.loadingVerifyCode = true;
-      const { data: loginResult } = await api.post(withQuery('/email/login', { locale }), {
-        ...extraParams,
-        action,
-        code: currentState.code,
-        sourceAppPid: connectState.sourceAppPid,
-      });
-      debug('Email login succeed (use code)', { loginResult });
-      // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
-      localStorage.setItem(LAST_USED_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
-      await onSuccess(
-        {
-          ...loginResult,
-          encrypted: false,
-        },
-        (val) => val
-      );
-      state.status = 'succeed';
-    } catch (error) {
-      const errorMessage = error?.response?.data || error?.message;
-      Toast.error(errorMessage);
-      debug('Email login failed (use code)', { error });
-    } finally {
-      currentState.loadingVerifyCode = false;
-      forceUpdate();
-    }
-  });
-  const verifyMagicToken = useMemoizedFn(async () => {
-    state.status = 'verifying';
-    forceUpdate();
-    try {
-      const { data: loginResult } = await api.post(withQuery('/email/login', { locale }), {
-        ...extraParams,
-        action,
-        magicToken: state.magicToken,
-      });
-      debug('Email login succeed (use magic link)', { loginResult });
-      // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
-      localStorage.setItem(LAST_USED_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
-      await onSuccess(
-        {
-          ...loginResult,
-          encrypted: false,
-        },
-        (val) => val
-      );
-      state.status = 'succeed';
-    } catch (error) {
-      const errorMessage = error?.response?.data || error?.message;
-      state.status = 'error';
-      state.error = errorMessage;
-      debug('Email login failed (use magic link)', { error });
-    }
-    forceUpdate();
-  });
-
-  const shouldPoll =
-    currentState.verifyMode === 'magicLink' &&
-    state.status === 'sending' &&
-    // 如果正在校验验证码，则不轮询状态
-    !currentState.loadingVerifyCode &&
-    currentState.codeId;
-
-  const checkStatus = useMemoizedFn(async () => {
-    if (!shouldPoll) {
-      return;
-    }
-    try {
-      const { data } = await api.get('/email/status', {
-        params: {
-          codeId: currentState.codeId,
-        },
-      });
-      if (data.verified) {
-        state.status = 'succeed';
-        reset();
-        // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
-        localStorage.setItem(LAST_USED_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
-        await onSuccess({ encrypted: false }, (val) => val);
-      }
-    } catch (error) {
-      // 只做记录
-      console.error('check status error', error);
-    }
-    forceUpdate();
-  });
-
-  useInterval(checkStatus, shouldPoll ? CHECK_STATUS_INTERVAL : undefined);
-
-  useEffect(() => {
-    reset();
-    // FIXME: @zhanghan 暂不支持子站进行统一登录时使用 magicLink 登录
-    if (connectState.sourceAppPid || !['login'].includes(action)) {
-      currentState.defaultVerifyMode = 'code';
-    }
-    if (state.magicToken) {
-      verifyMagicToken();
-    }
-    // 由于存在 email 插件被重置的情况，所以需要监听 state 是否被重新赋值来执行 init 操作
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state]);
-
-  let content = null;
-  if (state.status === 'creating') {
-    content = (
-      <>
-        <Typography
-          variant="body2"
-          sx={{
-            textAlign: 'center',
-            color: 'text.secondary',
-          }}>
-          {t('emailPlaceholder')}
-        </Typography>
-        <TextField
-          name="email"
-          fullWidth
-          type="email"
-          variant="outlined"
-          label={t('email')}
-          placeholder={t('emailPlaceholder')}
-          size="small"
-          value={currentState.email}
-          onChange={(e) => {
-            currentState.email = e.target.value;
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              sendCode(currentState.email);
-            }
-          }}
-          sx={{
-            maxWidth: 320,
-            '& .MuiOutlinedInput-root': {
-              borderRadius: 1,
-            },
-          }}
-          error={!!currentState.error}
-          helperText={currentState.error}
-          slotProps={{
-            htmlInput: {
-              sx: {
-                boxSizing: 'content-box !important',
-              },
-            },
-          }}
-        />
-        <Box sx={{ display: 'flex', gap: 1 }}>
-          <BackButton
-            onClick={() => {
-              state.reset();
-              setSelectedPlugin();
-            }}
-          />
-          <ActionButton
-            sx={{
-              color: 'primary.main',
-              borderColor: 'primary.light',
-            }}
-            disabled={currentState.loadingSendCode}
-            onClick={() => {
-              sendCode(currentState.email);
-            }}>
-            {currentState.loadingSendCode ? <CircularProgress color="inherit" size={14} sx={{ mr: 1 }} /> : null}
-            {t('sendCode')}
-          </ActionButton>
-        </Box>
-      </>
-    );
-  } else if (state.status === 'sending') {
-    content = (
-      <>
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <Typography variant="body2" sx={{ textAlign: 'center', color: 'text.secondary' }}>
-            {currentState.verifyMode === 'magicLink' ? (
-              <>
-                {t('verifyEmail')}
-                <br />
-                {t('orUseCodePlaceholder')}
-              </>
-            ) : (
-              t('codePlaceholder')
-            )}
-          </Typography>
-          <>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            {/* 暂时保留代码，防止后期需要再使用 */}
-            {/* <Link
-              underline="none"
-              variant="caption"
-              component="button"
-              sx={{ mb: 2 }}
-              onClick={() => {
-                currentState.verifyMode = 'code';
-                forceUpdate();
-              }}>
-              {t('useCode')}
-            </Link>
-            <BackButton
-              onClick={() => {
-                state.status = 'creating';
-                forceUpdate();
-              }}
-            /> */}
-          </>
-        </Box>
-        <>
-          <VerificationCode
-            code={currentState.code}
-            onChange={(code) => {
-              currentState.code = code;
-            }}
-            onComplete={() => {
-              verifyCode();
-            }}
-          />
-          <Box sx={{ display: 'flex', gap: 1 }}>
-            <BackButton
-              onClick={() => {
-                currentState.code = '';
-                state.status = 'creating';
-                forceUpdate();
-              }}
-            />
-            <ActionButton
-              sx={{
-                color: 'primary.main',
-                borderColor: 'primary.light',
-              }}
-              disabled={currentState.loadingVerifyCode}
-              onClick={() => {
-                verifyCode();
-              }}>
-              {currentState.loadingVerifyCode ? <CircularProgress color="inherit" size={14} sx={{ mr: 1 }} /> : null}
-              {t('confirm')}
-            </ActionButton>
-          </Box>
-        </>
-      </>
-    );
-  } else {
-    return fallback;
-  }
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 2,
-        pb: 1,
-      }}>
-      <LoadingMask size={52} borderRadius={12}>
-        <ProviderIcon provider="email" />
-      </LoadingMask>
-      {content}
-    </Box>
-  );
-}
-
-EmailPlaceholder.propTypes = {
-  fallback: PropTypes.any,
-  state: PropTypes.object.isRequired,
-  forceUpdate: PropTypes.func,
-  onSuccess: PropTypes.func,
-  t: PropTypes.func,
-};

package/src/Connect/plugins/index.js

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as useEmailPlugin } from './email';