@arcblock/did-connect-react 3.3.6 → 3.3.8

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

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

package/lib/Connect/components/login-item/wallet-login-options.js

@@ -1,32 +1,32 @@
-import { jsxs as c, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, Fragment as d, jsx as e } from "react/jsx-runtime";
 import o from "prop-types";
 import { Box as t, Divider as R } from "@mui/material";
-import { LOGIN_PROVIDER as d } from "@arcblock/ux/lib/Util/constant";
-import { checkSameProtocol as k, getWebWalletUrl as C } from "@arcblock/ux/lib/Util/wallet";
+import { LOGIN_PROVIDER as p } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as C, getWebWalletUrl as k } from "@arcblock/ux/lib/Util/wallet";
 import { detectWalletExtension as W } from "@arcblock/ux/lib/Util";
 import { useCreation as q } from "ahooks";
 import { useBrowser as j } from "@arcblock/react-hooks";
 import T from "./mobile-login-item.js";
-import B from "./web-login-item.js";
-import P from "../back-button.js";
-import { useStateContext as v } from "../../contexts/state.js";
+import P from "./web-login-item.js";
+import v from "../back-button.js";
+import { useStateContext as B } from "../../contexts/state.js";
 function E({
-  qrcode: p,
+  qrcode: u,
   tokenState: r,
-  webWalletUrl: n = C(),
+  webWalletUrl: n = k(),
   size: l = "small",
   disableSwitchApp: m = !1,
-  tokenKey: u,
-  walletLoginRef: b = null,
-  webLoginRef: x = null,
-  onMobileLoginClick: g,
-  onWebLoginClick: h,
-  onBack: L
+  tokenKey: b,
+  walletLoginRef: x = null,
+  webLoginRef: g = null,
+  onMobileLoginClick: h,
+  onWebLoginClick: L,
+  onBack: s
 }) {
-  const { locale: w } = v(), i = j(), y = k(n), s = W(), a = q(() => i.mobile.tablet || !i.mobile.any && window?.navigator?.maxTouchPoints > 0, [i.mobile.tablet, i.mobile.any]);
-  return /* @__PURE__ */ c(f, { children: [
-    p,
-    /* @__PURE__ */ c(t, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+  const { locale: w } = B(), i = j(), y = C(n), a = W(), c = q(() => i.mobile.tablet || !i.mobile.any && window?.navigator?.maxTouchPoints > 0, [i.mobile.tablet, i.mobile.any]);
+  return /* @__PURE__ */ f(d, { children: [
+    u,
+    /* @__PURE__ */ f(t, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }, children: [
       /* @__PURE__ */ e(t, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
         R,
         {
@@ -57,37 +57,37 @@ function E({
               }
             }
           },
-          children: a ? /* @__PURE__ */ e(
+          children: c ? /* @__PURE__ */ e(
             T,
             {
-              ref: b,
+              ref: x,
               tokenState: r,
-              isTablet: a,
+              isTablet: c,
               sx: [l === "small" ? { p: 1 } : { p: 2 }],
               locale: w,
-              tokenKey: u,
+              tokenKey: b,
               disableSwitchApp: m,
-              onClick: g
+              onClick: h
             },
-            d.WALLET
+            p.WALLET
           ) : (
             // eslint-disable-next-line react/jsx-no-useless-fragment
-            /* @__PURE__ */ e(f, { children: (y || s) && (!i.mobile.any || s) ? /* @__PURE__ */ e(
-              B,
+            /* @__PURE__ */ e(d, { children: (y || a) && (!i.mobile.any || a) ? /* @__PURE__ */ e(
+              P,
               {
-                ref: x,
+                ref: g,
                 tokenState: r,
                 webWalletUrl: n,
                 sx: [l === "small" ? { p: 1 } : { p: 2 }],
                 disableSwitchApp: m,
-                onClick: h
+                onClick: L
               },
-              d.WALLET
+              p.WALLET
             ) : null })
           )
         }
       ),
-      /* @__PURE__ */ e(P, { variant: "text", onClick: L })
+      s && /* @__PURE__ */ e(v, { variant: "text", onClick: s })
     ] })
   ] });
 }

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.6", 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.6",
+  "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.6",
+    "@arcblock/bridge": "3.3.8",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.6",
-    "@arcblock/react-hooks": "3.3.6",
+    "@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": "ee100e9010a13a124962ce7ef38c8378c6deca9b"
+  "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 } from 'ahooks';
+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();
 
@@ -153,6 +156,16 @@ export default function ConnectProviderList({
     setShowWalletOptions(false);
   });
 
+  const onlyWalletProvider = useCreation(() => {
+    return providerList.length === 1 && providerList[0].provider === LOGIN_PROVIDER.WALLET;
+  }, [providerList]);
+
+  useEffect(() => {
+    if (onlyWalletProvider && !browser.mobile.any && !showWalletOptions) {
+      setShowWalletOptions(true);
+    }
+  }, [onlyWalletProvider, browser.mobile.any, setShowWalletOptions, showWalletOptions]);
+
   const showEmailLogin = providerList.some((p) => p.provider === LOGIN_PROVIDER.EMAIL);
 
   const emailPlugin = useEmailPlugin({ baseUrl });
@@ -213,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}
@@ -221,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) {
@@ -339,7 +361,7 @@ export default function ConnectProviderList({
               webLoginRef={webLoginRef}
               onMobileLoginClick={handleMobileLoginClick}
               onWebLoginClick={handleWebLoginClick}
-              onBack={handleWalletLoginBack}
+              onBack={onlyWalletProvider ? undefined : handleWalletLoginBack}
             />
           ) : (
             <Box
@@ -429,4 +451,5 @@ ConnectProviderList.propTypes = {
   baseUrl: PropTypes.string,
   customItems: PropTypes.arrayOf(PropTypes.node),
   qrcode: PropTypes.node,
+  hideQRCode: PropTypes.bool,
 };

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

@@ -95,7 +95,7 @@ export default function WalletLoginOptions({
           )}
         </Box>
 
-        <BackButton variant="text" onClick={onBack} />
+        {onBack && <BackButton variant="text" onClick={onBack} />}
       </Box>
     </>
   );

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}