@coinbase/cdp-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,13 @@
+import { APIError } from '@coinbase/cdp-hooks';
+export declare const useEmailForm: ({ submit, }: {
+    submit: (email: string) => Promise<{
+        flowId: string;
+    }>;
+}) => {
+    setEmail: (email: string) => void;
+    submitEmail: ({ email, onSuccess, onError, }: {
+        email: string;
+        onSuccess?: () => void;
+        onError?: (error: string | APIError) => void;
+    }) => Promise<void>;
+};

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

@@ -0,0 +1,42 @@
+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";
+const f = ({
+  submit: t
+}) => {
+  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 } });
+    },
+    [o]
+  ), i = p(
+    async ({
+      email: e,
+      onSuccess: l,
+      onError: E
+    }) => {
+      if (!n.isPending) {
+        o({ type: "SUBMIT_EMAIL", payload: { email: e } });
+        try {
+          const { flowId: r } = await t(e);
+          o({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), l?.();
+        } catch (r) {
+          const c = y(r) ? r : r instanceof Error && r.message || a;
+          o({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: c } }), console.error(r), E?.(c);
+        }
+      }
+    },
+    [o, n.isPending, t]
+  );
+  return m(
+    () => ({
+      setEmail: s,
+      submitEmail: i
+    }),
+    [s, i]
+  );
+};
+export {
+  f as useEmailForm
+};

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

@@ -0,0 +1,16 @@
+import { APIError } from '@coinbase/cdp-hooks';
+export declare const useOTPForm: <T>({ passwordLength, submit, }: {
+    passwordLength: number;
+    submit: (otp: string) => Promise<T>;
+}) => {
+    resendCountdown: number | null;
+    resetOTP: () => void;
+    resetResendTimer: () => void;
+    setOTP: (otp: string) => void;
+    startResendTimer: (durationSeconds: number) => void;
+    submitOtp: ({ otp, onSuccess, onError, }: {
+        otp: string;
+        onSuccess?: () => void;
+        onError?: (error: string | APIError) => void;
+    }) => Promise<void>;
+};

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

@@ -0,0 +1,59 @@
+import "@coinbase/cdp-hooks";
+import { useCallback as i, useEffect as l, useMemo as u } 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,
+  submit: T
+}) => {
+  const { state: n, 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 } });
+    },
+    [e]
+  ), y = i(
+    async ({
+      otp: t,
+      onSuccess: d,
+      onError: f
+    }) => {
+      if (!n.isPending) {
+        if (t.length !== a) {
+          e({ type: "SET_OTP", payload: { otp: t } });
+          return;
+        }
+        e({ type: "SUBMIT_OTP", payload: { otp: t } });
+        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);
+        }
+      }
+    },
+    [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(
+    () => ({
+      resendCountdown: o,
+      resetOTP: P,
+      resetResendTimer: r,
+      setOTP: m,
+      startResendTimer: c,
+      submitOtp: y
+    }),
+    [o, P, r, m, c, y]
+  );
+};
+export {
+  A as useOTPForm
+};

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

@@ -0,0 +1,13 @@
+import { APIError } from '@coinbase/cdp-hooks';
+export declare const usePhoneNumberForm: ({ submit, }: {
+    submit: (phoneNumber: string) => Promise<{
+        flowId: string;
+    }>;
+}) => {
+    setPhoneNumber: (phoneNumber: string) => void;
+    submitPhoneNumber: ({ phoneNumber, onSuccess, onError, }: {
+        phoneNumber: string;
+        onSuccess?: () => void;
+        onError?: (error: string | APIError) => void;
+    }) => Promise<void>;
+};

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

@@ -0,0 +1,42 @@
+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 = ({
+  submit: t
+}) => {
+  const { state: n, dispatch: o } = d(), s = "An error occurred while signing in. Please try again.", a = p(
+    (e) => {
+      o({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: e } });
+    },
+    [o]
+  ), i = p(
+    async ({
+      phoneNumber: e,
+      onSuccess: E,
+      onError: m
+    }) => {
+      if (!n.isPending) {
+        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;
+          o({ type: "SUBMIT_PHONE_NUMBER_FAILURE", payload: { error: c } }), console.error(r), m?.(c);
+        }
+      }
+    },
+    [o, n.isPending, t]
+  );
+  return l(
+    () => ({
+      setPhoneNumber: a,
+      submitPhoneNumber: i
+    }),
+    [a, i]
+  );
+};
+export {
+  U as usePhoneNumberForm
+};

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

