@coinbase/cdp-react 0.0.18 → 0.0.20

package/dist/components/SignIn/SignInForm.js

@@ -1,202 +1,37 @@
-import { jsxs as i, jsx as o, Fragment as A } from "react/jsx-runtime";
-import { useSignInWithEmail as U, useVerifyEmailOTP as V } from "@coinbase/cdp-hooks";
-import { Form as P, FormSubmit as R } from "@radix-ui/react-form";
-import { useState as v, useEffect as y, useRef as B } from "react";
-import { Button as C } from "../Button/index.js";
-import { useAppConfig as k } from "../CDPReactProvider/index.js";
-import { Field as x } from "../Field/index.js";
-import { OTP as q } from "../OTP/index.js";
-import { ServerError as O } from "../ServerError/index.js";
-import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as W } from "../../icons/IconLock.js";
-import { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as Q } from "../../utils/isEmailInvalid.js";
-import { useSignInContext as E } from "./SignInProvider.js";
-import { withValidityState as Z } from "../Input/index.js";
-import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
-import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V", G = "SignInForm-module__footer___6Lo9w", H = "SignInForm-module__hr___fOcy4", X = "SignInForm-module__icon___qkJnq", n = {
-  "form-wrapper": "SignInForm-module__form-wrapper___SlQkZ",
-  form: J,
-  "form-footer": "SignInForm-module__form-footer___PqM2J",
-  "server-state-wrapper": "SignInForm-module__server-state-wrapper___QVsXy",
-  "loading-spinner": "SignInForm-module__loading-spinner___W6gZo",
-  "server-error": "SignInForm-module__server-error___dD9VE",
-  "resend-wrapper": "SignInForm-module__resend-wrapper___ODSQA",
-  "reset-timer": "SignInForm-module__reset-timer___Ms2YZ",
-  footer: G,
-  "coinbase-icon": "SignInForm-module__coinbase-icon___vGv7u",
-  hr: H,
-  icon: X
-}, Y = ({ submit: _ }) => {
-  const { state: s, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), u = (p) => (p.preventDefault(), _(s.email));
-  return /* @__PURE__ */ i(
-    P,
-    {
-      className: n.form,
-      onClearServerErrors: e,
-      onSubmit: u,
-      children: [
-        /* @__PURE__ */ o(
-          x,
-          {
-            label: "Email address",
-            name: "email",
-            validators: [
-              ["valueMissing", "Email is required"],
-              ["typeMismatch", "Use a valid email address"],
-              [Q, "Use a valid email address"]
-            ],
-            children: Z({
-              autoComplete: "email",
-              type: "email",
-              placeholder: "name@example.com",
-              required: !0,
-              value: s.email,
-              onChange: (p) => {
-                d({ type: "SET_EMAIL", payload: { email: p.target.value } });
-              }
-            })
-          }
-        ),
-        s.error && /* @__PURE__ */ o(O, { error: s.error, className: n["server-error"] }),
-        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(C, { type: "submit", isPending: s.isPending, children: "Continue with email" }) })
-      ]
-    }
-  );
-}, z = ({
-  reset: _,
-  resetCountdown: s,
-  submit: d
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as s, useLayoutEffect as g } from "react";
+import { useAppConfig as M } from "../CDPReactProvider/index.js";
+import { SwitchFadeTransition as w } from "../ui/SwitchFadeTransition/index.js";
+import { a as _ } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as F } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import '../../assets/SignInForm.css';const I = {
+  "auth-method-wrapper": "SignInForm-module__auth-method-wrapper___uIOAB"
+}, T = ({
+  onSuccess: a,
+  step: u,
+  children: h,
+  ...m
 }) => {
-  const { state: e, dispatch: u } = E(), p = () => u({ type: "CLEAR_ERROR" }), l = B([]), f = (c) => (c.preventDefault(), d(e.otp)), h = () => {
-    _(), l.current[0]?.focus();
-  };
-  return y(() => {
-    e.step === "otp" && l.current[0]?.focus();
-  }, [e.step]), /* @__PURE__ */ i(
-    P,
+  const { state: t } = F(), { authMethods: p } = M(), c = u || t.step, o = s(t.authMethod), r = s(null);
+  return g(() => {
+    o.current !== t.authMethod && (r.current?.transition.toggle(t.authMethod), o.current = t.authMethod);
+  }, [t.authMethod]), /* @__PURE__ */ e(
+    w,
     {
-      className: `${n.form}`,
-      onClearServerErrors: p,
-      onSubmit: f,
-      children: [
-        /* @__PURE__ */ o(
-          q,
-          {
-            ref: l,
-            name: "otp",
-            "aria-label": "Six-digit Verification Code",
-            passwordLength: 6,
-            value: e.otp,
-            onChange: (c) => c.preventDefault(),
-            onValueChange: (c) => {
-              u({ type: "SET_OTP", payload: { otp: c } });
-            },
-            autoSubmit: !0
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: n["form-footer"], children: [
-          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ i("div", { className: n["server-state-wrapper"], children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ o($, { className: n["loading-spinner"] }),
-            e.error && /* @__PURE__ */ o(O, { error: e.error, className: n["server-error"] })
-          ] }),
-          /* @__PURE__ */ i("div", { className: n["resend-wrapper"], children: [
-            e.canResetOTP && /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
-              C,
-              {
-                type: "button",
-                onClick: h,
-                isPending: e.isPending,
-                variant: "linkPrimary",
-                children: "Resend code"
-              }
-            ) }),
-            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ i("p", { children: [
-              "Resend code in ",
-              /* @__PURE__ */ i("span", { "aria-hidden": "true", children: [
-                s,
-                "s"
-              ] }),
-              /* @__PURE__ */ i(j, { children: [
-                s,
-                " ",
-                s === 1 ? "second" : "seconds"
-              ] })
-            ] }) })
-          ] })
-        ] })
-      ]
-    }
-  );
-}, he = ({
-  as: _ = "div",
-  className: s = "",
-  onSuccess: d,
-  ...e
-}) => {
-  const l = "An error occurred while signing in. Please try again.", [f, h] = v(0), [c, S] = v(!1), { signInWithEmail: w } = U(), { verifyEmailOTP: b } = V(), { state: a, dispatch: m } = E(), { showCoinbaseFooter: F } = k(), L = (t) => {
-    h(t), S(!0);
-  };
-  y(() => {
-    if (!c)
-      return;
-    const t = setInterval(() => {
-      h((r) => r > 1 ? r - 1 : (S(!1), 0));
-    }, 1e3);
-    return () => clearInterval(t);
-  }, [c]), y(() => {
-    f === 0 && a.step === "otp" && !a.canResetOTP && m({ type: "ALLOW_RESET_OTP" });
-  }, [f, a.step, a.canResetOTP, m]);
-  const I = async (t) => {
-    if (!a.isPending) {
-      m({ type: "SUBMIT_EMAIL", payload: { email: t } });
-      try {
-        const { flowId: r } = await w({
-          email: t
-        });
-        m({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), L(60);
-      } catch (r) {
-        const g = T(r) ? r : r instanceof Error && r.message || l;
-        m({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: g } }), console.error(r);
+      animateHeight: !0,
+      timeout: 250,
+      items: p || ["email"],
+      initialEntered: !0,
+      transitionRef: r,
+      ...m,
+      children: ({ itemKey: n, ...d }) => {
+        const f = _[n].forms;
+        return /* @__PURE__ */ e("div", { ...d, className: I["auth-method-wrapper"], children: /* @__PURE__ */ e(f, { step: c, onSuccess: a, children: ({ step: l, Form: i }) => h?.({ step: l, authMethod: n, Form: i }) || i }) });
       }
     }
-  }, M = async (t) => {
-    if (!a.isPending) {
-      if (t.length !== 6) {
-        m({ type: "SET_OTP", payload: { otp: t } });
-        return;
-      }
-      m({ type: "SUBMIT_OTP", payload: { otp: t } });
-      try {
-        await b({
-          flowId: a.flowId,
-          otp: t
-        }), m({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: t } }), d?.();
-      } catch (r) {
-        const g = T(r) ? r : r instanceof Error && r.message || l;
-        m({ type: "SUBMIT_OTP_FAILURE", payload: { error: g } }), console.error(r);
-      }
-    }
-  }, N = () => {
-    m({ type: "RESET_OTP" }), S(!1), I(a.email);
-  };
-  return /* @__PURE__ */ i(_, { className: `${n["form-wrapper"]} ${s}`, ...e, children: [
-    a.step === "email" && /* @__PURE__ */ o(Y, { submit: I }),
-    a.step === "otp" && /* @__PURE__ */ o(z, { submit: M, reset: N, resetCountdown: f }),
-    F && /* @__PURE__ */ i(A, { children: [
-      /* @__PURE__ */ o("hr", { className: n.hr }),
-      /* @__PURE__ */ i("div", { className: n.footer, children: [
-        /* @__PURE__ */ o(W, { className: n.icon }),
-        /* @__PURE__ */ i("p", { children: [
-          "Secured by",
-          " ",
-          /* @__PURE__ */ o(D, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
-        ] })
-      ] })
-    ] })
-  ] });
+  );
 };
 export {
-  he as SignInForm
+  T as SignInForm
 };

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

