@arcblock/did-connect-react 3.1.0

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

@@ -0,0 +1,304 @@
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+import { LOGIN_PROVIDER, 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 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',
+  onRest = 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 } = useStateContext();
+
+  const handleLoginOAuth = useMemoizedFn(async (item) => {
+    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 onRest();
+    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') {
+        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 && size !== 'small' && (
+            <MobileLoginItem
+              ref={walletLoginRef}
+              tokenState={tokenState}
+              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+              locale={locale}
+              tokenKey={tokenKey}
+              disableSwitchApp={disableSwitchApp}
+              onClick={async () => {
+                tokenState.reset();
+                await onRest();
+                tokenState.status = 'created';
+                connectState.chooseMethod = 'wallet';
+                const connectFn = walletLoginRef.current?.connect;
+                connectState.retryConnect = () => {
+                  connectFn(defaultRetryConnect);
+                };
+              }}
+            />
+          )}
+          {showWebLogin && (
+            <WebLoginItem
+              ref={webLoginRef}
+              tokenState={tokenState}
+              webWalletUrl={webWalletUrl}
+              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+              disableSwitchApp={disableSwitchApp}
+              onClick={() => {
+                // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
+                tokenState.status = 'scanned';
+                connectState.chooseMethod = 'wallet-web';
+                const connectFn = webLoginRef.current.connect;
+                connectState.retryConnect = async () => {
+                  await onRest();
+                  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
+                      key={item.provider}
+                      title={LOGIN_PROVIDER_NAME[item.provider]}
+                      icon={
+                        <ProviderIcon
+                          provider={item.provider}
+                          sx={{
+                            transform: 'scale(0.95)',
+                            width: 24,
+                            height: 24,
+                            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={() => {
+                    const connectFn = passkeyLoginRef.current.connect;
+                    connectState.chooseMethod = 'passkey';
+                    connectState.retryConnect = () => {
+                      passkeyState.verifying = true;
+                      connectState.chooseMethod = 'passkey';
+                      connectFn();
+                    };
+                  }}
+                  slotProps={{
+                    icon: {
+                      sx: {
+                        fontSize: 24,
+                        '& svg': {
+                          fontSize: 24,
+                          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']),
+  onRest: 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),
+};

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

@@ -0,0 +1,118 @@
+import { Box, Typography, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
+
+export default function LoginMethodItem({
+  title,
+  description = null,
+  icon,
+  iconScale = 0.95,
+  slotProps = {},
+  mode = 'normal',
+  ...rest
+}) {
+  const theme = useTheme();
+
+  return (
+    <Box
+      {...rest}
+      sx={mergeSx(
+        {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          cursor: 'pointer',
+          p: 1,
+          borderRadius: 1,
+          backgroundColor: 'grey.50',
+          textDecoration: 'none',
+          transition: 'background-color 0.5s',
+          '&:hover, &:active, &.did-connect__choose-item__active': {
+            backgroundColor: 'grey.100',
+          },
+          '& .other-item-icon': {
+            opacity: '0',
+            transform: 'translateX(-100%)',
+            transition: 'transform 0.2s ease, opacity 0.1s ease',
+          },
+          '&:hover': {
+            '& .other-item-icon': {
+              display: 'inline-block',
+              transform: 'translateX(0)',
+              opacity: '1',
+            },
+          },
+        },
+        rest?.sx
+      )}>
+      <Box
+        className="arc-login-item__icon"
+        sx={mergeSx(
+          {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'text.primary',
+          },
+          slotProps?.icon?.sx
+        )}>
+        {isValidElement(icon) ? (
+          icon
+        ) : (
+          <Box
+            component={Icon}
+            icon={icon}
+            sx={{
+              transform: `scale(${iconScale})`,
+              width: 24,
+              height: 24,
+            }}
+          />
+        )}
+      </Box>
+      {mode === 'normal' ? (
+        <>
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <Typography
+              sx={{
+                fontSize: 14,
+                fontWeight: '500',
+                color: 'text.primary',
+                whiteSpace: 'nowrap',
+              }}>
+              {title}
+            </Typography>
+            {description ? (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: 12,
+                  lineHeight: 1,
+                }}>
+                {description}
+              </Typography>
+            ) : null}
+          </Box>
+          <Icon
+            className="other-item-icon"
+            icon={ArrowRightAltRoundedIcon}
+            fontSize="1.3rem"
+            color={theme.palette.primary.main}
+          />
+        </>
+      ) : null}
+    </Box>
+  );
+}
+
+LoginMethodItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  icon: PropTypes.any.isRequired,
+  iconScale: PropTypes.number,
+  slotProps: PropTypes.object,
+  mode: PropTypes.oneOf(['simple', 'normal']),
+};

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

@@ -0,0 +1,179 @@
+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 } 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({
+  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) {
+      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={24}
+            sx={{
+              '& svg': {
+                transform: 'scale(0.75)',
+              },
+            }}
+          />
+        ) : (
+          <ProviderIcon
+            width="24px"
+            height="24px"
+            provider={LOGIN_PROVIDER.DID_WALLET}
+            style={{
+              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,
+};

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

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { useImperativeHandle, useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+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 } = 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}
+      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,
+};