@arcblock/did-connect-react 3.2.7 → 3.2.8

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

@@ -24,7 +24,7 @@ import he from "../../plugins/email/index.js";
 function ye({
   onSuccess: I = d,
   onError: b = d,
-  size: l = "small",
+  size: i = "small",
   tokenState: t,
   webWalletUrl: U = oe(),
   tokenKey: N,
@@ -43,7 +43,7 @@ function ye({
   baseUrl: V = "/",
   customItems: H = []
 }) {
-  const A = x(null), P = x(null), O = x(null), { loginOAuth: K, logoutOAuth: $, t: J, oauthState: s } = ce(), { passkeyState: C } = ge(), { extraParams: _, locale: Q, connectState: r, plugins: E, setPlugins: X, setSelectedPlugin: Y, getPlugin: R } = pe(), k = h(async (e) => {
+  const A = x(null), P = x(null), O = x(null), { loginOAuth: K, logoutOAuth: $, t: z, oauthState: s } = ce(), { passkeyState: C } = ge(), { extraParams: _, locale: J, connectState: r, plugins: E, setPlugins: Q, setSelectedPlugin: X, getPlugin: R } = pe(), k = h(async (e) => {
     localStorage.setItem(p, e.provider), t.reset(), s.reset({
       status: "scanned"
     }), C.reset(), r.chooseMethod = e.provider;
@@ -53,13 +53,13 @@ function ye({
       const c = await K(e, {
         action: t.action,
         ..._
-      }), i = te({ returnDomain: !1 });
-      y.remove("connected_did", i), y.remove("connected_pk", i), y.remove("connected_wallet_os", i), c?.sessionToken && (await I(
+      }), l = te({ returnDomain: !1 });
+      y.remove("connected_did", l), y.remove("connected_pk", l), y.remove("connected_wallet_os", l), c?.sessionToken && (await I(
         {
           ...c,
           encrypted: !1
         },
-        (z) => z,
+        (Z) => Z,
         {
           sourceAppPid: a,
           connected_app: me(t.appInfo, t.memberAppInfo)
@@ -67,15 +67,15 @@ function ye({
       ), s.loading = !1, s.status = "succeed");
     } catch (c) {
       ue.error(`Failed login OAuth: ${e.provider}`, c);
-      const i = fe(c, J("loginOAuthFailed"));
-      s.loading = !1, s.error = i, s.status = "error", await $({ provider: e.provider }), b(new Error(i));
+      const l = fe(c, z("loginOAuthFailed"));
+      s.loading = !1, s.error = l, s.status = "error", await $({ provider: e.provider }), b(new Error(l));
     }
   }), T = h(async () => {
     t.reset(), await g(), t.status = "created", r.chooseMethod = "wallet";
-  }), D = he({ baseUrl: V }), Z = h(() => {
+  }), D = he({ baseUrl: V }), Y = h(() => {
     if (M && m && E.some((e) => e.name === f.EMAIL)) {
       const e = R(f.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(p, "email"), e.state.reset(), e.state.magicToken = M, r.chooseMethod = f.EMAIL, Y(e), S());
+      e.state.status === "idle" && (localStorage.setItem(p, "email"), e.state.reset(), e.state.magicToken = M, r.chooseMethod = f.EMAIL, X(e), S());
     }
   });
   return re(() => {
@@ -84,8 +84,8 @@ function ye({
       const a = R(f.EMAIL);
       a && a.baseUrl === D.baseUrl ? e.push(a) : e.push(D);
     }
-    X(e), r.retryConnect = T, setTimeout(() => {
-      Z();
+    Q(e), r.retryConnect = T, setTimeout(() => {
+      Y();
     }, 100);
   }, [m]), /* @__PURE__ */ n(u, { className: "did-connect__choose", sx: se({ flex: 1 }, B?.root?.sx), children: /* @__PURE__ */ n(
     u,
@@ -106,13 +106,13 @@ function ye({
             }
           ],
           children: [
-            j && l !== "small" && /* @__PURE__ */ n(
+            j && /* @__PURE__ */ n(
               le,
               {
                 ref: A,
                 tokenState: t,
-                sx: [l === "small" ? { p: 1 } : { p: 2 }],
-                locale: Q,
+                sx: [i === "small" ? { p: 1 } : { p: 2 }],
+                locale: J,
                 tokenKey: N,
                 disableSwitchApp: L,
                 onClick: async () => {
@@ -130,7 +130,7 @@ function ye({
                 ref: P,
                 tokenState: t,
                 webWalletUrl: U,
-                sx: [l === "small" ? { p: 1 } : { p: 2 }],
+                sx: [i === "small" ? { p: 1 } : { p: 2 }],
                 disableSwitchApp: L,
                 onClick: () => {
                   localStorage.setItem(p, "wallet"), t.status = "scanned", r.chooseMethod = "wallet-web";
@@ -155,7 +155,7 @@ function ye({
                   E.map(
                     (e) => e.renderListItem({
                       key: e.name,
-                      sx: [l === "small" ? { p: 1 } : { p: 2 }]
+                      sx: [i === "small" ? { p: 1 } : { p: 2 }]
                       // forceUpdate,
                     })
                   ),
@@ -180,7 +180,7 @@ function ye({
                           k(e);
                         };
                       },
-                      sx: [l === "small" ? { p: 1 } : { p: 2 }]
+                      sx: [i === "small" ? { p: 1 } : { p: 2 }]
                     },
                     e.provider
                   )) : null,
@@ -192,7 +192,7 @@ function ye({
                       onError: b,
                       tokenState: t,
                       behavior: W,
-                      sx: [l === "small" ? { p: 1 } : { p: 2 }],
+                      sx: [i === "small" ? { p: 1 } : { p: 2 }],
                       onClick: () => {
                         localStorage.setItem(p, "passkey");
                         const e = O.current.connect;

package/lib/Connect/index.js

@@ -2,8 +2,8 @@ import { jsx as t, jsxs as p, Fragment as He } from "react/jsx-runtime";
 import { use as Ve, useRef as ie, useState as qe, useEffect as se } from "react";
 import e from "prop-types";
 import { Box as i, Skeleton as Ye, Divider as Ge } from "@mui/material";
-import { useUpdate as Ke, useSize as Qe, useCreation as d, useMount as ae, useMemoizedFn as M, useDebounceFn as Xe, usePrevious as Je, useUpdateEffect as Ze } from "ahooks";
-import x from "lodash/noop";
+import { useUpdate as Ke, useSize as Qe, useCreation as f, useMount as ae, useMemoizedFn as M, useDebounceFn as Xe, usePrevious as Je, useUpdateEffect as Ze } from "ahooks";
+import b from "lodash/noop";
 import $e from "lodash/isUndefined";
 import et from "@arcblock/ux/lib/CloseButton";
 import { LOGIN_PROVIDER as tt, OAUTH_PROVIDER as z, DID_CONNECT_MEDIUM_WIDTH as U, LOGIN_PROVIDER_NAME as ot, DID_CONNECT_SMALL_WIDTH as rt } from "@arcblock/ux/lib/Util/constant";
@@ -20,8 +20,8 @@ import { SessionContext as ft } from "../Session/context.js";
 import { StateProvider as mt, useStateContext as pt } from "./contexts/state.js";
 import ht from "./components/login-item/connect-choose-list.js";
 import gt from "./components/auto-height.js";
-import xt from "./hooks/token.js";
-import { useOAuth as bt } from "../OAuth/context.js";
+import bt from "./hooks/token.js";
+import { useOAuth as xt } from "../OAuth/context.js";
 import Ct from "./components/connect-status.js";
 import { usePasskey as wt } from "../Passkey/context.js";
 import { CHECK_STATUS_INTERVAL as yt, API_DID_PREFIX as kt, BUSY_STATUS as y, DEFAULT_TIMEOUT as St } from "../constant.js";
@@ -33,8 +33,8 @@ import Tt from "./hooks/auth-url.js";
 import { getWalletDid as vt } from "../User/use-did.js";
 import { getWebWalletUrl as _t } from "@arcblock/ux/lib/Util/wallet";
 function ce({
-  hideCloseButton: b = !1,
-  mode: f = "dialog",
+  hideCloseButton: x = !1,
+  mode: m = "dialog",
   action: k,
   baseUrl: h = "",
   checkFn: S,
@@ -58,13 +58,13 @@ function ce({
   disableSwitchApp: T = !1,
   magicToken: G = void 0,
   customItems: he = [],
-  onClose: v = x,
-  onError: K = x,
-  onSuccess: _ = x,
-  onRecreateSession: Q = x,
-  setColor: ge = x
+  onClose: v = b,
+  onError: K = b,
+  onSuccess: _ = b,
+  onRecreateSession: Q = b,
+  setColor: ge = b
 }) {
-  const R = ct(), X = Ke(), xe = Ve(ft), be = vt(xe?.session?.user), {
+  const R = ct(), X = Ke(), be = Ve(ft), xe = vt(be?.session?.user), {
     t: J,
     staticState: Ce,
     connectState: s,
@@ -75,7 +75,7 @@ function ce({
     selectedPlugin: a,
     blocklet: Z,
     masterBlocklet: ke
-  } = pt(), { state: o, generate: $, cancelWhenScanned: Se } = xt({
+  } = pt(), { state: o, generate: $, cancelWhenScanned: Se } = bt({
     action: k,
     baseUrl: h,
     checkFn: S,
@@ -89,21 +89,21 @@ function ce({
     tokenKey: B,
     encKey: ue,
     autoConnect: de,
-    forceConnected: N === !0 ? be || !0 : N,
+    forceConnected: N === !0 ? xe || !0 : N,
     saveConnect: fe,
     useSocket: me,
     provider: pe
-  }), A = ie(!1), ee = ie(null), g = Qe(ee), W = d(() => g ? g.width < U - 50 : !0, [g, g?.width]), [te, Ie] = qe(!1);
+  }), A = ie(!1), ee = ie(null), g = Qe(ee), L = f(() => g ? g.width < U - 50 : !0, [g, g?.width]), [te, Ie] = qe(!1);
   ae(() => {
     Ie(g?.width < U - 50);
   });
-  const { oauthState: c, setBaseUrl: De } = bt(), { passkeyState: l, setTargetAppPid: Pe } = wt();
+  const { oauthState: c, setBaseUrl: De } = xt(), { passkeyState: l, setTargetAppPid: Pe } = wt();
   ae(() => {
     De(h), Pe(Z?.appPid), o.reset(), c.reset(), l.reset();
   }), se(() => {
     ge(O);
   }, [O]);
-  const Te = d(() => ({
+  const Te = f(() => ({
     confirm: u.confirm,
     success: u.success,
     error: a?.state?.error || o.error || l.error || c.error || ""
@@ -114,7 +114,7 @@ function ce({
     c.error,
     l.error,
     a?.state?.error
-  ]), C = d(() => y.includes(l.status) || y.includes(c.status) || y.includes(o.status) || y.includes(a?.state?.computedStatus), [o.status, c.status, l.status, a?.state?.computedStatus]), oe = M(async () => {
+  ]), C = f(() => y.includes(l.status) || y.includes(c.status) || y.includes(o.status) || y.includes(a?.state?.computedStatus), [o.status, c.status, l.status, a?.state?.computedStatus]), oe = M(async () => {
     Q(), c.reset(), l.reset(), await $(!1);
   }), ve = M(() => {
     s?.retryConnect();
@@ -127,15 +127,15 @@ function ce({
     { leading: !0, trailing: !1 }
   );
   se(Re, [o.status]);
-  const Oe = d(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), {
+  const Oe = f(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), {
     showMobileLogin: Ae,
     hideChooseList: r,
-    oauthProviderList: We,
-    showOAuthLogin: Le,
+    oauthProviderList: Le,
+    showOAuthLogin: We,
     showPasskeyLogin: Ee,
     showWebLogin: Me,
     showEmailLogin: Ue,
-    hideQRCode: m
+    hideQRCode: d
   } = Pt({
     action: o.action,
     sourceAppPid: s?.sourceAppPid,
@@ -143,9 +143,9 @@ function ce({
     allowWallet: j,
     passkeyBehavior: H,
     webWalletUrl: V,
-    mode: f,
+    mode: m,
     blocklet: s?.sourceAppPid ? ke : Z,
-    isSmallView: W
+    isSmallView: L
   }), ze = Je(s?.sourceAppPid);
   Ze(() => {
     $e(ze) || $();
@@ -153,7 +153,7 @@ function ce({
   const n = (w) => {
     const je = R.spacing(w);
     return parseInt(je, 10);
-  }, Be = d(() => b ? null : /* @__PURE__ */ t(
+  }, Be = f(() => x ? null : /* @__PURE__ */ t(
     et,
     {
       onClose: v,
@@ -163,7 +163,7 @@ function ce({
         top: 14
       }
     }
-  ), [b, v]);
+  ), [x, v]);
   let re = null;
   C && (re = /* @__PURE__ */ t(
     i,
@@ -194,7 +194,7 @@ function ce({
       ) })
     }
   ));
-  const ne = Tt({ disableSwitchApp: T, tokenState: o }), Fe = d(() => {
+  const ne = Tt({ disableSwitchApp: T, tokenState: o }), Fe = f(() => {
     const w = R.mode === "dark" ? R.palette.grey[500] : "white";
     return /* @__PURE__ */ t(
       i,
@@ -248,7 +248,7 @@ function ce({
         )
       }
     );
-  }, [ne, r]), Ne = d(() => r ? "column-reverse" : !m && te ? "column" : "row", [r, te, m]), L = /* @__PURE__ */ p(
+  }, [ne, r]), Ne = f(() => r ? "column-reverse" : !d && te ? "column" : "row", [r, te, d]), W = /* @__PURE__ */ p(
     i,
     {
       className: "did-connect__body",
@@ -258,12 +258,12 @@ function ce({
         justifyContent: "center",
         alignItems: "stretch",
         flex: 1,
-        gap: !m && W ? 0 : 1.5,
+        gap: !d && L ? 0 : 1.5,
         overflow: "visible",
         px: r ? 2 : 0
       },
       children: [
-        !C && !m ? /* @__PURE__ */ p(He, { children: [
+        !C && !d ? /* @__PURE__ */ p(He, { children: [
           /* @__PURE__ */ t(
             i,
             {
@@ -345,7 +345,7 @@ function ce({
                     }
                   },
                   allowWallet: j,
-                  size: m && f !== "dialog" ? "normal" : "small",
+                  size: d && m !== "dialog" ? "normal" : "small",
                   tokenState: o,
                   messages: u,
                   tokenKey: B,
@@ -355,12 +355,12 @@ function ce({
                   extraContent: Y,
                   enabledConnectTypes: q,
                   onRest: oe,
-                  showMobileLogin: Ae,
-                  showOAuthLogin: Le,
+                  showMobileLogin: Ae && d,
+                  showOAuthLogin: We,
                   showPasskeyLogin: Ee,
                   showWebLogin: Me,
                   showEmailLogin: Ue,
-                  oauthProviderList: We,
+                  oauthProviderList: Le,
                   disableSwitchApp: T,
                   forceUpdate: X,
                   magicToken: G,
@@ -374,13 +374,13 @@ function ce({
       ]
     }
   );
-  let E = L;
+  let E = W;
   return a ? E = a.renderPlaceholder({
-    fallback: L,
+    fallback: W,
     forceUpdate: X,
     onSuccess: _,
     onError: K
-  }) : E = L, /* @__PURE__ */ p(
+  }) : E = W, /* @__PURE__ */ p(
     i,
     {
       ref: ee,
@@ -394,11 +394,11 @@ function ce({
         maxWidth: "100%",
         width: (
           // eslint-disable-next-line no-nested-ternary
-          f === "drawer" ? "100%" : m || C || r ? rt : U
+          m === "drawer" ? "100%" : d || C || r ? rt : U
         ),
         transition: "width 0.2s ease-in-out",
         margin: "auto",
-        p: W ? 2 : 3,
+        p: L ? 2 : 3,
         pb: 0,
         gap: 2
       },
@@ -453,8 +453,8 @@ ce.propTypes = {
   magicToken: e.string,
   customItems: e.arrayOf(e.node)
 };
-function le({ testOnlyBorderColor: b = void 0, ...f }) {
-  const { checkFn: k, extraParams: h = {}, blocklet: S, masterBlocklet: I, action: D, locale: P = "en" } = f;
+function le({ testOnlyBorderColor: x = void 0, ...m }) {
+  const { checkFn: k, extraParams: h = {}, blocklet: S, masterBlocklet: I, action: D, locale: P = "en" } = m;
   if (typeof k != "function")
     throw new Error("Cannot initialize did connect component without a fetchFn");
   return /* @__PURE__ */ t(
@@ -465,7 +465,7 @@ function le({ testOnlyBorderColor: b = void 0, ...f }) {
       action: D,
       locale: P,
       extraParams: h,
-      testOnlyBorderColor: b,
+      testOnlyBorderColor: x,
       sx: {
         position: "relative",
         width: "100%",
@@ -478,7 +478,7 @@ function le({ testOnlyBorderColor: b = void 0, ...f }) {
           boxSizing: "border-box"
         }
       },
-      children: /* @__PURE__ */ t(ce, { ...f })
+      children: /* @__PURE__ */ t(ce, { ...m })
     }
   );
 }

package/lib/Passkey/dialog.js

@@ -1,24 +1,24 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o, Fragment as L } from "react/jsx-runtime";
 import c from "prop-types";
-import { useState as W, useImperativeHandle as H } from "react";
+import { useState as G, useImperativeHandle as N } from "react";
 import p from "@emotion/styled";
-import { Dialog as K, DialogTitle as L, DialogContent as G, DialogActions as N, Alert as Y, TextField as F, Stack as J, Box as Q, Button as x, CircularProgress as M } from "@mui/material";
+import { Dialog as Y, DialogTitle as J, DialogContent as Q, DialogActions as U, Alert as X, TextField as j, Stack as Z, Box as z, Button as k, CircularProgress as A } from "@mui/material";
 import m from "validator/lib/isEmail";
-import { Icon as U } from "@iconify/react";
-import X from "@iconify-icons/material-symbols/passkey-rounded";
+import { Icon as ee } from "@iconify/react";
+import te from "@iconify-icons/material-symbols/passkey-rounded";
 import { useMemoizedFn as d } from "ahooks";
-import k from "@arcblock/ux/lib/Toast";
+import S from "@arcblock/ux/lib/Toast";
 import b from "@arcblock/ux/lib/Typography";
-import { getCookieOptions as Z } from "@arcblock/ux/lib/Util";
+import { getCookieOptions as re } from "@arcblock/ux/lib/Util";
 import g from "lodash/trim";
-import ee from "base64-url";
-import S from "js-cookie";
-import z from "lodash/noop";
-import { usePasskey as te } from "./context.js";
-import { getWebAuthnErrorMessage as j } from "../utils.js";
-import { VERIFY_CODE_LENGTH as $ } from "./constants.js";
-function re({ ref: y, extraParams: w = {}, createMode: D = "connect", action: C, onSuccess: P = z, onError: A = z }) {
-  const { api: E, locale: I, t: i, loginPasskey: _, logoutPasskey: q, passkeyState: e, connectPasskey: R } = te(), a = D === "register", [T, s] = W(!1), B = d(() => {
+import ie from "base64-url";
+import w from "js-cookie";
+import $ from "lodash/noop";
+import { usePasskey as oe } from "./context.js";
+import { getWebAuthnErrorMessage as _ } from "../utils.js";
+import { VERIFY_CODE_LENGTH as q } from "./constants.js";
+function ne({ ref: y, extraParams: C = {}, createMode: D = "connect", action: P, onSuccess: I = $, onError: R = $ }) {
+  const { api: E, locale: T, t: i, loginPasskey: V, logoutPasskey: O, passkeyState: e, connectPasskey: W } = oe(), a = D === "register", [F, s] = G(!1), h = window.innerWidth < 600, B = d(() => {
     e.openDialog = !0, e.error = "", e.creatingStatus = "", e.verifyingStatus = "";
     const t = e.email;
     s(t && a ? !m(t) : !1);
@@ -26,88 +26,118 @@ function re({ ref: y, extraParams: w = {}, createMode: D = "connect", action: C,
     e.openDialog = !1, e.error = "", e.creatingStatus = "", e.verifyingStatus = "";
     const t = e.email;
     s(t && a ? !m(t) : !1);
-  }), V = d(async (t) => {
+  }), H = d(async (t) => {
     if (t.preventDefault(), a && !m(e.email)) {
       s(!0);
       return;
     }
     s(!1), e.loading = !0;
     try {
-      await E.post(`../kyc/email/send?locale=${I}`, { email: e.email }), e.sent = !0, k.success(i("codeSentSuccess"));
+      await E.post(`../kyc/email/send?locale=${T}`, { email: e.email }), e.sent = !0, S.success(i("codeSentSuccess"));
     } catch (r) {
-      k.error(r.message), document.getElementById("email-input")?.focus();
+      S.error(r.message), document.getElementById("email-input")?.focus();
     } finally {
       e.loading = !1;
     }
-  }), O = d(async (t = "") => {
+  }), K = d(async (t = "") => {
     try {
       e.verifying = !0, e.error = "", t || (e.verifyingStatus = "");
-      const r = await _({
-        ...w,
-        action: C,
+      const r = await V({
+        ...C,
+        action: P,
         credentialId: t
-      }), n = Z({ expireInDays: 7 });
-      S.remove("connected_did", n), S.remove("connected_pk", n), S.remove("connected_wallet_os", n), e.verifying = !1, r?.sessionToken && (e.verifyingStatus = "succeed", P({ ...r, encrypted: !1 }, (f) => f));
+      }), n = re({ expireInDays: 7 });
+      w.remove("connected_did", n), w.remove("connected_pk", n), w.remove("connected_wallet_os", n), e.verifying = !1, r?.sessionToken && (e.verifyingStatus = "succeed", I({ ...r, encrypted: !1 }, (f) => f));
     } catch (r) {
       console.error("Failed to verify passkey", r);
-      const n = j(r, i("verifyPasskeyFailed"));
-      e.verifying = !1, e.error = n, e.verifyingStatus = "error", await q(), A(new Error(n));
+      const n = _(r, i("verifyPasskeyFailed"));
+      e.verifying = !1, e.error = n, e.verifyingStatus = "error", await O(), R(new Error(n));
     }
-  }), h = d(async () => {
+  }), x = d(async () => {
     if (a && !m(e.email)) {
       s(!0);
       return;
     }
     s(!1), e.creating = !0, e.error = "", e.creatingStatus = "";
     try {
-      const t = await R({
-        ...w,
-        action: C,
+      const t = await W({
+        ...C,
+        action: P,
         purpose: a ? "register" : "connect",
-        email: a ? ee.encode(e.email) : ""
+        email: a ? ie.encode(e.email) : ""
       });
       if (!t) {
         e.error = i("cancelAuth"), e.creatingStatus = "error", e.creating = !1, e.verifying = !1, e.verifyingStatus = "";
         return;
       }
-      e.creating = !1, e.openDialog = !1, e.creatingStatus = "succeed", D === "connect" ? P({ ...t, encrypted: !1 }, (r) => r) : t?.credentialId && O(t.credentialId);
+      e.creating = !1, e.openDialog = !1, e.creatingStatus = "succeed", D === "connect" ? I({ ...t, encrypted: !1 }, (r) => r) : t?.credentialId && K(t.credentialId);
     } catch (t) {
-      console.error("Failed to create passkey", t), e.creating = !1, e.error = j(t, i("createPasskeyFailed")), e.creatingStatus = "error";
+      console.error("Failed to create passkey", t), e.creating = !1, e.error = _(t, i("createPasskeyFailed")), e.creatingStatus = "error";
     }
   }), v = d(async (t) => {
     t && t.preventDefault(), e.loading = !0;
     try {
-      await E.post(`../kyc/email/verify?locale=${I}`, { code: e.code }), e.verified = !0, h();
+      await E.post(`../kyc/email/verify?locale=${T}`, { code: e.code }), e.verified = !0, x();
     } catch (r) {
-      k.error(r.message), e.verified = !1, document.getElementById(`code-input-${g(e.code).length - 1}`)?.focus();
+      S.error(r.message), e.verified = !1, document.getElementById(`code-input-${g(e.code).length - 1}`)?.focus();
     } finally {
       e.loading = !1;
     }
   });
-  return H(y, () => ({
+  N(y, () => ({
     open: B,
     close: u,
     handleVerifyCode: v
-  }), [B, u, v]), /* @__PURE__ */ l(
-    ie,
+  }), [B, u, v]);
+  const M = () => /* @__PURE__ */ l(L, { children: [
+    /* @__PURE__ */ o(k, { onClick: u, sx: { color: "text.secondary" }, children: i("cancel") }),
+    a && /* @__PURE__ */ l(
+      k,
+      {
+        variant: "contained",
+        onClick: (
+          // eslint-disable-next-line no-nested-ternary
+          e.verified ? x : e.sent ? v : H
+        ),
+        disabled: e.verifying || e.creating || !e.email || e.sent && g(e.code).length !== q,
+        children: [
+          (e.loading || e.creating) && /* @__PURE__ */ o(A, { size: 16, sx: { mr: 1 } }),
+          e.verified ? i("createPasskey") : e.sent ? i("verifyButton") : i("sendCodeButton")
+        ]
+      }
+    ),
+    !a && /* @__PURE__ */ o(
+      k,
+      {
+        variant: "contained",
+        color: "primary",
+        onClick: x,
+        disabled: e.loading || e.creating || a && (!e.email || !e.verified),
+        startIcon: (e.loading || e.creating) && /* @__PURE__ */ o(A, { size: 16, sx: { mr: 1 }, color: "inherit" }),
+        children: e.loading || e.creating ? i("creatingPasskey") : i("createPasskey")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ l(
+    ae,
     {
       open: e.openDialog,
       onClose: u,
       fullWidth: !0,
       maxWidth: "sm",
-      fullScreen: window.innerWidth < 600,
+      fullScreen: h,
       children: [
-        /* @__PURE__ */ l(oe, { children: [
-          /* @__PURE__ */ o(se, { children: /* @__PURE__ */ o(U, { icon: X, fontSize: 24, color: "initial" }) }),
+        /* @__PURE__ */ l(se, { children: [
+          /* @__PURE__ */ o(de, { children: /* @__PURE__ */ o(ee, { icon: te, fontSize: 24, color: "initial" }) }),
           i("createPasskey")
         ] }),
-        /* @__PURE__ */ l(ne, { children: [
+        /* @__PURE__ */ l(le, { children: [
           /* @__PURE__ */ o(b, { variant: "body1", children: i("createPasskeyDesc1") }),
           /* @__PURE__ */ o(b, { variant: "body1", children: i("createPasskeyDesc2") }),
-          e.error && /* @__PURE__ */ o(Y, { severity: "error", children: e.error }),
-          a && /* @__PURE__ */ l(le, { children: [
+          e.error && /* @__PURE__ */ o(X, { severity: "error", children: e.error }),
+          a && /* @__PURE__ */ l(pe, { children: [
             !e.sent && /* @__PURE__ */ o(
-              F,
+              j,
               {
                 type: "email",
                 id: "email-input",
@@ -120,12 +150,12 @@ function re({ ref: y, extraParams: w = {}, createMode: D = "connect", action: C,
                 },
                 disabled: e.loading || e.creating,
                 required: !0,
-                error: T,
-                helperText: T ? i("emailInvalid") : ""
+                error: F,
+                helperText: F ? i("emailInvalid") : ""
               }
             ),
             e.sent && !e.verified && /* @__PURE__ */ l(
-              J,
+              Z,
               {
                 direction: "column",
                 sx: {
@@ -135,8 +165,8 @@ function re({ ref: y, extraParams: w = {}, createMode: D = "connect", action: C,
                 },
                 children: [
                   /* @__PURE__ */ o(b, { variant: "body2", children: i("codeSentMessage", { email: e.email }) }),
-                  /* @__PURE__ */ o(Q, { sx: { width: "100%", display: "flex", justifyContent: "space-between", gap: 2, mt: 0 }, children: Array($).fill("").map((t, r) => /* @__PURE__ */ o(
-                    F,
+                  /* @__PURE__ */ o(z, { sx: { width: "100%", display: "flex", justifyContent: "space-between", gap: 2, mt: 0 }, children: Array(q).fill("").map((t, r) => /* @__PURE__ */ o(
+                    j,
                     {
                       value: g(e.code[r]) || "",
                       type: "number",
@@ -165,42 +195,15 @@ function re({ ref: y, extraParams: w = {}, createMode: D = "connect", action: C,
                 ]
               }
             )
-          ] })
+          ] }),
+          h && /* @__PURE__ */ o(z, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center", mt: 2 }, children: M() })
         ] }),
-        /* @__PURE__ */ l(ae, { children: [
-          /* @__PURE__ */ o(x, { onClick: u, sx: { color: "text.secondary" }, children: i("cancel") }),
-          a && /* @__PURE__ */ l(
-            x,
-            {
-              variant: "contained",
-              onClick: (
-                // eslint-disable-next-line no-nested-ternary
-                e.verified ? h : e.sent ? v : V
-              ),
-              disabled: e.verifying || e.creating || !e.email || e.sent && g(e.code).length !== $,
-              children: [
-                (e.loading || e.creating) && /* @__PURE__ */ o(M, { size: 16, sx: { mr: 1 } }),
-                e.verified ? i("createPasskey") : e.sent ? i("verifyButton") : i("sendCodeButton")
-              ]
-            }
-          ),
-          !a && /* @__PURE__ */ o(
-            x,
-            {
-              variant: "contained",
-              color: "primary",
-              onClick: h,
-              disabled: e.loading || e.creating || a && (!e.email || !e.verified),
-              startIcon: (e.loading || e.creating) && /* @__PURE__ */ o(M, { size: 16, sx: { mr: 1 }, color: "inherit" }),
-              children: e.loading || e.creating ? i("creatingPasskey") : i("createPasskey")
-            }
-          )
-        ] })
+        !h && /* @__PURE__ */ o(ce, { children: M() })
       ]
     }
   );
 }
-re.propTypes = {
+ne.propTypes = {
   extraParams: c.object,
   createMode: c.string,
   action: c.string.isRequired,
@@ -208,17 +211,17 @@ re.propTypes = {
   onError: c.func,
   ref: c.any.isRequired
 };
-const ie = p(K)`
+const ae = p(Y)`
   .MuiDialog-paper {
     border-radius: 12px;
     max-width: 440px;
   }
-`, oe = p(L)`
+`, se = p(J)`
   text-align: center;
   padding: 24px 24px 16px;
   font-size: 20px;
   font-weight: 600;
-`, ne = p(G)`
+`, le = p(Q)`
   padding: 0 24px;
 
   .MuiTypography-body1 {
@@ -231,7 +234,7 @@ const ie = p(K)`
     margin-top: 16px;
     width: 100%;
   }
-`, ae = p(N)`
+`, ce = p(U)`
   text-align: center;
   padding: 16px 24px 24px;
 
@@ -241,7 +244,7 @@ const ie = p(K)`
     border-radius: 6px;
     padding: 6px 16px;
   }
-`, se = p("div")`
+`, de = p("div")`
   width: 48px;
   height: 48px;
   margin: 0 auto 16px;
@@ -255,7 +258,7 @@ const ie = p(K)`
     width: 32px;
     height: 32px;
   }
-`, le = p.div`
+`, pe = p.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -273,5 +276,5 @@ const ie = p(K)`
   }
 `;
 export {
-  re as default
+  ne as default
 };

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.2.7",
+  "version": "3.2.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.2.7",
+    "@arcblock/bridge": "3.2.8",
     "@arcblock/did": "^1.27.6",
-    "@arcblock/icons": "3.2.7",
-    "@arcblock/react-hooks": "3.2.7",
+    "@arcblock/icons": "3.2.8",
+    "@arcblock/react-hooks": "3.2.8",
     "@arcblock/ws": "^1.27.6",
     "@fontsource/lexend": "^5.2.9",
     "@iconify-icons/logos": "^1.2.36",
@@ -80,5 +80,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "756a9f08c4008f45690ef38e612e1c429855948d"
+  "gitHead": "c3986ded30e94992b83a628e4ffc73c99e630b5d"
 }

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

@@ -158,7 +158,7 @@ export default function ConnectChooseList({
               gap: 1.5,
             },
           ]}>
-          {showMobileLogin && size !== 'small' && (
+          {showMobileLogin && (
             <MobileLoginItem
               ref={walletLoginRef}
               tokenState={tokenState}

package/src/Connect/index.jsx

@@ -454,7 +454,7 @@ function Connect({
           extraContent={extraContent}
           enabledConnectTypes={enabledConnectTypes}
           onRest={handleReset}
-          showMobileLogin={showMobileLogin}
+          showMobileLogin={showMobileLogin && hideQRCode}
           showOAuthLogin={showOAuthLogin}
           showPasskeyLogin={showPasskeyLogin}
           showWebLogin={showWebLogin}

package/src/Passkey/dialog.jsx

@@ -33,6 +33,7 @@ function PasskeyDialog({ ref, extraParams = {}, createMode = 'connect', action,
   const { api, locale, t, loginPasskey, logoutPasskey, passkeyState, connectPasskey } = usePasskey();
   const isEmailRequired = createMode === 'register';
   const [isEmailVerified, setIsEmailVerified] = useState(false);
+  const isFullScreen = window.innerWidth < 600;
   const handleOpenDialog = useMemoizedFn(() => {
     passkeyState.openDialog = true;
     passkeyState.error = '';
@@ -172,13 +173,59 @@ function PasskeyDialog({ ref, extraParams = {}, createMode = 'connect', action,
     };
   }, [handleOpenDialog, handleCloseDialog, handleVerifyCode]);
 
+  const renderActions = () => {
+    return (
+      <>
+        <Button onClick={handleCloseDialog} sx={{ color: 'text.secondary' }}>
+          {t('cancel')}
+        </Button>
+        {isEmailRequired && (
+          <Button
+            variant="contained"
+            onClick={
+              // eslint-disable-next-line no-nested-ternary
+              passkeyState.verified ? handleCreatePasskey : passkeyState.sent ? handleVerifyCode : handleSendCode
+            }
+            disabled={
+              passkeyState.verifying ||
+              passkeyState.creating ||
+              !passkeyState.email ||
+              (passkeyState.sent && trim(passkeyState.code).length !== VERIFY_CODE_LENGTH)
+            }>
+            {(passkeyState.loading || passkeyState.creating) && <CircularProgress size={16} sx={{ mr: 1 }} />}
+            {/* eslint-disable-next-line no-nested-ternary */}
+            {passkeyState.verified ? t('createPasskey') : passkeyState.sent ? t('verifyButton') : t('sendCodeButton')}
+          </Button>
+        )}
+        {!isEmailRequired && (
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleCreatePasskey}
+            disabled={
+              passkeyState.loading ||
+              passkeyState.creating ||
+              (isEmailRequired && (!passkeyState.email || !passkeyState.verified))
+            }
+            startIcon={
+              (passkeyState.loading || passkeyState.creating) && (
+                <CircularProgress size={16} sx={{ mr: 1 }} color="inherit" />
+              )
+            }>
+            {passkeyState.loading || passkeyState.creating ? t('creatingPasskey') : t('createPasskey')}
+          </Button>
+        )}
+      </>
+    );
+  };
+
   return (
     <StyledDialog
       open={passkeyState.openDialog}
       onClose={handleCloseDialog}
       fullWidth
       maxWidth="sm"
-      fullScreen={window.innerWidth < 600}>
+      fullScreen={isFullScreen}>
       <StyledDialogTitle>
         <KeyIcon>
           <Icon icon={passKeyRoundedIcon} fontSize={24} color="initial" />
@@ -259,48 +306,11 @@ function PasskeyDialog({ ref, extraParams = {}, createMode = 'connect', action,
             )}
           </Form>
         )}
-      </StyledDialogContent>
-      <StyledDialogActions>
-        <Button onClick={handleCloseDialog} sx={{ color: 'text.secondary' }}>
-          {t('cancel')}
-        </Button>
-        {isEmailRequired && (
-          <Button
-            variant="contained"
-            onClick={
-              // eslint-disable-next-line no-nested-ternary
-              passkeyState.verified ? handleCreatePasskey : passkeyState.sent ? handleVerifyCode : handleSendCode
-            }
-            disabled={
-              passkeyState.verifying ||
-              passkeyState.creating ||
-              !passkeyState.email ||
-              (passkeyState.sent && trim(passkeyState.code).length !== VERIFY_CODE_LENGTH)
-            }>
-            {(passkeyState.loading || passkeyState.creating) && <CircularProgress size={16} sx={{ mr: 1 }} />}
-            {/* eslint-disable-next-line no-nested-ternary */}
-            {passkeyState.verified ? t('createPasskey') : passkeyState.sent ? t('verifyButton') : t('sendCodeButton')}
-          </Button>
-        )}
-        {!isEmailRequired && (
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleCreatePasskey}
-            disabled={
-              passkeyState.loading ||
-              passkeyState.creating ||
-              (isEmailRequired && (!passkeyState.email || !passkeyState.verified))
-            }
-            startIcon={
-              (passkeyState.loading || passkeyState.creating) && (
-                <CircularProgress size={16} sx={{ mr: 1 }} color="inherit" />
-              )
-            }>
-            {passkeyState.loading || passkeyState.creating ? t('creatingPasskey') : t('createPasskey')}
-          </Button>
+        {isFullScreen && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mt: 2 }}>{renderActions()}</Box>
         )}
-      </StyledDialogActions>
+      </StyledDialogContent>
+      {!isFullScreen && <StyledDialogActions>{renderActions()}</StyledDialogActions>}
     </StyledDialog>
   );
 }