@arcblock/did-connect-react 3.4.0 → 3.4.1

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

@@ -1,56 +1,66 @@
-import { useBrowser as P } from "@arcblock/react-hooks";
-import { useRequest as w, useCreation as u } from "ahooks";
-import c from "lodash/isNil";
-import { LOGIN_PROVIDER as o } from "@arcblock/ux/lib/Util/constant";
-import { getFederatedEnabled as E, getMaster as k, getBlockletData as y } from "@arcblock/ux/lib/Util/federated";
-import { useState as A } from "react";
-const C = async ({ sourceAppPid: n }) => {
+import { useBrowser as k } from "@arcblock/react-hooks";
+import { useRequest as y, useCreation as L } from "ahooks";
+import n from "lodash/isNil";
+import { LOGIN_PROVIDER as s } from "@arcblock/ux/lib/Util/constant";
+import { getFederatedEnabled as A, getMaster as C, getBlockletData as T } from "@arcblock/ux/lib/Util/federated";
+import { useState as I } from "react";
+const S = async ({ sourceAppPid: a }) => {
   const t = globalThis?.blocklet;
   if (!t)
     return {
-      [o.WALLET]: {
+      [s.WALLET]: {
         order: 0,
         enabled: !0,
         showQrcode: !0
       },
-      [o.PASSKEY]: {
+      [s.PASSKEY]: {
         order: 1,
         enabled: !0
       }
     };
-  const a = E(t), e = k(t);
-  return a && e?.appPid && n === e?.appPid ? (await y(e.appUrl))?.settings?.authentication || {} : t?.settings?.authentication || {};
-}, T = async ({ sourceAppPid: n } = {}) => {
-  const t = await C({ sourceAppPid: n });
-  return Object.entries(t).map(([e, r]) => ({ ...r, provider: e })).filter((e) => e.enabled).sort((e, r) => !c(e?.order) && !c(r?.order) ? e.order - r.order : c(e?.order) ? 1 : -1);
+  const l = A(t), e = C(t);
+  return l && e?.appPid && a === e?.appPid ? (await T(e.appUrl))?.settings?.authentication || {} : t?.settings?.authentication || {};
+}, B = async ({ sourceAppPid: a } = {}) => {
+  const t = await S({ sourceAppPid: a });
+  return Object.entries(t).map(([e, o]) => ({ ...o, provider: e })).filter((e) => e.enabled).sort((e, o) => !n(e?.order) && !n(o?.order) ? e.order - o.order : n(e?.order) ? 1 : -1);
 };
-function W({
-  allowWallet: n = !0,
+function Y({
+  allowWallet: a = !0,
   passkeyBehavior: t = "none",
-  action: a,
+  action: l,
   sourceAppPid: e,
-  mode: r = "dialog",
-  blocklet: p = globalThis.blocklet,
-  isSmallView: f = !1
+  mode: o = "dialog",
+  blocklet: b = globalThis.blocklet,
+  isSmallView: p = !1,
+  lastLoginMethod: u = ""
 }) {
-  const [h, L] = A(!1), m = ["login", "invite", "connect-to-did-space", "connect-to-did-domain", "destroy-self"], l = P(), { data: g = [] } = w(
+  const [P, g] = I(!1), w = ["login", "invite", "connect-to-did-space", "connect-to-did-domain", "destroy-self"], c = k(), { data: h = [] } = y(
     async () => {
-      L(!0);
-      const i = await T({ sourceAppPid: e });
-      return L(!1), i;
+      g(!0);
+      const d = await B({ sourceAppPid: e });
+      return g(!1), d;
     },
     { refreshDeps: [e] }
-  ), d = u(() => g.filter((s) => s.name === o.WALLET ? n : s.name === o.PASSKEY ? t !== "none" && !l.wallet && !l.arcSphere : s.name === o.EMAIL ? p?.settings?.notification?.email?.enabled ?? !1 : !(s.type === "oauth" && !m.includes(a))), [g]), b = u(() => {
-    const i = r === "drawer" || f && l.mobile.any;
-    return globalThis?.blocklet ? !!(d.find((v) => v.provider === o.WALLET)?.showQrcode !== !0 || i) : !!i;
-  }, [r, f, d]);
+  ), f = L(() => h.filter((r) => r.name === s.WALLET ? a : r.name === s.PASSKEY ? t !== "none" && !c.wallet && !c.arcSphere : r.name === s.EMAIL ? b?.settings?.notification?.email?.enabled ?? !1 : !(r.type === "oauth" && !w.includes(l))).sort((r, i) => {
+    if (u) {
+      const m = r.provider === u, v = i.provider === u;
+      if (m && !v)
+        return -1;
+      if (!m && v)
+        return 1;
+    }
+    return !n(r?.order) && !n(i?.order) ? r.order - i.order : n(r?.order) ? n(i?.order) ? 0 : 1 : -1;
+  }), [h, u]), E = L(() => {
+    const d = o === "drawer" || p && c.mobile.any;
+    return globalThis?.blocklet ? !!(f.find((i) => i.provider === s.WALLET)?.showQrcode !== !0 || d) : !!d;
+  }, [o, p, f]);
   return {
-    hideChooseList: u(() => !1),
-    hideQRCode: b,
-    providerList: d,
-    loadingProviderList: h
+    hideChooseList: L(() => !1),
+    hideQRCode: E,
+    providerList: f,
+    loadingProviderList: P
   };
 }
 export {
-  W as default
+  Y as default
 };

package/lib/Connect/plugins/email/list-item.js

@@ -1,30 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
-import c from "prop-types";
-import { useMemoizedFn as l } from "ahooks";
+import { jsx as c } from "react/jsx-runtime";
+import l from "prop-types";
+import { useMemoizedFn as a } from "ahooks";
 import p from "@iconify-icons/tabler/mail-filled";
-import { LOGIN_PROVIDER as o, LOGIN_PROVIDER_NAME as a } from "@arcblock/ux/lib/Util/constant";
-import { GA_LAST_LOGIN_METHOD as I } from "@arcblock/ux/lib/withTracker/constant";
+import { LOGIN_PROVIDER as t, LOGIN_PROVIDER_NAME as I } from "@arcblock/ux/lib/Util/constant";
+import { GA_LAST_LOGIN_METHOD as L } from "@arcblock/ux/lib/withTracker/constant";
 import f from "../../components/login-item/login-method-item.js";
-import { useStateContext as u } from "../../contexts/state.js";
-function L({ ...e }) {
-  const { setSelectedPlugin: i, getPlugin: r, connectState: m } = u(), n = l(() => {
-    localStorage.setItem(I, "email");
-    const t = r(o.EMAIL);
-    t.state.reset(), t.state.status = "creating", m.chooseMethod = o.EMAIL, i(t);
+import { useStateContext as M } from "../../contexts/state.js";
+function u({ ...i }) {
+  const { setSelectedPlugin: n, getPlugin: r, connectState: m, lastLoginMethod: e } = M(), s = a(() => {
+    localStorage.setItem(L, t.EMAIL);
+    const o = r(t.EMAIL);
+    o.state.reset(), o.state.status = "creating", m.chooseMethod = t.EMAIL, n(o);
   });
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     f,
     {
-      ...e,
-      title: a[o.EMAIL],
+      ...i,
+      isLatest: e && e === t.EMAIL,
+      title: I[t.EMAIL],
       icon: p,
-      onClick: n
+      onClick: s
     }
   );
 }
-L.propTypes = {
-  onClick: c.func
+u.propTypes = {
+  onClick: l.func
 };
 export {
-  L as default
+  u as default
 };

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.1", s = {
   version: o
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "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.1",
     "@arcblock/did": "^1.28.1",
-    "@arcblock/icons": "3.4.0",
-    "@arcblock/react-hooks": "3.4.0",
+    "@arcblock/icons": "3.4.1",
+    "@arcblock/react-hooks": "3.4.1",
     "@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": "6101f8f54333c0c376437160147a0b15a1548111"
 }

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