@coinbase/cdp-react 0.0.58 → 0.0.61

package/dist/components/SignIn/SignInForm.d.ts

@@ -3,6 +3,7 @@ import { AuthMethod } from '../CDPReactProvider';
 import { SignInState } from './types';
 export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     as?: ElementType;
+    autoFocus?: boolean;
     onSuccess?: () => void;
     step?: SignInState["step"];
     children?: (props: {
@@ -11,4 +12,4 @@ export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "chil
         Form: ReactNode;
     }) => ReactNode;
 }
-export declare const SignInForm: ({ onSuccess, step: stepFromProps, children, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInForm: ({ autoFocus, onSuccess, step: stepFromProps, children, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInForm.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useRef as d, useState as _, useLayoutEffect as p } from "react";
-import { useAppConfig as I } from "../CDPReactProvider/index.js";
+import { useRef as d, useState as I, useLayoutEffect as p } from "react";
+import "../CDPReactProvider/index.js";
 import { SwitchFadeTransition as T } from "../ui/SwitchFadeTransition/index.js";
 import { a as y } from "../../chunks/index.Bvudzh_y.js";
 import { useSignInContext as v } from "./SignInProvider.js";
@@ -8,16 +8,17 @@ import "@coinbase/cdp-hooks";
 import '../../assets/SignInForm.css';const E = {
   "auth-method-wrapper": "SignInForm-module__auth-method-wrapper___uIOAB"
 }, B = ({
-  onSuccess: l,
-  step: f,
-  children: M,
-  ...g
+  autoFocus: l = !0,
+  onSuccess: f,
+  step: M,
+  children: g,
+  ...S
 }) => {
-  const { state: o, dispatch: c } = v(), { authMethods: e } = I(), S = f || o.step, m = d(o.authMethod), i = d(e), u = d(null), [w, A] = _(e || []);
+  const { state: r, dispatch: c } = v(), { authMethods: e } = r, w = M || r.step, m = d(r.authMethod), i = d(e), u = d(null), [_, A] = I(e || []);
   return p(() => {
-    let t = o.authMethod;
-    const r = !e?.includes(o.authMethod), n = i.current && i.current.length === e?.length && i.current.some((h, s) => h !== e?.[s]);
-    if ((r || n) && (t = e?.[0]), t && t !== o.authMethod) {
+    let t = r.authMethod;
+    const n = !e?.includes(r.authMethod), o = i.current && i.current.length === e?.length && i.current.some((h, s) => h !== e?.[s]);
+    if ((n || o) && (t = e?.[0]), t && t !== r.authMethod) {
       c({
         type: "SET_AUTH_METHOD",
         payload: { authMethod: t }
@@ -25,23 +26,23 @@ import '../../assets/SignInForm.css';const E = {
       return;
     }
     u.current?.transition && t && m.current !== t && (u.current.transition.toggle(t), m.current = t);
-  }, [e, c, o.authMethod]), p(() => {
+  }, [e, c, r.authMethod]), p(() => {
     i.current = e, A((t) => {
-      const r = e?.filter((n) => !t.includes(n)) || [];
-      return r.length ? [...t, ...r] : t;
+      const n = e?.filter((o) => !t.includes(o)) || [];
+      return n.length ? [...t, ...n] : t;
     });
   }, [e]), /* @__PURE__ */ a(
     T,
     {
       animateHeight: !0,
       timeout: 250,
-      items: w,
+      items: _,
       initialEntered: !0,
       transitionRef: u,
-      ...g,
-      children: ({ itemKey: t, ...r }) => {
-        const n = y[t].forms;
-        return /* @__PURE__ */ a("div", { ...r, className: E["auth-method-wrapper"], children: /* @__PURE__ */ a(n, { step: S, onSuccess: l, children: ({ step: h, Form: s }) => M?.({ step: h, authMethod: t, Form: s }) || s }) });
+      ...S,
+      children: ({ itemKey: t, ...n }) => {
+        const o = y[t].forms;
+        return /* @__PURE__ */ a("div", { ...n, className: E["auth-method-wrapper"], children: /* @__PURE__ */ a(o, { autoFocus: l, step: w, onSuccess: f, children: ({ step: h, Form: s }) => g?.({ step: h, authMethod: t, Form: s }) || s }) });
       }
     }
   );

package/dist/components/SignIn/SignInProvider.d.ts

@@ -8,6 +8,7 @@ export declare const useSignInContext: () => {
     state: SignInState;
     dispatch: Dispatch<SignInAction>;
 };
-export declare const SignInProvider: ({ children }: {
+export declare const SignInProvider: ({ children, authMethods: authMethodsFromProps, }: {
     children: ReactNode;
+    authMethods?: SignInState["authMethods"];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInProvider.js

@@ -1,10 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import { createContext as u, useContext as c, useMemo as m } from "react";
-import { useAppConfig as d } from "../CDPReactProvider/index.js";
+import { jsx as d } from "react/jsx-runtime";
+import { createContext as h, useContext as m, useMemo as l } from "react";
+import { useAppConfig as f } from "../CDPReactProvider/index.js";
 import "@coinbase/cdp-hooks";
 import { useSignInReducer as p } from "./useSignInReducer.js";
-const n = {
+const r = {
   authMethod: "email",
+  authMethods: ["email"],
   canResetOTP: !1,
   email: "",
   error: null,
@@ -14,24 +15,28 @@ const n = {
   otp: "",
   phoneNumber: "",
   step: "credentials"
-}, s = u({
-  state: n,
+}, i = h({
+  state: r,
   dispatch: () => {
   }
-}), S = () => {
-  const t = c(s);
+}), I = () => {
+  const t = m(i);
   if (!t)
     throw new Error("useSignInContext must be used within a SignInProvider");
   return t;
-}, I = ({ children: t }) => {
-  const { authMethods: r } = d(), [e, o] = p({
-    ...n,
-    authMethod: r?.[0] || "email"
-  }), i = m(() => ({ state: e, dispatch: o }), [e, o]);
-  return /* @__PURE__ */ a(s.Provider, { value: i, children: t });
+}, P = ({
+  children: t,
+  authMethods: a
+}) => {
+  const { authMethods: e } = f(), o = a?.filter((c) => e.includes(c)) ?? e, [n, s] = p({
+    ...r,
+    authMethod: o?.[0] || "email",
+    authMethods: o
+  }), u = l(() => ({ state: n, dispatch: s }), [n, s]);
+  return /* @__PURE__ */ d(i.Provider, { value: u, children: t });
 };
 export {
-  s as SignInContext,
-  I as SignInProvider,
-  S as useSignInContext
+  i as SignInContext,
+  P as SignInProvider,
+  I as useSignInContext
 };

package/dist/components/SignIn/flows/SignInWithEmail.d.ts

@@ -1,6 +1,6 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
 export type Step = "email" | "otp";
-export declare const SignInWithEmail: ({ step: stepFromProps, onSuccess, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInWithEmail: ({ step: stepFromProps, autoFocus, onSuccess, children, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithEmailTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithEmailDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;

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

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

package/dist/components/SignIn/flows/SignInWithSms.d.ts

@@ -1,7 +1,7 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
 declare const STEPS: readonly ["phoneNumber", "otp"];
 export type Step = (typeof STEPS)[number];
-export declare const SignInWithSms: ({ step: stepFromProps, onSuccess, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInWithSms: ({ step: stepFromProps, autoFocus, onSuccess, children, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithSmsTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithSmsDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;