@coinbase/cdp-react 0.0.108 → 0.0.110

package/dist/components/SignIn/SignInDescription.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { a as d } from "../../chunks/index.IrJ_irKX.js";
+import { a as d } from "../../chunks/index.Du1vsLh6.js";
 import { useSignInContext as h } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import '../../assets/SignInDescription.css';const u = "SignInDescription-module__description___jZLc6", _ = {
   description: u
 }, M = ({

package/dist/components/SignIn/SignInForm.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as d, useState as I, useLayoutEffect as p } from "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { SwitchFadeTransition as T } from "../ui/SwitchFadeTransition/index.js";
-import { a as y } from "../../chunks/index.IrJ_irKX.js";
+import { a as y } from "../../chunks/index.Du1vsLh6.js";
 import { useSignInContext as v } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
 import '../../assets/SignInForm.css';const E = {

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

@@ -1,3 +1,5 @@
+import { AuthMethod } from '../CDPReactProvider';
+import { SignInState } from './types';
 /**
  * Props for the SignInImage component.
  *
@@ -10,15 +12,22 @@ export interface SignInImageProps {
     alt?: string;
     /** The source URL for the image. Uses the app logo by default. */
     src?: string;
+    /** The active auth method. On the verification step, its method icon is shown. */
+    authMethod?: AuthMethod;
+    /** The current step. On `"verification"`, a method icon is shown instead of the app logo. */
+    step?: SignInState["step"];
 }
 /**
- * A logo or success icon for the SignIn component.
+ * The image shown at the top of the SignIn component: the app logo on the credentials step, and a
+ * method-specific icon on the verification step (when `authMethod`/`step` are provided).
  *
  * @param {SignInImageProps} props - The props for the component.
  * @param {string} [props.className] - The class name to apply to the component.
  * @param {string} [props.alt] - The alt text for the image.
  * @param {string} [props.src] - The source URL for the image. Uses the app logo by default.
- * @returns {JSX.Element} The rendered component.
+ * @param {AuthMethod} [props.authMethod] - The active auth method (drives the verification icon).
+ * @param {SignInState["step"]} [props.step] - The current step.
+ * @returns {JSX.Element | null} The rendered component.
  *
  * @group Components
  *
@@ -41,4 +50,4 @@ export interface SignInImageProps {
  * }
  * ```
  */
-export declare const SignInImage: ({ className, alt, src }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SignInImage: ({ className, alt, src, authMethod: authMethodFromProps, step: stepFromProps, }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInImage.js

@@ -1,20 +1,43 @@
-import { jsx as i } from "react/jsx-runtime";
-import { u as a } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import '../../assets/SignInImage.css';const e = "SignInImage-module__logo___rlzt-", m = {
-  logo: e
-}, p = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: s, src: g }) => {
-  const o = a(), n = o.appLogoUrl && p(o.appLogoUrl) ? o.appLogoUrl : void 0, l = g && p(g) ? g : n, r = s || o.appName || "";
-  return l ? /* @__PURE__ */ i(
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { u as h } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { Badge as I } from "../ui/Badge/index.js";
+import { IconEnvelope as _ } from "../../icons/IconEnvelope.js";
+import { IconPhone as v } from "../../icons/IconPhone.js";
+import "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
+import "./SignInAuthMethodButtons.js";
+import "../ui/Button/index.js";
+import "../../theme/theme.js";
+import { useSignInContext as b } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import '../../assets/SignInImage.css';const S = "SignInImage-module__logo___rlzt-", U = "SignInImage-module__badge___PjB19", a = {
+  logo: S,
+  badge: U
+}, L = {
+  email: /* @__PURE__ */ n(_, {}),
+  sms: /* @__PURE__ */ n(v, {})
+}, m = (o) => /^https?:\/\//.test(o), E = ({
+  className: o = "",
+  alt: g,
+  src: i,
+  authMethod: c,
+  step: l
+}) => {
+  const t = h(), { state: e } = b(), d = l || e.step, r = c || e.authMethod, s = r ? L[r] : void 0;
+  if (d === "verification" && s)
+    return /* @__PURE__ */ n(I, { className: `${a.badge} ${o}`, variant: "secondary", children: s });
+  const f = t.appLogoUrl && m(t.appLogoUrl) ? t.appLogoUrl : void 0, p = i && m(i) ? i : f, u = g || t.appName || "";
+  return p ? /* @__PURE__ */ n(
     "img",
     {
-      src: l,
-      alt: r || "",
-      className: `${m.logo} ${t}`,
-      width: 64,
-      height: 64
+      src: p,
+      alt: u || "",
+      className: `${a.logo} ${o}`,
+      width: 48,
+      height: 48
     }
   ) : null;
 };
 export {
-  f as SignInImage
+  E as SignInImage
 };

package/dist/components/SignIn/SignInProvider.js

@@ -1,6 +1,6 @@
 import { jsx as h } from "react/jsx-runtime";
-import { createContext as m, useContext as l, useMemo as i } from "react";
-import { u as f } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { createContext as l, useContext as m, useMemo as i } from "react";
+import { u as f } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import "@coinbase/cdp-hooks";
 import { useSignInReducer as p } from "./useSignInReducer.js";
 const a = {
@@ -14,13 +14,14 @@ const a = {
   isSuccess: !1,
   otp: "",
   phoneNumber: "",
+  status: "idle",
   step: "credentials"
-}, u = m({
+}, u = l({
   state: a,
   dispatch: () => {
   }
 }), M = () => {
-  const t = l(u);
+  const t = m(u);
   if (!t)
     throw new Error("useSignInContext must be used within a SignInProvider");
   return t;

package/dist/components/SignIn/SignInTitle.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
-import { a as c } from "../../chunks/index.IrJ_irKX.js";
+import { a as c } from "../../chunks/index.Du1vsLh6.js";
 import { useSignInContext as d } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import '../../assets/SignInTitle.css';const l = "SignInTitle-module__heading___QJ071", g = {
   heading: l
 }, S = ({

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

@@ -1,8 +1,4 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
-/**
- * The step of the email OTP flow.
- */
-export type Step = "email" | "otp";
 /**
  * A component that renders the sign in with email flow.
  *

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

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

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

@@ -1,7 +1,7 @@
 import { jsxs as h, Fragment as a, jsx as e } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import { useRef as A, useCallback as S, useEffect as v } from "react";
-import { u as m } from "../../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { u as m } from "../../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { useSignInWithOAuth as O } from "../hooks/useSignInWithOAuth.js";
 import { Button as W } from "../../ui/Button/index.js";
 import { ServerError as I } from "../../ui/ServerError/index.js";

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

@@ -0,0 +1,27 @@
+import { SignInFlowConfig, SignInFlowProps } from '../types';
+/**
+ * A generic flow component for SIWE sign-in (e.g. "Sign in with Base"). It renders the entry button
+ * when idle and the shared {@link SiweStatusView} once the flow starts, fading between the two via
+ * its own per-flow transition (the same pattern email/SMS use for their step slide, but a fade).
+ *
+ * @param {SignInFlowProps} props - The props for the sign in with SIWE flow.
+ * @param {SignInFlowProps["autoFocus"]} [props.autoFocus] - Whether to auto focus on transition.
+ * @param {SignInFlowProps["children"]} [props.children] - A function to render the children.
+ * @param {SignInFlowProps["onSuccess"]} [props.onSuccess] - The callback to call on success.
+ * @param {SignInFlowProps["step"]} props.step - The step to render the flow for.
+ * @returns {JSX.Element} The SignInWithSiwe component.
+ */
+export declare const SignInWithSiwe: ({ step: stepFromProps, autoFocus, children, onSuccess, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A component that renders the title for the sign in with SIWE flow.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export declare const SignInWithSiweTitle: () => string;
+/**
+ * A component that renders the description for the sign in with SIWE flow.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export declare const SignInWithSiweDescription: () => string;
+export declare const config: SignInFlowConfig;

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

@@ -0,0 +1,63 @@
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { useRef as p, useCallback as I } from "react";
+import { SiweStatusView as M } from "../../SiweStatusView/index.js";
+import { Button as x } from "../../ui/Button/index.js";
+import { SwitchFadeTransition as C } from "../../ui/SwitchFadeTransition/index.js";
+import { getMessageFromUnknownError as F } from "../../../utils/getMessageFromUnknownError.js";
+import "@coinbase/cdp-hooks";
+import "libphonenumber-js";
+import { useFlowTransition as T } from "../hooks/useFlowTransition.js";
+import { useStartSiwe as W } from "../hooks/useStartSiwe.js";
+import { useSignInContext as f } from "../SignInProvider.js";
+import { STEPS as k } from "../types.js";
+import { toSiweProvider as S } from "../../SiweStatusView/toSiweProvider.js";
+import { siweConnectors as h } from "../../SiweStatusView/connectors/siweConnectors.js";
+const E = ({
+  step: r,
+  autoFocus: o,
+  children: s,
+  onSuccess: a
+}) => {
+  const { state: t } = f(), i = p(S(t.authMethod)).current, m = W(i ?? "base"), c = I(() => m(a), [m, a]), u = r || t.step, d = t.authMethod === `siwe:${i}`, w = p(u).current, { transitionRef: g } = T(u, d);
+  return i ? /* @__PURE__ */ n(
+    C,
+    {
+      autoFocus: o,
+      animateHeight: !1,
+      timeout: 250,
+      items: k,
+      initialItem: w,
+      initialEntered: !0,
+      transitionRef: g,
+      children: ({ itemKey: l, ...b }) => {
+        let e;
+        return l === "credentials" ? e = /* @__PURE__ */ v(x, { fullWidth: !0, type: "button", onClick: c, children: [
+          "Sign in with ",
+          h[i].label
+        ] }) : e = /* @__PURE__ */ n(
+          M,
+          {
+            provider: i,
+            status: t.status,
+            onRetry: c,
+            errorMessage: t.error ? F(t.error) : void 0,
+            animateHeight: !1
+          }
+        ), /* @__PURE__ */ n("div", { ...b, children: s ? s({ step: l, Form: e }) : e });
+      }
+    }
+  ) : null;
+}, R = () => "Sign in", j = () => {
+  const { state: r } = f(), o = S(r.authMethod) ?? "base";
+  return `Sign in with your ${h[o].label} account.`;
+}, N = {
+  description: j,
+  forms: E,
+  title: R
+};
+export {
+  E as SignInWithSiwe,
+  j as SignInWithSiweDescription,
+  R as SignInWithSiweTitle,
+  N as config
+};

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

@@ -1,9 +1,4 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
-declare const STEPS: readonly ["phoneNumber", "otp"];
-/**
- * The step of the phone number OTP flow.
- */
-export type Step = (typeof STEPS)[number];
 /**
  * A component that renders the sign in with email flow.
  *
@@ -31,4 +26,3 @@ export declare const SignInWithSmsTitle: ({ step }: SignInTitleAndDescriptionPro
  */
 export declare const SignInWithSmsDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;
-export {};