@arcblock/did-connect-react 3.4.13 → 3.4.15

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

@@ -1,6 +1,12 @@
 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 {
+  LOGIN_PROVIDER,
+  LOGIN_PROVIDER_ICON_SIZE,
+  LOGIN_PROVIDER_NAME,
+  LAST_USED_LOGIN_METHOD,
+  WALLET_LOGIN_METHOD,
+} from '@arcblock/ux/lib/Util/constant';
 import { getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
 import { useMemoizedFn } from 'ahooks';
@@ -59,6 +65,7 @@ export default function ConnectChooseList({
     });
     passkeyState.reset();
     connectState.chooseMethod = item.provider;
+    connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
 
     const sourceAppPid = extraParams?.sourceAppPid;
     try {
@@ -74,6 +81,8 @@ export default function ConnectChooseList({
       Cookie.remove('connected_wallet_os', cookieOptions);
 
       if (loginResult?.sessionToken) {
+        // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
+        localStorage.setItem(LAST_USED_LOGIN_METHOD, item.provider);
         await onSuccess(
           {
             ...loginResult,
@@ -104,6 +113,7 @@ export default function ConnectChooseList({
     await onReset();
     tokenState.status = 'created';
     connectState.chooseMethod = 'wallet';
+    connectState.walletMethod = ''; // 重置 wallet 登录方式，确保扫码登录能正确记录
   });
 
   const emailPlugin = useEmailPlugin({ baseUrl });
@@ -162,7 +172,7 @@ export default function ConnectChooseList({
           {showMobileLogin && (
             <MobileLoginItem
               t={t}
-              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
+              isLatest={lastLoginMethod && lastLoginMethod === WALLET_LOGIN_METHOD.MOBILE}
               ref={walletLoginRef}
               tokenState={tokenState}
               sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
@@ -184,7 +194,7 @@ export default function ConnectChooseList({
           )}
           {showWebLogin && (
             <WebLoginItem
-              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
+              isLatest={lastLoginMethod && lastLoginMethod === WALLET_LOGIN_METHOD.WEB}
               ref={webLoginRef}
               tokenState={tokenState}
               webWalletUrl={webWalletUrl}
@@ -264,6 +274,7 @@ export default function ConnectChooseList({
                     localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
                     const connectFn = passkeyLoginRef.current.connect;
                     connectState.chooseMethod = 'passkey';
+                    connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
                     connectState.retryConnect = () => {
                       passkeyState.verifying = true;
                       connectState.chooseMethod = 'passkey';

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

@@ -1,6 +1,12 @@
 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 {
+  LOGIN_PROVIDER,
+  LOGIN_PROVIDER_NAME,
+  LOGIN_PROVIDER_ICON_SIZE,
+  LAST_USED_LOGIN_METHOD,
+  WALLET_LOGIN_METHOD,
+} from '@arcblock/ux/lib/Util/constant';
 import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
 import { useMemoizedFn, useCreation } from 'ahooks';
@@ -80,6 +86,7 @@ export default function ConnectProviderList({
     });
     passkeyState.reset();
     connectState.chooseMethod = item.provider;
+    connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
 
     const sourceAppPid = extraParams?.sourceAppPid;
     try {
@@ -95,6 +102,8 @@ export default function ConnectProviderList({
       Cookie.remove('connected_wallet_os', cookieOptions);
 
       if (loginResult?.sessionToken) {
+        // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
+        localStorage.setItem(LAST_USED_LOGIN_METHOD, item.provider);
         await onSuccess(
           {
             ...loginResult,
@@ -125,6 +134,7 @@ export default function ConnectProviderList({
     await onReset();
     tokenState.status = 'created';
     connectState.chooseMethod = 'wallet';
+    connectState.walletMethod = ''; // 重置 wallet 登录方式，确保扫码登录能正确记录
   });
 
   const handleMobileLoginClick = useMemoizedFn(async () => {
@@ -217,7 +227,7 @@ export default function ConnectProviderList({
           return (
             <MobileLoginItem
               t={t}
-              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
+              isLatest={lastLoginMethod && lastLoginMethod === WALLET_LOGIN_METHOD.MOBILE}
               key={LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
@@ -237,7 +247,7 @@ export default function ConnectProviderList({
         return shouldShowWebLoginItem ? (
           <WebLoginItem
             t={t}
-            isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
+            isLatest={lastLoginMethod && lastLoginMethod === WALLET_LOGIN_METHOD.WEB}
             key={LOGIN_PROVIDER.WALLET}
             ref={webLoginRef}
             tokenState={tokenState}
@@ -273,6 +283,7 @@ export default function ConnectProviderList({
               localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
               const connectFn = passkeyLoginRef.current.connect;
               connectState.chooseMethod = 'passkey';
+              connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
               connectState.retryConnect = () => {
                 passkeyState.verifying = true;
                 connectState.chooseMethod = 'passkey';

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

@@ -7,7 +7,7 @@ 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, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE, WALLET_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
 
 import { useStateContext } from '../../contexts/state';
 import LoginMethodItem from './login-method-item';
@@ -27,7 +27,7 @@ export default function MobileLoginItem({
   const currentState = useReactive({
     loading: false,
   });
-  const { isWalletWebview } = useStateContext();
+  const { isWalletWebview, connectState } = useStateContext();
   const title = 'DID Wallet';
   const browser = useBrowser();
 
@@ -120,10 +120,13 @@ export default function MobileLoginItem({
     }
 
     if (isWalletWebview) {
+      connectState.walletMethod = WALLET_LOGIN_METHOD.MOBILE;
       handleWalletConnect();
     } else if (browser.mobile.any || isTablet) {
+      connectState.walletMethod = WALLET_LOGIN_METHOD.MOBILE;
       handleOpenDeeplink();
     } else {
+      connectState.walletMethod = WALLET_LOGIN_METHOD.SCAN;
       fallback();
     }
   });

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { useImperativeHandle, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LAST_USED_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
 
 import PasskeyActions from '../../../Passkey/actions';
 import { getAppId } from '../../../utils';
@@ -11,8 +11,10 @@ export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, be
   const { extraParams, lastLoginMethod } = useStateContext();
   const passkeyActionRef = useRef(null);
 
-  const handleSuccess = useMemoizedFn((result) =>
-    onSuccess(
+  const handleSuccess = useMemoizedFn((result) => {
+    // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
+    localStorage.setItem(LAST_USED_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
+    return onSuccess(
       {
         ...result,
         encrypted: false,
@@ -22,8 +24,8 @@ export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, be
         sourceAppPid: extraParams?.sourceAppPid,
         connected_app: getAppId(tokenState.appInfo, tokenState.memberAppInfo),
       }
-    )
-  );
+    );
+  });
 
   useImperativeHandle(ref, () => ({
     connect: passkeyActionRef.current.click,

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

@@ -7,7 +7,7 @@ import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { useImperativeHandle } from 'react';
 import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE, WALLET_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
 
 import LoginMethodItem from './login-method-item';
 import { useStateContext } from '../../contexts/state';
@@ -24,7 +24,7 @@ export default function WebLoginItem({
   autoConnect = true,
   ...rest
 }) {
-  const { browserBrand } = useStateContext();
+  const { browserBrand, connectState } = useStateContext();
   const extension = detectWalletExtension();
   const currentState = useReactive({
     loading: false,
@@ -44,6 +44,8 @@ export default function WebLoginItem({
       appInfo: tokenState.appInfo,
       memberAppInfo: tokenState.memberAppInfo,
     });
+    // Web Wallet 和扩展都使用 WEB 类型
+    connectState.walletMethod = WALLET_LOGIN_METHOD.WEB;
     if (openResult?.type === 'web') {
       currentState.loading = false;
     } else {

package/src/Connect/connect.jsx

@@ -21,6 +21,8 @@ import {
   OAUTH_PROVIDER,
   DID_CONNECT_MEDIUM_WIDTH,
   DID_CONNECT_SMALL_WIDTH,
+  LAST_USED_LOGIN_METHOD,
+  WALLET_LOGIN_METHOD,
 } from '@arcblock/ux/lib/Util/constant';
 import QRCode from '@arcblock/ux/lib/QRCode';
 import { DIDConnectFooter } from '@arcblock/ux/lib/DIDConnect';
@@ -99,6 +101,16 @@ function Connect({
     setShowWalletOptions,
     lastLoginMethod,
   } = useStateContext();
+
+  // 包装 onSuccess，在 wallet 登录成功时记录细分的登录方式
+  const wrappedOnSuccess = useMemoizedFn((...args) => {
+    // walletMethod 存在说明是点击按钮的 wallet 登录，为空说明是直接扫码登录
+    // 直接扫码登录不对应任何按钮，设置为 SCAN 避免旧的 last-used 继续显示
+    const method = connectState.walletMethod || WALLET_LOGIN_METHOD.SCAN;
+    localStorage.setItem(LAST_USED_LOGIN_METHOD, method);
+    return onSuccess(...args);
+  });
+
   const { state, generate, cancelWhenScanned } = useToken({
     action,
     baseUrl,
@@ -108,7 +120,7 @@ function Connect({
     extraParams,
     prefix,
     onError,
-    onSuccess,
+    onSuccess: wrappedOnSuccess,
     locale,
     tokenKey,
     encKey,
@@ -176,8 +188,14 @@ function Connect({
     );
   }, [state.status, oauthState.status, passkeyState.status, selectedPlugin?.state?.computedStatus]);
 
-  const handleReset = useMemoizedFn(async () => {
+  const _onRecreateSession = useMemoizedFn(() => {
+    connectState.chooseMethod = 'wallet';
+    connectState.walletMethod = '';
     onRecreateSession();
+  });
+
+  const handleReset = useMemoizedFn(async () => {
+    _onRecreateSession();
     oauthState.reset();
     passkeyState.reset();
     await generate(false);
@@ -186,7 +204,7 @@ function Connect({
     connectState?.retryConnect();
   });
   const handleCancel = useMemoizedFn(() => {
-    onRecreateSession();
+    _onRecreateSession();
     oauthState.reset();
     passkeyState.reset();
     selectedPlugin?.state?.reset();

package/src/Connect/contexts/state.jsx

@@ -9,7 +9,7 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { getCurrentApp, getMaster } from '@arcblock/ux/lib/Util/federated';
 import { getDIDMotifInfo } from '@arcblock/did-motif';
 import { getDIDColor, isEthereumDid } from '@arcblock/ux/lib/Util';
-import { GA_LAST_LOGIN_METHOD } from '@arcblock/ux/lib/withTracker/constant';
+import { LAST_USED_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
 
 import useApps from '../hooks/use-apps';
 import { SessionContext } from '../../Session/context';
@@ -55,6 +55,7 @@ function StateProvider({
     autoActiveWebview: true,
     deeplink: undefined,
     chooseMethod: '',
+    walletMethod: '', // 细分的 wallet 登录方式，如 wallet-ext, wallet-web, wallet-scan 等
     retryConnect: noop,
   });
   const staticState = useRef({
@@ -71,7 +72,7 @@ function StateProvider({
   });
   const lastLoginMethod = useCreation(() => {
     try {
-      return localStorage.getItem(GA_LAST_LOGIN_METHOD);
+      return localStorage.getItem(LAST_USED_LOGIN_METHOD);
     } catch (error) {
       return '';
     }

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

@@ -1,7 +1,7 @@
 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 { LOGIN_PROVIDER, WALLET_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
 import { getBlockletData, getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
 import { useState } from 'react';
 
@@ -102,8 +102,11 @@ export default function useProviderList({
       .sort((a, b) => {
         // 优先处理 lastLoginMethod：匹配的项目排在最前面
         if (lastLoginMethod) {
-          const aIsLastMethod = a.provider === lastLoginMethod;
-          const bIsLastMethod = b.provider === lastLoginMethod;
+          // 检查是否匹配，wallet 的细分类型需要特殊处理
+          const walletMethods = Object.values(WALLET_LOGIN_METHOD);
+          const isWalletMethod = walletMethods.includes(lastLoginMethod);
+          const aIsLastMethod = isWalletMethod ? a.provider === LOGIN_PROVIDER.WALLET : a.provider === lastLoginMethod;
+          const bIsLastMethod = isWalletMethod ? b.provider === LOGIN_PROVIDER.WALLET : b.provider === lastLoginMethod;
           if (aIsLastMethod && !bIsLastMethod) {
             return -1;
           }

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

@@ -15,6 +15,7 @@ export default function EmailListItem({ ...rest }) {
     plugin.state.reset();
     plugin.state.status = 'creating';
     connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
+    connectState.walletMethod = ''; // 清除 wallet 登录方式，防止状态污染
     setSelectedPlugin(plugin);
   });
 

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

@@ -8,6 +8,7 @@ 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';
@@ -108,6 +109,8 @@ export default function EmailPlaceholder({
         sourceAppPid: connectState.sourceAppPid,
       });
       debug('Email login succeed (use code)', { loginResult });
+      // 登录成功后记录最后使用的登录方式（用于显示 Last Used 标签）
+      localStorage.setItem(LAST_USED_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
       await onSuccess(
         {
           ...loginResult,
@@ -135,6 +138,8 @@ export default function EmailPlaceholder({
         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,
@@ -172,6 +177,8 @@ export default function EmailPlaceholder({
       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) {