@arcblock/did-connect-react 3.3.10 → 3.4.1

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/Passkey/context.js

@@ -1,7 +1,7 @@
 import { jsxs as V, jsx as O } from "react/jsx-runtime";
 import p from "prop-types";
 import z from "lodash/isUndefined";
-import { createContext as J, use as K } from "react";
+import { use as J, createContext as K } from "react";
 import u from "@arcblock/ux/lib/Toast";
 import { useReactive as g, useMemoizedFn as i, useCreation as W } from "ahooks";
 import w from "lodash/noop";
@@ -12,7 +12,7 @@ import { getBlockletData as H, getFederatedEnabled as X, getMaster as Q } from "
 import { startRegistration as Y, startAuthentication as Z } from "@simplewebauthn/browser";
 import { createAxios as $, getWebAuthnErrorMessage as h, logger as U, getApiErrorMessage as A } from "../utils.js";
 import { parseResponse as ee, PassportSwitcher as se } from "../components/PassportSwitcher.js";
-const F = J({}), { Provider: te, Consumer: he } = F, re = {
+const F = K({}), { Provider: te, Consumer: he } = F, re = {
   zh: {
     cancel: "取消",
     usePasskey: "使用 Passkey",
@@ -260,7 +260,7 @@ function ae({
   );
 }
 function me() {
-  return K(F);
+  return J(F);
 }
 ae.propTypes = {
   children: p.node.isRequired,

package/lib/Passkey/dialog.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as o, Fragment as L } from "react/jsx-runtime";
 import c from "prop-types";
 import { useState as G, useImperativeHandle as N } from "react";
 import p from "@emotion/styled";
-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 { Alert as Y, TextField as j, Stack as J, Box as z, Dialog as Q, DialogTitle as U, DialogContent as X, Button as k, CircularProgress as A, DialogActions as Z } from "@mui/material";
 import m from "validator/lib/isEmail";
 import { Icon as ee } from "@iconify/react";
 import te from "@iconify-icons/material-symbols/passkey-rounded";
@@ -134,7 +134,7 @@ function ne({ ref: y, extraParams: C = {}, createMode: D = "connect", action: P,
         /* @__PURE__ */ l(le, { children: [
           /* @__PURE__ */ o(b, { variant: "body1", children: i("createPasskeyDesc1") }),
           /* @__PURE__ */ o(b, { variant: "body1", children: i("createPasskeyDesc2") }),
-          e.error && /* @__PURE__ */ o(X, { severity: "error", children: e.error }),
+          e.error && /* @__PURE__ */ o(Y, { severity: "error", children: e.error }),
           a && /* @__PURE__ */ l(pe, { children: [
             !e.sent && /* @__PURE__ */ o(
               j,
@@ -155,7 +155,7 @@ function ne({ ref: y, extraParams: C = {}, createMode: D = "connect", action: P,
               }
             ),
             e.sent && !e.verified && /* @__PURE__ */ l(
-              Z,
+              J,
               {
                 direction: "column",
                 sx: {
@@ -211,17 +211,17 @@ ne.propTypes = {
   onError: c.func,
   ref: c.any.isRequired
 };
-const ae = p(Y)`
+const ae = p(Q)`
   .MuiDialog-paper {
     border-radius: 12px;
     max-width: 440px;
   }
-`, se = p(J)`
+`, se = p(U)`
   text-align: center;
   padding: 24px 24px 16px;
   font-size: 20px;
   font-weight: 600;
-`, le = p(Q)`
+`, le = p(X)`
   padding: 0 24px;
 
   .MuiTypography-body1 {
@@ -234,7 +234,7 @@ const ae = p(Y)`
     margin-top: 16px;
     width: 100%;
   }
-`, ce = p(U)`
+`, ce = p(Z)`
   text-align: center;
   padding: 16px 24px 24px;