@arcblock/did-connect-react 3.4.0 → 3.4.1

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

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { useImperativeHandle, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 
 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 { extraParams, lastLoginMethod } = useStateContext();
   const passkeyActionRef = useRef(null);
 
   const handleSuccess = useMemoizedFn((result) =>
@@ -36,6 +37,7 @@ export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, be
     <PasskeyActions
       {...rest}
       ref={passkeyActionRef}
+      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.PASSKEY}
       action={tokenState.action}
       behavior={behavior}
       onSuccess={handleSuccess}

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

@@ -24,7 +24,7 @@ export default function WalletLoginOptions({
   onWebLoginClick,
   onBack,
 }) {
-  const { locale } = useStateContext();
+  const { t, locale } = useStateContext();
   const browser = useBrowser();
   const isSameProtocol = checkSameProtocol(webWalletUrl);
   const extension = detectWalletExtension();
@@ -32,7 +32,6 @@ export default function WalletLoginOptions({
   const isTablet = useCreation(() => {
     return browser.mobile.tablet || (!browser.mobile.any && window?.navigator?.maxTouchPoints > 0);
   }, [browser.mobile.tablet, browser.mobile.any]);
-
   return (
     <>
       {qrcode}
@@ -67,6 +66,7 @@ export default function WalletLoginOptions({
           }}>
           {isTablet ? (
             <MobileLoginItem
+              t={t}
               key={LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
@@ -82,6 +82,7 @@ export default function WalletLoginOptions({
             <>
               {(isSameProtocol || extension) && (!browser.mobile.any || extension) ? (
                 <WebLoginItem
+                  t={t}
                   key={LOGIN_PROVIDER.WALLET}
                   ref={webLoginRef}
                   tokenState={tokenState}

package/src/Connect/connect.jsx

@@ -97,6 +97,7 @@ function Connect({
     masterBlocklet,
     showWalletOptions,
     setShowWalletOptions,
+    lastLoginMethod,
   } = useStateContext();
   const { state, generate, cancelWhenScanned } = useToken({
     action,
@@ -221,6 +222,7 @@ function Connect({
     mode,
     blocklet: connectState?.sourceAppPid ? masterBlocklet : blocklet,
     isSmallView,
+    lastLoginMethod,
   });
 
   const prevSourceAppPid = usePrevious(connectState?.sourceAppPid);

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/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,
 };