@coinbase/cdp-react 0.0.74 → 0.0.76

package/dist/components/SignIn/flows/SignInWithEmail.js

@@ -1,86 +1,88 @@
-import { jsxs as m, Fragment as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, Fragment as m, jsx as r } from "react/jsx-runtime";
 import { useIsSignedIn as L, useSignInWithEmail as j, useLinkEmail as k, useVerifyEmailOTP as H } from "@coinbase/cdp-hooks";
-import { useRef as g, useLayoutEffect as M } from "react";
+import { useRef as S, useLayoutEffect as M } from "react";
 import { EmailForm as V } from "../../forms/EmailForm/index.js";
 import { OTPForm as q } from "../../forms/OTPForm/index.js";
 import { SwitchSlideTransition as z } from "../../ui/SwitchSlideTransition/index.js";
 import { useEmailForm as A } from "../hooks/useEmailForm.js";
 import { useOTPForm as B } from "../hooks/useOTPForm.js";
 import { SignInCredentials as G } from "../SignInCredentials.js";
-import { useSignInContext as S } from "../SignInProvider.js";
+import { useSignInContext as E } from "../SignInProvider.js";
 import "../../CDPReactProvider/index.js";
 const J = ["email", "otp"], N = ({
   step: n,
-  autoFocus: r,
-  onSuccess: E,
+  autoFocus: s,
+  onSuccess: h,
   children: c
 }) => {
-  const l = g(null), h = 6, { isSignedIn: P } = L(), { state: i } = S(), { signInWithEmail: T } = j(), { linkEmail: O } = k(), { verifyEmailOTP: I } = H(), u = n || i.step, t = u === "credentials" ? "email" : "otp", d = g(t), { setEmail: v, submitEmail: f } = A({
-    submit: (e) => P ? O(e) : T({ email: e })
-  }), { resendCountdown: b, resetOTP: R, setOTP: w, startResendTimer: F, submitOtp: W } = B({
-    passwordLength: h,
-    submit: (e) => I({ flowId: i.flowId, otp: e })
+  const l = S(null), P = 6, { isSignedIn: T } = L(), { state: t } = E(), { signInWithEmail: O } = j(), { linkEmail: I } = k(), { verifyEmailOTP: v } = H(), u = n || t.step, i = u === "credentials" ? "email" : "otp", d = S(i), { setEmail: b, submitEmail: f } = A({
+    submit: (e) => T ? I(e) : O({ email: e })
+  }), { resendCountdown: w, resetOTP: F, setOTP: R, startResendTimer: D, submitOtp: W } = B({
+    passwordLength: P,
+    submit: (e) => v({ flowId: t.flowId, otp: e })
   }), p = () => {
-    F(60);
+    D(60);
   }, C = () => {
-    R(), f({ email: i.email, onSuccess: p });
+    F(), f({ email: t.email, onSuccess: p });
   }, x = (e) => {
-    e.preventDefault(), f({ email: i.email, onSuccess: p });
+    e.preventDefault(), f({ email: t.email, onSuccess: p });
   }, y = (e) => {
-    e.preventDefault(), W({ otp: i.otp, onSuccess: E });
+    e.preventDefault();
+    const o = new FormData(e.currentTarget).get("otp") || t.otp;
+    W({ otp: o, onSuccess: h });
   };
   return M(() => {
-    d.current !== t && (l.current?.transition.toggle(t), d.current = t);
-  }, [t]), /* @__PURE__ */ o(
+    d.current !== i && (l.current?.transition.toggle(i), d.current = i);
+  }, [i]), /* @__PURE__ */ r(
     z,
     {
-      autoFocus: r,
+      autoFocus: s,
       animateHeight: !1,
       items: J,
       initialEntered: !0,
-      direction: t === "otp" ? "left" : "right",
+      direction: i === "otp" ? "left" : "right",
       transitionRef: l,
-      children: ({ itemKey: e, ...D }) => {
-        let s = null;
-        return e === "email" && (s = /* @__PURE__ */ o(
+      children: ({ itemKey: e, ...g }) => {
+        let o = null;
+        return e === "email" && (o = /* @__PURE__ */ r(
           V,
           {
-            email: i.email,
-            error: t === "email" && i.error || "",
-            isPending: i.isPending,
-            onEmailChange: v,
+            email: t.email,
+            error: i === "email" && t.error || "",
+            isPending: t.isPending,
+            onEmailChange: b,
             onSubmit: x
           }
-        )), e === "otp" && (s = /* @__PURE__ */ o(
+        )), e === "otp" && (o = /* @__PURE__ */ r(
           q,
           {
-            canResetOTP: i.canResetOTP,
-            error: t === "otp" && i.error || "",
-            isPending: i.isPending,
-            onOTPChange: w,
+            canResetOTP: t.canResetOTP,
+            error: i === "otp" && t.error || "",
+            isPending: t.isPending,
+            onOTPChange: R,
             onResendOTP: C,
             onSubmit: y,
-            otp: i.otp,
-            resendCountdown: b,
-            successMessage: i.isSuccess ? "Success!" : void 0
+            otp: t.otp,
+            resendCountdown: w,
+            successMessage: t.isSuccess ? "Success!" : void 0
           }
-        )), /* @__PURE__ */ o("div", { ...D, children: c ? c({ step: u, Form: s }) : s });
+        )), /* @__PURE__ */ r("div", { ...g, children: c ? c({ step: u, Form: o }) : o });
       }
     }
   );
-}, Q = ({ step: n }) => /* @__PURE__ */ m(a, { children: [
+}, Q = ({ step: n }) => /* @__PURE__ */ a(m, { children: [
   n === "credentials" && "Sign in",
   n === "verification" && "Enter verification code"
 ] }), U = ({ step: n }) => {
-  const { state: r } = S();
-  return /* @__PURE__ */ m(a, { children: [
+  const { state: s } = E();
+  return /* @__PURE__ */ a(m, { children: [
     n === "credentials" && "We’ll send you a verification code via email.",
-    n === "verification" && /* @__PURE__ */ m(a, { children: [
+    n === "verification" && /* @__PURE__ */ a(m, { children: [
       "Enter the 6 digit code sent to ",
-      /* @__PURE__ */ o(G, { children: r.email })
+      /* @__PURE__ */ r(G, { children: s.email })
     ] })
   ] });
-}, si = {
+}, rt = {
   description: U,
   forms: N,
   title: Q
@@ -89,5 +91,5 @@ export {
   N as SignInWithEmail,
   U as SignInWithEmailDescription,
   Q as SignInWithEmailTitle,
-  si as config
+  rt as config
 };

package/dist/components/SignIn/flows/SignInWithSms.js

@@ -1,7 +1,7 @@
-import { jsxs as h, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, Fragment as p, jsx as s } from "react/jsx-runtime";
 import { useIsSignedIn as H, useSignInWithSms as U, useLinkSms as q, useVerifySmsOTP as z } from "@coinbase/cdp-hooks";
 import "libphonenumber-js";
-import { useRef as g, useState as N, useEffect as A, useLayoutEffect as B, useMemo as G } from "react";
+import { useRef as N, useState as T, useEffect as A, useLayoutEffect as B, useMemo as G } from "react";
 import { OTPForm as J } from "../../forms/OTPForm/index.js";
 import { PhoneNumberForm as Q } from "../../forms/PhoneNumberForm/index.js";
 import { SwitchSlideTransition as X } from "../../ui/SwitchSlideTransition/index.js";
@@ -10,105 +10,107 @@ import { parseValuesFromPhoneNumber as Z } from "../../../utils/parseValuesFromP
 import { useOTPForm as _ } from "../hooks/useOTPForm.js";
 import { usePhoneNumberForm as $ } from "../hooks/usePhoneNumberForm.js";
 import { SignInCredentials as K } from "../SignInCredentials.js";
-import { useSignInContext as T } from "../SignInProvider.js";
+import { useSignInContext as O } from "../SignInProvider.js";
 import "../../CDPReactProvider/index.js";
-const ee = ["phoneNumber", "otp"], ne = ({
+const ee = ["phoneNumber", "otp"], te = ({
   step: o,
-  autoFocus: s,
-  onSuccess: i,
-  children: a
+  autoFocus: i,
+  onSuccess: m,
+  children: h
 }) => {
-  const d = g(null), O = 6, { isSignedIn: v } = H(), { state: n } = T(), { signInWithSms: C } = U(), { linkSms: I } = q(), { verifySmsOTP: y } = z(), [c, F] = N("US"), [m, f] = N({
+  const d = N(null), v = 6, { isSignedIn: C } = H(), { state: t } = O(), { signInWithSms: I } = U(), { linkSms: F } = q(), { verifySmsOTP: y } = z(), [c, w] = T("US"), [u, f] = T({
     value: "",
     e164: ""
-  }), l = o || n.step, t = l === "credentials" ? "phoneNumber" : "otp", b = g(t), { setPhoneNumber: R, submitPhoneNumber: S } = $({
-    submit: (e) => v ? I(e) : C({ phoneNumber: e })
-  }), { resendCountdown: w, resetOTP: E, setOTP: W, startResendTimer: x, submitOtp: j } = _({
-    passwordLength: O,
-    submit: (e) => y({ flowId: n.flowId, otp: e })
-  }), D = (e) => {
-    e.value !== m.value && (f(e), R(e.e164));
+  }), l = o || t.step, n = l === "credentials" ? "phoneNumber" : "otp", b = N(n), { setPhoneNumber: R, submitPhoneNumber: S } = $({
+    submit: (e) => C ? F(e) : I({ phoneNumber: e })
+  }), { resendCountdown: D, resetOTP: E, setOTP: W, startResendTimer: x, submitOtp: j } = _({
+    passwordLength: v,
+    submit: (e) => y({ flowId: t.flowId, otp: e })
+  }), L = (e) => {
+    e.value !== u.value && (f(e), R(e.e164));
   };
   A(() => {
-    if (n.phoneNumber === m.e164)
+    if (t.phoneNumber === u.e164)
       return;
-    const e = Z(n.phoneNumber, c);
+    const e = Z(t.phoneNumber, c);
     f(e);
-  }, [n.phoneNumber, c, m.e164]);
-  const P = () => {
+  }, [t.phoneNumber, c, u.e164]);
+  const g = () => {
     x(60);
-  }, L = () => {
-    E(), S({ phoneNumber: n.phoneNumber, onSuccess: P });
-  }, k = (e) => {
-    e.preventDefault(), S({ phoneNumber: n.phoneNumber, onSuccess: P });
+  }, k = () => {
+    E(), S({ phoneNumber: t.phoneNumber, onSuccess: g });
   }, M = (e) => {
-    e.preventDefault(), j({ otp: n.otp, onSuccess: i });
+    e.preventDefault(), S({ phoneNumber: t.phoneNumber, onSuccess: g });
+  }, V = (e) => {
+    e.preventDefault();
+    const r = new FormData(e.currentTarget).get("otp") || t.otp;
+    j({ otp: r, onSuccess: m });
   };
   return B(() => {
-    b.current !== t && (d.current?.transition.toggle(t), b.current = t);
-  }, [t]), /* @__PURE__ */ r(
+    b.current !== n && (d.current?.transition.toggle(n), b.current = n);
+  }, [n]), /* @__PURE__ */ s(
     X,
     {
-      autoFocus: s ? "input[type='tel']" : !1,
+      autoFocus: i ? "input[type='tel']" : !1,
       animateHeight: !1,
       items: ee,
       initialEntered: !0,
-      direction: t === "otp" ? "left" : "right",
+      direction: n === "otp" ? "left" : "right",
       transitionRef: d,
-      children: ({ itemKey: e, ...V }) => {
-        let u = null;
-        return e === "phoneNumber" && (u = /* @__PURE__ */ r(
+      children: ({ itemKey: e, ...P }) => {
+        let r = null;
+        return e === "phoneNumber" && (r = /* @__PURE__ */ s(
           Q,
           {
             countryCode: c,
-            error: t === "phoneNumber" && n.error || "",
-            isPending: n.isPending,
-            onCountryCodeChange: F,
-            onPhoneNumberChange: D,
-            onSubmit: k,
-            phoneNumber: m
+            error: n === "phoneNumber" && t.error || "",
+            isPending: t.isPending,
+            onCountryCodeChange: w,
+            onPhoneNumberChange: L,
+            onSubmit: M,
+            phoneNumber: u
           }
-        )), e === "otp" && (u = /* @__PURE__ */ r(
+        )), e === "otp" && (r = /* @__PURE__ */ s(
           J,
           {
-            canResetOTP: n.canResetOTP,
-            error: t === "otp" && n.error || "",
-            isPending: n.isPending,
+            canResetOTP: t.canResetOTP,
+            error: n === "otp" && t.error || "",
+            isPending: t.isPending,
             onOTPChange: W,
-            onResendOTP: L,
-            onSubmit: M,
-            otp: n.otp,
-            resendCountdown: w,
-            successMessage: n.isSuccess ? "Success!" : void 0
+            onResendOTP: k,
+            onSubmit: V,
+            otp: t.otp,
+            resendCountdown: D,
+            successMessage: t.isSuccess ? "Success!" : void 0
           }
-        )), /* @__PURE__ */ r("div", { ...V, children: a ? a({ step: l, Form: u }) : u });
+        )), /* @__PURE__ */ s("div", { ...P, children: h ? h({ step: l, Form: r }) : r });
       }
     }
   );
-}, te = ({ step: o }) => /* @__PURE__ */ h(p, { children: [
+}, ne = ({ step: o }) => /* @__PURE__ */ a(p, { children: [
   o === "credentials" && "Sign in",
   o === "verification" && "Enter verification code"
 ] }), oe = ({ step: o }) => {
-  const { state: s } = T(), i = G(
-    () => Y(s.phoneNumber),
-    [s.phoneNumber]
+  const { state: i } = O(), m = G(
+    () => Y(i.phoneNumber),
+    [i.phoneNumber]
   );
-  return /* @__PURE__ */ h(p, { children: [
+  return /* @__PURE__ */ a(p, { children: [
     o === "credentials" && "We’ll send you a verification code via text.",
-    o === "verification" && /* @__PURE__ */ h(p, { children: [
+    o === "verification" && /* @__PURE__ */ a(p, { children: [
       "Enter the 6 digit code sent to",
       " ",
-      i ? /* @__PURE__ */ r(K, { children: i }) : "your phone number"
+      m ? /* @__PURE__ */ s(K, { children: m }) : "your phone number"
     ] })
   ] });
-}, Pe = {
+}, ge = {
   description: oe,
-  forms: ne,
-  title: te
+  forms: te,
+  title: ne
 };
 export {
-  ne as SignInWithSms,
+  te as SignInWithSms,
   oe as SignInWithSmsDescription,
-  te as SignInWithSmsTitle,
-  Pe as config
+  ne as SignInWithSmsTitle,
+  ge as config
 };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.74";
+export declare const VERSION = "0.0.76";

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.0.74";
+const o = "0.0.76";
 export {
   o as VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -15,8 +15,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-core": "^0.0.74",
-    "@coinbase/cdp-hooks": "^0.0.74"
+    "@coinbase/cdp-hooks": "^0.0.76",
+    "@coinbase/cdp-core": "^0.0.76"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -47,8 +47,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.74",
-    "@coinbase/cdp-hooks": "^0.0.74"
+    "@coinbase/cdp-core": "^0.0.76",
+    "@coinbase/cdp-hooks": "^0.0.76"
   },
   "size-limit": [
     {