@arcblock/did-connect-react 3.2.19 → 3.3.1

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

@@ -0,0 +1,392 @@
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
+import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
+import noop from 'lodash/noop';
+import { useMemoizedFn } from 'ahooks';
+import Cookie from 'js-cookie';
+import { detectWalletExtension, 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 { translate } from '@arcblock/ux/lib/Locale/util';
+import Empty from '@arcblock/ux/lib/Empty';
+import { useBrowser } from '@arcblock/react-hooks';
+
+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';
+import translations from '../../assets/locale';
+
+export default function ConnectProviderList({
+  onSuccess = noop,
+  onError = noop,
+  size = 'small',
+  tokenState,
+  webWalletUrl = getWebWalletUrl(),
+  tokenKey,
+  passkeyBehavior = 'none',
+  onReset = noop,
+  providerList = [],
+  slotProps = {},
+  disableSwitchApp = false,
+  forceUpdate = noop,
+  magicToken = undefined,
+  baseUrl = '/',
+  customItems = [],
+}) {
+  const walletLoginRef = useRef(null);
+  const webLoginRef = useRef(null);
+  const passkeyLoginRef = useRef(null);
+
+  const browser = useBrowser();
+  const isSameProtocol = checkSameProtocol(webWalletUrl);
+  const extension = detectWalletExtension();
+
+  const { loginOAuth, logoutOAuth, t: oauthT, oauthState } = useOAuth();
+  const { passkeyState } = usePasskey();
+  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin } = useStateContext();
+
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  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, oauthT('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 showEmailLogin = providerList.some((p) => p.provider === LOGIN_PROVIDER.EMAIL);
+
+  const emailPlugin = useEmailPlugin({ baseUrl });
+
+  const setupMagicToken = useMemoizedFn(() => {
+    if (
+      magicToken &&
+      providerList.some((provider) => provider.name === LOGIN_PROVIDER.EMAIL) &&
+      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, '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]);
+
+  const renderProviderList = providerList
+    .map((item) => {
+      if (item.provider === LOGIN_PROVIDER.WALLET) {
+        if (browser.mobile.any) {
+          return (
+            <MobileLoginItem
+              key={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, 'wallet');
+                tokenState.reset();
+                await onReset();
+                tokenState.status = 'created';
+                connectState.chooseMethod = 'wallet';
+                const connectFn = walletLoginRef.current?.connect;
+                connectState.retryConnect = () => {
+                  connectFn(defaultRetryConnect);
+                };
+              }}
+            />
+          );
+        }
+
+        if ((isSameProtocol || extension) && (!browser.mobile.any || extension)) {
+          return (
+            <WebLoginItem
+              key={LOGIN_PROVIDER.WALLET}
+              ref={webLoginRef}
+              tokenState={tokenState}
+              webWalletUrl={webWalletUrl}
+              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+              disableSwitchApp={disableSwitchApp}
+              onClick={() => {
+                localStorage.setItem(GA_LAST_LOGIN_METHOD, '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();
+                };
+              }}
+            />
+          );
+        }
+      }
+
+      if (item.provider === LOGIN_PROVIDER.PASSKEY) {
+        if (passkeyBehavior === 'none') {
+          return null;
+        }
+        return (
+          <PasskeyLoginItem
+            key={LOGIN_PROVIDER.PASSKEY}
+            ref={passkeyLoginRef}
+            onSuccess={onSuccess}
+            onError={onError}
+            tokenState={tokenState}
+            behavior={passkeyBehavior}
+            sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+            onClick={() => {
+              localStorage.setItem(GA_LAST_LOGIN_METHOD, 'passkey');
+              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',
+                  },
+                },
+              },
+            }}
+          />
+        );
+      }
+
+      if (item.provider === LOGIN_PROVIDER.EMAIL) {
+        const findEmailPlugin = plugins.find((p) => p.name === LOGIN_PROVIDER.EMAIL);
+        if (!findEmailPlugin) {
+          return null;
+        }
+        return findEmailPlugin?.renderListItem({
+          key: findEmailPlugin.name,
+          sx: [size === 'small' ? { p: 1 } : { p: 2 }],
+          // forceUpdate,
+        });
+      }
+
+      if (item.type === 'oauth') {
+        return (
+          <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 }]}
+          />
+        );
+      }
+
+      return null;
+    })
+    .filter(Boolean);
+
+  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,
+            },
+          ]}>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(12, 1fr)' /* 灵活的12列基础网格 */,
+              gap: 1.25,
+              '.arc-login-item:nth-child(-n+3)': {
+                gridColumn: 'span 12',
+              },
+              '.arc-login-item:nth-child(4):last-child': {
+                gridColumn: 'span 12',
+              },
+              '.arc-login-item:nth-child(4):nth-last-child(2), .arc-login-item:nth-child(4):nth-last-child(2), .arc-login-item:nth-child(4):nth-last-child(2) ~ .arc-login-item':
+                {
+                  gridColumn: 'span 6',
+                  justifyContent: 'center',
+                  '.arc-login-item__body, .other-item-icon': {
+                    display: 'none',
+                  },
+                },
+              '.arc-login-item:nth-child(4):nth-last-child(3), .arc-login-item:nth-child(4):nth-last-child(3) ~ .arc-login-item':
+                {
+                  justifyContent: 'center',
+                  gridColumn: 'span 4',
+                  '.arc-login-item__body, .other-item-icon': {
+                    display: 'none',
+                  },
+                },
+              '.arc-login-item:nth-child(4):nth-last-child(4), .arc-login-item:nth-child(4):nth-last-child(4) ~ .arc-login-item':
+                {
+                  gridColumn: 'span 3',
+                  justifyContent: 'center',
+                  '.arc-login-item__body, .other-item-icon': {
+                    display: 'none',
+                  },
+                },
+              '&:has(.arc-login-item:nth-child(8)) .arc-login-item:nth-child(n+4)': {
+                gridColumn: 'span 3',
+                justifyContent: 'center',
+                '.arc-login-item__body, .other-item-icon': {
+                  display: 'none',
+                },
+              },
+            }}>
+            {renderProviderList.length > 0 ? (
+              renderProviderList
+            ) : (
+              <Empty
+                className="arc-login-item"
+                sx={{
+                  '.empty-content': {
+                    textAlign: 'center',
+                  },
+                }}>
+                {t('noAuthenticationProvider')}
+              </Empty>
+            )}
+          </Box>
+          {customItems.map((item) => (!item ? null : item))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+ConnectProviderList.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,
+  providerList: 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

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
@@ -19,6 +19,7 @@ export default function LoginMethodItem({
   return (
     <Box
       {...rest}
+      className="arc-login-item"
       sx={mergeSx(
         {
           display: 'flex',
@@ -48,34 +49,36 @@ export default function LoginMethodItem({
         },
         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>
+      <Tooltip title={title}>
+        <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>
+      </Tooltip>
       {mode === 'normal' ? (
         <>
-          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+          <Box className="arc-login-item__body" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
             <Typography
               sx={{
                 fontSize: 14,
@@ -114,5 +117,5 @@ LoginMethodItem.propTypes = {
   icon: PropTypes.any.isRequired,
   iconScale: PropTypes.number,
   slotProps: PropTypes.object,
-  mode: PropTypes.oneOf(['simple', 'normal']),
+  mode: PropTypes.oneOf(['mini', 'simple', 'normal']),
 };

package/src/Connect/hooks/provider-list.js

@@ -0,0 +1,127 @@
+import { useBrowser } from '@arcblock/react-hooks';
+import { useCreation, useRequest } from 'ahooks';
+import isNil from 'lodash/isNil';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { getBlockletData, getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+
+const getAuthenticationConfig = async ({ sourceAppPid }) => {
+  const blocklet = globalThis?.blocklet;
+  if (!blocklet) {
+    return {
+      [LOGIN_PROVIDER.WALLET]: {
+        order: 0,
+        enabled: true,
+        showQrcode: true,
+      },
+      [LOGIN_PROVIDER.PASSKEY]: {
+        order: 1,
+        enabled: true,
+      },
+    };
+  }
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const master = getMaster(blocklet);
+  if (federatedEnabled && master?.appPid && sourceAppPid === master?.appPid) {
+    const masterBlocklet = await getBlockletData(master.appUrl);
+    return masterBlocklet?.settings?.authentication || {};
+  }
+  return blocklet?.settings?.authentication || {};
+};
+
+const getLoginProviderList = async ({ sourceAppPid } = {}) => {
+  const authenticationConfig = await getAuthenticationConfig({ sourceAppPid });
+  const loginProviderList = Object.entries(authenticationConfig)
+    .map(([key, value]) => {
+      return { ...value, provider: key };
+    })
+    .filter((item) => item.enabled)
+    .sort((a, b) => {
+      if (!isNil(a?.order) && !isNil(b?.order)) {
+        return a.order - b.order;
+      }
+      if (!isNil(a?.order)) {
+        return -1;
+      }
+      return 1;
+    });
+  return loginProviderList;
+};
+
+export default function useProviderList({
+  allowWallet = true,
+  passkeyBehavior = 'none',
+  action,
+  sourceAppPid,
+  mode = 'dialog',
+  blocklet = globalThis.blocklet,
+  isSmallView = false,
+}) {
+  const actionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
+  const browser = useBrowser();
+
+  const { data: loginProviderList = [] } = useRequest(
+    async () => {
+      const data = await getLoginProviderList({ sourceAppPid });
+      return data;
+    },
+    { refreshDeps: [sourceAppPid] }
+  );
+
+  const showedLoginProviderList = useCreation(() => {
+    const result = loginProviderList.filter((item) => {
+      if (item.name === LOGIN_PROVIDER.WALLET) {
+        return allowWallet;
+      }
+      if (item.name === LOGIN_PROVIDER.PASSKEY) {
+        return passkeyBehavior !== 'none' && !browser.wallet && !browser.arcSphere;
+      }
+      if (item.name === LOGIN_PROVIDER.EMAIL) {
+        return blocklet?.settings?.notification?.email?.enabled ?? false;
+      }
+
+      if (item.type === 'oauth') {
+        if (!actionList.includes(action)) {
+          return false;
+        }
+      }
+      return true;
+    });
+    return result;
+  }, [loginProviderList]);
+
+  const hideQRCode = useCreation(() => {
+    const isMobileView = mode === 'drawer' || (isSmallView && browser.mobile.any);
+    if (!globalThis?.blocklet) {
+      if (!isMobileView) {
+        return false;
+      }
+      return true;
+    }
+
+    const walletProvider = showedLoginProviderList.find((item) => item.provider === LOGIN_PROVIDER.WALLET);
+    if (walletProvider?.showQrcode !== true) {
+      return true;
+    }
+    if (isMobileView) {
+      return true;
+    }
+    return false;
+  }, [mode, isSmallView, showedLoginProviderList]);
+
+  const hideChooseList = useCreation(() => {
+    return false;
+    // NOTICE: 先保留这部分逻辑，后续根据需求调整
+    // if (showOAuthLogin || showPasskeyLogin) {
+    //   return false;
+    // }
+    // return true;
+  });
+
+  const result = {
+    hideChooseList,
+    hideQRCode,
+    providerList: showedLoginProviderList,
+  };
+
+  return result;
+}

package/src/Connect/index.jsx

@@ -36,7 +36,7 @@ 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 ConnectProviderList from './components/login-item/connect-provider-list';
 import AutoHeight from './components/auto-height';
 import useToken from './hooks/token';
 import { useOAuth } from '../OAuth';
@@ -46,7 +46,7 @@ import { API_DID_PREFIX, DEFAULT_TIMEOUT, BUSY_STATUS, CHECK_STATUS_INTERVAL } f
 import { getWebWalletUrl } from '../utils';
 import DIDConnectTitle from './components/did-connect-title';
 import DownloadTips from './components/download-tips';
-import useMethodList from './hooks/method-list';
+import useProviderList from './hooks/provider-list';
 import useAuthUrl from './hooks/auth-url';
 import { getWalletDid } from '../User/use-did';
 
@@ -213,19 +213,9 @@ function Connect({
     return LOGIN_PROVIDER_NAME[connectState.chooseMethod] || 'DID Wallet';
   }, [connectState.chooseMethod]);
 
-  const {
-    showMobileLogin,
-    hideChooseList,
-    oauthProviderList,
-    showOAuthLogin,
-    showPasskeyLogin,
-    showWebLogin,
-    showEmailLogin,
-    hideQRCode,
-  } = useMethodList({
+  const { providerList, hideQRCode, hideChooseList } = useProviderList({
     action: state.action,
     sourceAppPid: connectState?.sourceAppPid,
-    enabledConnectTypes,
     allowWallet,
     passkeyBehavior,
     webWalletUrl,
@@ -301,7 +291,7 @@ function Connect({
 
   // 防止二维码抖动，使用 useCreation 进行缓存
   const qrcode = useCreation(() => {
-    const backgroundColor = theme.mode === 'dark' ? theme.palette.grey[500] : 'white';
+    const backgroundColor = theme.mode === 'dark' ? theme.palette.grey[600] : 'white';
     return (
       <Box
         sx={{
@@ -437,7 +427,7 @@ function Connect({
         }}>
         {/* eslint-disable-next-line no-nested-ternary */}
         {content}
-        <ConnectChooseList
+        <ConnectProviderList
           slotProps={{
             root: {
               sx: [showStatus ? { display: 'none' } : {}],
@@ -453,18 +443,13 @@ function Connect({
           webWalletUrl={webWalletUrl}
           extraContent={extraContent}
           enabledConnectTypes={enabledConnectTypes}
-          onRest={handleReset}
-          showMobileLogin={showMobileLogin && hideQRCode}
-          showOAuthLogin={showOAuthLogin}
-          showPasskeyLogin={showPasskeyLogin}
-          showWebLogin={showWebLogin}
-          showEmailLogin={showEmailLogin}
-          oauthProviderList={oauthProviderList}
+          onReset={handleReset}
           disableSwitchApp={disableSwitchApp}
           forceUpdate={forceUpdate}
           magicToken={magicToken}
           baseUrl={baseUrl}
           customItems={customItems}
+          providerList={providerList}
         />
       </Box>
     </Box>
@@ -494,11 +479,7 @@ function Connect({
         maxWidth: '100%',
         width:
           // eslint-disable-next-line no-nested-ternary
-          mode === 'drawer'
-            ? '100%'
-            : hideQRCode || showStatus || hideChooseList
-              ? DID_CONNECT_SMALL_WIDTH
-              : DID_CONNECT_MEDIUM_WIDTH,
+          mode === 'drawer' ? '100%' : hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH,
         transition: 'width 0.2s ease-in-out',
         margin: 'auto',
         p: isSmallView ? 2 : 3,