@coinbase/cdp-react 0.0.86 → 0.0.87

package/dist/components/VerifyMfa/VerifyMfaImage.js

@@ -1,21 +1,33 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "react";
-import { m as c } from "../../chunks/index.Dp-lIxM1.js";
+import { Badge as l } from "../ui/Badge/index.js";
+import { IconShield as g } from "../../icons/IconShield.js";
+import { m as d } from "../../chunks/index.BX4k-ruQ.js";
 import "@coinbase/cdp-hooks";
-import { useVerifyMfaContext as g } from "./VerifyMfaProvider.js";
-import '../../assets/VerifyMfaImage.css';const d = "VerifyMfaImage-module__image___xftcN", y = {
-  image: d
-}, u = ({
+import "@coinbase/cdp-core";
+import { useVerifyMfaContext as h } from "./VerifyMfaProvider.js";
+import '../../assets/VerifyMfaImage.css';const y = "VerifyMfaImage-module__image___xftcN", u = {
+  image: y
+}, $ = ({
   as: s = "div",
-  children: t,
+  children: o,
   className: a = "",
-  method: i,
-  step: r,
-  ...f
+  method: n,
+  step: f,
+  ...p
 }) => {
-  const { state: e } = g(), n = r || e.step, m = i || e.method, p = c[m].image;
-  return /* @__PURE__ */ o(s, { className: `${y.image} ${a}`, ...f, children: t || /* @__PURE__ */ o(p, { step: n, method: m }) });
+  const { state: m } = h(), i = f || m.step, r = n || m.method;
+  let e;
+  if (o)
+    e = o;
+  else if (i === "list")
+    e = /* @__PURE__ */ t(l, { variant: "primary", children: /* @__PURE__ */ t(g, {}) });
+  else {
+    const c = d[r].image;
+    e = /* @__PURE__ */ t(c, { step: i, method: r });
+  }
+  return e ? /* @__PURE__ */ t(s, { className: `${u.image} ${a}`, ...p, children: e }) : null;
 };
 export {
-  u as VerifyMfaImage
+  $ as VerifyMfaImage
 };

package/dist/components/VerifyMfa/VerifyMfaItem.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { MfaMethod } from './types';
+export interface VerifyMfaItemProps {
+    method: MfaMethod;
+    icon?: ReactNode;
+    label: string;
+    onSelect: MouseEventHandler<HTMLButtonElement>;
+}
+declare const VerifyMfaItem: ({ icon, label, onSelect }: VerifyMfaItemProps) => import("react/jsx-runtime").JSX.Element;
+export { VerifyMfaItem };

package/dist/components/VerifyMfa/VerifyMfaItem.js

@@ -0,0 +1,27 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import "react";
+import { Button as i } from "../ui/Button/index.js";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+import '../../assets/VerifyMfaItem.css';const m = "VerifyMfaItem-module__btn___7ZZjy", c = "VerifyMfaItem-module__icon___gse6F", a = "VerifyMfaItem-module__text___aV6B6", t = {
+  btn: m,
+  icon: c,
+  text: a
+}, u = ({ icon: e, label: n, onSelect: r }) => /* @__PURE__ */ s(
+  i,
+  {
+    size: "md",
+    fullWidth: !0,
+    variant: "control",
+    className: t.btn,
+    onClick: r,
+    type: "button",
+    children: [
+      e && /* @__PURE__ */ o("span", { className: t.icon, children: e }),
+      /* @__PURE__ */ o("span", { className: t.text, children: n })
+    ]
+  }
+);
+export {
+  u as VerifyMfaItem
+};

package/dist/components/VerifyMfa/VerifyMfaItems.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { MfaMethod } from './types';
+import { VerifyMfaItemProps } from './VerifyMfaItem';
+interface VerifyMfaItemsProps extends Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
+    children?: (props: VerifyMfaItemProps) => ReactNode;
+    onSelect?: (method: MfaMethod) => void;
+}
+declare const VerifyMfaItems: ({ children, className, onSelect, ...props }: VerifyMfaItemsProps) => import("react/jsx-runtime").JSX.Element;
+export { VerifyMfaItems, type VerifyMfaItemsProps };

package/dist/components/VerifyMfa/VerifyMfaItems.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as a } from "../../chunks/lite.1fxw3LjI.js";
+import { useMemo as f } from "react";
+import { IconPhone as u } from "../../icons/IconPhone.js";
+import { IconPinCode as I } from "../../icons/IconPinCode.js";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+import { VerifyMfaItem as M } from "./VerifyMfaItem.js";
+import { useVerifyMfaContext as y } from "./VerifyMfaProvider.js";
+import '../../assets/VerifyMfaItems.css';const _ = "VerifyMfaItems-module__list___ITk0B", x = {
+  list: _
+}, V = {
+  totp: { Icon: /* @__PURE__ */ t(I, {}), label: "Authenticator app" },
+  sms: { Icon: /* @__PURE__ */ t(u, {}), label: "SMS" }
+}, B = ({ children: i, className: n = "", onSelect: e, ...c }) => {
+  const { state: l } = y(), { methods: m } = l, p = f(() => m.map((o) => {
+    const { Icon: r, label: s } = V[o];
+    return {
+      method: o,
+      icon: r,
+      label: s,
+      onSelect: () => e?.(o)
+    };
+  }), [m, e]);
+  return /* @__PURE__ */ t("ul", { className: a(x.list, n), ...c, children: p.map(
+    ({ method: o, ...r }, s) => s === 0 ? null : /* @__PURE__ */ t("li", { children: i?.({ ...r, method: o }) || /* @__PURE__ */ t(M, { ...r, method: o }) }, o)
+  ) });
+};
+export {
+  B as VerifyMfaItems
+};

