@coinbase/cdp-react 0.0.86 → 0.0.87

package/dist/components/EnrollMfa/methods/sms.js

@@ -0,0 +1,148 @@
+import { jsx as t, Fragment as a, jsxs as D } from "react/jsx-runtime";
+import { useState as M, useCallback as i, useEffect as E, useMemo as w } from "react";
+import { OTPForm as x } from "../../forms/OTPForm/index.js";
+import { PhoneNumberForm as F } from "../../forms/PhoneNumberForm/index.js";
+import { Badge as U } from "../../ui/Badge/index.js";
+import { usePhoneNumberState as j } from "../../../hooks/usePhoneNumberState.js";
+import { useTimer as I } from "../../../hooks/useTimer.js";
+import { IconPhone as W } from "../../../icons/IconPhone.js";
+import { formatPhoneNumber as k } from "../../../utils/formatPhoneNumber.js";
+import { useEnrollMfaFlow as A } from "../EnrollMfaFlowProvider.js";
+import { useEnrollMfaContext as _ } from "../EnrollMfaProvider.js";
+import "@coinbase/cdp-core";
+import "@coinbase/cdp-hooks";
+import '../../../assets/sms.css';const L = "sms-module__form___G393d", B = "sms-module__credentials___jMUzc", f = {
+  form: L,
+  "otp-form": "sms-module__otp-form___yNrQa",
+  credentials: B
+}, q = ({
+  autoFocus: e = !0,
+  step: o,
+  onSubmit: m,
+  children: h
+}) => {
+  const { state: r, dispatch: n } = _(), { startEnrollment: c } = A(), {
+    timeRemaining: l,
+    start: u,
+    reset: N
+  } = I(), [p, C] = M(!1), b = i(
+    (s) => {
+      n({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: s } });
+    },
+    [n]
+  ), { phoneNumberObject: S, countryCode: g, handlePhoneNumberChange: O, handleCountryCodeChange: P } = j({
+    phoneNumber: r.phoneNumber,
+    onPhoneNumberChange: b
+  }), v = i(
+    (s) => {
+      n({ type: "SET_MFA_CODE", payload: { mfaCode: s } });
+    },
+    [n]
+  ), y = i(() => {
+    n({ type: "CLEAR_ERROR" });
+  }, [n]), R = i(
+    (s) => {
+      s.preventDefault(), c("sms");
+    },
+    [c]
+  ), T = i(async () => {
+    n({ type: "SET_MFA_CODE", payload: { mfaCode: "" } }), C(!1), u(60), c("sms");
+  }, [n, c, u]);
+  E(() => {
+    o === "setup-verification" && u(60);
+  }, [o, u]), E(() => {
+    l === 0 && !p && (C(!0), N());
+  }, [l, p, N]);
+  let d;
+  switch (o) {
+    case "setup":
+      d = /* @__PURE__ */ t(
+        F,
+        {
+          className: f.form,
+          autoFocus: e,
+          phoneNumber: S,
+          countryCode: g,
+          onPhoneNumberChange: O,
+          onCountryCodeChange: P,
+          error: r.error && r.step === "setup" ? r.error : void 0,
+          isPending: r.isPending,
+          onClearServerErrors: y,
+          onSubmit: R,
+          submitLabel: "Continue"
+        }
+      );
+      break;
+    case "setup-verification":
+      d = /* @__PURE__ */ t(
+        x,
+        {
+          className: f["otp-form"],
+          autoFocus: e,
+          otp: r.mfaCode,
+          error: r.error && r.step === "setup-verification" ? r.error : void 0,
+          isPending: r.isPending,
+          onOTPChange: v,
+          onResendOTP: T,
+          onSubmit: m,
+          passwordLength: 6,
+          canResetOTP: p,
+          resendCountdown: l,
+          successMessage: r.isSuccess ? "Enrolled!" : void 0
+        }
+      );
+      break;
+  }
+  return h ? /* @__PURE__ */ t(a, { children: h({ step: o, Content: d }) }) : d;
+}, z = ({ step: e }) => {
+  switch (e) {
+    case "setup":
+      return /* @__PURE__ */ t(a, { children: "Enter phone number" });
+    case "setup-verification":
+      return /* @__PURE__ */ t(a, { children: "Enter verification code" });
+    default:
+      return null;
+  }
+}, G = ({ step: e }) => {
+  const { state: o } = _(), m = w(
+    () => e === "setup-verification" ? k(o.phoneNumber) : "",
+    [o.phoneNumber, e]
+  );
+  switch (e) {
+    case "setup":
+      return /* @__PURE__ */ t(a, { children: "We'll send you a verification code via text." });
+    case "setup-verification":
+      return /* @__PURE__ */ D(a, { children: [
+        "Enter the 6 digit code sent to",
+        " ",
+        m ? /* @__PURE__ */ t("span", { className: f.credentials, children: m }) : "your phone number"
+      ] });
+    default:
+      return null;
+  }
+}, H = ({ step: e }) => {
+  switch (e) {
+    case "setup":
+    case "setup-verification":
+      return /* @__PURE__ */ t(U, { variant: "secondary", children: /* @__PURE__ */ t(W, {}) });
+    default:
+      return null;
+  }
+}, ie = {
+  content: q,
+  description: G,
+  getInitiateOptions: (e) => ({
+    mfaMethod: "sms",
+    phoneNumber: e.phoneNumber
+  }),
+  image: H,
+  requiresInput: !0,
+  title: z
+};
+export {
+  q as SmsContent,
+  G as SmsDescription,
+  H as SmsImage,
+  z as SmsTitle,
+  ie as smsMethodConfig
+};