@@ -1,14 +1,17 @@
 import { ReactNode } from 'react';
+import { SignInAuthMethodButtons, SignInAuthMethodButtonsProps } from './SignInAuthMethodButtons';
+import { SignInBackButton, SignInBackButtonProps } from './SignInBackButton';
 import { SignInDescription, SignInDescriptionProps } from './SignInDescription';
+import { SignInFooter } from './SignInFooter';
 import { SignInForm, SignInFormProps } from './SignInForm';
 import { SignInImage, SignInImageProps } from './SignInImage';
 import { useSignInContext } from './SignInProvider';
 import { SignInTitle, SignInTitleProps } from './SignInTitle';
-import { SignInState } from './useSignInReducer';
+import { SignInState, SignInAction } from './types';
 export interface SignInProps {
     children?: ReactNode | ((state: SignInState) => ReactNode);
     className?: string;
     onSuccess?: () => void;
 }
 export declare const SignIn: (props: SignInProps) => import("react/jsx-runtime").JSX.Element;
-export { SignInDescription, SignInForm, SignInImage, SignInTitle, useSignInContext, type SignInDescriptionProps, type SignInFormProps, type SignInImageProps, type SignInTitleProps, };
+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, };

package/dist/components/SignIn/index.js

@@ -1,30 +1,48 @@
-import { jsx as n, jsxs as r, Fragment as s } from "react/jsx-runtime";
+import { jsx as n, jsxs as t, Fragment as s } from "react/jsx-runtime";
 import "react";
