@coinbase/cdp-react 0.0.86 → 0.0.88

package/dist/components/EnrollMfa/EnrollMfaProvider.js

@@ -1,24 +1,29 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as u, useContext as a, useMemo as f } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { createContext as s, useContext as a, useEffect as u, useMemo as c } from "react";
+import "@coinbase/cdp-core";
 import "@coinbase/cdp-hooks";
-import { useEnrollMfaReducer as m } from "./useEnrollMfaReducer.js";
-const n = u(null), p = () => {
-  const t = a(n);
-  if (!t)
+import { useEnrollMfaReducer as p } from "./useEnrollMfaReducer.js";
+const i = s(null), C = () => {
+  const o = a(i);
+  if (!o)
     throw new Error("useEnrollMfaContext must be used within EnrollMfaProvider");
-  return t;
-}, E = ({
-  children: t,
-  onEnrollSuccess: o,
-  methods: s
+  return o;
+}, v = ({
+  children: o,
+  onEnrollSuccess: n,
+  methods: t
 }) => {
-  const [r, e] = m(s), l = f(
-    () => ({ state: r, dispatch: e, onEnrollSuccess: o }),
-    [r, e, o]
+  const [r, e] = p(t);
+  u(() => {
+    t && t.join(",") !== r.methods.join(",") && e({ type: "SET_METHODS", payload: { methods: t } });
+  }, [t, e, r.methods]);
+  const l = c(
+    () => ({ state: r, dispatch: e, onEnrollSuccess: n }),
+    [r, e, n]
   );
-  return /* @__PURE__ */ i(n.Provider, { value: l, children: t });
+  return /* @__PURE__ */ f(i.Provider, { value: l, children: o });
 };
 export {
-  E as EnrollMfaProvider,
-  p as useEnrollMfaContext
+  v as EnrollMfaProvider,
+  C as useEnrollMfaContext
 };

package/dist/components/EnrollMfa/EnrollMfaTitle.js

@@ -1,21 +1,22 @@
 import { jsx as t, Fragment as h } from "react/jsx-runtime";
 import "react";
 import { useEnrollMfaContext as p } from "./EnrollMfaProvider.js";
-import { m as f } from "../../chunks/index.CKQKBoX2.js";
+import { m as f } from "../../chunks/index.Bgx0-QLY.js";
+import "@coinbase/cdp-core";
 import "@coinbase/cdp-hooks";
 import '../../assets/EnrollMfaTitle.css';const g = "EnrollMfaTitle-module__heading___ogrZZ", u = {
   heading: g
-}, y = ({
-  as: s = "h2",
-  children: i,
-  className: r = "",
+}, C = ({
+  as: i = "h2",
+  children: r,
+  className: s = "",
   method: l,
   step: m,
   ...a
 }) => {
   const { state: o } = p(), e = m || o.step, n = l || o.method, c = f[n].title, d = e === "list" ? /* @__PURE__ */ t(h, { children: "Add multi-factor authentication" }) : /* @__PURE__ */ t(c, { step: e, method: n });
-  return /* @__PURE__ */ t(s, { className: `${u.heading} ${r}`, ...a, children: i ?? d });
+  return /* @__PURE__ */ t(i, { className: `${u.heading} ${s}`, ...a, children: r ?? d });
 };
 export {
-  y as EnrollMfaTitle
+  C as EnrollMfaTitle
 };

package/dist/components/EnrollMfa/index.js

@@ -1,180 +1,186 @@
-import { jsx as o, jsxs as a, Fragment as E } from "react/jsx-runtime";
-import { useIsInitialized as B, useCurrentUser as P, useInitiateMfaEnrollment as b, useSubmitMfaEnrollment as D, useRecordMfaEnrollmentPrompted as $ } from "@coinbase/cdp-hooks";
-import { u as k } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
-import { useMemo as V, useRef as p, useEffect as R, useCallback as d, useLayoutEffect as j } from "react";
-import { c as z } from "../../chunks/lite.1fxw3LjI.js";
-import { u as J } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
-import { useTimeout as K } from "../../hooks/useTimeout.js";
-import { isApiError as q } from "../../utils/isApiError.js";
+import { jsx as r, jsxs as s, Fragment as u } from "react/jsx-runtime";
+import { getEnabledMfaMethods as $, getEnrolledMfaMethods as k } from "@coinbase/cdp-core";
+import { useCurrentUser as w, useIsInitialized as V, useInitiateMfaEnrollment as j, useSubmitMfaEnrollment as z, useRecordMfaEnrollmentPrompted as q } from "@coinbase/cdp-hooks";
+import { u as J } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
+import { useMemo as C, useRef as _, useEffect as v, useCallback as p, useLayoutEffect as K } from "react";
+import { c as G } from "../../chunks/lite.1fxw3LjI.js";
+import { u as X } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
+import { useTimeout as Y } from "../../hooks/useTimeout.js";
+import { isApiError as Z } from "../../utils/isApiError.js";
 import "libphonenumber-js";
-import { EnrollMfaDescription as x } from "./EnrollMfaDescription.js";
-import { EnrollMfaFlow as G } from "./EnrollMfaFlow.js";
-import { EnrollMfaFlowBackButton as X } from "./EnrollMfaFlowBackButton.js";
-import { EnrollMfaFlowProvider as Y } from "./EnrollMfaFlowProvider.js";
-import { useEnrollMfaFlow as xe } from "./EnrollMfaFlowProvider.js";
-import { EnrollMfaFooter as Z } from "./EnrollMfaFooter.js";
-import { EnrollMfaImage as H } from "./EnrollMfaImage.js";
-import { EnrollMfaItem as Ue } from "./EnrollMfaItem.js";
-import { EnrollMfaItems as Fe } from "./EnrollMfaItems.js";
-import { EnrollMfaProvider as Q, useEnrollMfaContext as U } from "./EnrollMfaProvider.js";
-import { EnrollMfaTitle as C } from "./EnrollMfaTitle.js";
-import { Banner as W } from "../ui/Banner/index.js";
-import '../../assets/EnrollMfa.css';const ee = "EnrollMfa-module__img___JmjV1", te = "EnrollMfa-module__centered___YxB8I", re = "EnrollMfa-module__footer___Zro3u", l = {
+import { EnrollMfaDescription as O } from "./EnrollMfaDescription.js";
+import { EnrollMfaFlow as H } from "./EnrollMfaFlow.js";
+import { EnrollMfaFlowBackButton as Q } from "./EnrollMfaFlowBackButton.js";
+import { EnrollMfaFlowProvider as W } from "./EnrollMfaFlowProvider.js";
+import { useEnrollMfaFlow as Fe } from "./EnrollMfaFlowProvider.js";
+import { EnrollMfaFooter as ee } from "./EnrollMfaFooter.js";
+import { EnrollMfaImage as te } from "./EnrollMfaImage.js";
+import { EnrollMfaItem as Pe } from "./EnrollMfaItem.js";
+import { EnrollMfaItems as De } from "./EnrollMfaItems.js";
+import { EnrollMfaProvider as oe, useEnrollMfaContext as A } from "./EnrollMfaProvider.js";
+import { EnrollMfaTitle as U } from "./EnrollMfaTitle.js";
+import { m as re } from "../../chunks/index.Bgx0-QLY.js";
+import { Banner as ne } from "../ui/Banner/index.js";
+import '../../assets/EnrollMfa.css';const le = "EnrollMfa-module__img___JmjV1", ae = "EnrollMfa-module__centered___YxB8I", ie = "EnrollMfa-module__footer___Zro3u", a = {
   "mfa-enrollment": "EnrollMfa-module__mfa-enrollment___80xnL",
-  img: ee,
+  img: le,
   "flex-container": "EnrollMfa-module__flex-container___9Dazs",
   "gap-2": "EnrollMfa-module__gap-2___BKEqR",
   "gap-3": "EnrollMfa-module__gap-3___JKVyF",
-  centered: te,
-  footer: re
-}, oe = 5 * 60 * 1e3, ne = ({ role: c = "alert", ...i }) => {
-  const { state: s } = U(), { error: m } = s;
-  return m ? /* @__PURE__ */ o(W, { variant: "error", role: c, ...i, children: q(m) ? m.message : m }) : null;
-}, le = ({
-  className: c = "",
-  children: i,
-  resetOnSuccess: s = !0,
-  ...m
+  centered: ae,
+  footer: ie
+}, se = 5 * 60 * 1e3, me = ({ role: d = "alert", ...m }) => {
+  const { state: i } = A(), { error: l } = i;
+  return l ? /* @__PURE__ */ r(ne, { variant: "error", role: d, ...m, children: Z(l) ? l.message : l }) : null;
+}, ce = ({
+  className: d = "",
+  children: m,
+  resetOnSuccess: i = !0,
+  ...l
 }) => {
-  const { isInitialized: f } = B(), { currentUser: u } = P(), { state: e, dispatch: n, onEnrollSuccess: _ } = U(), { initiateMfaEnrollment: M } = b(), { submitMfaEnrollment: h } = D(), { recordMfaEnrollmentPrompted: I } = $(), { showCoinbaseFooter: v } = J(), N = p(!1);
-  R(() => {
-    !f || !u || N.current || (I(), N.current = !0);
-  }, [I, f, u]), R(() => {
+  const { isInitialized: c } = V(), { currentUser: E } = w(), { state: e, dispatch: o, onEnrollSuccess: M } = A(), { initiateMfaEnrollment: h } = j(), { submitMfaEnrollment: I } = z(), { recordMfaEnrollmentPrompted: S } = q(), { showCoinbaseFooter: F } = X(), g = _(!1), y = !!E;
+  v(() => {
+    !c || !y || g.current || (S(), g.current = !0);
+  }, [S, c, y]), v(() => {
     if (!e.initiatedAt) return;
     const t = () => {
-      e.initiatedAt && Date.now() - e.initiatedAt >= oe && n({ type: "ENROLLMENT_SESSION_EXPIRED" });
+      e.initiatedAt && Date.now() - e.initiatedAt >= se && o({ type: "ENROLLMENT_SESSION_EXPIRED" });
     };
     t();
-    const r = setInterval(t, 1e3);
-    return () => clearInterval(r);
-  }, [e.initiatedAt, n]);
-  const S = p(e.step), T = p(null), { schedule: y } = K(), g = d((t) => {
-    S.current !== t && (S.current = t, T.current?.transition.toggle(t));
-  }, []), F = d(() => {
-    n({ type: "GO_TO_PREVIOUS_STEP" });
-  }, [n]), w = d(
+    const n = setInterval(t, 1e3);
+    return () => clearInterval(n);
+  }, [e.initiatedAt, o]);
+  const T = _(e.step), N = _(null), { schedule: L } = Y(), R = p((t) => {
+    T.current !== t && (T.current = t, N.current?.transition.toggle(t));
+  }, []), B = p(() => {
+    o({ type: "GO_TO_PREVIOUS_STEP" });
+  }, [o]), P = p(
     async (t) => {
-      if (f) {
-        n({ type: "INITIATE_ENROLLMENT", payload: { method: t } });
-        try {
-          const r = await M({ mfaMethod: t });
-          if ("authUrl" in r && "secret" in r)
-            n({
-              type: "INITIATE_ENROLLMENT_SUCCESS",
-              payload: { authUrl: r.authUrl, secret: r.secret }
-            });
-          else
-            throw new Error("Failed to initiate enrollment");
-        } catch (r) {
-          n({
-            type: "INITIATE_ENROLLMENT_FAILURE",
-            payload: {
-              error: r instanceof Error ? r.message : "Failed to initiate enrollment"
-            }
-          });
-        }
+      if (!c) return;
+      const n = re[t];
+      if (n.requiresInput && e.step !== "setup") {
+        o({
+          type: "SET_STEP",
+          payload: { step: "setup", flowDirection: "left", method: t }
+        });
+        return;
+      }
+      o({ type: "INITIATE_ENROLLMENT", payload: { method: t } });
+      try {
+        const f = n.getInitiateOptions(e), D = await h(f);
+        o({ type: "INITIATE_ENROLLMENT_SUCCESS", payload: D });
+      } catch (f) {
+        o({
+          type: "INITIATE_ENROLLMENT_FAILURE",
+          payload: {
+            error: f instanceof Error ? f.message : "Failed to initiate enrollment"
+          }
+        });
       }
     },
-    [n, M, f]
-  ), A = d(
+    [o, h, c, e]
+  ), b = p(
     async (t) => {
-      t.preventDefault(), n({ type: "SUBMIT_ENROLLMENT" });
+      t.preventDefault(), o({ type: "SUBMIT_ENROLLMENT" });
       try {
-        await h({
+        await I({
           mfaMethod: e.method,
           mfaCode: e.mfaCode
-        }), n({ type: "SUBMIT_ENROLLMENT_SUCCESS" }), _?.(), s && y(() => {
-          n({ type: "SET_STEP", payload: { step: "list", flowDirection: "left" } });
+        }), o({ type: "SUBMIT_ENROLLMENT_SUCCESS" }), M?.(), i && L(() => {
+          o({ type: "SET_STEP", payload: { step: "list", flowDirection: "left" } });
         }, 800);
-      } catch (r) {
-        n({
+      } catch (n) {
+        o({
           type: "SUBMIT_ENROLLMENT_FAILURE",
           payload: {
-            error: r instanceof Error ? r.message : "Verification failed"
+            error: n instanceof Error ? n.message : "Verification failed"
           }
         });
       }
     },
     [
-      n,
+      o,
       e.method,
       e.mfaCode,
-      h,
-      _,
-      s,
-      y
+      I,
+      M,
+      i,
+      L
     ]
   );
-  j(() => {
-    g(e.step);
-  }, [e.step, g]);
-  const L = typeof i == "function" ? i(e) : i;
-  return /* @__PURE__ */ o(
-    Y,
+  K(() => {
+    R(e.step);
+  }, [e.step, R]);
+  const x = typeof m == "function" ? m(e) : m;
+  return /* @__PURE__ */ r(
+    W,
     {
-      onBack: F,
-      onStartEnrollment: w,
-      onSubmit: A,
-      transitionRef: T,
-      children: /* @__PURE__ */ a("div", { className: `${l["mfa-enrollment"]} ${c}`, ...m, children: [
-        L,
-        !L && /* @__PURE__ */ a(E, { children: [
-          /* @__PURE__ */ a(
+      onBack: B,
+      onStartEnrollment: P,
+      onSubmit: b,
+      transitionRef: N,
+      children: /* @__PURE__ */ s("div", { className: `${a["mfa-enrollment"]} ${d}`, ...l, children: [
+        x,
+        !x && /* @__PURE__ */ s(u, { children: [
+          /* @__PURE__ */ s(
             "div",
             {
-              className: z(
-                l["flex-container"],
-                e.step === "list" ? l["gap-3"] : ""
+              className: G(
+                a["flex-container"],
+                e.step === "list" ? a["gap-3"] : ""
               ),
               children: [
-                e.step === "list" ? /* @__PURE__ */ a(E, { children: [
-                  /* @__PURE__ */ a("div", { children: [
-                    /* @__PURE__ */ o(C, { step: "list", method: e.method }),
-                    /* @__PURE__ */ o(x, { step: "list", method: e.method })
+                e.step === "list" ? /* @__PURE__ */ s(u, { children: [
+                  /* @__PURE__ */ s("div", { children: [
+                    /* @__PURE__ */ r(U, { step: "list", method: e.method }),
+                    /* @__PURE__ */ r(O, { step: "list", method: e.method })
                   ] }),
-                  /* @__PURE__ */ o(ne, {})
-                ] }) : /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(X, { step: e.step }) }),
-                /* @__PURE__ */ o(G, { children: ({ step: t, method: r, Content: O }) => /* @__PURE__ */ a("div", { className: `${l["flex-container"]} ${l["gap-2"]}`, children: [
-                  t !== "list" && /* @__PURE__ */ a(E, { children: [
-                    /* @__PURE__ */ o(
-                      H,
+                  /* @__PURE__ */ r(me, {})
+                ] }) : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(Q, { step: e.step }) }),
+                /* @__PURE__ */ r(H, { children: ({ step: t, method: n, Content: f }) => /* @__PURE__ */ s("div", { className: `${a["flex-container"]} ${a["gap-2"]}`, children: [
+                  t !== "list" && /* @__PURE__ */ s(u, { children: [
+                    /* @__PURE__ */ r(
+                      te,
                       {
-                        className: `${l.img} ${l.centered}`,
+                        className: `${a.img} ${a.centered}`,
                         step: t,
-                        method: r
+                        method: n
                       }
                     ),
-                    /* @__PURE__ */ a("div", { className: l.centered, children: [
-                      /* @__PURE__ */ o(C, { step: t, method: r }),
-                      /* @__PURE__ */ o(x, { step: t, method: r })
+                    /* @__PURE__ */ s("div", { className: a.centered, children: [
+                      /* @__PURE__ */ r(U, { step: t, method: n }),
+                      /* @__PURE__ */ r(O, { step: t, method: n })
                     ] })
                   ] }),
-                  O
+                  f
                 ] }) })
               ]
             }
           ),
-          v && /* @__PURE__ */ o(Z, { className: l.footer })
+          F && /* @__PURE__ */ r(ee, { className: a.footer })
         ] })
       ] })
     }
   );
-}, ge = ({ onEnrollSuccess: c, ...i }) => {
-  k("enroll_mfa");
-  const s = V(() => ["totp"], []);
-  return /* @__PURE__ */ o(Q, { methods: s, onEnrollSuccess: c, children: /* @__PURE__ */ o(le, { ...i }) });
+}, Ue = ({ onEnrollSuccess: d, ...m }) => {
+  J("enroll_mfa");
+  const { currentUser: i } = w(), l = $(), c = C(
+    () => i ? k(i) : [],
+    [i]
+  ), E = C(() => [.../* @__PURE__ */ new Set([...l, ...c])], [l, c]);
+  return /* @__PURE__ */ r(oe, { methods: E, onEnrollSuccess: d, children: /* @__PURE__ */ r(ce, { ...m }) });
 };
 export {
-  ge as EnrollMfa,
-  x as EnrollMfaDescription,
-  ne as EnrollMfaError,
-  G as EnrollMfaFlow,
-  X as EnrollMfaFlowBackButton,
-  Z as EnrollMfaFooter,
-  H as EnrollMfaImage,
-  Ue as EnrollMfaItem,
-  Fe as EnrollMfaItems,
-  C as EnrollMfaTitle,
-  U as useEnrollMfaContext,
-  xe as useEnrollMfaFlow
+  Ue as EnrollMfa,
+  O as EnrollMfaDescription,
+  me as EnrollMfaError,
+  H as EnrollMfaFlow,
+  Q as EnrollMfaFlowBackButton,
+  ee as EnrollMfaFooter,
+  te as EnrollMfaImage,
+  Pe as EnrollMfaItem,
+  De as EnrollMfaItems,
+  U as EnrollMfaTitle,
+  A as useEnrollMfaContext,
+  Fe as useEnrollMfaFlow
 };

package/dist/components/EnrollMfa/methods/sms.d.ts

@@ -0,0 +1,6 @@
+import { EnrollMfaMethodConfig, EnrollMfaMethodContentProps, EnrollMfaMethodComponentProps } from '../types';
+export declare const SmsContent: ({ autoFocus, step, onSubmit, children, }: EnrollMfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsTitle: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SmsDescription: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SmsImage: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const smsMethodConfig: EnrollMfaMethodConfig;

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
 };