package/dist/components/EnrollMfa/methods/totp.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as l, Fragment as i } from "react/jsx-runtime";
 import { c as u } from "../../../chunks/lite.1fxw3LjI.js";
-import { useCallback as a } from "react";
+import { useCallback as c } from "react";
 import { OTPForm as E } from "../../forms/OTPForm/index.js";
 import { Badge as C } from "../../ui/Badge/index.js";
 import { Button as m } from "../../ui/Button/index.js";
@@ -8,8 +8,10 @@ import { CopyTextField as T } from "../../ui/CopyTextField/index.js";
 import { Error as f } from "../../ui/Error/index.js";
 import { QRCode as v } from "../../ui/QRCode/index.js";
 import { IconSmartPhone as k } from "../../../icons/IconSmartPhone.js";
-import { useEnrollMfaFlow as S } from "../EnrollMfaFlowProvider.js";
-import { useEnrollMfaContext as w } from "../EnrollMfaProvider.js";
+import { isApiError as S } from "../../../utils/isApiError.js";
+import { useEnrollMfaFlow as w } from "../EnrollMfaFlowProvider.js";
+import { useEnrollMfaContext as M } from "../EnrollMfaProvider.js";
+import "@coinbase/cdp-core";
 import "@coinbase/cdp-hooks";
 import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F = "totp-module__container___1aL5H", o = {
   "qr-code": "totp-module__qr-code___qyK1k",
@@ -17,24 +19,24 @@ import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F =
   container: F,
   "copy-key": "totp-module__copy-key___iwzZf",
   "otp-form": "totp-module__otp-form___OzooV"
-}, M = ({
+}, b = ({
   autoFocus: r = !0,
-  step: c,
+  step: a,
   onSubmit: h,
   children: p
 }) => {
-  const { state: e, dispatch: n } = w(), { startEnrollment: d } = S(), _ = a(() => {
+  const { state: e, dispatch: n } = M(), { startEnrollment: d } = w(), _ = c(() => {
     d(e.method);
-  }, [d, e.method]), y = a(() => {
+  }, [d, e.method]), y = c(() => {
     n({ type: "SET_STEP", payload: { step: "setup-verification", flowDirection: "left" } });
-  }, [n]), g = a(
+  }, [n]), g = c(
     (x) => {
       n({ type: "SET_MFA_CODE", payload: { mfaCode: x } });
     },
     [n]
   );
   let s;
-  switch (c) {
+  switch (a) {
     case "setup":
       s = /* @__PURE__ */ l("div", { className: o.container, children: [
         /* @__PURE__ */ t("div", { className: u(o["qr-code"], e.isExpired ? o.expired : ""), children: /* @__PURE__ */ t(v, { value: e.authUrl || "", size: 128, ecl: "L" }) }),
@@ -48,7 +50,7 @@ import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F =
             }
           ),
           e.isExpired && /* @__PURE__ */ t(f, { children: "Verification timed out. For your security, try again." }),
-          !e.isExpired && !!e.error && e.step === "setup" && /* @__PURE__ */ t(f, { children: "isApiError(state.error) ? state.error.message : state.error" })
+          !e.isExpired && !!e.error && e.step === "setup" && /* @__PURE__ */ t(f, { children: S(e.error) ? e.error.message : e.error })
         ] }),
         e.isExpired ? /* @__PURE__ */ t(
           m,
@@ -79,8 +81,8 @@ import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F =
       );
       break;
   }
-  return p ? /* @__PURE__ */ t(i, { children: p({ step: c, Content: s }) }) : s;
-}, b = ({ step: r }) => {
+  return p ? /* @__PURE__ */ t(i, { children: p({ step: a, Content: s }) }) : s;
+}, O = ({ step: r }) => {
   switch (r) {
     case "setup":
       return /* @__PURE__ */ t(i, { children: "Set up authenticator" });
@@ -105,16 +107,19 @@ import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F =
     default:
       return null;
   }
-}, H = {
-  content: M,
-  title: b,
+}, G = {
+  content: b,
+  title: O,
   description: q,
-  image: A
+  image: A,
+  getInitiateOptions: () => ({
+    mfaMethod: "totp"
+  })
 };
 export {
-  M as TotpContent,
+  b as TotpContent,
   q as TotpDescription,
   A as TotpImage,
-  b as TotpTitle,
-  H as totpMethodConfig
+  O as TotpTitle,
+  G as totpMethodConfig
 };

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

@@ -1,6 +1,7 @@
+import { InitiateMfaEnrollmentResult, InitiateMfaOptions } from '@coinbase/cdp-core';
 import { APIError } from '@coinbase/cdp-hooks';
 import { FC, FormEvent, ReactNode } from 'react';
-export type MfaMethod = "totp";
+export type MfaMethod = InitiateMfaOptions["mfaMethod"];
 export type EnrollMfaStep = "list" | "setup" | "setup-verification";
 export type EnrollMfaMethodStep = Exclude<EnrollMfaStep, "list">;
 export interface EnrollMfaMethodComponentProps {
@@ -15,6 +16,7 @@ export interface EnrollMfaState {
     mfaCode: string;
     authUrl: string | null;
     secret: string | null;
+    phoneNumber: string;
     initiatedAt: number | null;
     isExpired: boolean;
     error: string | APIError | null;
@@ -26,12 +28,18 @@ export type EnrollMfaAction = {
     payload: {
         step: EnrollMfaStep;
         flowDirection?: "left" | "right";
+        method?: MfaMethod;
     };
 } | {
     type: "SET_MFA_CODE";
     payload: {
         mfaCode: string;
     };
+} | {
+    type: "SET_PHONE_NUMBER";
+    payload: {
+        phoneNumber: string;
+    };
 } | {
     type: "INITIATE_ENROLLMENT";
     payload: {
@@ -39,10 +47,7 @@ export type EnrollMfaAction = {
     };
 } | {
     type: "INITIATE_ENROLLMENT_SUCCESS";
-    payload: {
-        authUrl: string;
-        secret: string;
-    };
+    payload: InitiateMfaEnrollmentResult;
 } | {
     type: "INITIATE_ENROLLMENT_FAILURE";
     payload: {
@@ -59,6 +64,11 @@ export type EnrollMfaAction = {
     payload: {
         error: string | APIError;
     };
+} | {
+    type: "SET_METHODS";
+    payload: {
+        methods: MfaMethod[];
+    };
 } | {
     type: "CLEAR_ERROR";
 } | {
@@ -78,6 +88,8 @@ export interface EnrollMfaMethodContentProps {
 export interface EnrollMfaMethodConfig {
     content: FC<EnrollMfaMethodContentProps>;
     description: FC<EnrollMfaMethodComponentProps>;
+    getInitiateOptions: (state: EnrollMfaState) => InitiateMfaOptions;
     image: FC<EnrollMfaMethodComponentProps>;
+    requiresInput?: boolean;
     title: FC<EnrollMfaMethodComponentProps>;
 }

package/dist/components/EnrollMfa/types.js

@@ -1,2 +1,3 @@
+import "@coinbase/cdp-core";
 import "@coinbase/cdp-hooks";
 import "react";

package/dist/components/EnrollMfa/useEnrollMfaReducer.js

@@ -1,111 +1,124 @@
-import { useReducer as n } from "react";
+import { useReducer as d } from "react";
 import "@coinbase/cdp-hooks";
-import { isApiError as t } from "../../utils/isApiError.js";
+import { isApiError as i } from "../../utils/isApiError.js";
 import "libphonenumber-js";
-const l = ["list", "setup", "setup-verification"], i = (r) => ({
-  method: r[0] || "totp",
-  methods: r,
+import "@coinbase/cdp-core";
+const l = ["list", "setup", "setup-verification"], s = (e) => ({
+  method: e[0] || "totp",
+  methods: e,
   step: "list",
   flowDirection: "left",
   mfaCode: "",
   authUrl: null,
   secret: null,
+  phoneNumber: "",
   initiatedAt: null,
   isExpired: !1,
   error: null,
   isPending: !1,
   isSuccess: !1
-}), u = (r, e) => {
-  switch (e.type) {
+}), u = (e, r) => {
+  switch (r.type) {
     case "SET_STEP":
       return {
-        ...r,
-        step: e.payload.step,
-        flowDirection: e.payload.flowDirection || r.flowDirection,
+        ...e,
+        step: r.payload.step,
+        flowDirection: r.payload.flowDirection || e.flowDirection,
+        method: r.payload.method || e.method,
         error: null
       };
     case "SET_MFA_CODE":
       return {
-        ...r,
-        mfaCode: e.payload.mfaCode,
+        ...e,
+        mfaCode: r.payload.mfaCode,
+        error: null
+      };
+    case "SET_PHONE_NUMBER":
+      return {
+        ...e,
+        phoneNumber: r.payload.phoneNumber,
         error: null
       };
     case "INITIATE_ENROLLMENT":
       return {
-        ...r,
-        method: e.payload.method,
+        ...e,
+        method: r.payload.method,
         isPending: !0,
         error: null,
         flowDirection: "left"
       };
-    case "INITIATE_ENROLLMENT_SUCCESS":
+    case "INITIATE_ENROLLMENT_SUCCESS": {
+      const o = l.indexOf(e.step), n = o < l.length - 1 ? l[o + 1] : e.step;
       return {
-        ...r,
+        ...e,
         isPending: !1,
-        authUrl: e.payload.authUrl,
-        secret: e.payload.secret,
+        authUrl: "authUrl" in r.payload ? r.payload.authUrl : null,
+        secret: "secret" in r.payload ? r.payload.secret : null,
         initiatedAt: Date.now(),
         isExpired: !1,
-        step: "setup"
+        step: n
       };
+    }
     case "INITIATE_ENROLLMENT_FAILURE":
       return {
-        ...r,
+        ...e,
         isPending: !1,
-        error: e.payload.error,
-        step: "list",
-        flowDirection: "right"
+        error: r.payload.error
       };
     case "ENROLLMENT_SESSION_EXPIRED":
       return {
-        ...r,
+        ...e,
         mfaCode: "",
         isExpired: !0
       };
     case "SUBMIT_ENROLLMENT":
       return {
-        ...r,
+        ...e,
         isPending: !0,
         error: null,
         flowDirection: "left"
       };
     case "SUBMIT_ENROLLMENT_SUCCESS":
       return {
-        ...r,
+        ...e,
         isPending: !1,
         isSuccess: !0
       };
     case "SUBMIT_ENROLLMENT_FAILURE":
       return {
-        ...r,
+        ...e,
         isPending: !1,
-        error: e.payload.error,
-        isExpired: t(e.payload.error) ? e.payload.error.errorType === "mfa_flow_expired" : e.payload.error.toLowerCase().startsWith("mfa flow not found or expired")
+        error: r.payload.error,
+        isExpired: i(r.payload.error) ? r.payload.error.errorType === "mfa_flow_expired" : r.payload.error.toLowerCase().startsWith("mfa flow not found or expired")
+      };
+    case "SET_METHODS":
+      return {
+        ...e,
+        methods: r.payload.methods
       };
     case "CLEAR_ERROR":
       return {
-        ...r,
+        ...e,
         error: null
       };
     case "GO_TO_PREVIOUS_STEP": {
-      const o = l.indexOf(r.step), s = o > 0 ? l[o - 1] : r.step;
+      const o = l.indexOf(e.step), n = o > 0 ? l[o - 1] : e.step;
       return {
-        ...r,
+        ...e,
         flowDirection: "right",
-        step: s,
+        step: n,
         error: null,
         isExpired: !1,
         mfaCode: ""
-        // Clear MFA code when going back
       };
     }
     case "RESET_STATE":
-      return i(r.methods);
+      return s(e.methods);
     default:
-      return r;
+      return e;
   }
-}, f = (r = ["totp"]) => n(u, r, i);
+}, S = (e = ["totp"]) => d(u, e, s);
 export {
   l as STEPS,
-  f as useEnrollMfaReducer
+  S as useEnrollMfaReducer
 };

package/dist/components/EnrollMfaModal/index.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as r, Fragment as s } from "react/jsx-runtime";
 import { u as v } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import { createContext as b, useMemo as w, useContext as y } from "react";
 import { c as p } from "../../chunks/lite.1fxw3LjI.js";
-import { u as F } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as F } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import { EnrollMfa as T, EnrollMfaError as B } from "../EnrollMfa/index.js";
 import { Button as h } from "../ui/Button/index.js";
 import { Modal as A, ModalContent as O, ModalTitle as S, ModalDescription as $, ModalClose as E, ModalTrigger as D } from "../ui/Modal/index.js";