@@ -1,6 +1,6 @@
-export type SignInImageProps = {
+export interface SignInImageProps {
     className?: string;
     alt?: string;
     src?: string;
-};
+}
 export declare const SignInImage: ({ className, alt, src }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInImage.js

@@ -1,23 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useAppConfig as p } from "../CDPReactProvider/index.js";
-import { IconCheckCircle as a } from "../../icons/IconCheckCircle.js";
-import { useSignInContext as _ } from "./SignInProvider.js";
-import '../../assets/SignInImage.css';const f = "SignInImage-module__logo___rlzt-", i = {
-  logo: f,
-  "success-icon": "SignInImage-module__success-icon___avUF9"
-}, l = (o) => /^https?:\/\//.test(o), S = ({ className: o = "", alt: r, src: t }) => {
-  const { state: g } = _(), { step: n } = g, s = p(), m = s.logoUrl && l(s.logoUrl) ? s.logoUrl : void 0, c = t && l(t) ? t : m, u = r || s.name;
-  return n !== "success" && c ? /* @__PURE__ */ e(
+import { useAppConfig as m } from "../CDPReactProvider/index.js";
+import '../../assets/SignInImage.css';const p = "SignInImage-module__logo___rlzt-", c = {
+  logo: p
+}, n = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: s, src: l }) => {
+  const o = m(), r = o.logoUrl && n(o.logoUrl) ? o.logoUrl : void 0, g = l && n(l) ? l : r, i = s || o.name;
+  return g ? /* @__PURE__ */ e(
     "img",
     {
-      src: c,
-      alt: u || "",
-      className: `${i.logo} ${o}`,
+      src: g,
+      alt: i || "",
+      className: `${c.logo} ${t}`,
       width: 64,
       height: 64
     }
-  ) : n === "success" ? /* @__PURE__ */ e(a, { className: `${i["success-icon"]} ${o}` }) : null;
+  ) : null;
 };
 export {
-  S as SignInImage
+  f as SignInImage
 };

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

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode } from 'react';
-import { SignInAction, SignInState } from './useSignInReducer';
+import { SignInAction, SignInState } from './types';
 export declare const SignInContext: import('react').Context<{
     state: SignInState;
     dispatch: Dispatch<SignInAction>;

package/dist/components/SignIn/SignInProvider.js

@@ -1,29 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, useContext as c, useMemo as u } from "react";
-import { useSignInReducer as d } from "./useSignInReducer.js";
-const o = {
+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 "@coinbase/cdp-hooks";
+import { useSignInReducer as p } from "./useSignInReducer.js";
+const n = {
+  authMethod: "email",
+  canResetOTP: !1,
   email: "",
   error: null,
   flowId: "",
-  canResetOTP: !1,
   isPending: !1,
+  isSuccess: !1,
   otp: "",
-  step: "email"
-}, r = a({
-  state: o,
+  phoneNumber: "",
+  step: "credentials"
+}, s = u({
+  state: n,
   dispatch: () => {
   }
-}), p = () => {
-  const t = c(r);
+}), S = () => {
+  const t = c(s);
   if (!t)
     throw new Error("useSignInContext must be used within a SignInProvider");
   return t;
-}, x = ({ children: t }) => {
-  const [e, n] = d(o), s = u(() => ({ state: e, dispatch: n }), [e, n]);
-  return /* @__PURE__ */ i(r.Provider, { value: s, children: 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 });
 };
 export {
-  r as SignInContext,
-  x as SignInProvider,
-  p as useSignInContext
+  s as SignInContext,
+  I as SignInProvider,
+  S as useSignInContext
 };

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

@@ -1,5 +1,6 @@
 import { ElementType, HTMLAttributes } from 'react';
-export type SignInTitleProps = {
+import { SignInTitleAndDescriptionProps } from './types';
+export interface SignInTitleProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
-} & HTMLAttributes<HTMLElement>;
-export declare const SignInTitle: ({ as: Component, children, className, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const SignInTitle: ({ as: Component, children, className, authMethod: authMethodFromProps, step: stepFromProps, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInTitle.js

@@ -1,17 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as c } from "react";
-import { useSignInContext as a } from "./SignInProvider.js";
-import '../../assets/SignInTitle.css';const u = "SignInTitle-module__heading___QJ071", m = {
-  heading: u
-}, p = ({
-  as: t = "h2",
-  children: n,
-  className: s = "",
-  ...i
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { a as c } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as d } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import "../CDPReactProvider/index.js";
+import '../../assets/SignInTitle.css';const l = "SignInTitle-module__heading___QJ071", g = {
+  heading: l
+}, S = ({
+  as: s = "h2",
+  children: t,
+  className: i = "",
+  authMethod: a,
+  step: h,
+  ...m
 }) => {
-  const { state: e } = a(), o = c(() => e.step === "success" ? "Success" : e.step === "otp" ? "Enter verification code" : "Sign in", [e.step]);
-  return /* @__PURE__ */ r(t, { className: `${m.heading} ${s}`, ...i, children: n || o });
+  const { state: o } = d(), r = h || o.step, e = a || o.authMethod, p = c[e].title;
+  return /* @__PURE__ */ n(s, { className: `${g.heading} ${i}`, ...m, children: t || /* @__PURE__ */ n(p, { step: r, authMethod: e }) });
 };
 export {
-  p as SignInTitle
+  S as SignInTitle
 };

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

@@ -0,0 +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 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

@@ -0,0 +1,88 @@
+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 { 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({
+    passwordLength: h,
+    submit: (t) => P({ flowId: e.flowId, otp: t })
+  }), 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 });
+  };
+  return D(() => {
+    d.current !== i && (l.current?.transition.toggle(i), d.current = i);
+  }, [i]), /* @__PURE__ */ o(
+    H,
+    {
+      autoFocus: !0,
+      animateHeight: !1,
+      items: q,
+      initialEntered: !0,
+      direction: i === "otp" ? "left" : "right",
+      transitionRef: l,
+      children: ({ itemKey: t, ...C }) => {
+        let r = null;
+        return t === "email" && (r = /* @__PURE__ */ o(
+          j,
+          {
+            email: e.email,
+            error: i === "email" && e.error || "",
+            isPending: e.isPending,
+            onEmailChange: T,
+            onSubmit: w
+          }
+        )), t === "otp" && (r = /* @__PURE__ */ o(
+          L,
+          {
+            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
+          }
+        )), /* @__PURE__ */ o("div", { ...C, children: c ? c({ step: u, Form: r }) : r });
+      }
+    }
+  );
+}, A = ({ step: n }) => /* @__PURE__ */ m(a, { children: [
+  n === "credentials" && "Sign in",
+  n === "verification" && "Enter verification code"
+] }), B = ({ step: n }) => {
+  const { state: s } = 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 })
+    ] })
+  ] });
+}, ee = {
+  description: B,
+  forms: z,
+  title: A
+};
+export {
+  z as SignInWithEmail,
+  B as SignInWithEmailDescription,
+  A as SignInWithEmailTitle,
+  ee as config
+};

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

@@ -0,0 +1,8 @@
+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 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;
+export {};