package/dist/components/VerifyMfa/VerifyMfaProvider.js

@@ -1,28 +1,41 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as a, useContext as u, useMemo as c } from "react";
-import "@coinbase/cdp-hooks";
-import { useVerifyMfaReducer as m } from "./useVerifyMfaReducer.js";
-const d = {
+import { jsx as d } from "react/jsx-runtime";
+import { getEnrolledMfaMethods as u } from "@coinbase/cdp-core";
+import { useCurrentUser as c } from "@coinbase/cdp-hooks";
+import { createContext as p, useContext as l, useMemo as n, useEffect as h } from "react";
+import { useVerifyMfaReducer as M } from "./useVerifyMfaReducer.js";
+const x = {
   method: "totp",
   methods: ["totp"],
   step: "verification",
+  flowDirection: "left",
   mfaCode: "",
   error: null,
   isPending: !1,
   isSuccess: !1
-}, s = a(null), y = () => {
-  const e = u(s);
+}, a = p(null), E = () => {
+  const e = l(a);
   if (!e)
     throw new Error("useVerifyMfaContext must be used within a VerifyMfaProvider");
   return e;
-}, C = ({ children: e, onError: t, onSuccess: o }) => {
-  const [r, i] = m({ ...d }), f = c(
-    () => ({ state: r, dispatch: i, onSuccess: o, onError: t }),
-    [r, i, o, t]
+}, P = ({ children: e, onError: f, onSuccess: i }) => {
+  const { currentUser: s } = c(), t = n(
+    () => s ? u(s) : ["totp"],
+    [s]
+  ), [o, r] = M({
+    ...x,
+    methods: t,
+    method: t[0] || "totp"
+  });
+  h(() => {
+    t.join(",") !== o.methods.join(",") && r({ type: "SET_METHODS", payload: { methods: t } });
+  }, [t, r, o.methods]);
+  const m = n(
+    () => ({ state: o, dispatch: r, onSuccess: i, onError: f }),
+    [o, r, i, f]
   );
-  return /* @__PURE__ */ n(s.Provider, { value: f, children: e });
+  return /* @__PURE__ */ d(a.Provider, { value: m, children: e });
 };
 export {
-  C as VerifyMfaProvider,
-  y as useVerifyMfaContext
+  P as VerifyMfaProvider,
+  E as useVerifyMfaContext
 };

package/dist/components/VerifyMfa/VerifyMfaTitle.d.ts

@@ -3,4 +3,4 @@ import { VerifyMfaMethodComponentProps } from './types';
 export interface VerifyMfaTitleProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
-export declare const VerifyMfaTitle: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerifyMfaTitle: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaTitleProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaTitle.js

@@ -1,21 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e, Fragment as c } from "react/jsx-runtime";
 import "react";
-import { m as d } from "../../chunks/index.Dp-lIxM1.js";
+import { m as d } from "../../chunks/index.BX4k-ruQ.js";
 import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
 import { useVerifyMfaContext as h } from "./VerifyMfaProvider.js";
-import '../../assets/VerifyMfaTitle.css';const c = "VerifyMfaTitle-module__heading___18nul", l = {
-  heading: c
-}, x = ({
-  as: i = "h2",
-  children: t,
+import '../../assets/VerifyMfaTitle.css';const u = "VerifyMfaTitle-module__heading___18nul", y = {
+  heading: u
+}, C = ({
+  as: r = "h2",
+  children: o,
   className: m = "",
-  method: n,
-  step: r,
-  ...a
+  method: l,
+  step: a,
+  ...f
 }) => {
-  const { state: e } = h(), f = r || e.step, o = n || e.method, p = d[o].title;
-  return /* @__PURE__ */ s(i, { className: `${l.heading} ${m}`, ...a, children: t || /* @__PURE__ */ s(p, { step: f, method: o }) });
+  const { state: i } = h(), s = a || i.step, n = l || i.method;
+  let t;
+  if (o)
+    t = o;
+  else if (s === "list")
+    t = /* @__PURE__ */ e(c, { children: "Verify it's you" });
+  else {
+    const p = d[n].title;
+    t = /* @__PURE__ */ e(p, { step: s, method: n });
+  }
+  return t ? /* @__PURE__ */ e(r, { className: `${y.heading} ${m}`, ...f, children: t }) : null;
 };
 export {
-  x as VerifyMfaTitle
+  C as VerifyMfaTitle
 };

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

@@ -1,10 +1,14 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { HTMLAttributes, ReactNode } from 'react';
-import { VerifyMfaAction, VerifyMfaState } from './types';
+import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
 import { VerifyMfaDescription, VerifyMfaDescriptionProps } from './VerifyMfaDescription';
 import { VerifyMfaFlow, VerifyMfaFlowProps } from './VerifyMfaFlow';
+import { VerifyMfaFlowBackButton, VerifyMfaFlowBackButtonProps } from './VerifyMfaFlowBackButton';
+import { useVerifyMfaFlow, VerifyMfaFlowContextValue } from './VerifyMfaFlowProvider';
 import { VerifyMfaFooter } from './VerifyMfaFooter';
 import { VerifyMfaImage, VerifyMfaImageProps } from './VerifyMfaImage';
+import { VerifyMfaItem, VerifyMfaItemProps } from './VerifyMfaItem';
+import { VerifyMfaItems, VerifyMfaItemsProps } from './VerifyMfaItems';
 import { useVerifyMfaContext, VerifyMfaContextValue } from './VerifyMfaProvider';
 import { VerifyMfaTitle, VerifyMfaTitleProps } from './VerifyMfaTitle';
 interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSubmit" | "onError"> {
@@ -13,4 +17,4 @@ interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
     onError?: (error: APIError | Error) => void;
 }
 declare const VerifyMfa: ({ onSuccess, onError, ...props }: VerifyMfaProps) => import("react/jsx-runtime").JSX.Element;
-export { VerifyMfa, VerifyMfaDescription, VerifyMfaFooter, VerifyMfaFlow, VerifyMfaImage, VerifyMfaTitle, useVerifyMfaContext, type VerifyMfaProps, type VerifyMfaDescriptionProps, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaContextValue, };
+export { VerifyMfa, VerifyMfaDescription, VerifyMfaFlow, VerifyMfaFlowBackButton, VerifyMfaFooter, VerifyMfaImage, VerifyMfaItem, VerifyMfaItems, VerifyMfaTitle, useVerifyMfaContext, useVerifyMfaFlow, type VerifyMfaProps, type VerifyMfaContextValue, type VerifyMfaDescriptionProps, type VerifyMfaFlowBackButtonProps, type VerifyMfaFlowContextValue, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaItemProps, type VerifyMfaItemsProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaStep, };

package/dist/components/VerifyMfa/index.js

@@ -2,19 +2,28 @@ import "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import "react";
-import { V as m } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
-import { VerifyMfaDescription as a } from "./VerifyMfaDescription.js";
-import { VerifyMfaFlow as V } from "./VerifyMfaFlow.js";
-import { VerifyMfaFooter as M } from "./VerifyMfaFooter.js";
-import { VerifyMfaImage as l } from "./VerifyMfaImage.js";
-import { useVerifyMfaContext as F } from "./VerifyMfaProvider.js";
-import { VerifyMfaTitle as g } from "./VerifyMfaTitle.js";
+import { V as p } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
+import "@coinbase/cdp-core";
+import { VerifyMfaDescription as x } from "./VerifyMfaDescription.js";
+import { VerifyMfaFlow as y } from "./VerifyMfaFlow.js";
+import { VerifyMfaFlowBackButton as s } from "./VerifyMfaFlowBackButton.js";
+import { useVerifyMfaFlow as F } from "./VerifyMfaFlowProvider.js";
+import { VerifyMfaFooter as u } from "./VerifyMfaFooter.js";
+import { VerifyMfaImage as I } from "./VerifyMfaImage.js";
+import { VerifyMfaItem as B } from "./VerifyMfaItem.js";
+import { VerifyMfaItems as k } from "./VerifyMfaItems.js";
+import { useVerifyMfaContext as D } from "./VerifyMfaProvider.js";
+import { VerifyMfaTitle as b } from "./VerifyMfaTitle.js";
 export {
-  m as VerifyMfa,
-  a as VerifyMfaDescription,
-  V as VerifyMfaFlow,
-  M as VerifyMfaFooter,
-  l as VerifyMfaImage,
-  g as VerifyMfaTitle,
-  F as useVerifyMfaContext
+  p as VerifyMfa,
+  x as VerifyMfaDescription,
+  y as VerifyMfaFlow,
+  s as VerifyMfaFlowBackButton,
+  u as VerifyMfaFooter,
+  I as VerifyMfaImage,
+  B as VerifyMfaItem,
+  k as VerifyMfaItems,
+  b as VerifyMfaTitle,
+  D as useVerifyMfaContext,
+  F as useVerifyMfaFlow
 };

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

@@ -0,0 +1,6 @@
+import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+export declare const SmsContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const smsMethodConfig: MfaMethodConfig;

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

@@ -0,0 +1,90 @@
+import { jsx as r, Fragment as p } from "react/jsx-runtime";
+import { useIsInitialized as V, useCurrentUser as N, useInitiateMfaVerification as v, useSubmitMfaVerification as P } from "@coinbase/cdp-hooks";
+import { useRef as w, useState as M, useEffect as S, useCallback as b } from "react";
+import { OTPForm as B } from "../../forms/OTPForm/index.js";
+import { Badge as L } from "../../ui/Badge/index.js";
+import { useTimer as x } from "../../../hooks/useTimer.js";
+import { IconPhone as z } from "../../../icons/IconPhone.js";
+import "@coinbase/cdp-core";
+import { useVerifyMfaContext as j } from "../VerifyMfaProvider.js";
+const T = 60, k = ({
+  autoFocus: o = !0,
+  onError: h,
+  onSuccess: g,
+  children: u
+}) => {
+  const { isInitialized: l } = V(), { currentUser: F } = N(), { state: s, dispatch: t } = j(), { initiateMfaVerification: i } = v(), C = w(!1), { submitMfaVerification: R } = P(), {
+    timeRemaining: d,
+    start: a,
+    reset: f
+  } = x(), [m, I] = M(!1), [A, E] = M(!1), y = !!F;
+  S(() => {
+    if (!l || !y || C.current) return;
+    C.current = !0, requestAnimationFrame(async () => {
+      a(T);
+      try {
+        await i({ mfaMethod: "sms" });
+      } catch (e) {
+        const c = e instanceof Error ? e.message : "Failed to send verification code";
+        t({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: c } });
+      }
+    });
+  }, [l, i, y, a, t]), S(() => {
+    d === 0 && !m && (I(!0), f());
+  }, [d, m, f]);
+  const O = b(async () => {
+    t({ type: "SET_MFA_CODE", payload: { mfaCode: "" } }), I(!1), E(!0);
+    try {
+      await i({ mfaMethod: "sms" });
+    } catch (n) {
+      const e = n instanceof Error ? n.message : "Failed to resend verification code";
+      t({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: e } });
+    } finally {
+      a(T), E(!1);
+    }
+  }, [t, i, a]), U = (n) => {
+    t({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
+  }, D = async (n) => {
+    n.preventDefault(), t({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: s.mfaCode } });
+    try {
+      const e = s.mfaCode;
+      await R({ mfaMethod: "sms", mfaCode: e }), t({ type: "SUBMIT_MFA_CODE_SUCCESS" }), f(), g?.(e);
+    } catch (e) {
+      const c = e instanceof Error ? e : new Error(typeof e == "string" ? e : "Verification failed");
+      h?.(c), t({
+        type: "SUBMIT_MFA_CODE_FAILURE",
+        payload: {
+          error: c.message
+        }
+      });
+    }
+  }, _ = /* @__PURE__ */ r(
+    B,
+    {
+      autoFocus: o,
+      otp: s.mfaCode,
+      error: s.error || void 0,
+      isPending: s.isPending || A,
+      onOTPChange: U,
+      onResendOTP: O,
+      onSubmit: D,
+      passwordLength: 6,
+      canResetOTP: m,
+      resendCountdown: d,
+      successMessage: s.isSuccess ? "Verified!" : void 0
+    }
+  );
+  return u ? /* @__PURE__ */ r(p, { children: u({ step: s.step, Content: _ }) }) : _;
+}, q = (o) => /* @__PURE__ */ r(p, { children: "Enter verification code" }), W = (o) => /* @__PURE__ */ r(L, { variant: "secondary", children: /* @__PURE__ */ r(z, {}) }), G = (o) => /* @__PURE__ */ r(p, { children: "Enter the 6-digit code sent to your phone." }), te = {
+  content: k,
+  title: q,
+  description: G,
+  image: W
+};
+export {
+  k as SmsContent,
+  G as SmsDescription,
+  W as SmsImage,
+  q as SmsTitle,
+  te as smsMethodConfig
+};

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

@@ -1,69 +1,70 @@
-import { jsx as o, Fragment as a } from "react/jsx-runtime";
-import { useIsInitialized as g, useCurrentUser as _, useInitiateMfaVerification as E, useSubmitMfaVerification as S } from "@coinbase/cdp-hooks";
-import { useRef as I, useEffect as T } from "react";
-import { OTPForm as F } from "../../forms/OTPForm/index.js";
-import { Badge as A } from "../../ui/Badge/index.js";
-import { IconSmartPhone as U } from "../../../icons/IconSmartPhone.js";
-import { useVerifyMfaContext as V } from "../VerifyMfaProvider.js";
+import { jsx as r, Fragment as s } from "react/jsx-runtime";
+import { useIsInitialized as E, useCurrentUser as _, useInitiateMfaVerification as g, useSubmitMfaVerification as T } from "@coinbase/cdp-hooks";
+import { useRef as F, useEffect as S } from "react";
+import { OTPForm as A } from "../../forms/OTPForm/index.js";
+import { Badge as U } from "../../ui/Badge/index.js";
+import { IconSmartPhone as V } from "../../../icons/IconSmartPhone.js";
+import "@coinbase/cdp-core";
+import { useVerifyMfaContext as O } from "../VerifyMfaProvider.js";
 const v = ({
-  autoFocus: r = !0,
-  onError: u,
-  onSuccess: C,
-  children: s
+  autoFocus: i = !0,
+  onError: C,
+  onSuccess: M,
+  children: c
 }) => {
-  const { isInitialized: c } = g(), { currentUser: M } = _(), { state: e, dispatch: i } = V(), { initiateMfaVerification: f } = E(), p = I(!1), { submitMfaVerification: l } = S();
-  T(() => {
-    if (!c || p.current) return;
-    requestAnimationFrame(async () => {
-      p.current = !0;
+  const { isInitialized: f } = E(), { currentUser: l } = _(), { state: e, dispatch: o } = O(), { initiateMfaVerification: p } = g(), d = F(!1), { submitMfaVerification: I } = T(), m = !!l;
+  S(() => {
+    if (!f || !m || d.current) return;
+    d.current = !0, requestAnimationFrame(async () => {
       try {
-        await f({ mfaMethod: "totp" });
+        await p({ mfaMethod: "totp" });
       } catch (t) {
-        console.error("Failed to initiate MFA verification", t);
+        const a = t instanceof Error ? t.message : "Failed to send verification code";
+        o({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: a } });
       }
     });
-  }, [c, f, M]);
-  const h = (n) => {
-    i({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
-  }, y = async (n) => {
-    n.preventDefault(), i({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: e.mfaCode } });
+  }, [f, p, m, o]);
+  const y = (n) => {
+    o({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
+  }, h = async (n) => {
+    n.preventDefault(), o({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: e.mfaCode } });
     try {
       const t = e.mfaCode;
-      await l({ mfaMethod: "totp", mfaCode: t }), i({ type: "SUBMIT_MFA_CODE_SUCCESS" }), C?.(t);
+      await I({ mfaMethod: "totp", mfaCode: t }), o({ type: "SUBMIT_MFA_CODE_SUCCESS" }), M?.(t);
     } catch (t) {
-      const m = t instanceof Error ? t : new Error(typeof t == "string" ? t : "Verification failed");
-      u?.(m), i({
+      const a = t instanceof Error ? t : new Error(typeof t == "string" ? t : "Verification failed");
+      C?.(a), o({
         type: "SUBMIT_MFA_CODE_FAILURE",
         payload: {
-          error: m.message
+          error: a.message
         }
       });
     }
-  }, d = /* @__PURE__ */ o(
-    F,
+  }, u = /* @__PURE__ */ r(
+    A,
     {
-      autoFocus: r,
+      autoFocus: i,
       otp: e.mfaCode,
       error: e.error || void 0,
       isPending: e.isPending,
-      onOTPChange: h,
-      onSubmit: y,
+      onOTPChange: y,
+      onSubmit: h,
       passwordLength: 6,
       resendCountdown: null,
       successMessage: e.isSuccess ? "Verified!" : void 0
     }
   );
-  return s ? /* @__PURE__ */ o(a, { children: s({ step: e.step, Content: d }) }) : d;
-}, D = (r) => /* @__PURE__ */ o(a, { children: "Enter verification code" }), O = (r) => /* @__PURE__ */ o(A, { variant: "secondary", children: /* @__PURE__ */ o(U, {}) }), w = (r) => /* @__PURE__ */ o(a, { children: "Enter the 6-digit code from your authenticator app." }), j = {
+  return c ? /* @__PURE__ */ r(s, { children: c({ step: e.step, Content: u }) }) : u;
+}, D = (i) => /* @__PURE__ */ r(s, { children: "Enter verification code" }), w = (i) => /* @__PURE__ */ r(U, { variant: "secondary", children: /* @__PURE__ */ r(V, {}) }), P = (i) => /* @__PURE__ */ r(s, { children: "Enter the 6-digit code from your authenticator app." }), q = {
   content: v,
   title: D,
-  description: w,
-  image: O
+  description: P,
+  image: w
 };
 export {
   v as TotpContent,
-  w as TotpDescription,
-  O as TotpImage,
+  P as TotpDescription,
+  w as TotpImage,
   D as TotpTitle,
-  j as totpMethodConfig
+  q as totpMethodConfig
 };

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

@@ -2,20 +2,29 @@ import { APIError } from '@coinbase/cdp-hooks';
 import { FC, ReactNode } from 'react';
 import { MfaMethod } from '../EnrollMfa/types';
 export { type MfaMethod };
+export type VerifyMfaStep = "verification" | "list";
 export interface VerifyMfaMethodComponentProps {
     method?: MfaMethod;
-    step?: VerifyMfaState["step"];
+    step?: VerifyMfaStep;
 }
 export interface VerifyMfaState {
     method: MfaMethod;
     methods: MfaMethod[];
-    step: "verification";
+    step: VerifyMfaStep;
+    flowDirection: "left" | "right";
     mfaCode: string;
     error: string | APIError | null;
     isPending: boolean;
     isSuccess: boolean;
 }
 export type VerifyMfaAction = {
+    type: "SET_STEP";
+    payload: {
+        step: VerifyMfaStep;
+        flowDirection?: "left" | "right";
+        method?: MfaMethod;
+    };
+} | {
     type: "SET_METHOD";
     payload: {
         method: MfaMethod;
@@ -37,6 +46,16 @@ export type VerifyMfaAction = {
     payload: {
         error: string | APIError;
     };
+} | {
+    type: "INITIATE_MFA_VERIFICATION_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "SET_METHODS";
+    payload: {
+        methods: MfaMethod[];
+    };
 } | {
     type: "CLEAR_ERROR";
 } | {

package/dist/components/VerifyMfa/types.js

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

package/dist/components/VerifyMfa/useVerifyMfaReducer.d.ts

@@ -1,2 +1,3 @@
-import { VerifyMfaAction, VerifyMfaState } from './types';
+import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
+export declare const STEPS: readonly VerifyMfaStep[];
 export declare const useVerifyMfaReducer: (initialState: VerifyMfaState) => [VerifyMfaState, import('react').ActionDispatch<[action: VerifyMfaAction]>];

package/dist/components/VerifyMfa/useVerifyMfaReducer.js

@@ -1,11 +1,24 @@
 import { useReducer as o } from "react";
 import "@coinbase/cdp-hooks";
-function n(e, r) {
+import "@coinbase/cdp-core";
+const u = ["verification", "list"];
+function l(e, r) {
   switch (r.type) {
+    case "SET_STEP":
+      return {
+        ...e,
+        step: r.payload.step,
+        flowDirection: r.payload.flowDirection || e.flowDirection,
+        method: r.payload.method || e.method,
+        mfaCode: "",
+        error: null
+      };
     case "SET_METHOD":
       return {
         ...e,
         method: r.payload.method,
+        step: "verification",
+        flowDirection: "left",
         mfaCode: "",
         error: null
       };
@@ -36,6 +49,16 @@ function n(e, r) {
         isSuccess: !1,
         error: r.payload.error
       };
+    case "INITIATE_MFA_VERIFICATION_FAILURE":
+      return {
+        ...e,
+        error: r.payload.error
+      };
+    case "SET_METHODS":
+      return {
+        ...e,
+        methods: r.payload.methods
+      };
     case "CLEAR_ERROR":
       return {
         ...e,
@@ -43,9 +66,10 @@ function n(e, r) {
       };
     case "RESET_STATE":
       return {
-        method: e.method,
+        method: e.methods[0] || e.method,
         methods: e.methods,
         step: "verification",
+        flowDirection: "left",
         mfaCode: "",
         error: null,
         isPending: !1,
@@ -55,7 +79,8 @@ function n(e, r) {
       throw new Error("Unknown action type");
   }
 }
-const d = (e) => o(n, e);
+const i = (e) => o(l, e);
 export {
-  d as useVerifyMfaReducer
+  u as STEPS,
+  i as useVerifyMfaReducer
 };