@arcblock/did-connect-react 3.3.7 → 3.3.8

package/lib/Connect/components/login-item/connect-provider-list.js

@@ -1,174 +1,175 @@
-import { jsx as l, jsxs as se } from "react/jsx-runtime";
+import { jsx as l, jsxs as me } from "react/jsx-runtime";
 import o from "prop-types";
-import { Box as y } from "@mui/material";
-import { LOGIN_PROVIDER as t, LOGIN_PROVIDER_ICON_SIZE as L, LOGIN_PROVIDER_NAME as ae } from "@arcblock/ux/lib/Util/constant";
-import { getWebWalletUrl as ce } from "@arcblock/ux/lib/Util/wallet";
-import I from "lodash/noop";
-import { useMemoizedFn as c, useCreation as me } from "ahooks";
-import M from "js-cookie";
-import { getCookieOptions as de } from "@arcblock/ux/lib/Util";
-import { useRef as P, useEffect as K } from "react";
-import { mergeSx as pe } from "@arcblock/ux/lib/Util/style";
-import ue from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { Box as L } from "@mui/material";
+import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_ICON_SIZE as I, LOGIN_PROVIDER_NAME as de } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as pe, getWebWalletUrl as ue } from "@arcblock/ux/lib/Util/wallet";
+import b from "lodash/noop";
+import { useMemoizedFn as a, useCreation as he } from "ahooks";
+import v from "js-cookie";
+import { detectWalletExtension as ge, getCookieOptions as fe } from "@arcblock/ux/lib/Util";
+import { useRef as w, useEffect as Z } from "react";
+import { mergeSx as ye } from "@arcblock/ux/lib/Util/style";
+import Le from "@arcblock/ux/lib/DIDConnect/provider-icon";
 import { GA_LAST_LOGIN_METHOD as g } from "@arcblock/ux/lib/withTracker/constant";
-import { translate as he } from "@arcblock/ux/lib/Locale/util";
-import ge from "@arcblock/ux/lib/Empty";
-import { useBrowser as fe } from "@arcblock/react-hooks";
-import ye from "./mobile-login-item.js";
-import Le from "./web-login-item.js";
-import Ie from "./login-method-item.js";
-import Ce from "./wallet-login-options.js";
-import { useOAuth as Ae } from "../../../OAuth/context.js";
-import { useStateContext as be } from "../../contexts/state.js";
-import { getAppId as xe, logger as Ee, getApiErrorMessage as Me } from "../../../utils.js";
-import Pe from "./passkey-login-item.js";
-import { usePasskey as ve } from "../../../Passkey/context.js";
+import { translate as Ie } from "@arcblock/ux/lib/Locale/util";
+import be from "@arcblock/ux/lib/Empty";
+import { useBrowser as xe } from "@arcblock/react-hooks";
+import Ce from "./mobile-login-item.js";
+import Ae from "./web-login-item.js";
+import Ee from "./login-method-item.js";
+import Pe from "./wallet-login-options.js";
+import { useOAuth as Me } from "../../../OAuth/context.js";
+import { useStateContext as ve } from "../../contexts/state.js";
+import { getAppId as we, logger as _e, getApiErrorMessage as Oe } from "../../../utils.js";
+import We from "./passkey-login-item.js";
+import { usePasskey as Te } from "../../../Passkey/context.js";
 import "../../../Passkey/actions.js";