-import { SignInDescription as g } from "./SignInDescription.js";
-import { SignInForm as p } from "./SignInForm.js";
-import { SignInImage as c } from "./SignInImage.js";
-import { SignInProvider as I, useSignInContext as S } from "./SignInProvider.js";
-import { SignInTitle as f } from "./SignInTitle.js";
+import { useAppConfig as l } from "../CDPReactProvider/index.js";
+import { SignInAuthMethodButtons as d } from "./SignInAuthMethodButtons.js";
+import { SignInBackButton as f } from "./SignInBackButton.js";
+import { SignInDescription as u } from "./SignInDescription.js";
+import { SignInFooter as I } from "./SignInFooter.js";
+import { SignInForm as S } from "./SignInForm.js";
+import { SignInImage as b } from "./SignInImage.js";
+import { SignInProvider as k, useSignInContext as w } from "./SignInProvider.js";
+import { SignInTitle as h } from "./SignInTitle.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignIn.css';const a = {
-  "sign-in": "SignIn-module__sign-in___cYpee"
-}, l = ({ className: i = "", children: t, onSuccess: e }) => {
-  const { state: m } = S(), o = typeof t == "function" ? t(m) : t;
-  return /* @__PURE__ */ r("div", { className: `${a["sign-in"]} ${i}`, children: [
-    o,
-    !o && /* @__PURE__ */ r(s, { children: [
-      /* @__PURE__ */ n(c, {}),
-      /* @__PURE__ */ n(f, {}),
-      /* @__PURE__ */ n(g, {}),
-      /* @__PURE__ */ n(p, { onSuccess: e })
+import '../../assets/SignIn.css';const v = "SignIn-module__footer___3Gkbc", o = {
+  "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: v
+}, F = ({ className: r = "", children: i, onSuccess: p }) => {
+  const { state: a } = w(), { showCoinbaseFooter: _ } = l(), c = typeof i == "function" ? i(a) : i;
+  return /* @__PURE__ */ t("div", { className: `${o["sign-in"]} ${r}`, children: [
+    c,
+    !c && /* @__PURE__ */ t(s, { children: [
+      /* @__PURE__ */ n("div", { className: o["back-button-wrapper"], children: /* @__PURE__ */ n(f, { className: o["back-button"] }) }),
+      /* @__PURE__ */ n(b, {}),
+      /* @__PURE__ */ n(S, { onSuccess: p, children: ({ authMethod: e, step: m, Form: g }) => /* @__PURE__ */ t(s, { children: [
+        /* @__PURE__ */ t("div", { className: o["title-desc-wrapper"], children: [
+          /* @__PURE__ */ n(h, { step: m, authMethod: e }),
+          /* @__PURE__ */ n(u, { step: m, authMethod: e })
+        ] }),
+        g,
+        m === "credentials" && /* @__PURE__ */ n(d, { activeMethod: e })
+      ] }) }),
+      _ && /* @__PURE__ */ n(I, { className: o.footer })
     ] })
   ] });
-}, F = (i) => /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(l, { ...i }) });
+}, Q = (r) => /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(F, { ...r }) });
 export {
-  F as SignIn,
-  g as SignInDescription,
-  p as SignInForm,
-  c as SignInImage,
-  f as SignInTitle,
-  S as useSignInContext
+  Q as SignIn,
+  d as SignInAuthMethodButtons,
+  f as SignInBackButton,
+  u as SignInDescription,
+  I as SignInFooter,
+  S as SignInForm,
+  b as SignInImage,
+  h as SignInTitle,
+  w as useSignInContext
 };

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

@@ -0,0 +1,106 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FC, ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider';
+export interface SignInTitleAndDescriptionProps {
+    authMethod?: AuthMethod;
+    step?: SignInState["step"];
+}
+export interface SignInState {
+    authMethod: AuthMethod;
+    canResetOTP: boolean;
+    email: string;
+    error: string | APIError | null;
+    flowId: string;
+    isPending: boolean;
+    isSuccess: boolean;
+    otp: string;
+    phoneNumber: string;
+    step: "credentials" | "verification";
+}
+export type SignInAction = {
+    type: "SET_AUTH_METHOD";
+    payload: {
+        authMethod: AuthMethod;
+    };
+} | {
+    type: "SET_EMAIL";
+    payload: {
+        email: string;
+    };
+} | {
+    type: "SUBMIT_EMAIL";
+    payload: {
+        email: string;
+    };
+} | {
+    type: "SUBMIT_EMAIL_SUCCESS";
+    payload: {
+        flowId: string;
+    };
+} | {
+    type: "SUBMIT_EMAIL_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "SET_PHONE_NUMBER";
+    payload: {
+        phoneNumber: string;
+    };
+} | {
+    type: "SUBMIT_PHONE_NUMBER";
+    payload: {
+        phoneNumber: string;
+    };
+} | {
+    type: "SUBMIT_PHONE_NUMBER_SUCCESS";
+    payload: {
+        flowId: string;
+    };
+} | {
+    type: "SUBMIT_PHONE_NUMBER_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "SET_OTP";
+    payload: {
+        otp: string;
+    };
+} | {
+    type: "SUBMIT_OTP";
+    payload: {
+        otp: string;
+    };
+} | {
+    type: "SUBMIT_OTP_SUCCESS";
+    payload: {
+        otp: string;
+    };
+} | {
+    type: "SUBMIT_OTP_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "ALLOW_RESET_OTP";
+} | {
+    type: "RESET_OTP";
+} | {
+    type: "CLEAR_ERROR";
+} | {
+    type: "RESET_STATE";
+};
+export interface SignInFlowProps {
+    step: SignInState["step"];
+    onSuccess?: () => void;
+    children?: (props: {
+        step: SignInState["step"];
+        Form: ReactNode;
+    }) => ReactNode;
+}
+export interface SignInFlowConfig {
+    forms: FC<SignInFlowProps>;
+    description: FC<SignInTitleAndDescriptionProps>;
+    title: FC<SignInTitleAndDescriptionProps>;
+}

package/dist/components/SignIn/types.js

@@ -0,0 +1,3 @@
+import "@coinbase/cdp-hooks";
+import "react";
+import "../CDPReactProvider/index.js";

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

@@ -1,58 +1,2 @@
-import { APIError } from '@coinbase/cdp-hooks';
-export interface SignInState {
-    canResetOTP: boolean;
-    email: string;
-    error: string | APIError | null;
-    flowId: string;
-    isPending: boolean;
-    otp: string;
-    step: "email" | "otp" | "success";
-}
-export type SignInAction = {
-    type: "SET_EMAIL";
-    payload: {
-        email: string;
-    };
-} | {
-    type: "SUBMIT_EMAIL";
-    payload: {
-        email: string;
-    };
-} | {
-    type: "SUBMIT_EMAIL_SUCCESS";
-    payload: {
-        flowId: string;
-    };
-} | {
-    type: "SUBMIT_EMAIL_FAILURE";
-    payload: {
-        error: string | APIError;
-    };
-} | {
-    type: "SET_OTP";
-    payload: {
-        otp: string;
-    };
-} | {
-    type: "SUBMIT_OTP";
-    payload: {
-        otp: string;
-    };
-} | {
-    type: "SUBMIT_OTP_SUCCESS";
-    payload: {
-        otp: string;
-    };
-} | {
-    type: "SUBMIT_OTP_FAILURE";
-    payload: {
-        error: string | APIError;
-    };
-} | {
-    type: "ALLOW_RESET_OTP";
-} | {
-    type: "RESET_OTP";
-} | {
-    type: "CLEAR_ERROR";
-};
+import { SignInAction, SignInState } from './types';
 export declare const useSignInReducer: (initialState: SignInState) => [SignInState, import('react').ActionDispatch<[action: SignInAction]>];

package/dist/components/SignIn/useSignInReducer.js

@@ -1,50 +1,92 @@
-import "@coinbase/cdp-hooks";
 import { useReducer as n } from "react";
-function l(r, e) {
-  switch (e.type) {
+import "@coinbase/cdp-hooks";
+import "../CDPReactProvider/index.js";
+function l(e, r) {
+  switch (r.type) {
+    case "SET_AUTH_METHOD":
+      return {
+        ...e,
+        authMethod: r.payload.authMethod,
+        step: "credentials",
+        email: "",
+        phoneNumber: "",
+        error: null
+      };
     case "SET_EMAIL":
-      return { ...r, email: e.payload.email, error: null };
+      return { ...e, email: r.payload.email, phoneNumber: "", error: null };
     case "SUBMIT_EMAIL":
-      return { ...r, isPending: !0, email: e.payload.email, error: null };
+      return {
+        ...e,
+        isPending: !0,
+        email: r.payload.email,
+        phoneNumber: "",
+        error: null
+      };
+    case "SET_PHONE_NUMBER":
+      return { ...e, phoneNumber: r.payload.phoneNumber, email: "", error: null };
+    case "SUBMIT_PHONE_NUMBER":
+      return {
+        ...e,
+        isPending: !0,
+        phoneNumber: r.payload.phoneNumber,
+        email: "",
+        error: null
+      };
     case "SUBMIT_EMAIL_SUCCESS":
+    case "SUBMIT_PHONE_NUMBER_SUCCESS":
       return {
-        ...r,
+        ...e,
         error: null,
-        flowId: e.payload.flowId,
+        flowId: r.payload.flowId,
         canResetOTP: !1,
         isPending: !1,
         otp: "",
-        step: "otp"
+        step: "verification"
       };
     case "SUBMIT_EMAIL_FAILURE":
+    case "SUBMIT_PHONE_NUMBER_FAILURE":
       return {
-        ...r,
-        error: e.payload.error,
+        ...e,
+        error: r.payload.error,
         isPending: !1
       };
     case "SET_OTP":
-      return { ...r, error: null, otp: e.payload.otp };
+      return { ...e, error: null, otp: r.payload.otp };
     case "SUBMIT_OTP":
-      return { ...r, error: null, isPending: !0, otp: e.payload.otp };
+      return { ...e, error: null, isPending: !0, otp: r.payload.otp };
     case "SUBMIT_OTP_SUCCESS":
-      return { ...r, error: null, isPending: !1, step: "success" };
+      return { ...e, error: null, isPending: !1, isSuccess: !0 };
     case "SUBMIT_OTP_FAILURE":
       return {
-        ...r,
-        error: e.payload.error,
-        isPending: !1
+        ...e,
+        error: r.payload.error,
+        isPending: !1,
+        isSuccess: !1
       };
     case "ALLOW_RESET_OTP":
-      return { ...r, canResetOTP: !0 };
+      return { ...e, canResetOTP: !0 };
     case "RESET_OTP":
-      return { ...r, error: null, canResetOTP: !1 };
+      return { ...e, error: null, canResetOTP: !1 };
     case "CLEAR_ERROR":
-      return { ...r, error: null };
+      return { ...e, error: null };
+    case "RESET_STATE":
+      return {
+        authMethod: e.authMethod,
+        canResetOTP: !1,
+        error: null,
+        isPending: !1,
+        isSuccess: !1,
+        email: "",
+        flowId: "",
+        otp: "",
+        phoneNumber: "",
+        step: "credentials"
+      };
     default:
       throw new Error("Unknown action type");
   }
 }
-const s = (r) => n(l, r);
+const s = (e) => n(l, e);
 export {
   s as useSignInReducer
 };

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-export type SignInModalProps = {
+export interface SignInModalProps {
     children?: ReactNode;
     open?: boolean;
     setIsOpen?: (value: boolean) => void;
     onSuccess?: () => void;
-};
+}
 export declare const SignInModal: ({ children, open, setIsOpen, onSuccess }: SignInModalProps) => import("react/jsx-runtime").JSX.Element;