@coinbase/cdp-react 0.0.75 → 0.0.77

package/dist/components/CDPReactProvider/index.js

@@ -1,89 +1,52 @@
-import { jsx as p, jsxs as H } from "react/jsx-runtime";
-import { OAuth2ProviderType as S, CDPContext as U, CDPHooksProvider as _ } from "@coinbase/cdp-hooks";
-import { lazy as E, createContext as j, useContext as m, useMemo as L } from "react";
-import { ThemeProvider as F } from "../ThemeProvider/index.js";
-const k = E(() => import("../OAuthStatusModal/index.js")), I = (t) => {
+import { jsx as c, jsxs as y } from "react/jsx-runtime";
+import { OAuth2ProviderType as w, CDPContext as O, CDPHooksProvider as H } from "@coinbase/cdp-hooks";
+import { lazy as N, createContext as T, useContext as m, useMemo as g } from "react";
+import { ThemeProvider as b } from "../ThemeProvider/index.js";
+const D = N(() => import("../OAuthStatusModal/index.js")), l = (o) => {
   try {
-    return JSON.stringify(t);
+    return JSON.stringify(o);
   } catch {
   }
   return "";
-}, J = Object.keys(S).map((t) => `oauth:${t}`), V = [
+}, S = Object.keys(w).map((o) => `oauth:${o}`), U = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], G = [...V, ...J], K = ({
-  children: t,
+], J = [...U, ...S], V = ({
+  children: o,
   className: r = "",
   config: n,
   name: s,
   style: a,
   theme: i
 }) => {
-  const {
-    appName: h,
-    appLogoUrl: c,
-    showCoinbaseFooter: u,
-    authMethods: e,
-    projectId: d,
-    secureIframeBasePath: C,
-    useMock: l,
-    debugging: f,
-    basePath: A,
-    ethereum: y,
-    solana: b,
-    disableAnalytics: O,
-    customAuth: P
-  } = n, { createOnLogin: M } = y ?? {}, { createOnLogin: v } = b ?? {}, w = L(
-    () => ({
-      projectId: d,
-      useMock: l,
-      debugging: f,
-      basePath: A,
-      secureIframeBasePath: C,
-      disableAnalytics: O,
-      customAuth: P,
-      ethereum: { createOnLogin: M },
-      solana: { createOnLogin: v }
-    }),
-    [
-      d,
-      l,
-      f,
-      A,
-      C,
-      M,
-      v,
-      O,
-      P
-    ]
-  ), N = { appName: h, appLogoUrl: c, showCoinbaseFooter: u, authMethods: e }, T = e?.some((D) => D.startsWith("oauth:")), x = /* @__PURE__ */ p(z, { name: s, config: N, children: /* @__PURE__ */ H(F, { className: r, style: a, theme: i, children: [
-    t,
-    T && /* @__PURE__ */ p(k, {})
+  const { appName: h, appLogoUrl: p, showCoinbaseFooter: u, authMethods: t, ...d } = n, A = l(d), M = g(() => d, [A]), P = { appName: h, appLogoUrl: p, showCoinbaseFooter: u, authMethods: t }, v = t?.some((x) => x.startsWith("oauth:")), f = /* @__PURE__ */ c(L, { name: s, config: P, children: /* @__PURE__ */ y(b, { className: r, style: a, theme: i, children: [
+    o,
+    v && /* @__PURE__ */ c(D, {})
   ] }) });
-  return m(U) ? x : /* @__PURE__ */ p(_, { config: w, children: x });
-}, g = j(
+  return m(O) ? f : /* @__PURE__ */ c(H, { config: M, children: f });
+}, C = T(
   void 0
-), o = {
+), e = {
   appName: "",
   appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, z = ({
-  children: t,
+}, L = ({
+  children: o,
   config: r,
   name: n
 }) => {
   const {
-    appName: s = o.appName,
-    appLogoUrl: a = o.appLogoUrl,
-    showCoinbaseFooter: i = o.showCoinbaseFooter,
-    authMethods: h = o.authMethods
-  } = r ?? {}, c = I(h), u = L(() => {
-    let e = ["email"];
+    appName: s = e.appName,
+    appLogoUrl: a = e.appLogoUrl,
+    showCoinbaseFooter: i = e.showCoinbaseFooter,
+    authMethods: h = e.authMethods
+  } = r ?? {}, p = l(h), u = g(() => {
+    let t = ["email"];
     try {
-      e = JSON.parse(c);
+      t = JSON.parse(p);
     } catch {
     }
     return {
@@ -91,28 +54,28 @@ const k = E(() => import("../OAuthStatusModal/index.js")), I = (t) => {
         appName: s,
         appLogoUrl: a,
         showCoinbaseFooter: i,
-        authMethods: Array.isArray(e) && e?.length ? e : o.authMethods
+        authMethods: Array.isArray(t) && t?.length ? t : e.authMethods
       },
       name: n
     };
-  }, [s, a, i, c, n]);
-  return /* @__PURE__ */ p(g.Provider, { value: u, children: t });
-}, Q = () => {
-  const t = m(g);
-  if (!t)
+  }, [s, a, i, p, n]);
+  return /* @__PURE__ */ c(C.Provider, { value: u, children: o });
+}, z = () => {
+  const o = m(C);
+  if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
-  return t.app;
-}, X = () => {
-  const t = m(g);
-  if (!t)
+  return o.app;
+}, K = () => {
+  const o = m(C);
+  if (!o)
     throw new Error("useProviderName must be used within an AppConfigProvider");
-  return t.name ?? "";
+  return o.name ?? "";
 };
 export {
-  G as ALL_AUTH_METHODS,
-  V as AUTH_METHODS,
-  K as CDPReactProvider,
-  J as OAUTH_METHODS,
-  Q as useAppConfig,
-  X as useProviderName
+  J as ALL_AUTH_METHODS,
+  U as AUTH_METHODS,
+  V as CDPReactProvider,
+  S as OAUTH_METHODS,
+  z as useAppConfig,
+  K as useProviderName
 };

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.75";
+export declare const VERSION = "0.0.77";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "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.75",
-    "@coinbase/cdp-hooks": "^0.0.75"
+    "@coinbase/cdp-core": "^0.0.77",
+    "@coinbase/cdp-hooks": "^0.0.77"
   },
   "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.75",
-    "@coinbase/cdp-hooks": "^0.0.75"
+    "@coinbase/cdp-core": "^0.0.77",
+    "@coinbase/cdp-hooks": "^0.0.77"
   },
   "size-limit": [
     {