-import _e from "../../plugins/email/index.js";
-import we from "../../assets/locale.js";
-function Oe({
-  onSuccess: v = I,
-  onError: _ = I,
+import ke from "../../plugins/email/index.js";
+import Re from "../../assets/locale.js";
+function Se({
+  onSuccess: _ = b,
+  onError: O = b,
   size: m = "small",
   tokenState: n,
-  webWalletUrl: w = ce(),
-  tokenKey: O,
+  webWalletUrl: x = ue(),
+  tokenKey: W,
   passkeyBehavior: T = "none",
-  onReset: C = I,
+  onReset: C = b,
   providerList: d = [],
-  slotProps: Y = {},
+  slotProps: $ = {},
   disableSwitchApp: A = !1,
-  forceUpdate: H = I,
-  magicToken: W = void 0,
-  baseUrl: Z = "/",
-  customItems: $ = [],
-  qrcode: J = null
+  forceUpdate: J = b,
+  magicToken: k = void 0,
+  baseUrl: X = "/",
+  customItems: z = [],
+  qrcode: Q = null,
+  hideQRCode: f = !1
 }) {
-  const b = P(null), x = P(null), R = P(null), u = fe(), { loginOAuth: Q, logoutOAuth: X, t: z, oauthState: s } = Ae(), { passkeyState: k } = ve(), {
-    extraParams: j,
-    locale: N,
+  const E = w(null), P = w(null), R = w(null), ee = pe(x), S = ge(), p = xe(), { loginOAuth: oe, logoutOAuth: ne, t: te, oauthState: s } = Me(), { passkeyState: j } = Te(), {
+    extraParams: N,
+    locale: D,
     connectState: i,
-    plugins: D,
-    setPlugins: ee,
-    setSelectedPlugin: oe,
-    getPlugin: F,
+    plugins: F,
+    setPlugins: re,
+    setSelectedPlugin: ie,
+    getPlugin: B,
     showWalletOptions: h,
-    setShowWalletOptions: f
-  } = be(), ne = c((e, r = {}) => he(we, e, N, "en", r)), S = c(async (e) => {
+    setShowWalletOptions: y
+  } = ve(), le = a((e, t = {}) => Ie(Re, e, D, "en", t)), G = a(async (e) => {
     localStorage.setItem(g, e.provider), n.reset(), s.reset({
       status: "scanned"
-    }), k.reset(), i.chooseMethod = e.provider;
-    const r = j?.sourceAppPid;
+    }), j.reset(), i.chooseMethod = e.provider;
+    const t = N?.sourceAppPid;
     try {
       s.loading = !0, s.status = "scanned";
-      const a = await Q(e, {
+      const c = await oe(e, {
         action: n.action,
-        ...j
-      }), p = de({ returnDomain: !1 });
-      M.remove("connected_did", p), M.remove("connected_pk", p), M.remove("connected_wallet_os", p), a?.sessionToken && (await v(
+        ...N
+      }), u = fe({ returnDomain: !1 });
+      v.remove("connected_did", u), v.remove("connected_pk", u), v.remove("connected_wallet_os", u), c?.sessionToken && (await _(
         {
-          ...a,
+          ...c,
           encrypted: !1
         },
-        (le) => le,
+        (ae) => ae,
         {
-          sourceAppPid: r,
-          connected_app: xe(n.appInfo, n.memberAppInfo)
+          sourceAppPid: t,
+          connected_app: we(n.appInfo, n.memberAppInfo)
         }
       ), s.loading = !1, s.status = "succeed");
-    } catch (a) {
-      Ee.error(`Failed login OAuth: ${e.provider}`, a);
-      const p = Me(a, z("loginOAuthFailed"));
-      s.loading = !1, s.error = p, s.status = "error", await X({ provider: e.provider }), _(new Error(p));
+    } catch (c) {
+      _e.error(`Failed login OAuth: ${e.provider}`, c);
+      const u = Oe(c, te("loginOAuthFailed"));
+      s.loading = !1, s.error = u, s.status = "error", await ne({ provider: e.provider }), O(new Error(u));
     }
-  }), B = c(async () => {
+  }), U = a(async () => {
     n.reset(), await C(), n.status = "created", i.chooseMethod = "wallet";
-  }), G = c(async () => {
+  }), q = a(async () => {
     localStorage.setItem(g, "wallet"), n.reset(), await C(), n.status = "created", i.chooseMethod = "wallet";
-    const e = b.current?.connect;
+    const e = E.current?.connect;
     i.retryConnect = () => {
-      e(B);
+      e(U);
     };
-  }), te = c(() => {
+  }), V = a(() => {
     localStorage.setItem(g, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
-    const e = x.current.connect;
+    const e = P.current.connect;
     i.retryConnect = async () => {
       await C(), n.error = "", n.status = "scanned", e();
     };
-  }), re = c(() => {
-    f(!1);
-  }), E = me(() => d.length === 1 && d[0].provider === t.WALLET, [d]);
-  K(() => {
-    E && !u.mobile.any && !h && f(!0);
-  }, [E, u.mobile.any, f, h]);
-  const U = d.some((e) => e.provider === t.EMAIL), q = _e({ baseUrl: Z }), ie = c(() => {
-    if (W && d.some((e) => e.name === t.EMAIL) && D.some((e) => e.name === t.EMAIL)) {
-      const e = F(t.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(g, "email"), e.state.reset(), e.state.magicToken = W, i.chooseMethod = t.EMAIL, oe(e), H());
+  }), se = a(() => {
+    y(!1);
+  }), M = he(() => d.length === 1 && d[0].provider === r.WALLET, [d]);
+  Z(() => {
+    M && !p.mobile.any && !h && y(!0);
+  }, [M, p.mobile.any, y, h]);
+  const K = d.some((e) => e.provider === r.EMAIL), Y = ke({ baseUrl: X }), ce = a(() => {
+    if (k && d.some((e) => e.name === r.EMAIL) && F.some((e) => e.name === r.EMAIL)) {
+      const e = B(r.EMAIL);
+      e.state.status === "idle" && (localStorage.setItem(g, "email"), e.state.reset(), e.state.magicToken = k, i.chooseMethod = r.EMAIL, ie(e), J());
     }
   });
-  K(() => {
+  Z(() => {
     const e = [];
-    if (U) {
-      const r = F(t.EMAIL);
-      r && r.baseUrl === q.baseUrl ? e.push(r) : e.push(q);
+    if (K) {
+      const t = B(r.EMAIL);
+      t && t.baseUrl === Y.baseUrl ? e.push(t) : e.push(Y);
     }
-    ee(e), i.retryConnect = B, setTimeout(() => {
-      ie();
+    re(e), i.retryConnect = U, setTimeout(() => {
+      ce();
     }, 100);
-  }, [U]);
-  const V = d.map((e) => {
-    if (e.provider === t.WALLET)
-      return u.mobile.any && !h ? /* @__PURE__ */ l(
-        ye,
+  }, [K]);
+  const H = d.map((e) => {
+    if (e.provider === r.WALLET)
+      return p.mobile.any && !h ? /* @__PURE__ */ l(
+        Ce,
         {
-          ref: b,
+          ref: E,
           tokenState: n,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
-          locale: N,
-          tokenKey: O,
+          locale: D,
+          tokenKey: W,
           disableSwitchApp: A,
-          onClick: G
+          onClick: q
         },
-        t.WALLET
-      ) : /* @__PURE__ */ l(
-        Le,
+        r.WALLET
+      ) : f || !f && (ee || S) && (!p.mobile.any || S) ? /* @__PURE__ */ l(
+        Ae,
         {
-          ref: x,
+          ref: P,
           tokenState: n,
-          webWalletUrl: w,
+          webWalletUrl: x,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
           disableSwitchApp: A,
-          autoConnect: !1,
+          autoConnect: !f,
           onClick: () => {
-            f(!0);
+            f ? y(!0) : V();
           }
         },
-        t.WALLET
-      );
-    if (e.provider === t.PASSKEY)
+        r.WALLET
+      ) : null;
+    if (e.provider === r.PASSKEY)
       return T === "none" ? null : /* @__PURE__ */ l(
-        Pe,
+        We,
         {
           ref: R,
-          onSuccess: v,
-          onError: _,
+          onSuccess: _,
+          onError: O,
           tokenState: n,
           behavior: T,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
           onClick: () => {
             localStorage.setItem(g, "passkey");
-            const r = R.current.connect;
+            const t = R.current.connect;
             i.chooseMethod = "passkey", i.retryConnect = () => {
-              k.verifying = !0, i.chooseMethod = "passkey", r();
+              j.verifying = !0, i.chooseMethod = "passkey", t();
             };
           },
           slotProps: {
             icon: {
               sx: {
-                fontSize: L,
+                fontSize: I,
                 "& svg": {
-                  fontSize: L,
+                  fontSize: I,
                   width: "1em",
                   height: "1em"
                 }
@@ -176,35 +177,35 @@ function Oe({
             }
           }
         },
-        t.PASSKEY
+        r.PASSKEY
       );
-    if (e.provider === t.EMAIL) {
-      const r = D.find((a) => a.name === t.EMAIL);
-      return r ? r?.renderListItem({
-        key: r.name,
+    if (e.provider === r.EMAIL) {
+      const t = F.find((c) => c.name === r.EMAIL);
+      return t ? t?.renderListItem({
+        key: t.name,
         sx: [m === "small" ? { p: 1 } : { p: 2 }]
         // forceUpdate,
       }) : null;
     }
     return e.type === "oauth" ? /* @__PURE__ */ l(
-      Ie,
+      Ee,
       {
-        title: ae[e.provider],
+        title: de[e.provider],
         icon: /* @__PURE__ */ l(
-          ue,
+          Le,
           {
             provider: e.provider,
             sx: {
               transform: "scale(0.95)",
-              width: L,
-              height: L,
+              width: I,
+              height: I,
               color: "text.primary"
             }
           }
         ),
         onClick: () => {
-          S(e), i.retryConnect = () => {
-            S(e);
+          G(e), i.retryConnect = () => {
+            G(e);
           };
         },
         sx: [m === "small" ? { p: 1.2 } : { p: 2 }]
@@ -212,42 +213,42 @@ function Oe({
       e.provider
     ) : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ l(y, { className: "did-connect__choose", sx: pe({ flex: 1 }, Y?.root?.sx), children: /* @__PURE__ */ l(
-    y,
+  return /* @__PURE__ */ l(L, { className: "did-connect__choose", sx: ye({ flex: 1 }, $?.root?.sx), children: /* @__PURE__ */ l(
+    L,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: 2
       },
-      children: /* @__PURE__ */ se(
-        y,
+      children: /* @__PURE__ */ me(
+        L,
         {
           sx: [
             {
               display: "flex",
               flexDirection: "column",
-              ...h && !u.mobile.any ? { alignItems: "center", gap: 0 } : { gap: 1.5 }
+              ...h && !p.mobile.any ? { alignItems: "center", gap: 0 } : { gap: 1.5 }
             }
           ],
           children: [
-            h && !u.mobile.any ? /* @__PURE__ */ l(
-              Ce,
+            h && !p.mobile.any ? /* @__PURE__ */ l(
+              Pe,
               {
-                qrcode: J,
+                qrcode: Q,
                 tokenState: n,
-                webWalletUrl: w,
+                webWalletUrl: x,
                 size: m,
                 disableSwitchApp: A,
-                tokenKey: O,
-                walletLoginRef: b,
-                webLoginRef: x,
-                onMobileLoginClick: G,
-                onWebLoginClick: te,
-                onBack: E ? void 0 : re
+                tokenKey: W,
+                walletLoginRef: E,
+                webLoginRef: P,
+                onMobileLoginClick: q,
+                onWebLoginClick: V,
+                onBack: M ? void 0 : se
               }
             ) : /* @__PURE__ */ l(
-              y,
+              L,
               {
                 sx: {
                   display: "grid",
@@ -292,8 +293,8 @@ function Oe({
                     }
                   }
                 },
-                children: V.length > 0 ? V : /* @__PURE__ */ l(
-                  ge,
+                children: H.length > 0 ? H : /* @__PURE__ */ l(
+                  be,
                   {
                     className: "arc-login-item",
                     sx: {
@@ -301,19 +302,19 @@ function Oe({
                         textAlign: "center"
                       }
                     },
-                    children: ne("noAuthenticationProvider")
+                    children: le("noAuthenticationProvider")
                   }
                 )
               }
             ),
-            $.map((e) => e || null)
+            z.map((e) => e || null)
           ]
         }
       )
     }
   ) });
 }
-Oe.propTypes = {
+Se.propTypes = {
   onSuccess: o.func,
   onError: o.func,
   size: o.oneOf(["small", "normal", "large"]),
@@ -329,8 +330,9 @@ Oe.propTypes = {
   magicToken: o.string,
   baseUrl: o.string,
   customItems: o.arrayOf(o.node),
-  qrcode: o.node
+  qrcode: o.node,
+  hideQRCode: o.bool
 };
 export {
-  Oe as default
+  Se as default
 };

package/lib/Connect/index.js

@@ -34,7 +34,7 @@ import { getWalletDid as _t } from "../User/use-did.js";
 import { getWebWalletUrl as Pt } from "@arcblock/ux/lib/Util/wallet";
 function fe({
   hideCloseButton: w = !1,
-  mode: m = "dialog",
+  mode: p = "dialog",
   action: I,
   baseUrl: b = "",
   checkFn: v,
@@ -129,12 +129,12 @@ function fe({
     { leading: !0, trailing: !1 }
   );
   ue(Me, [o.status]);
-  const Be = u(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), { providerList: Le, hideQRCode: p, hideChooseList: r } = Dt({
+  const Be = u(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), { providerList: Le, hideQRCode: m, hideChooseList: r } = Dt({
     action: o.action,
     sourceAppPid: s?.sourceAppPid,
     allowWallet: V,
     passkeyBehavior: Y,
-    mode: m,
+    mode: p,
     blocklet: s?.sourceAppPid ? _e : $,
     isSmallView: oe
   }), Ne = Je(s?.sourceAppPid);
@@ -241,7 +241,7 @@ function fe({
         )
       }
     );
-  }, [se, r, f]), je = u(() => r ? "column-reverse" : !p && re ? "column" : "row", [r, re, p]), ce = u(() => E ? /* @__PURE__ */ t(
+  }, [se, r, f]), je = u(() => r ? "column-reverse" : !m && re ? "column" : "row", [r, re, m]), ce = u(() => E ? /* @__PURE__ */ t(
     i,
     {
       sx: {
@@ -311,12 +311,12 @@ function fe({
         justifyContent: "center",
         alignItems: "stretch",
         flex: 1,
-        gap: !p && oe ? 0 : 1.5,
+        gap: !m && oe ? 0 : 1.5,
         overflow: "visible",
         px: r ? 2 : 0
       },
       children: [
-        !y && !p ? /* @__PURE__ */ x(qe, { children: [
+        !y && !m ? /* @__PURE__ */ x(qe, { children: [
           ce,
           r ? null : /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
             Ge,
@@ -351,8 +351,9 @@ function fe({
                     }
                   },
                   allowWallet: V,
-                  size: p && m !== "dialog" ? "normal" : "small",
+                  size: m && p !== "dialog" ? "normal" : "small",
                   tokenState: o,
+                  hideQRCode: m,
                   messages: d,
                   tokenKey: j,
                   onSuccess: R,
@@ -383,7 +384,7 @@ function fe({
     onSuccess: R,
     onError: Q
   }) : M = U;
-  const ae = p || y ? rt : N;
+  const ae = m || y ? rt : N;
   return /* @__PURE__ */ x(
     i,
     {
@@ -398,7 +399,7 @@ function fe({
         maxWidth: "100%",
         width: (
           // eslint-disable-next-line no-nested-ternary
-          m === "drawer" ? "100%" : f ? ae - 20 : ae
+          p === "drawer" ? "100%" : f ? ae - 20 : ae
         ),
         transition: "width 0.2s ease-in-out",
         margin: "auto",
@@ -459,8 +460,8 @@ fe.propTypes = {
   magicToken: e.string,
   customItems: e.arrayOf(e.node)
 };
-function me({ testOnlyBorderColor: w = void 0, ...m }) {
-  const { checkFn: I, extraParams: b = {}, blocklet: v, masterBlocklet: D, action: T, locale: _ = "en" } = m;
+function me({ testOnlyBorderColor: w = void 0, ...p }) {
+  const { checkFn: I, extraParams: b = {}, blocklet: v, masterBlocklet: D, action: T, locale: _ = "en" } = p;
   if (typeof I != "function")
     throw new Error("Cannot initialize did connect component without a fetchFn");
   return /* @__PURE__ */ t(
@@ -484,7 +485,7 @@ function me({ testOnlyBorderColor: w = void 0, ...m }) {
           boxSizing: "border-box"
         }
       },
-      children: /* @__PURE__ */ t(fe, { ...m })
+      children: /* @__PURE__ */ t(fe, { ...p })
     }
   );
 }

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "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.3.7",
+    "@arcblock/bridge": "3.3.8",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.7",
-    "@arcblock/react-hooks": "3.3.7",
+    "@arcblock/icons": "3.3.8",
+    "@arcblock/react-hooks": "3.3.8",
     "@arcblock/ws": "^1.27.16",
     "@blocklet/constant": "^1.17.6",
     "@fontsource/lexend": "^5.2.9",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "cd0e3b812192ce054be488bcb60ed3f44e81fdff"
+  "gitHead": "b4c40eaa794d708a6d21b721306b8e1cf6fb00ce"
 }

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

@@ -1,11 +1,11 @@
 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 { getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
+import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import Cookie from 'js-cookie';
-import { getCookieOptions } from '@arcblock/ux/lib/Util';
+import { detectWalletExtension, getCookieOptions } from '@arcblock/ux/lib/Util';
 import { useEffect, useRef } from 'react';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
@@ -43,10 +43,13 @@ export default function ConnectProviderList({
   baseUrl = '/',
   customItems = [],
   qrcode = null,
+  hideQRCode = false,
 }) {
   const walletLoginRef = useRef(null);
   const webLoginRef = useRef(null);
   const passkeyLoginRef = useRef(null);
+  const isSameProtocol = checkSameProtocol(webWalletUrl);
+  const extension = detectWalletExtension();
 
   const browser = useBrowser();
 
@@ -223,7 +226,12 @@ export default function ConnectProviderList({
             />
           );
         }
-        return (
+        // 是否显示 web 登录项
+        // 1. 如果隐藏了二维码，会在新页面显示 wallet 登录项
+        // 2. 如果显示了二维码，不需要在新页面显示 wallet 登录项，根据是否是同一协议、是否安装了钱包扩展、是否是移动端来判断是否显示
+        const shouldShowWebLoginItem =
+          hideQRCode || (!hideQRCode && (isSameProtocol || extension) && (!browser.mobile.any || extension));
+        return shouldShowWebLoginItem ? (
           <WebLoginItem
             key={LOGIN_PROVIDER.WALLET}
             ref={webLoginRef}
@@ -231,12 +239,16 @@ export default function ConnectProviderList({
             webWalletUrl={webWalletUrl}
             sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
             disableSwitchApp={disableSwitchApp}
-            autoConnect={false}
+            autoConnect={!hideQRCode}
             onClick={() => {
-              setShowWalletOptions(true);
+              if (!hideQRCode) {
+                handleWebLoginClick();
+              } else {
+                setShowWalletOptions(true);
+              }
             }}
           />
-        );
+        ) : null;
       }
 
       if (item.provider === LOGIN_PROVIDER.PASSKEY) {
@@ -439,4 +451,5 @@ ConnectProviderList.propTypes = {
   baseUrl: PropTypes.string,
   customItems: PropTypes.arrayOf(PropTypes.node),
   qrcode: PropTypes.node,
+  hideQRCode: PropTypes.bool,
 };

package/src/Connect/index.jsx

@@ -467,6 +467,7 @@ function Connect({
           allowWallet={allowWallet}
           size={hideQRCode && mode !== 'dialog' ? 'normal' : 'small'}
           tokenState={state}
+          hideQRCode={hideQRCode}
           messages={messages}
           tokenKey={tokenKey}
           onSuccess={onSuccess}