@arcblock/did-connect-react 3.4.14 → 3.5.0

package/src/Connect/components/login-item/connect-choose-list.jsx

@@ -1,317 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
-import { getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
-import noop from 'lodash/noop';
-import { useMemoizedFn } from 'ahooks';
-import Cookie from 'js-cookie';
-import { getCookieOptions } from '@arcblock/ux/lib/Util';
-import { useEffect, useRef } from 'react';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { GA_LAST_LOGIN_METHOD } from '@arcblock/ux/lib/withTracker/constant';
-
-import MobileLoginItem from './mobile-login-item';
-import WebLoginItem from './web-login-item';
-import LoginMethodItem from './login-method-item';
-import { useOAuth } from '../../../OAuth';
-import { useStateContext } from '../../contexts/state';
-import { getApiErrorMessage, getAppId, logger } from '../../../utils';
-import PasskeyLoginItem from './passkey-login-item';
-import { usePasskey } from '../../../Passkey';
-import { useEmailPlugin } from '../../plugins';
-
-export default function ConnectChooseList({
-  onSuccess = noop,
-  onError = noop,
-  size = 'small',
-  tokenState,
-  webWalletUrl = getWebWalletUrl(),
-  tokenKey,
-  passkeyBehavior = 'none',
-  onReset = noop,
-  showMobileLogin = true,
-  showOAuthLogin = true,
-  showPasskeyLogin = true,
-  showWebLogin = true,
-  showEmailLogin = true,
-  oauthProviderList = [],
-  slotProps = {},
-  disableSwitchApp = false,
-  forceUpdate = noop,
-  magicToken = undefined,
-  baseUrl = '/',
-  customItems = [],
-}) {
-  const walletLoginRef = useRef(null);
-  const webLoginRef = useRef(null);
-  const passkeyLoginRef = useRef(null);
-  const { loginOAuth, logoutOAuth, t, oauthState } = useOAuth();
-  const { passkeyState } = usePasskey();
-  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin, lastLoginMethod } =
-    useStateContext();
-
-  const handleLoginOAuth = useMemoizedFn(async (item) => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, item.provider);
-    tokenState.reset();
-    oauthState.reset({
-      status: 'scanned',
-    });
-    passkeyState.reset();
-    connectState.chooseMethod = item.provider;
-
-    const sourceAppPid = extraParams?.sourceAppPid;
-    try {
-      oauthState.loading = true;
-      oauthState.status = 'scanned';
-      const loginResult = await loginOAuth(item, {
-        action: tokenState.action,
-        ...extraParams,
-      });
-      const cookieOptions = getCookieOptions({ returnDomain: false });
-      Cookie.remove('connected_did', cookieOptions);
-      Cookie.remove('connected_pk', cookieOptions);
-      Cookie.remove('connected_wallet_os', cookieOptions);
-
-      if (loginResult?.sessionToken) {
-        await onSuccess(
-          {
-            ...loginResult,
-            encrypted: false,
-          },
-          (val) => val,
-          {
-            sourceAppPid,
-            connected_app: getAppId(tokenState.appInfo, tokenState.memberAppInfo),
-          }
-        );
-        oauthState.loading = false;
-        oauthState.status = 'succeed';
-      }
-    } catch (e) {
-      logger.error(`Failed login OAuth: ${item.provider}`, e);
-      const errorMessage = getApiErrorMessage(e, t('loginOAuthFailed'));
-      oauthState.loading = false;
-      oauthState.error = errorMessage;
-      oauthState.status = 'error';
-      await logoutOAuth({ provider: item.provider });
-      onError(new Error(errorMessage));
-    }
-  });
-
-  const defaultRetryConnect = useMemoizedFn(async () => {
-    tokenState.reset();
-    await onReset();
-    tokenState.status = 'created';
-    connectState.chooseMethod = 'wallet';
-  });
-
-  const emailPlugin = useEmailPlugin({ baseUrl });
-
-  const setupMagicToken = useMemoizedFn(() => {
-    if (magicToken && showEmailLogin && plugins.some((plugin) => plugin.name === LOGIN_PROVIDER.EMAIL)) {
-      const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
-      if (plugin.state.status === 'idle') {
-        localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
-        plugin.state.reset();
-        plugin.state.magicToken = magicToken;
-        connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
-        setSelectedPlugin(plugin);
-        forceUpdate();
-      }
-    }
-  });
-
-  // 考虑到切换账号的情况，此时 showEmailLogin 会根据当前上下文的 blocklet 发生变化，所以需要监听 showEmailLogin 的变化
-  useEffect(() => {
-    const finalList = [];
-    if (showEmailLogin) {
-      // 尽可能确保在 baseUrl 不变的情况下，不更改 email 插件的数据，以确保页面的展示不会出现闪烁
-      const prevEmailPlugin = getPlugin(LOGIN_PROVIDER.EMAIL);
-      if (prevEmailPlugin && prevEmailPlugin.baseUrl === emailPlugin.baseUrl) {
-        finalList.push(prevEmailPlugin);
-      } else {
-        finalList.push(emailPlugin);
-      }
-    }
-    setPlugins(finalList);
-    connectState.retryConnect = defaultRetryConnect;
-    // HACK: 必须要设置延迟，不然拿不到最新的 plugins 的值
-    setTimeout(() => {
-      setupMagicToken();
-    }, 100);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showEmailLogin]);
-
-  return (
-    <Box className="did-connect__choose" sx={mergeSx({ flex: 1 }, slotProps?.root?.sx)}>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-        }}>
-        <Box
-          sx={[
-            {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 1.5,
-            },
-          ]}>
-          {showMobileLogin && (
-            <MobileLoginItem
-              t={t}
-              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
-              ref={walletLoginRef}
-              tokenState={tokenState}
-              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-              locale={locale}
-              tokenKey={tokenKey}
-              disableSwitchApp={disableSwitchApp}
-              onClick={async () => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
-                tokenState.reset();
-                await onReset();
-                tokenState.status = 'created';
-                connectState.chooseMethod = 'wallet';
-                const connectFn = walletLoginRef.current?.connect;
-                connectState.retryConnect = () => {
-                  connectFn(defaultRetryConnect);
-                };
-              }}
-            />
-          )}
-          {showWebLogin && (
-            <WebLoginItem
-              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
-              ref={webLoginRef}
-              tokenState={tokenState}
-              webWalletUrl={webWalletUrl}
-              t={t}
-              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-              disableSwitchApp={disableSwitchApp}
-              onClick={() => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
-                // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
-                tokenState.status = 'scanned';
-                connectState.chooseMethod = 'wallet-web';
-                const connectFn = webLoginRef.current.connect;
-                connectState.retryConnect = async () => {
-                  await onReset();
-                  tokenState.error = '';
-                  tokenState.status = 'scanned';
-                  connectFn();
-                };
-              }}
-            />
-          )}
-
-          {showOAuthLogin || showPasskeyLogin || showEmailLogin ? (
-            <Box
-              sx={[
-                {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 1.5,
-                },
-              ]}>
-              {/* TODO: @zhanghan 需要将所有 method 转换为 plugin 的形式注入 */}
-              {plugins.map((plugin) =>
-                plugin.renderListItem({
-                  key: plugin.name,
-                  sx: [size === 'small' ? { p: 1 } : { p: 2 }],
-                  // forceUpdate,
-                })
-              )}
-              {showOAuthLogin
-                ? oauthProviderList.map((item) => (
-                    <LoginMethodItem
-                      t={t}
-                      isLatest={lastLoginMethod && lastLoginMethod === item.provider}
-                      key={item.provider}
-                      title={LOGIN_PROVIDER_NAME[item.provider]}
-                      icon={
-                        <ProviderIcon
-                          provider={item.provider}
-                          sx={{
-                            transform: 'scale(0.95)',
-                            width: LOGIN_PROVIDER_ICON_SIZE,
-                            height: LOGIN_PROVIDER_ICON_SIZE,
-                            color: 'text.primary',
-                          }}
-                        />
-                      }
-                      onClick={() => {
-                        handleLoginOAuth(item);
-                        connectState.retryConnect = () => {
-                          handleLoginOAuth(item);
-                        };
-                      }}
-                      sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-                    />
-                  ))
-                : null}
-              {showPasskeyLogin ? (
-                <PasskeyLoginItem
-                  ref={passkeyLoginRef}
-                  onSuccess={onSuccess}
-                  onError={onError}
-                  tokenState={tokenState}
-                  behavior={passkeyBehavior}
-                  sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
-                  onClick={() => {
-                    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
-                    const connectFn = passkeyLoginRef.current.connect;
-                    connectState.chooseMethod = 'passkey';
-                    connectState.retryConnect = () => {
-                      passkeyState.verifying = true;
-                      connectState.chooseMethod = 'passkey';
-                      connectFn();
-                    };
-                  }}
-                  slotProps={{
-                    icon: {
-                      sx: {
-                        fontSize: LOGIN_PROVIDER_ICON_SIZE,
-                        '& svg': {
-                          fontSize: LOGIN_PROVIDER_ICON_SIZE,
-                          width: '1em',
-                          height: '1em',
-                        },
-                      },
-                    },
-                  }}
-                />
-              ) : null}
-            </Box>
-          ) : null}
-          {customItems.map((item) => (!item ? null : item))}
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-ConnectChooseList.propTypes = {
-  onSuccess: PropTypes.func,
-  onError: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'normal', 'large']),
-  tokenState: PropTypes.object.isRequired,
-  webWalletUrl: PropTypes.string,
-  tokenKey: PropTypes.string.isRequired,
-  passkeyBehavior: PropTypes.oneOf(['none', 'both', 'only-existing', 'only-new']),
-  onReset: PropTypes.func,
-  showMobileLogin: PropTypes.bool,
-  showOAuthLogin: PropTypes.bool,
-  showPasskeyLogin: PropTypes.bool,
-  showWebLogin: PropTypes.bool,
-  showEmailLogin: PropTypes.bool,
-  oauthProviderList: PropTypes.array,
-  slotProps: PropTypes.object,
-  disableSwitchApp: PropTypes.bool,
-  forceUpdate: PropTypes.func,
-  magicToken: PropTypes.string,
-  baseUrl: PropTypes.string,
-  customItems: PropTypes.arrayOf(PropTypes.node),
-};