@coinbase/cdp-react 0.0.109 → 0.0.110

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

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

package/dist/components/SignIn/hooks/useEmailForm.js

@@ -1,40 +1,40 @@
 import "@coinbase/cdp-hooks";
 import { useCallback as p, useMemo as m } from "react";
 import { isApiError as y } from "../../../utils/isApiError.js";
-import { useSignInContext as d } from "../SignInProvider.js";
+import { useSignInContext as u } from "../SignInProvider.js";
 const f = ({
-  submit: t
+  submit: e
 }) => {
-  const { state: n, dispatch: o } = d(), a = "An error occurred while signing in. Please try again.", s = p(
-    (e) => {
-      o({ type: "SET_EMAIL", payload: { email: e } });
+  const { state: a, dispatch: o } = u(), s = "An error occurred while signing in. Please try again.", n = p(
+    (t) => {
+      o({ type: "SET_EMAIL", payload: { email: t } });
     },
     [o]
   ), i = p(
     async ({
-      email: e,
+      email: t,
       onSuccess: l,
       onError: E
     }) => {
-      if (!n.isPending) {
-        o({ type: "SUBMIT_EMAIL", payload: { email: e } });
+      if (a.status !== "pending") {
+        o({ type: "SUBMIT_EMAIL", payload: { email: t } });
         try {
-          const { flowId: r } = await t(e);
+          const { flowId: r } = await e(t);
           o({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), l?.();
         } catch (r) {
-          const c = y(r) ? r : r instanceof Error && r.message || a;
+          const c = y(r) ? r : r instanceof Error && r.message || s;
           o({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: c } }), console.error(r), E?.(c);
         }
       }
     },
-    [o, n.isPending, t]
+    [o, a.status, e]
   );
   return m(
     () => ({
-      setEmail: s,
+      setEmail: n,
       submitEmail: i
     }),
-    [s, i]
+    [n, i]
   );
 };
 export {

package/dist/components/SignIn/hooks/useFlowTransition.d.ts

@@ -0,0 +1,14 @@
+import { SwitchTransitionRef } from '../../ui/SwitchTransition';
+import { SignInState } from '../types';
+type Step = SignInState["step"];
+/**
+ * A hook that transitions between steps in a sign in flow.
+ *
+ * @param {Step} step - The step to transition to.
+ * @param {boolean} isActive - Whether the flow is active.
+ * @returns {SwitchTransitionRef<Step>} - The transition ref.
+ */
+export declare const useFlowTransition: (step: Step, isActive: boolean) => {
+    transitionRef: import('react').RefObject<SwitchTransitionRef<"verification" | "credentials"> | null>;
+};
+export {};

package/dist/components/SignIn/hooks/useFlowTransition.js

@@ -0,0 +1,13 @@
+import { useRef as u, useLayoutEffect as e } from "react";
+import "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import "../../../chunks/CDPReactProvider.BWInVuNJ.js";
+const l = (r, t) => {
+  const n = u(null), o = u(r);
+  return e(() => {
+    !t || o.current === r || (n.current?.transition.toggle(r), o.current = r);
+  }, [t, r]), { transitionRef: n };
+};
+export {
+  l as useFlowTransition
+};

package/dist/components/SignIn/hooks/useOTPForm.js

@@ -1,57 +1,57 @@
 import "@coinbase/cdp-hooks";
-import { useCallback as i, useEffect as l, useMemo as u } from "react";
+import { useCallback as a, useEffect as f, useMemo as l } from "react";
 import { useTimer as E } from "../../../hooks/useTimer.js";
 import { isApiError as S } from "../../../utils/isApiError.js";
 import { useSignInContext as _ } from "../SignInProvider.js";
 const A = ({
-  passwordLength: a,
+  passwordLength: i,
   submit: T
 }) => {
-  const { state: n, dispatch: e } = _(), {
+  const { state: s, dispatch: e } = _(), {
     timeRemaining: o,
     start: c,
-    reset: r
-  } = E(), p = "An error occurred while signing in. Please try again.", m = i(
-    (t) => {
-      e({ type: "SET_OTP", payload: { otp: t } });
+    reset: t
+  } = E(), p = "An error occurred while signing in. Please try again.", m = a(
+    (r) => {
+      e({ type: "SET_OTP", payload: { otp: r } });
     },
     [e]
-  ), y = i(
+  ), y = a(
     async ({
-      otp: t,
-      onSuccess: d,
-      onError: f
+      otp: r,
+      onSuccess: P,
+      onError: d
     }) => {
-      if (!n.isPending) {
-        if (t.length !== a) {
-          e({ type: "SET_OTP", payload: { otp: t } });
+      if (s.status !== "pending") {
+        if (r.length !== i) {
+          e({ type: "SET_OTP", payload: { otp: r } });
           return;
         }
-        e({ type: "SUBMIT_OTP", payload: { otp: t } });
+        e({ type: "SUBMIT_OTP", payload: { otp: r } });
         try {
-          await T(t), e({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: t } }), d?.(), r();
-        } catch (s) {
-          const O = S(s) ? s : s instanceof Error && s.message || p;
-          e({ type: "SUBMIT_OTP_FAILURE", payload: { error: O } }), console.error(s), f?.(O);
+          await T(r), e({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: r } }), P?.(), t();
+        } catch (n) {
+          const O = S(n) ? n : n instanceof Error && n.message || p;
+          e({ type: "SUBMIT_OTP_FAILURE", payload: { error: O } }), console.error(n), d?.(O);
         }
       }
     },
-    [e, n.isPending, a, T, r]
-  ), P = i(() => {
-    e({ type: "RESET_OTP" }), r();
-  }, [e, r]);
-  return l(() => {
-    o === 0 && n.step === "verification" && !n.canResetOTP && (e({ type: "ALLOW_RESET_OTP" }), r());
-  }, [o, r, n.step, n.canResetOTP, e]), u(
+    [e, s.status, i, T, t]
+  ), u = a(() => {
+    e({ type: "RESET_OTP" }), t();
+  }, [e, t]);
+  return f(() => {
+    o === 0 && s.step === "verification" && !s.canResetOTP && (e({ type: "ALLOW_RESET_OTP" }), t());
+  }, [o, t, s.step, s.canResetOTP, e]), l(
     () => ({
       resendCountdown: o,
-      resetOTP: P,
-      resetResendTimer: r,
+      resetOTP: u,
+      resetResendTimer: t,
       setOTP: m,
       startResendTimer: c,
       submitOtp: y
     }),
-    [o, P, r, m, c, y]
+    [o, u, t, m, c, y]
   );
 };
 export {

package/dist/components/SignIn/hooks/usePhoneNumberForm.js

@@ -1,11 +1,11 @@
 import "@coinbase/cdp-hooks";
-import { useCallback as p, useMemo as l } from "react";
-import { isApiError as y } from "../../../utils/isApiError.js";
-import { useSignInContext as d } from "../SignInProvider.js";
-const U = ({
+import { useCallback as p, useMemo as u } from "react";
+import { isApiError as l } from "../../../utils/isApiError.js";
+import { useSignInContext as y } from "../SignInProvider.js";
+const M = ({
   submit: t
 }) => {
-  const { state: n, dispatch: o } = d(), s = "An error occurred while signing in. Please try again.", a = p(
+  const { state: s, dispatch: o } = y(), n = "An error occurred while signing in. Please try again.", a = p(
     (e) => {
       o({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: e } });
     },
@@ -16,20 +16,20 @@ const U = ({
       onSuccess: E,
       onError: m
     }) => {
-      if (!n.isPending) {
+      if (s.status !== "pending") {
         o({ type: "SUBMIT_PHONE_NUMBER", payload: { phoneNumber: e } });
         try {
           const { flowId: r } = await t(e);
           o({ type: "SUBMIT_PHONE_NUMBER_SUCCESS", payload: { flowId: r } }), E?.();
         } catch (r) {
-          const c = y(r) ? r : r instanceof Error && r.message || s;
+          const c = l(r) ? r : r instanceof Error && r.message || n;
           o({ type: "SUBMIT_PHONE_NUMBER_FAILURE", payload: { error: c } }), console.error(r), m?.(c);
         }
       }
     },
-    [o, n.isPending, t]
+    [o, s.status, t]
   );
-  return l(
+  return u(
     () => ({
       setPhoneNumber: a,
       submitPhoneNumber: i
@@ -38,5 +38,5 @@ const U = ({
   );
 };
 export {
-  U as usePhoneNumberForm
+  M as usePhoneNumberForm
 };

package/dist/components/SignIn/hooks/useStartSiwe.d.ts

@@ -0,0 +1,10 @@
+import { SiweProviderType } from '../../SiweStatusView';
+/**
+ * Bridges useSiweFlow to the SignIn reducer so the inline status view reflects the attempt.
+ *
+ * @param {SiweProviderType} provider - The SIWE provider to authenticate with.
+ * @returns {(onSuccess?: () => void) => Promise<void>} A function that starts the SIWE flow.
+ *
+ * @see {@link useSiweFlow}
+ */
+export declare const useStartSiwe: (provider: SiweProviderType) => (onSuccess?: () => void) => Promise<void>;

package/dist/components/SignIn/hooks/useStartSiwe.js

@@ -0,0 +1,24 @@
+import { useCallback as p } from "react";
+import "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import "../../ui/Button/index.js";
+import "@coinbase/cdp-core";
+import { useSiweFlow as s } from "../../SiweStatusView/useSiweFlow.js";
+import "libphonenumber-js";
+import { useSignInContext as a } from "../SignInProvider.js";
+const y = (o) => {
+  const { dispatch: t } = a(), { start: r } = s(o);
+  return p(
+    (S) => r({
+      onStart: () => t({ type: "SUBMIT_SIWE", payload: { authMethod: `siwe:${o}` } }),
+      onSuccess: () => {
+        t({ type: "SUBMIT_SIWE_SUCCESS" }), S?.();
+      },
+      onError: (e) => t({ type: "SUBMIT_SIWE_FAILURE", payload: { error: e ?? "" } })
+    }),
+    [r, t, o]
+  );
+};
+export {
+  y as useStartSiwe
+};

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

@@ -8,7 +8,7 @@ import { SignInForm, SignInFormProps } from './SignInForm';
 import { SignInImage, SignInImageProps } from './SignInImage';
 import { useSignInContext } from './SignInProvider';
 import { SignInTitle, SignInTitleProps } from './SignInTitle';
-import { SignInState, SignInAction } from './types';
+import { SignInState, SignInAction, SignInStatus } from './types';
 /**
  * Props for the SignIn component
  */
@@ -139,4 +139,4 @@ export interface SignInProps extends Omit<HTMLAttributes<HTMLDivElement>, "child
  * ```
  */
 export declare const SignIn: ({ authMethods, ...props }: SignInProps) => import("react/jsx-runtime").JSX.Element;
-export { SignInAuthMethodButtons, SignInBackButton, SignInDescription, SignInFooter, SignInForm, SignInImage, SignInTitle, useSignInContext, type SignInAuthMethodButtonsProps, type SignInBackButtonProps, type SignInDescriptionProps, type SignInFormProps, type SignInImageProps, type SignInTitleProps, type SignInState, type SignInAction, };
+export { SignInAuthMethodButtons, SignInBackButton, SignInDescription, SignInFooter, SignInForm, SignInImage, SignInTitle, useSignInContext, type SignInAuthMethodButtonsProps, type SignInBackButtonProps, type SignInDescriptionProps, type SignInFormProps, type SignInImageProps, type SignInTitleProps, type SignInState, type SignInAction, type SignInStatus, };

package/dist/components/SignIn/index.js

@@ -1,54 +1,54 @@
-import { jsx as n, jsxs as r, Fragment as c } from "react/jsx-runtime";
-import { u } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
+import { jsx as n, jsxs as e, Fragment as p } from "react/jsx-runtime";
+import { u as f } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
 import "react";
-import { u as d } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { SignInAuthMethodButtons as f } from "./SignInAuthMethodButtons.js";
+import { u } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { SignInAuthMethodButtons as d } from "./SignInAuthMethodButtons.js";
 import { SignInBackButton as I } from "./SignInBackButton.js";
 import { SignInDescription as S } from "./SignInDescription.js";
 import { SignInFooter as b } from "./SignInFooter.js";
 import { SignInForm as k } from "./SignInForm.js";
 import { SignInImage as w } from "./SignInImage.js";
-import { SignInProvider as C, useSignInContext as h } from "./SignInProvider.js";
-import { SignInTitle as v } from "./SignInTitle.js";
+import { SignInProvider as v, useSignInContext as C } from "./SignInProvider.js";
+import { SignInTitle as N } from "./SignInTitle.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignIn.css';const F = "SignIn-module__footer___3Gkbc", t = {
+import '../../assets/SignIn.css';const x = "SignIn-module__footer___3Gkbc", r = {
   "sign-in": "SignIn-module__sign-in___cYpee",
   "title-desc-wrapper": "SignIn-module__title-desc-wrapper___VpPcA",
   "back-button": "SignIn-module__back-button___bmE-y",
   "back-button-wrapper": "SignIn-module__back-button-wrapper___Q9FA1",
-  footer: F
-}, N = ({
-  className: e = "",
+  footer: x
+}, A = ({
+  className: m = "",
   children: o,
-  onSuccess: p,
-  ...a
+  onSuccess: s,
+  ..._
 }) => {
-  const { state: _ } = h(), { showCoinbaseFooter: g } = d(), s = typeof o == "function" ? o(_) : o;
-  return /* @__PURE__ */ r("div", { className: `${t["sign-in"]} ${e}`, ...a, children: [
-    s,
-    !s && /* @__PURE__ */ r(c, { children: [
-      /* @__PURE__ */ n("div", { className: t["back-button-wrapper"], children: /* @__PURE__ */ n(I, { className: t["back-button"] }) }),
-      /* @__PURE__ */ n(w, {}),
-      /* @__PURE__ */ n(k, { onSuccess: p, children: ({ authMethod: i, step: m, Form: l }) => /* @__PURE__ */ r(c, { children: [
-        /* @__PURE__ */ r("div", { className: t["title-desc-wrapper"], children: [
-          /* @__PURE__ */ n(v, { step: m, authMethod: i }),
-          /* @__PURE__ */ n(S, { step: m, authMethod: i })
+  const { state: g } = C(), { showCoinbaseFooter: l } = u(), c = typeof o == "function" ? o(g) : o;
+  return /* @__PURE__ */ e("div", { className: `${r["sign-in"]} ${m}`, ..._, children: [
+    c,
+    !c && /* @__PURE__ */ e(p, { children: [
+      /* @__PURE__ */ n("div", { className: r["back-button-wrapper"], children: /* @__PURE__ */ n(I, { className: r["back-button"] }) }),
+      /* @__PURE__ */ n(k, { onSuccess: s, children: ({ authMethod: t, step: i, Form: a }) => t.startsWith("siwe:") && i === "verification" ? a : /* @__PURE__ */ e(p, { children: [
+        /* @__PURE__ */ n(w, { authMethod: t, step: i }),
+        /* @__PURE__ */ e("div", { className: r["title-desc-wrapper"], children: [
+          /* @__PURE__ */ n(N, { step: i, authMethod: t }),
+          /* @__PURE__ */ n(S, { step: i, authMethod: t })
         ] }),
-        l,
-        m === "credentials" && /* @__PURE__ */ n(f, { activeMethod: i })
+        a,
+        i === "credentials" && /* @__PURE__ */ n(d, { activeMethod: t, onSuccess: s })
       ] }) }),
-      g && /* @__PURE__ */ n(b, { className: t.footer })
+      l && /* @__PURE__ */ n(b, { className: r.footer })
     ] })
   ] });
-}, V = ({ authMethods: e, ...o }) => (u("sign_in"), /* @__PURE__ */ n(C, { authMethods: e, children: /* @__PURE__ */ n(N, { ...o }) }));
+}, V = ({ authMethods: m, ...o }) => (f("sign_in"), /* @__PURE__ */ n(v, { authMethods: m, children: /* @__PURE__ */ n(A, { ...o }) }));
 export {
   V as SignIn,
-  f as SignInAuthMethodButtons,
+  d as SignInAuthMethodButtons,
   I as SignInBackButton,
   S as SignInDescription,
   b as SignInFooter,
   k as SignInForm,
   w as SignInImage,
-  v as SignInTitle,
-  h as useSignInContext
+  N as SignInTitle,
+  C as useSignInContext
 };

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

@@ -21,10 +21,11 @@ export interface SignInTitleAndDescriptionProps {
  * @property {string} email - The email address of the user.
  * @property {string | APIError | null} error - The error message or APIError object.
  * @property {string} flowId - The flow ID of the current sign-in flow.
- * @property {boolean} isPending - Whether the form state is pending.
- * @property {boolean} isSuccess - Whether the sign-in flow is successful.
+ * @property {boolean} isPending - Whether the form state is pending. **Deprecated**: use `status === "pending"`.
+ * @property {boolean} isSuccess - Whether the sign-in flow is successful. **Deprecated**: use `status === "success"`.
  * @property {string} otp - The OTP code entered by the user.
  * @property {string} phoneNumber - The phone number of the user.
+ * @property {SignInStatus} status - The current status of the active flow.
  * @property {AuthMethod | "otp" | "success"} step - The current step of the sign-in flow.
  *
  * @see {@link SignIn}
@@ -37,12 +38,20 @@ export interface SignInState {
     email: string;
     error: string | APIError | null;
     flowId: string;
+    /** @deprecated Use `status === "pending"` instead. */
     isPending: boolean;
+    /** @deprecated Use `status === "success"` instead. */
     isSuccess: boolean;
     otp: string;
     phoneNumber: string;
+    /** The current status of the active flow. */
+    status: SignInStatus;
     step: "credentials" | "verification";
 }
+/**
+ * The status of the active sign-in flow.
+ */
+export type SignInStatus = "idle" | "pending" | "success" | "error";
 /**
  * The actions that can be performed on the SignIn state.
  *
@@ -129,6 +138,18 @@ export type SignInAction = {
     type: "GO_TO_PREVIOUS_STEP";
 } | {
     type: "RESET_STATE";
+} | {
+    type: "SUBMIT_SIWE";
+    payload: {
+        authMethod: AuthMethod;
+    };
+} | {
+    type: "SUBMIT_SIWE_SUCCESS";
+} | {
+    type: "SUBMIT_SIWE_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
 };
 /**
  * Shared props for a sign in flow.
@@ -150,3 +171,4 @@ export interface SignInFlowConfig {
     description: FC<SignInTitleAndDescriptionProps>;
     title: FC<SignInTitleAndDescriptionProps>;
 }
+export declare const STEPS: ["credentials", "verification"];

package/dist/components/SignIn/types.js

@@ -1,3 +1,7 @@
 import "@coinbase/cdp-hooks";
 import "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+const r = ["credentials", "verification"];
+export {
+  r as STEPS
+};