@arcblock/did-connect-react 3.4.0 → 3.4.2

package/src/Connect/contexts/state.jsx

@@ -9,6 +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 useApps from '../hooks/use-apps';
 import { SessionContext } from '../../Session/context';
@@ -68,6 +69,13 @@ function StateProvider({
     sourceAppPid: extraParams?.sourceAppPid,
     enableSwitchApp: extraParams?.forceSwitch || extraParams?.enableSwitchApp,
   });
+  const lastLoginMethod = useCreation(() => {
+    try {
+      return localStorage.getItem(GA_LAST_LOGIN_METHOD);
+    } catch (error) {
+      return '';
+    }
+  }, []);
 
   const rootRef = useRef(null);
   const size = useSize(rootRef);
@@ -180,6 +188,8 @@ function StateProvider({
       // 控制钱包登录的显示
       showWalletOptions,
       setShowWalletOptions,
+      // 用于记录上一次登录方式
+      lastLoginMethod,
     };
   }, [
     browser.wallet,

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

@@ -56,6 +56,7 @@ export default function useProviderList({
   mode = 'dialog',
   blocklet = globalThis.blocklet,
   isSmallView = false,
+  lastLoginMethod = '',
 }) {
   const [loadingProviderList, setLoadingProviderList] = useState(false);
   const actionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
@@ -72,26 +73,51 @@ export default function useProviderList({
   );
 
   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;
-      }
+    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;
+        if (item.type === 'oauth') {
+          if (!actionList.includes(action)) {
+            return false;
+          }
         }
-      }
-      return true;
-    });
+        return true;
+      })
+      .sort((a, b) => {
+        // 优先处理 lastLoginMethod：匹配的项目排在最前面
+        if (lastLoginMethod) {
+          const aIsLastMethod = a.provider === lastLoginMethod;
+          const bIsLastMethod = b.provider === lastLoginMethod;
+          if (aIsLastMethod && !bIsLastMethod) {
+            return -1;
+          }
+          if (!aIsLastMethod && bIsLastMethod) {
+            return 1;
+          }
+        }
+        // 然后按照 order 属性排序
+        if (!isNil(a?.order) && !isNil(b?.order)) {
+          return a.order - b.order;
+        }
+        if (!isNil(a?.order)) {
+          return -1;
+        }
+        if (!isNil(b?.order)) {
+          return 1;
+        }
+        return 0;
+      });
     return result;
