@arcblock/did-connect-react 3.4.0 → 3.4.2

package/lib/Passkey/actions.js

@@ -1,28 +1,28 @@
 import { jsxs as q, Fragment as D, jsx as n } from "react/jsx-runtime";
-import { useRef as I, useEffect as F, useImperativeHandle as M } from "react";
+import { useRef as I, useEffect as L, useImperativeHandle as M } from "react";
 import z from "lodash/trim";
 import e from "prop-types";
 import k from "js-cookie";
-import { CircularProgress as L } from "@mui/material";
+import { CircularProgress as B } from "@mui/material";
 import { Icon as S } from "@iconify/react";
-import { getCookieOptions as B } from "@arcblock/ux/lib/Util";
+import { getCookieOptions as H } from "@arcblock/ux/lib/Util";
 import { useMemoizedFn as v } from "ahooks";
-import H from "@iconify-icons/material-symbols/passkey-rounded";
-import V from "@iconify-icons/material-symbols/person-add-rounded";
-import $ from "lodash/noop";
-import { mergeSx as G } from "@arcblock/ux/lib/Util/style";
-import { usePasskey as K } from "./context.js";
-import { logger as N, getWebAuthnErrorMessage as W } from "../utils.js";
-import Y from "../Connect/components/login-item/login-method-item.js";
-import J from "./dialog.js";
+import V from "@iconify-icons/material-symbols/passkey-rounded";
+import $ from "@iconify-icons/material-symbols/person-add-rounded";
+import G from "lodash/noop";
+import { mergeSx as K } from "@arcblock/ux/lib/Util/style";
+import { usePasskey as N } from "./context.js";
+import { logger as W, getWebAuthnErrorMessage as Y } from "../utils.js";
+import J from "../Connect/components/login-item/login-method-item.js";
+import Q from "./dialog.js";
 import { VERIFY_CODE_LENGTH as w } from "./constants.js";
