@arcblock/did-connect-react 3.3.4 → 3.3.5

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const o = "3.3.4", s = {
+const o = "3.3.5", s = {
   version: o
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Client side library to work with DID Connect by ArcBlock.",
   "keywords": [
     "react",
@@ -32,10 +32,10 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "3.3.4",
+    "@arcblock/bridge": "3.3.5",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.4",
-    "@arcblock/react-hooks": "3.3.4",
+    "@arcblock/icons": "3.3.5",
+    "@arcblock/react-hooks": "3.3.5",
     "@arcblock/ws": "^1.27.16",
     "@blocklet/constant": "^1.17.6",
     "@fontsource/lexend": "^5.2.9",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "529197d1b0de7d864446ac88452033fd7f541bd2"
+  "gitHead": "757fbba540967c8552f9c30fc64fdce00a8be222"
 }

package/src/Connect/components/back-button.jsx

@@ -4,7 +4,7 @@ import translations from '../assets/locale';
 import { useStateContext } from '../contexts/state';
 import ActionButton from './action-button';
 
-export default function BackButton({ onClick }) {
+export default function BackButton({ onClick, ...rest }) {
   const { locale } = useStateContext();
   const translation = translations[locale] || translations.en;
   return (
@@ -12,7 +12,8 @@ export default function BackButton({ onClick }) {
       onClick={onClick}
       sx={{
         color: 'text.secondary',
-      }}>
+      }}
+      {...rest}>
       {translation.back}
     </ActionButton>
   );

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

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
-import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
+import { 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 { 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';
@@ -17,6 +17,7 @@ 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 WalletLoginOptions from './wallet-login-options';
 import { useOAuth } from '../../../OAuth';
 import { useStateContext } from '../../contexts/state';
 import { getApiErrorMessage, getAppId, logger } from '../../../utils';
@@ -41,18 +42,27 @@ export default function ConnectProviderList({
   magicToken = undefined,
   baseUrl = '/',
   customItems = [],
+  qrcode = null,
 }) {
   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 {
+    extraParams,
+    locale,
+    connectState,
+    plugins,
+    setPlugins,
+    setSelectedPlugin,
+    getPlugin,
+    showWalletOptions,
+    setShowWalletOptions,
+  } = useStateContext();
 
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -113,6 +123,36 @@ export default function ConnectProviderList({
     connectState.chooseMethod = 'wallet';
   });
 
+  const handleMobileLoginClick = useMemoizedFn(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);
+    };
+  });
+
+  const handleWebLoginClick = useMemoizedFn(() => {
+    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();
+    };
+  });
+
+  const handleWalletLoginBack = useMemoizedFn(() => {
+    setShowWalletOptions(false);
+  });
+
   const showEmailLogin = providerList.some((p) => p.provider === LOGIN_PROVIDER.EMAIL);
 
   const emailPlugin = useEmailPlugin({ baseUrl });
@@ -159,7 +199,7 @@ export default function ConnectProviderList({
   const renderProviderList = providerList
     .map((item) => {
       if (item.provider === LOGIN_PROVIDER.WALLET) {
-        if (browser.mobile.any) {
+        if (browser.mobile.any && !showWalletOptions) {
           return (
             <MobileLoginItem
               key={LOGIN_PROVIDER.WALLET}
@@ -169,46 +209,24 @@ export default function ConnectProviderList({
               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();
-                };
-              }}
+              onClick={handleMobileLoginClick}
             />
           );
         }
+        return (
+          <WebLoginItem
+            key={LOGIN_PROVIDER.WALLET}
+            ref={webLoginRef}
+            tokenState={tokenState}
+            webWalletUrl={webWalletUrl}
+            sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+            disableSwitchApp={disableSwitchApp}
+            autoConnect={false}
+            onClick={() => {
+              setShowWalletOptions(true);
+            }}
+          />
+        );
       }
 
       if (item.provider === LOGIN_PROVIDER.PASSKEY) {
@@ -306,70 +324,87 @@ export default function ConnectProviderList({
             {
               display: 'flex',
               flexDirection: 'column',
-              gap: 1.5,
+              ...(showWalletOptions && !browser.mobile.any ? { alignItems: 'center', gap: 0 } : { gap: 1.5 }),
             },
           ]}>
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(12, 1fr)' /* 灵活的12列基础网格 */,
-              gap: 1.5,
-              '.arc-login-item:nth-child(-n+3)': {
-                gridColumn: 'span 12',
-              },
-              // 当登录项大于等于 5 时，第三个登录项增加一个 marginBottom，用于分割独占一行的和一行多个的登录项
-              '.arc-login-item:nth-child(3):nth-last-child(n+3)': {
-                mb: 1,
-              },
-              '.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',
-                  },
+          {showWalletOptions && !browser.mobile.any ? (
+            <WalletLoginOptions
+              qrcode={qrcode}
+              tokenState={tokenState}
+              webWalletUrl={webWalletUrl}
+              size={size}
+              disableSwitchApp={disableSwitchApp}
+              tokenKey={tokenKey}
+              walletLoginRef={walletLoginRef}
+              webLoginRef={webLoginRef}
+              onMobileLoginClick={handleMobileLoginClick}
+              onWebLoginClick={handleWebLoginClick}
+              onBack={handleWalletLoginBack}
+            />
+          ) : (
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(12, 1fr)' /* 灵活的12列基础网格 */,
+                gap: 1.5,
+                '.arc-login-item:nth-child(-n+3)': {
+                  gridColumn: 'span 12',
                 },
-              '.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',
-                  },
+                // 当登录项大于等于 5 时，第三个登录项增加一个 marginBottom，用于分割独占一行的和一行多个的登录项
+                '.arc-login-item:nth-child(3):nth-last-child(n+3)': {
+                  mb: 1,
                 },
-              '.arc-login-item:nth-child(4):nth-last-child(4), .arc-login-item:nth-child(4):nth-last-child(4) ~ .arc-login-item':
-                {
+                '.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',
                   },
                 },
-              '&: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>
+              }}>
+              {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>
@@ -393,4 +428,5 @@ ConnectProviderList.propTypes = {
   magicToken: PropTypes.string,
   baseUrl: PropTypes.string,
   customItems: PropTypes.arrayOf(PropTypes.node),
+  qrcode: PropTypes.node,
 };

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

@@ -15,6 +15,7 @@ import { logger } from '../../../utils';
 import useAuthUrl from '../../hooks/auth-url';
 
 export default function MobileLoginItem({
+  isTablet = false,
   ref = null,
   tokenState,
   locale,
@@ -120,7 +121,7 @@ export default function MobileLoginItem({
 
     if (isWalletWebview) {
       handleWalletConnect();
-    } else if (browser.mobile.any) {
+    } else if (browser.mobile.any || isTablet) {
       handleOpenDeeplink();
     } else {
       fallback();
@@ -176,4 +177,5 @@ MobileLoginItem.propTypes = {
   onClick: PropTypes.func,
   disableSwitchApp: PropTypes.bool,
   ref: PropTypes.any,
+  isTablet: PropTypes.bool,
 };

package/src/Connect/components/login-item/wallet-login-options.jsx

@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types';
+import { Box, Divider } from '@mui/material';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
+import { detectWalletExtension } from '@arcblock/ux/lib/Util';
+import { useCreation } from 'ahooks';
+import { useBrowser } from '@arcblock/react-hooks';
+
+import MobileLoginItem from './mobile-login-item';
+import WebLoginItem from './web-login-item';
+import BackButton from '../back-button';
+import { useStateContext } from '../../contexts/state';
+
+export default function WalletLoginOptions({
+  qrcode,
+  tokenState,
+  webWalletUrl = getWebWalletUrl(),
+  size = 'small',
+  disableSwitchApp = false,
+  tokenKey,
+  walletLoginRef = null,
+  webLoginRef = null,
+  onMobileLoginClick,
+  onWebLoginClick,
+  onBack,
+}) {
+  const { locale } = useStateContext();
+  const browser = useBrowser();
+  const isSameProtocol = checkSameProtocol(webWalletUrl);
+  const extension = detectWalletExtension();
+
+  const isTablet = useCreation(() => {
+    return browser.mobile.tablet || (!browser.mobile.any && window?.navigator?.maxTouchPoints > 0);
+  }, [browser.mobile.tablet, browser.mobile.any]);
+
+  return (
+    <>
+      {qrcode}
+
+      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Box sx={{ width: '100%' }}>
+          <Divider
+            orientation="horizontal"
+            sx={{
+              fontSize: 12,
+              color: 'text.hint',
+              '&::before, &::after': {
+                borderColor: 'divider',
+              },
+            }}>
+            or
+          </Divider>
+        </Box>
+        <Box
+          sx={{
+            width: '100%',
+            '.arc-login-item': {
+              width: '100%',
+              justifyContent: 'center',
+              '& > .arc-login-item__body': {
+                flex: 'unset',
+              },
+              '& > .other-item-icon': {
+                display: 'none !important',
+              },
+            },
+          }}>
+          {isTablet ? (
+            <MobileLoginItem
+              key={LOGIN_PROVIDER.WALLET}
+              ref={walletLoginRef}
+              tokenState={tokenState}
+              isTablet={isTablet}
+              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+              locale={locale}
+              tokenKey={tokenKey}
+              disableSwitchApp={disableSwitchApp}
+              onClick={onMobileLoginClick}
+            />
+          ) : (
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            <>
+              {(isSameProtocol || extension) && (!browser.mobile.any || extension) ? (
+                <WebLoginItem
+                  key={LOGIN_PROVIDER.WALLET}
+                  ref={webLoginRef}
+                  tokenState={tokenState}
+                  webWalletUrl={webWalletUrl}
+                  sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+                  disableSwitchApp={disableSwitchApp}
+                  onClick={onWebLoginClick}
+                />
+              ) : null}
+            </>
+          )}
+        </Box>
+
+        <BackButton variant="text" onClick={onBack} />
+      </Box>
+    </>
+  );
+}
+
+WalletLoginOptions.propTypes = {
+  qrcode: PropTypes.node.isRequired,
+  tokenState: PropTypes.object.isRequired,
+  webWalletUrl: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'normal', 'large']),
+  disableSwitchApp: PropTypes.bool,
+  tokenKey: PropTypes.string.isRequired,
+  walletLoginRef: PropTypes.object,
+  webLoginRef: PropTypes.object,
+  onMobileLoginClick: PropTypes.func.isRequired,
+  onWebLoginClick: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};

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

@@ -21,6 +21,7 @@ export default function WebLoginItem({
   webWalletUrl,
   onClick = noop,
   disableSwitchApp = false,
+  autoConnect = true,
   ...rest
 }) {
   const { browserBrand } = useStateContext();
@@ -32,6 +33,9 @@ export default function WebLoginItem({
   const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState });
 
   const handleConnectFn = useMemoizedFn(() => {
+    if (!autoConnect) {
+      return;
+    }
     currentState.loading = true;
     const openResult = openWebWallet({
       webWalletUrl,
@@ -75,9 +79,9 @@ export default function WebLoginItem({
 
   const buttonProps = useCreation(() => {
     const result = {};
-    if (extension) {
+    if (extension || !autoConnect) {
       result.onClick = handleConnect;
-    } else if (extDownloadUrl) {
+    } else if (extDownloadUrl && autoConnect) {
       result.component = 'a';
       result.href = extDownloadUrl;
       result.target = '_blank';
@@ -95,6 +99,9 @@ export default function WebLoginItem({
   }, [handleConnect, tokenState.url]);
 
   const title = useCreation(() => {
+    if (!autoConnect) {
+      return 'DID Wallet';
+    }
     if (extension || extDownloadUrl) {
       return 'DID Wallet (Extension)';
     }
@@ -145,5 +152,6 @@ WebLoginItem.propTypes = {
   webWalletUrl: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   disableSwitchApp: PropTypes.bool,
+  autoConnect: PropTypes.bool, // 点击后是否自动连接，默认true
   ref: PropTypes.any,
 };

package/src/Connect/contexts/state.jsx

@@ -35,6 +35,7 @@ function StateProvider({
 }) {
   const forceUpdate = useUpdate();
   const [plugins, setPlugins] = useState([]);
+  const [showWalletOptions, setShowWalletOptions] = useState(false);
   const [selectedPlugin, setSelectedPlugin] = useState('');
   const pluginsMap = useCreation(() => {
     return new Map(plugins.map((plugin) => [plugin.name, plugin]));
@@ -175,6 +176,10 @@ function StateProvider({
       selectedPlugin,
       setSelectedPlugin,
       forceUpdate,
+
+      // 控制钱包登录的显示
+      showWalletOptions,
+      setShowWalletOptions,
     };
   }, [
     browser.wallet,