-  }, [loginProviderList]);
+  }, [loginProviderList, lastLoginMethod]);
 
   const hideQRCode = useCreation(() => {
     const isMobileView = mode === 'drawer' || (isSmallView && browser.mobile.any);

package/src/Connect/hooks/token.js

@@ -119,7 +119,6 @@ export default function useToken({
     store: null,
     status: 'created',
     error: '',
-    checkCount: 0,
     mfaCode: 0,
     appInfo: null,
     memberAppInfo: null,
@@ -140,6 +139,8 @@ export default function useToken({
     },
   });
 
+  // 使用 ref 存储 checkCount，避免计数时触发不必要的渲染
+  const checkCountRef = useRef(0);
   const statusExtraParams = useRef(null);
 
   const translation = translations[locale] || translations.en;
@@ -264,7 +265,7 @@ export default function useToken({
       state.url = data.url;
       state.status = 'created';
       state.error = '';
-      state.checkCount = 0;
+      checkCountRef.current = 0;
       state.appInfo = data.appInfo;
       state.memberAppInfo = data.memberAppInfo;
       state.connectedDid = extra.connectedDid;
@@ -363,7 +364,6 @@ export default function useToken({
   }, []);
 
   // Check auth token status
-  // FIXME: @zhanghan 这个函数会造成 connect 组件每秒重渲染一次，需要从 setState 入手，优化这个问题。优化的原则是，页面数据没有变更时，不应该触发重渲染
   const checkStatus = useMemoizedFn(async (force = false) => {
     if ((state.checking || document.hidden) && !force) {
       return null;
@@ -371,7 +371,14 @@ export default function useToken({
 
     // NOTICE: 仅当状态为 created 时才去计算次数统计
     if (state.status === 'created') {
-      state.checkCount++;
+      checkCountRef.current++;
+
+      // 超时判断：超过最大检查次数则标记为超时
+      if (state.status !== 'timeout' && checkCountRef.current > maxCheckCount) {
+        state.status = 'timeout';
+        unsubscribe();
+        return null;
+      }
     }
 
     if (currentState.isSocketAvailable && !force) {
@@ -467,13 +474,6 @@ export default function useToken({
       }
     }
 
-    // Mark token as expired if exceed max retry count
-    if (state.status !== 'timeout' && state.checkCount > maxCheckCount) {
-      state.status = 'timeout';
-      unsubscribe();
-      return;
-    }
-
     // Trigger on success if we completed the process
     if (state.status === 'succeed' && !currentState.onSuccessCalled) {
       // save connected_did to cookie if only on same origin
@@ -499,7 +499,7 @@ export default function useToken({
             state.url = '';
             state.appInfo = null;
             state.memberAppInfo = null;
-            state.checkCount = 0;
+            checkCountRef.current = 0;
             state.status = 'scanned';
             state.results = {
               ...state.results,
@@ -547,7 +547,7 @@ export default function useToken({
         state.url = '';
         state.appInfo = null;
         state.memberAppInfo = null;
-        state.checkCount = 0;
+        checkCountRef.current = 0;
         state.status = 'scanned';
         state.results = {
           ...state.results,

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

@@ -5,6 +5,7 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 
 import EmailListItem from './list-item';
 import EmailPlaceholder from './placeholder';
+import defaultTranslations from '../../assets/locale';
 
 export default function useEmailPlugin({ baseUrl }) {
   const state = useReactive({
@@ -38,6 +39,7 @@ export default function useEmailPlugin({ baseUrl }) {
   const icon = mailOutlineRoundedIcon;
   const translations = {
     zh: {
+      ...defaultTranslations.zh,
       email: '邮箱地址',
       emailPlaceholder: '请输入邮箱地址',
       sendCode: '发送验证邮件',
@@ -50,6 +52,7 @@ export default function useEmailPlugin({ baseUrl }) {
       emailRequired: '邮箱地址不能为空',
     },
     en: {
+      ...defaultTranslations.en,
       email: 'Email',
       emailPlaceholder: 'Enter your email address',
       sendCode: 'Send Verification Email',

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

@@ -8,9 +8,9 @@ import LoginMethodItem from '../../components/login-item/login-method-item';
 import { useStateContext } from '../../contexts/state';
 
 export default function EmailListItem({ ...rest }) {
-  const { setSelectedPlugin, getPlugin, connectState } = useStateContext();
+  const { setSelectedPlugin, getPlugin, connectState, lastLoginMethod } = useStateContext();
   const handleConnect = useMemoizedFn(() => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'email');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
     const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
     plugin.state.reset();
     plugin.state.status = 'creating';
@@ -21,6 +21,7 @@ export default function EmailListItem({ ...rest }) {
   return (
     <LoginMethodItem
       {...rest}
+      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.EMAIL}
       title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
       icon={mailFilledIcon}
       onClick={handleConnect}

package/src/Passkey/actions.jsx

@@ -67,6 +67,7 @@ export default function PasskeyActions({
   sx = {},
   mode = 'normal',
   onClick = noop,
+  isLatest = false,
 }) {
   const currentAction = useRef('');
   const passkeyDialogRef = useRef(null);
@@ -149,6 +150,8 @@ export default function PasskeyActions({
     <>
       {['both', 'only-existing'].includes(behavior) ? (
         <PasskeyAction
+          isLatest={isLatest}
+          t={t}
           action="verifying"
           state={passkeyState}
           title={t('usePasskey')}
@@ -167,6 +170,7 @@ export default function PasskeyActions({
       {['both', 'only-new'].includes(behavior) ? (
         <>
           <PasskeyAction
+            t={t}
             action="creating"
             state={passkeyState}
             title={createButtonText || t('createPasskey')}
@@ -209,4 +213,5 @@ PasskeyActions.propTypes = {
   mode: PropTypes.oneOf(['simple', 'normal']),
   onClick: PropTypes.func,
   ref: PropTypes.any,
+  isLatest: PropTypes.bool,
 };