-function x({ action: d, onClick: a, title: i, state: c, dense: f = !1, icon: l, ...u }) {
+function x({ action: d, onClick: c, title: s, state: f, dense: l = !1, icon: u, ...m }) {
   return /* @__PURE__ */ n(
-    Y,
+    J,
     {
-      ...u,
-      icon: c[d] ? /* @__PURE__ */ n(
-        L,
+      ...m,
+      icon: f[d] ? /* @__PURE__ */ n(
+        B,
         {
           size: "1em",
           sx: {
@@ -32,11 +32,11 @@ function x({ action: d, onClick: a, title: i, state: c, dense: f = !1, icon: l,
             }
           }
         }
-      ) : l,
+      ) : u,
       iconScale: 1,
-      title: i,
-      onClick: a,
-      sx: G(f ? { p: 1, backgroundColor: "transparent" } : {}, u?.sx)
+      title: s,
+      onClick: c,
+      sx: K(l ? { p: 1, backgroundColor: "transparent" } : {}, m?.sx)
     }
   );
 }
@@ -48,104 +48,108 @@ x.propTypes = {
   dense: e.bool,
   icon: e.any.isRequired
 };
-function Q({
+function U({
   ref: d = null,
-  action: a,
-  behavior: i = "none",
-  onSuccess: c,
-  onError: f,
-  extraParams: l = {},
-  createButtonText: u = "",
+  action: c,
+  behavior: s = "none",
+  onSuccess: f,
+  onError: l,
+  extraParams: u = {},
+  createButtonText: m = "",
   createMode: T = "register",
   dense: P = !1,
   slotProps: R = {},
-  sx: h = {},
-  mode: b = "normal",
-  onClick: E = $
+  sx: b = {},
+  mode: h = "normal",
+  onClick: E = G,
+  isLatest: j = !1
 }) {
-  const m = I(""), C = I(null), { t: p, loginPasskey: j, logoutPasskey: O, passkeyState: r } = K(), _ = v(async (s = "") => {
+  const p = I(""), C = I(null), { t: i, loginPasskey: O, logoutPasskey: _, passkeyState: o } = N(), A = v(async (a = "") => {
     try {
-      r.verifying = !0, r.error = "", s || (r.verifyingStatus = "");
-      const o = await j({
-        ...l,
-        action: a,
-        credentialId: s
-      }), t = B({ expireInDays: 7 });
-      k.remove("connected_did", t), k.remove("connected_pk", t), k.remove("connected_wallet_os", t), r.verifying = !1, o?.sessionToken && (await c({ ...o, encrypted: !1 }, (A) => A), r.verifyingStatus = "succeed");
-    } catch (o) {
-      N.error("Failed to verify passkey", o);
-      const t = W(o, p("verifyPasskeyFailed"), p);
-      r.verifying = !1, r.error = t, r.verifyingStatus = "error", await O(), f(new Error(t));
+      o.verifying = !0, o.error = "", a || (o.verifyingStatus = "");
+      const r = await O({
+        ...u,
+        action: c,
+        credentialId: a
+      }), t = H({ expireInDays: 7 });
+      k.remove("connected_did", t), k.remove("connected_pk", t), k.remove("connected_wallet_os", t), o.verifying = !1, r?.sessionToken && (await f({ ...r, encrypted: !1 }, (F) => F), o.verifyingStatus = "succeed");
+    } catch (r) {
+      W.error("Failed to verify passkey", r);
+      const t = Y(r, i("verifyPasskeyFailed"), i);
+      o.verifying = !1, o.error = t, o.verifyingStatus = "error", await _(), l(new Error(t));
     }
   }), y = v(
-    (s) => {
-      if (!r.sent) return;
-      s.preventDefault();
-      const o = z(s.clipboardData.getData("text/plain").slice(0, w));
-      if (!/^\d+$/.test(o)) return;
-      r.code = o.padEnd(w, " ");
-      const t = document.getElementById(`code-input-${o.length}`);
+    (a) => {
+      if (!o.sent) return;
+      a.preventDefault();
+      const r = z(a.clipboardData.getData("text/plain").slice(0, w));
+      if (!/^\d+$/.test(r)) return;
+      o.code = r.padEnd(w, " ");
+      const t = document.getElementById(`code-input-${r.length}`);
       t && t.focus();
     },
-    [r]
+    [o]
   );
-  F(() => (document.addEventListener("paste", y), () => {
+  L(() => (document.addEventListener("paste", y), () => {
     document.removeEventListener("paste", y);
   }), [y]);
   const g = v(() => {
-    m.current === "verifying" ? _() : m.current === "creating" && C.current.open();
+    p.current === "verifying" ? A() : p.current === "creating" && C.current.open();
   });
   return M(d, () => ({
     click: g
-  })), i === "none" ? null : /* @__PURE__ */ q(D, { children: [
-    ["both", "only-existing"].includes(i) ? /* @__PURE__ */ n(
+  })), s === "none" ? null : /* @__PURE__ */ q(D, { children: [
+    ["both", "only-existing"].includes(s) ? /* @__PURE__ */ n(
       x,
       {
+        isLatest: j,
+        t: i,
         action: "verifying",
-        state: r,
-        title: p("usePasskey"),
+        state: o,
+        title: i("usePasskey"),
         onClick: () => {
-          m.current = "verifying", g(), E();
+          p.current = "verifying", g(), E();
         },
         dense: P,
         slotProps: R,
-        sx: h,
-        mode: b,
-        icon: /* @__PURE__ */ n(S, { icon: H, fontSize: "1em" })
+        sx: b,
+        mode: h,
+        icon: /* @__PURE__ */ n(S, { icon: V, fontSize: "1em" })
       }
     ) : null,
-    ["both", "only-new"].includes(i) ? /* @__PURE__ */ q(D, { children: [
+    ["both", "only-new"].includes(s) ? /* @__PURE__ */ q(D, { children: [
       /* @__PURE__ */ n(
         x,
         {
+          t: i,
           action: "creating",
-          state: r,
-          title: u || p("createPasskey"),
+          state: o,
+          title: m || i("createPasskey"),
           onClick: () => {
-            m.current = "creating", g(), E();
+            p.current = "creating", g(), E();
           },
           dense: P,
           slotProps: R,
-          sx: h,
-          mode: b,
-          icon: /* @__PURE__ */ n(S, { icon: V, fontSize: "1em" })
+          sx: b,
+          mode: h,
+          icon: /* @__PURE__ */ n(S, { icon: $, fontSize: "1em" })
         }
       ),
       /* @__PURE__ */ n(
-        J,
+        Q,
         {
           ref: C,
-          action: a,
+          action: c,
           createMode: T,
-          extraParams: l,
-          onSuccess: c,
-          onError: f
+          extraParams: u,
+          onSuccess: f,
+          onError: l
         }
       )
     ] }) : null
   ] });
 }
-Q.propTypes = {
+U.propTypes = {
   action: e.string.isRequired,
   onSuccess: e.func.isRequired,
   onError: e.func.isRequired,
@@ -158,8 +162,9 @@ Q.propTypes = {
   sx: e.oneOfType([e.object, e.array]),
   mode: e.oneOf(["simple", "normal"]),
   onClick: e.func,
-  ref: e.any
+  ref: e.any,
+  isLatest: e.bool
 };
 export {
-  Q as default
+  U as default
 };

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "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.4.0",
+    "@arcblock/bridge": "3.4.2",
     "@arcblock/did": "^1.28.1",
-    "@arcblock/icons": "3.4.0",
-    "@arcblock/react-hooks": "3.4.0",
+    "@arcblock/icons": "3.4.2",
+    "@arcblock/react-hooks": "3.4.2",
     "@arcblock/ws": "^1.28.1",
     "@blocklet/constant": "^1.17.7",
     "@fontsource/lexend": "^5.2.9",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "bbf3a178a14a767aef0da795ea31abe8dfb858c1"
+  "gitHead": "9ba657c3d15f93dc93e9029845631ececf385afc"
 }

package/src/Connect/assets/locale.js

@@ -71,6 +71,7 @@ export default {
     didConnectTitle: 'DID Connect',
     didConnectDescription: 'Decentralized identities and apps, W3C DID-based, future-ready.',
     noAuthenticationProvider: 'No authentication provider configured',
+    lastUsed: 'Last Used',
   },
   zh: {
     generateError: '二维码生成失败',
@@ -143,5 +144,6 @@ export default {
     didConnectTitle: 'DID Connect',
     didConnectDescription: '面向未来的基于 W3C DID 去中心化身份和应用',
     noAuthenticationProvider: '未配置任何身份验证提供者',
+    lastUsed: '上次使用',
   },
 };

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

@@ -48,7 +48,8 @@ export default function ConnectChooseList({
   const passkeyLoginRef = useRef(null);
   const { loginOAuth, logoutOAuth, t, oauthState } = useOAuth();
   const { passkeyState } = usePasskey();
-  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin } = useStateContext();
+  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin, lastLoginMethod } =
+    useStateContext();
 
   const handleLoginOAuth = useMemoizedFn(async (item) => {
     localStorage.setItem(GA_LAST_LOGIN_METHOD, item.provider);
@@ -111,7 +112,7 @@ export default function ConnectChooseList({
     if (magicToken && showEmailLogin && 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');
+        localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
         plugin.state.reset();
         plugin.state.magicToken = magicToken;
         connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
@@ -160,6 +161,8 @@ export default function ConnectChooseList({
           ]}>
           {showMobileLogin && (
             <MobileLoginItem
+              t={t}
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
               sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
@@ -167,7 +170,7 @@ export default function ConnectChooseList({
               tokenKey={tokenKey}
               disableSwitchApp={disableSwitchApp}
               onClick={async () => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
                 tokenState.reset();
                 await onReset();
                 tokenState.status = 'created';
@@ -181,13 +184,15 @@ export default function ConnectChooseList({
           )}
           {showWebLogin && (
             <WebLoginItem
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               ref={webLoginRef}
               tokenState={tokenState}
               webWalletUrl={webWalletUrl}
+              t={t}
               sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
               disableSwitchApp={disableSwitchApp}
               onClick={() => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
                 // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
                 tokenState.status = 'scanned';
                 connectState.chooseMethod = 'wallet-web';
@@ -222,6 +227,8 @@ export default function ConnectChooseList({
               {showOAuthLogin
                 ? oauthProviderList.map((item) => (
                     <LoginMethodItem
+                      t={t}
+                      isLatest={lastLoginMethod && lastLoginMethod === item.provider}
                       key={item.provider}
                       title={LOGIN_PROVIDER_NAME[item.provider]}
                       icon={
@@ -254,7 +261,7 @@ export default function ConnectChooseList({
                   behavior={passkeyBehavior}
                   sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
                   onClick={() => {
-                    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'passkey');
+                    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
                     const connectFn = passkeyLoginRef.current.connect;
                     connectState.chooseMethod = 'passkey';
                     connectState.retryConnect = () => {

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

@@ -65,6 +65,7 @@ export default function ConnectProviderList({
     getPlugin,
     showWalletOptions,
     setShowWalletOptions,
+    lastLoginMethod,
   } = useStateContext();
 
   const t = useMemoizedFn((key, data = {}) => {
@@ -127,7 +128,7 @@ export default function ConnectProviderList({
   });
 
   const handleMobileLoginClick = useMemoizedFn(async () => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
     tokenState.reset();
     await onReset();
     tokenState.status = 'created';
@@ -139,7 +140,7 @@ export default function ConnectProviderList({
   });
 
   const handleWebLoginClick = useMemoizedFn(() => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
     // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
     tokenState.status = 'scanned';
     connectState.chooseMethod = 'wallet-web';
@@ -178,7 +179,7 @@ export default function ConnectProviderList({
     ) {
       const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
       if (plugin.state.status === 'idle') {
-        localStorage.setItem(GA_LAST_LOGIN_METHOD, 'email');
+        localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
         plugin.state.reset();
         plugin.state.magicToken = magicToken;
         connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
@@ -215,6 +216,8 @@ export default function ConnectProviderList({
         if (browser.mobile.any && !showWalletOptions) {
           return (
             <MobileLoginItem
+              t={t}
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               key={LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
@@ -233,6 +236,8 @@ export default function ConnectProviderList({
           hideQRCode || (!hideQRCode && (isSameProtocol || extension) && (!browser.mobile.any || extension));
         return shouldShowWebLoginItem ? (
           <WebLoginItem
+            t={t}
+            isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
             key={LOGIN_PROVIDER.WALLET}
             ref={webLoginRef}
             tokenState={tokenState}
@@ -265,7 +270,7 @@ export default function ConnectProviderList({
             behavior={passkeyBehavior}
             sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
             onClick={() => {
-              localStorage.setItem(GA_LAST_LOGIN_METHOD, 'passkey');
+              localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
               const connectFn = passkeyLoginRef.current.connect;
               connectState.chooseMethod = 'passkey';
               connectState.retryConnect = () => {
@@ -305,6 +310,8 @@ export default function ConnectProviderList({
       if (item.type === 'oauth') {
         return (
           <LoginMethodItem
+            t={t}
+            isLatest={lastLoginMethod && lastLoginMethod === item.provider}
             key={item.provider}
             title={LOGIN_PROVIDER_NAME[item.provider]}
             icon={

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

@@ -2,17 +2,20 @@ import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
 
 export default function LoginMethodItem({
+  isLatest = false,
   title,
   description = null,
   icon,
   iconScale = 0.95,
   slotProps = {},
   mode = 'normal',
+  t = noop,
   ...rest
 }) {
   const theme = useTheme();
@@ -23,13 +26,16 @@ export default function LoginMethodItem({
       className="arc-login-item"
       sx={mergeSx(
         {
+          position: 'relative',
           display: 'flex',
           alignItems: 'center',
           gap: 1,
           cursor: 'pointer',
           p: 1.2,
           borderRadius: 1,
-          backgroundColor: 'grey.50',
+          backgroundColor: isLatest ? 'grey.100' : 'grey.50',
+          border: isLatest ? '1px solid' : 'none',
+          borderColor: isLatest ? 'grey.100' : 'transparent',
           textDecoration: 'none',
           transition: 'background-color 0.5s',
           '&:hover, &:active, &.did-connect__choose-item__active': {
@@ -100,12 +106,21 @@ export default function LoginMethodItem({
               </Typography>
             ) : null}
           </Box>
-          <Icon
-            className="other-item-icon"
-            icon={ArrowRightAltRoundedIcon}
-            fontSize="1.3rem"
-            color={theme.palette.primary.main}
-          />
+          {isLatest ? (
+            <Typography
+              component="span"
+              className="latest-badge"
+              style={{ color: theme.palette.text.secondary, fontSize: 11 }}>
+              {t('lastUsed')}
+            </Typography>
+          ) : (
+            <Icon
+              className="other-item-icon"
+              icon={ArrowRightAltRoundedIcon}
+              fontSize="1.3rem"
+              color={theme.palette.primary.main}
+            />
+          )}
         </>
       ) : null}
     </Box>
@@ -119,4 +134,6 @@ LoginMethodItem.propTypes = {
   iconScale: PropTypes.number,
   slotProps: PropTypes.object,
   mode: PropTypes.oneOf(['mini', 'simple', 'normal']),
+  isLatest: PropTypes.bool,
+  t: PropTypes.func,
 };

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);
@@ -251,40 +253,38 @@ function Connect({
     );
   }, [hideCloseButton, onClose]);
 
-  let content = null;
-  if (showStatus) {
-    content = (
-      <Box
-        sx={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Box>
-          <ConnectStatus
-            status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
-            nextWorkflow={state.nextWorkflow}
-            mfaCode={state.mfaCode}
-            onCancel={handleCancel}
-            onRetry={handleRetry}
-            onClose={onClose}
-            messages={statusMessages}
-            locale={locale}
-            className="did-connect__auth-status auth-status"
-            loadingIcon={
-              connectState.chooseMethod ? (
-                <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
-              ) : null
-            }
-            chooseMethod={chooseMethod}
-            hideRetry={connectState.chooseMethod === 'email'}
-            hideBack={!!magicToken}
-          />
-        </Box>
+  // 预渲染 ConnectStatus，通过 CSS 控制显示/隐藏，避免 DOM 的创建/销毁导致卡顿
+  const statusContent = (
+    <Box
+      sx={{
+        flex: 1,
+        display: showStatus ? 'flex' : 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Box>
+        <ConnectStatus
+          status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
+          nextWorkflow={state.nextWorkflow}
+          mfaCode={state.mfaCode}
+          onCancel={handleCancel}
+          onRetry={handleRetry}
+          onClose={onClose}
+          messages={statusMessages}
+          locale={locale}
+          className="did-connect__auth-status auth-status"
+          loadingIcon={
+            connectState.chooseMethod ? (
+              <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
+            ) : null
+          }
+          chooseMethod={chooseMethod}
+          hideRetry={connectState.chooseMethod === 'email'}
+          hideBack={!!magicToken}
+        />
       </Box>
-    );
-  }
+    </Box>
+  );
 
   const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState: state });
 
@@ -453,8 +453,9 @@ function Connect({
           display: 'flex',
           flex: 1,
         }}>
-        {/* eslint-disable-next-line no-nested-ternary */}
-        {content}
+        {/* ConnectStatus：始终渲染，通过 CSS 控制显示/隐藏 */}
+        {statusContent}
+        {/* ConnectProviderList：始终渲染，通过 CSS 控制显示/隐藏 */}
         <ConnectProviderList
           slotProps={{
             root: {