@coinbase/cdp-react 0.0.88 → 0.0.89

package/dist/components/ExportWallet/index.js

@@ -57,6 +57,7 @@ import "../../utils/isApiError.js";
 import "../../utils/isEmailInvalid.js";
 import "../../utils/parseValuesFromPhoneNumber.js";
 import "../../utils/sendIframeMessage.js";
+import "../../hooks/usePhoneNumberState.js";
 import "@coinbase/cdp-core";
 import "../EnrollMfa/EnrollMfaDescription.js";
 import "../EnrollMfa/EnrollMfaFlow.js";
@@ -332,7 +333,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
       ]
     }
   ) });
-}, ie = ({
+}, se = ({
   address: o,
   children: e,
   onIframeReady: r,
@@ -365,7 +366,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
 };
 D.registerPackageVersion("react", q);
 export {
-  ie as E,
+  se as E,
   pt as ExportWallet,
   j as ExportWalletCopyAddress,
   B as ExportWalletCopyKeyButton,

package/dist/components/LinkAuth/LinkAuthItems.js

@@ -1,47 +1,49 @@
 import { jsx as l } from "react/jsx-runtime";
-import { c as I } from "../../chunks/lite.1fxw3LjI.js";
+import { c as u } from "../../chunks/lite.1fxw3LjI.js";
 import { useMemo as b } from "react";
 import "../../chunks/CDPReactProvider.BkmtXUv1.js";
-import { IconAppleLogo as d } from "../../icons/IconAppleLogo.js";
-import { IconEnvelope as f } from "../../icons/IconEnvelope.js";
-import { IconGoogleColorLogo as L } from "../../icons/IconGoogleColorLogo.js";
-import { IconPhone as g } from "../../icons/IconPhone.js";
-import { IconXLogo as _ } from "../../icons/IconXLogo.js";
-import { LinkAuthItem as A } from "./LinkAuthItem.js";
-import { useLinkAuthContext as P } from "./LinkAuthProvider.js";
+import { IconAppleLogo as g } from "../../icons/IconAppleLogo.js";
+import { IconEnvelope as d } from "../../icons/IconEnvelope.js";
+import { IconGoogleColorLogo as f } from "../../icons/IconGoogleColorLogo.js";
+import { IconPhone as L } from "../../icons/IconPhone.js";
+import { IconTelegramLogo as _ } from "../../icons/IconTelegramLogo.js";
+import { IconXLogo as A } from "../../icons/IconXLogo.js";
+import { LinkAuthItem as P } from "./LinkAuthItem.js";
+import { useLinkAuthContext as T } from "./LinkAuthProvider.js";
 import '../../assets/LinkAuthItems.css';const k = "LinkAuthItems-module__list___5AimM", x = {
   list: k
 }, M = {
-  email: { Icon: /* @__PURE__ */ l(f, { "aria-label": "Email" }), label: "Email" },
-  sms: { Icon: /* @__PURE__ */ l(g, { "aria-label": "Phone" }), label: "Phone" },
-  "oauth:google": { Icon: /* @__PURE__ */ l(L, { "aria-label": "Google" }), label: "Google" },
-  "oauth:apple": { Icon: /* @__PURE__ */ l(d, { "aria-label": "Apple" }), label: "Apple" },
-  "oauth:x": { Icon: /* @__PURE__ */ l(_, { "aria-label": "X" }), label: "X" }
-}, D = ({ children: m, className: s = "", onLink: e, ...c }) => {
-  const { state: p, dispatch: i } = P(), { authMethods: a, isPending: n, methodToLink: r } = p, h = b(() => a.map((o) => {
-    const { Icon: t, label: u } = M[o.method];
+  email: { Icon: /* @__PURE__ */ l(d, { "aria-label": "Email" }), label: "Email" },
+  sms: { Icon: /* @__PURE__ */ l(L, { "aria-label": "Phone" }), label: "Phone" },
+  "oauth:google": { Icon: /* @__PURE__ */ l(f, { "aria-label": "Google" }), label: "Google" },
+  "oauth:apple": { Icon: /* @__PURE__ */ l(g, { "aria-label": "Apple" }), label: "Apple" },
+  "oauth:x": { Icon: /* @__PURE__ */ l(A, { "aria-label": "X" }), label: "X" },
+  "oauth:telegram": { Icon: /* @__PURE__ */ l(_, { "aria-label": "Telegram" }), label: "Telegram" }
+}, O = ({ children: m, className: s = "", onLink: t, ...c }) => {
+  const { state: p, dispatch: a } = T(), { authMethods: i, isPending: r, methodToLink: n } = p, h = b(() => i.map((o) => {
+    const { Icon: e, label: I } = M[o.method];
     return {
       ...o,
-      icon: t,
-      label: u,
+      icon: e,
+      label: I,
       onLink: async () => {
-        i({ type: "LINK_AUTH_METHOD", payload: { method: o.method } }), await e?.(o.method);
+        a({ type: "LINK_AUTH_METHOD", payload: { method: o.method } }), await t?.(o.method);
       }
     };
-  }), [a, i, e]);
-  return /* @__PURE__ */ l("ul", { className: I(x.list, s), ...c, children: h.map(({ method: o, ...t }) => /* @__PURE__ */ l("li", { children: m?.({
-    ...t,
+  }), [i, a, t]);
+  return /* @__PURE__ */ l("ul", { className: u(x.list, s), ...c, children: h.map(({ method: o, ...e }) => /* @__PURE__ */ l("li", { children: m?.({
+    ...e,
     authMethod: o,
-    isPending: n && r === o
+    isPending: r && n === o
   }) || /* @__PURE__ */ l(
-    A,
+    P,
     {
-      ...t,
+      ...e,
       authMethod: o,
-      isPending: n && r === o
+      isPending: r && n === o
     }
   ) }, o)) });
 };
 export {
-  D as LinkAuthItems
+  O as LinkAuthItems
 };

package/dist/components/LinkAuth/LinkAuthProvider.js

@@ -1,14 +1,14 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useCurrentUser as c } from "@coinbase/cdp-hooks";
-import { createContext as p, useContext as M, useMemo as r, useReducer as A, useEffect as f } from "react";
+import { createContext as M, useContext as p, useMemo as r, useReducer as A, useEffect as f } from "react";
 import { u as L } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
 import { formatPhoneNumber as k } from "../../utils/formatPhoneNumber.js";
-const T = {
+const g = {
   methodToLink: null,
   authMethods: [],
   error: null,
   isPending: !1
-}, d = p(void 0), E = (e, t) => {
+}, d = M(void 0), T = (e, t) => {
   switch (t) {
     case "email":
       return {
@@ -35,11 +35,16 @@ const T = {
         userAlias: (e.authenticationMethods.x?.username ? `@${e.authenticationMethods.x.username}` : e.authenticationMethods.x?.email) ?? "",
         isLinked: !!e.authenticationMethods.x
       };
+    case "oauth:telegram":
+      return {
+        userAlias: e.authenticationMethods.telegram?.username ? `@${e.authenticationMethods.telegram.username}` : "",
+        isLinked: !!e.authenticationMethods.telegram
+      };
     default:
       return null;
   }
 };
-function g(e, t) {
+function E(e, t) {
   switch (t.type) {
     case "LINK_AUTH_METHOD":
       return {
@@ -71,33 +76,33 @@ function g(e, t) {
   }
 }
 const y = ({ children: e }) => {
-  const { currentUser: t } = c(), { authMethods: a } = L(), s = r(() => {
-    const n = [];
-    return a.forEach((i) => {
+  const { currentUser: t } = c(), { authMethods: n } = L(), a = r(() => {
+    const i = [];
+    return n.forEach((s) => {
       if (!t) {
-        n.push({
+        i.push({
           userAlias: "",
           isLinked: !1,
-          method: i
+          method: s
         });
         return;
       }
-      const h = E(t, i);
-      n.push({
-        userAlias: h?.userAlias ?? "",
-        isLinked: h?.isLinked ?? !1,
-        method: i
+      const u = T(t, s);
+      i.push({
+        userAlias: u?.userAlias ?? "",
+        isLinked: u?.isLinked ?? !1,
+        method: s
       });
-    }), n;
-  }, [t, a]), [u, o] = A(g, {
-    ...T,
-    authMethods: s
-  }), l = r(() => ({ state: u, dispatch: o }), [u, o]);
+    }), i;
+  }, [t, n]), [h, o] = A(E, {
+    ...g,
+    authMethods: a
+  }), l = r(() => ({ state: h, dispatch: o }), [h, o]);
   return f(() => {
-    o({ type: "SET_AUTH_METHODS", payload: { methods: s } });
-  }, [o, s]), /* @__PURE__ */ m(d.Provider, { value: l, children: e });
+    o({ type: "SET_AUTH_METHODS", payload: { methods: a } });
+  }, [o, a]), /* @__PURE__ */ m(d.Provider, { value: l, children: e });
 }, C = () => {
-  const e = M(d);
+  const e = p(d);
   if (!e)
     throw new Error("useLinkAuthContext must be used within a LinkAuthProvider");
   return e;

package/dist/components/LinkAuth/index.js

@@ -1,33 +1,33 @@
-import { jsx as r, jsxs as h, Fragment as C } from "react/jsx-runtime";
-import { useLinkOAuth as I } from "@coinbase/cdp-hooks";
-import { u as N } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
-import { useRef as d, useState as P, useCallback as a } from "react";
+import { jsx as r, jsxs as h, Fragment as I } from "react/jsx-runtime";
+import { useLinkOAuth as N } from "@coinbase/cdp-hooks";
+import { u as P } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
+import { useRef as d, useState as U, useCallback as a } from "react";
 import "../../chunks/CDPReactProvider.BkmtXUv1.js";
-import { useOauthStatusModal as U } from "../OAuthStatusModal/index.js";
-import { Banner as D } from "../ui/Banner/index.js";
-import { useTimeout as H } from "../../hooks/useTimeout.js";
-import { getMessageFromUnknownError as M } from "../../utils/getMessageFromUnknownError.js";
+import { useOauthStatusModal as D } from "../OAuthStatusModal/index.js";
+import { Banner as H } from "../ui/Banner/index.js";
+import { useTimeout as M } from "../../hooks/useTimeout.js";
+import { getMessageFromUnknownError as v } from "../../utils/getMessageFromUnknownError.js";
 import "libphonenumber-js";
-import { toOAuthProviderType as v } from "../../utils/toOAuthProviderType.js";
-import { L as V, a as j } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
-import { u as kt } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
-import { LinkAuthFlowBackButton as K } from "./LinkAuthFlowBackButton.js";
-import { LinkAuthItem as pt } from "./LinkAuthItem.js";
-import { LinkAuthItems as At } from "./LinkAuthItems.js";
-import { useLinkAuthContext as O, LinkAuthProvider as W } from "./LinkAuthProvider.js";
-import { LinkAuthTitle as $ } from "./LinkAuthTitle.js";
-import { methodToView as y } from "./utils.js";
-import '../../assets/LinkAuth.css';const b = "LinkAuth-module__header___0UuxP", G = "LinkAuth-module__error___XUo4W", k = {
+import { toOAuthProviderType as V } from "../../utils/toOAuthProviderType.js";
+import { L as j, a as K } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
+import { u as ft } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
+import { LinkAuthFlowBackButton as W } from "./LinkAuthFlowBackButton.js";
+import { LinkAuthItem as Lt } from "./LinkAuthItem.js";
+import { LinkAuthItems as _t } from "./LinkAuthItems.js";
+import { useLinkAuthContext as x, LinkAuthProvider as $ } from "./LinkAuthProvider.js";
+import { LinkAuthTitle as b } from "./LinkAuthTitle.js";
+import { methodToView as O } from "./utils.js";
+import '../../assets/LinkAuth.css';const G = "LinkAuth-module__header___0UuxP", J = "LinkAuth-module__error___XUo4W", k = {
   "link-auth": "LinkAuth-module__link-auth___kPJao",
-  header: b,
-  error: G
-}, J = ({ role: o = "alert", ...c }) => {
-  const { state: i } = O(), { error: s } = i;
-  return s ? /* @__PURE__ */ r(D, { variant: "error", role: o, ...c, children: s }) : null;
-}, X = ({ children: o, className: c = "", onLinkSuccess: i, ...s }) => {
-  const { linkOAuth: f } = I(), { persistOAuthState: p } = U(), { state: u, dispatch: n } = O(), { methodToLink: x } = u, L = d(null), l = d(null), { schedule: A } = H(), E = y(x), _ = d(E), [B, m] = P("left"), e = a(
+  header: G,
+  error: J
+}, X = ({ role: o = "alert", ...c }) => {
+  const { state: i } = x(), { error: s } = i;
+  return s ? /* @__PURE__ */ r(H, { variant: "error", role: o, ...c, children: s }) : null;
+}, q = ({ children: o, className: c = "", onLinkSuccess: i, ...s }) => {
+  const { linkOAuth: f } = N(), { persistOAuthState: p, cleanupOAuthState: L } = D(), { state: u, dispatch: n } = x(), { methodToLink: E } = u, A = d(null), l = d(null), { schedule: _ } = M(), S = O(E), T = d(S), [B, m] = U("left"), e = a(
     (t) => {
-      _.current !== t && (_.current = t, L.current?.transition.toggle(t), t === "list" && n({ type: "RESET_STATE" }), (t === "email" || t === "sms") && n({ type: "LINK_AUTH_METHOD", payload: { method: t } }));
+      T.current !== t && (T.current = t, A.current?.transition.toggle(t), t === "list" && n({ type: "RESET_STATE" }), (t === "email" || t === "sms") && n({ type: "LINK_AUTH_METHOD", payload: { method: t } }));
     },
     [n]
   ), F = a(() => {
@@ -37,56 +37,56 @@ import '../../assets/LinkAuth.css';const b = "LinkAuth-module__header___0UuxP",
     }
     e("list");
   }, [e]), R = a(() => {
-    m("left"), i?.(u.methodToLink), A(() => e("list"), 800);
-  }, [e, u.methodToLink, i, A]), S = a(
+    m("left"), i?.(u.methodToLink), _(() => e("list"), 800);
+  }, [e, u.methodToLink, i, _]), w = a(
     async (t) => {
       if (m("left"), t?.startsWith("oauth:")) {
-        const g = v(t);
-        if (g)
+        const y = V(t);
+        if (y)
           try {
-            await f(g), p(!0);
-          } catch (w) {
-            n({
+            p(!0), await f(y);
+          } catch (C) {
+            L(), n({
               type: "LINK_AUTH_METHOD_ERROR",
-              payload: { error: M(w) }
+              payload: { error: v(C) }
             });
           }
       } else
-        e(y(t));
+        e(O(t));
     },
-    [f, e, p, n]
-  ), T = typeof o == "function" ? o(u) : o;
+    [f, e, p, L, n]
+  ), g = typeof o == "function" ? o(u) : o;
   return /* @__PURE__ */ r("div", { className: `${k["link-auth"]} ${c}`, ...s, children: /* @__PURE__ */ h(
-    V,
+    j,
     {
       direction: B,
       onBack: F,
-      onLink: S,
+      onLink: w,
       onLinkSuccess: R,
       signInRef: l,
-      transitionRef: L,
+      transitionRef: A,
       children: [
-        T,
-        !T && /* @__PURE__ */ h(C, { children: [
+        g,
+        !g && /* @__PURE__ */ h(I, { children: [
           /* @__PURE__ */ h("div", { className: k.header, children: [
-            /* @__PURE__ */ r($, {}),
-            /* @__PURE__ */ r(K, {})
+            /* @__PURE__ */ r(b, {}),
+            /* @__PURE__ */ r(W, {})
           ] }),
-          /* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(J, {}) }),
-          /* @__PURE__ */ r(j, {})
+          /* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(X, {}) }),
+          /* @__PURE__ */ r(K, {})
         ] })
       ]
     }
   ) });
-}, mt = (o) => (N("manage_auth"), /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(X, { ...o }) }));
+}, ht = (o) => (P("manage_auth"), /* @__PURE__ */ r($, { children: /* @__PURE__ */ r(q, { ...o }) }));
 export {
-  mt as LinkAuth,
-  J as LinkAuthError,
-  j as LinkAuthFlow,
-  K as LinkAuthFlowBackButton,
-  pt as LinkAuthItem,
-  At as LinkAuthItems,
-  $ as LinkAuthTitle,
-  O as useLinkAuthContext,
-  kt as useLinkAuthFlow
+  ht as LinkAuth,
+  X as LinkAuthError,
+  K as LinkAuthFlow,
+  W as LinkAuthFlowBackButton,
+  Lt as LinkAuthItem,
+  _t as LinkAuthItems,
+  b as LinkAuthTitle,
+  x as useLinkAuthContext,
+  ft as useLinkAuthFlow
 };

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

@@ -6,6 +6,7 @@ type OAuthStatusModalContentProps = {
 };
 export declare const useOauthStatusModal: () => {
     persistOAuthState: (isAccountLink?: boolean) => void;
+    cleanupOAuthState: () => void;
 };
 export declare const OAuthStatusModal: () => import("react/jsx-runtime").JSX.Element;
 export declare const OAuthStatusModalContent: ({ isAccountLink, handleClose, }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OAuthStatusModal/index.js

@@ -1,98 +1,101 @@
-import { jsx as s, jsxs as r, Fragment as S } from "react/jsx-runtime";
+import { jsx as s, jsxs as r, Fragment as f } from "react/jsx-runtime";
 import "@coinbase/cdp-core";
-import { useOAuthState as I } from "@coinbase/cdp-hooks";
+import { useOAuthState as N } from "@coinbase/cdp-hooks";
 import { u as b } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
-import { useCallback as N, useState as O, useEffect as h, useRef as A } from "react";
-import { a as $ } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
+import { useCallback as g, useState as A, useEffect as S, useRef as I } from "react";
+import { a as v } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
 import { CoinbaseFooter as k } from "../ui/CoinbaseFooter/index.js";
 import { LoadingSpinner as w } from "../ui/LoadingSpinner/index.js";
-import { Modal as E, ModalContent as L, ModalTitle as y, ModalDescription as R } from "../ui/Modal/index.js";
+import { Modal as L, ModalContent as E, ModalTitle as y, ModalDescription as R } from "../ui/Modal/index.js";
 import { SwitchFadeTransition as P } from "../ui/SwitchFadeTransition/index.js";
 import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
 import { useTimer as U } from "../../hooks/useTimer.js";
 import { IconAppleLogo as K } from "../../icons/IconAppleLogo.js";
 import { IconCheck as x } from "../../icons/IconCheck.js";
 import { IconGoogleColorLogo as G } from "../../icons/IconGoogleColorLogo.js";
-import { IconXLogo as H } from "../../icons/IconXLogo.js";
-import { IconXMark as q } from "../../icons/IconXMark.js";
+import { IconTelegramLogo as H } from "../../icons/IconTelegramLogo.js";
+import { IconXLogo as q } from "../../icons/IconXLogo.js";
+import { IconXMark as Y } from "../../icons/IconXMark.js";
 import { capitalize as _ } from "../../utils/capitalize.js";
-import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__status___vU6x7", j = "OAuthStatusModal-module__graphic___2fKoa", D = "OAuthStatusModal-module__pad___oooMz", F = "OAuthStatusModal-module__spinner___Q3dYq", z = "OAuthStatusModal-module__icon___Lj5Gf", V = "OAuthStatusModal-module__subhead___Pg9GI", W = "OAuthStatusModal-module__description___0qOZY", X = "OAuthStatusModal-module__ring___mKwSb", J = "OAuthStatusModal-module__invisible___IeRd0", t = {
+import '../../assets/OAuthStatusModal.css';const j = "OAuthStatusModal-module__status___vU6x7", D = "OAuthStatusModal-module__graphic___2fKoa", F = "OAuthStatusModal-module__pad___oooMz", z = "OAuthStatusModal-module__spinner___Q3dYq", V = "OAuthStatusModal-module__icon___Lj5Gf", W = "OAuthStatusModal-module__subhead___Pg9GI", X = "OAuthStatusModal-module__description___0qOZY", J = "OAuthStatusModal-module__ring___mKwSb", Q = "OAuthStatusModal-module__invisible___IeRd0", t = {
   "oauth-status-modal": "OAuthStatusModal-module__oauth-status-modal___I69Ii",
   "transition-wrapper": "OAuthStatusModal-module__transition-wrapper___TmPRh",
-  status: Y,
-  graphic: j,
-  pad: D,
-  spinner: F,
-  icon: z,
+  status: j,
+  graphic: D,
+  pad: F,
+  spinner: z,
+  icon: V,
   "icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
   "icon-error": "OAuthStatusModal-module__icon-error___psI7m",
-  subhead: V,
-  description: W,
-  ring: X,
+  subhead: W,
+  description: X,
+  ring: J,
   "ring-success": "OAuthStatusModal-module__ring-success___unyM9",
   "ring-error": "OAuthStatusModal-module__ring-error___OsgqU",
-  invisible: J
-}, p = "cdp-react-sign-in-with-oauth-provider-name", g = "cdp-react-sign-in-with-oauth-is-account-link", Q = ["pending", "success", "error"], It = () => {
-  const n = $() || "";
-  return { persistOAuthState: N(
-    (e) => {
+  invisible: Q
+}, p = "cdp-react-sign-in-with-oauth-provider-name", h = "cdp-react-sign-in-with-oauth-is-account-link", Z = ["pending", "success", "error"], vt = () => {
+  const n = v() || "", o = g(
+    (a) => {
       sessionStorage.setItem(p, n), sessionStorage.setItem(
-        g,
-        e ? "true" : "false"
+        h,
+        a ? "true" : "false"
       );
     },
     [n]
-  ) };
-}, Nt = () => {
+  ), e = g(() => {
+    sessionStorage.removeItem(p), sessionStorage.removeItem(h);
+  }, []);
+  return { persistOAuthState: o, cleanupOAuthState: e };
+}, $t = () => {
   b("oauth_status_modal");
-  const [n, o] = O(!1), { oauthState: e } = I(), [d, a] = O(!1), c = $(), u = e?.providerType || "google";
-  return h(() => {
+  const [n, o] = A(!1), { oauthState: e } = N(), [a, i] = A(!1), u = v(), l = e?.providerType || "google";
+  return S(() => {
     if (e?.status === "pending" || e?.status === "error" || e?.status === "success") {
-      const l = sessionStorage.getItem(p);
-      if (l === null || l !== c)
+      const d = sessionStorage.getItem(p);
+      if (d === null || d !== u)
         return;
       sessionStorage.removeItem(p), o(!0);
-      const m = sessionStorage.getItem(g) === "true";
-      sessionStorage.removeItem(g), a(m);
+      const m = sessionStorage.getItem(h) === "true";
+      sessionStorage.removeItem(h), i(m);
     }
-  }, [e?.status, c]), /* @__PURE__ */ s(E, { open: n, onOpenChange: o, children: /* @__PURE__ */ r(L, { children: [
+  }, [e?.status, u]), /* @__PURE__ */ s(L, { open: n, onOpenChange: o, children: /* @__PURE__ */ r(E, { children: [
     /* @__PURE__ */ s(M, { children: /* @__PURE__ */ s(y, { children: "OAuth Status" }) }),
     /* @__PURE__ */ s(M, { children: /* @__PURE__ */ r(R, { children: [
-      d ? `Linking your ${u} account` : `Signing in with ${u}`,
+      a ? `Linking your ${l} account` : `Signing in with ${l}`,
       " ",
       e?.status ? `${e?.status === "success" ? "successful" : e?.status === "error" ? "failed" : "pending"}` : ""
     ] }) }),
-    /* @__PURE__ */ s(Z, { isAccountLink: d, handleClose: () => o(!1) })
+    /* @__PURE__ */ s(B, { isAccountLink: a, handleClose: () => o(!1) })
   ] }) });
-}, Z = ({
+}, B = ({
   isAccountLink: n,
   handleClose: o
 }) => {
-  const { oauthState: e } = I(), d = e?.providerType || "google", { timeRemaining: a, start: c, reset: u } = U(), l = A(null), m = A(null), v = 250, f = N((i) => {
-    m.current === i || i === void 0 || (m.current = i, l.current?.transition.toggle(i));
+  const { oauthState: e } = N(), a = e?.providerType || "google", { timeRemaining: i, start: u, reset: l } = U(), d = I(null), m = I(null), $ = 250, O = g((c) => {
+    m.current === c || c === void 0 || (m.current = c, d.current?.transition.toggle(c));
   }, []);
-  return h(() => {
-    f(e?.status), e?.status === "success" && c(3);
-  }, [e?.status, f, c]), h(() => {
-    a !== null && a <= 0 && (u(), o());
-  }, [a, u, o]), /* @__PURE__ */ r("div", { className: t["oauth-status-modal"], children: [
+  return S(() => {
+    O(e?.status), e?.status === "success" && u(3);
+  }, [e?.status, O, u]), S(() => {
+    i !== null && i <= 0 && (l(), o());
+  }, [i, l, o]), /* @__PURE__ */ r("div", { className: t["oauth-status-modal"], children: [
     /* @__PURE__ */ s(
       P,
       {
         animateHeight: !1,
-        timeout: v,
-        items: Q,
+        timeout: $,
+        items: Z,
         initialEntered: !1,
-        transitionRef: l,
+        transitionRef: d,
         className: t["transition-wrapper"],
-        children: ({ itemKey: i, ...C }) => {
-          const T = et[i];
-          return /* @__PURE__ */ s("div", { ...C, className: t.status, children: /* @__PURE__ */ s(
-            T,
+        children: ({ itemKey: c, ...T }) => {
+          const C = ot[c];
+          return /* @__PURE__ */ s("div", { ...T, className: t.status, children: /* @__PURE__ */ s(
+            C,
             {
               isAccountLink: n,
-              timeRemaining: a,
-              provider: d
+              timeRemaining: i,
+              provider: a
             }
           ) });
         }
@@ -100,9 +103,9 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
     ),
     /* @__PURE__ */ s(k, {})
   ] });
-}, B = ({ isAccountLink: n, provider: o }) => {
-  const e = ot[o];
-  return /* @__PURE__ */ r(S, { children: [
+}, tt = ({ isAccountLink: n, provider: o }) => {
+  const e = nt[o];
+  return /* @__PURE__ */ r(f, { children: [
     /* @__PURE__ */ r("div", { className: t.graphic, children: [
       /* @__PURE__ */ s(
         w,
@@ -118,11 +121,11 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
     /* @__PURE__ */ s("p", { className: t.subhead, children: n ? `Linking your ${_(o)} account` : `Signing in with ${_(o)}` }),
     /* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
   ] });
-}, tt = ({
+}, st = ({
   isAccountLink: n,
   timeRemaining: o,
   provider: e
-}) => /* @__PURE__ */ r(S, { children: [
+}) => /* @__PURE__ */ r(f, { children: [
   /* @__PURE__ */ r("div", { className: t.graphic, children: [
     /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
     /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(x, {}) })
@@ -132,27 +135,28 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
     "This window will automatically close in ",
     o ?? "soon"
   ] })
-] }), st = ({ isAccountLink: n }) => /* @__PURE__ */ r(S, { children: [
+] }), et = ({ isAccountLink: n }) => /* @__PURE__ */ r(f, { children: [
   /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
     /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(q, {}) })
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(Y, {}) })
   ] }),
   /* @__PURE__ */ s("p", { className: t.subhead, children: n ? "Account linking failed" : "Sign in failed" }),
   /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." })
-] }), et = {
-  pending: B,
-  success: tt,
-  error: st
-}, ot = {
+] }), ot = {
+  pending: tt,
+  success: st,
+  error: et
+}, nt = {
   google: G,
   apple: K,
-  x: H
+  x: q,
+  telegram: H
 };
 export {
-  g as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
+  h as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
   p as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
-  Nt as OAuthStatusModal,
-  Z as OAuthStatusModalContent,
-  Nt as default,
-  It as useOauthStatusModal
+  $t as OAuthStatusModal,
+  B as OAuthStatusModalContent,
+  $t as default,
+  vt as useOauthStatusModal
 };

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,23 +1,24 @@
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useCallback as v, useMemo as y } from "react";
 import "../../chunks/CDPReactProvider.BkmtXUv1.js";
-import { useSignInWithOAuth as S } from "./hooks/useSignInWithOAuth.js";
-import { useSignInContext as _ } from "./SignInProvider.js";
-import { Button as C } from "../ui/Button/index.js";
+import { useSignInWithOAuth as C } from "./hooks/useSignInWithOAuth.js";
+import { useSignInContext as g } from "./SignInProvider.js";
+import { Button as S } from "../ui/Button/index.js";
 import { ServerError as M } from "../ui/ServerError/index.js";
 import { IconAppleLogo as k } from "../../icons/IconAppleLogo.js";
 import { IconEnvelope as B } from "../../icons/IconEnvelope.js";
 import { IconGoogleLogo as E } from "../../icons/IconGoogleLogo.js";
 import { IconPhone as P } from "../../icons/IconPhone.js";
-import { IconXLogo as O } from "../../icons/IconXLogo.js";
+import { IconTelegramLogo as O } from "../../icons/IconTelegramLogo.js";
+import { IconXLogo as w } from "../../icons/IconXLogo.js";
 import { toOAuthProviderType as b } from "../../utils/toOAuthProviderType.js";
-import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+import '../../assets/SignInAuthMethodButtons.css';const T = "SignInAuthMethodButtons-module__divider___zphEh", o = {
   "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
   "auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
   "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
   "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
-  divider: w
-}, g = {
+  divider: T
+}, _ = {
   email: {
     label: "Continue with email",
     icon: /* @__PURE__ */ n(B, {})
@@ -36,41 +37,45 @@ import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodBut
   },
   "oauth:x": {
     label: "Continue with X",
+    icon: /* @__PURE__ */ n(w, {})
+  },
+  "oauth:telegram": {
+    label: "Continue with Telegram",
     icon: /* @__PURE__ */ n(O, {})
   }
-}, U = ({ activeMethod: u }) => {
+}, q = ({ activeMethod: a }) => {
   const {
-    state: { authMethods: a }
-  } = _(), {
-    signInWithOAuth: l,
+    state: { authMethods: l }
+  } = g(), {
+    signInWithOAuth: u,
     isPending: s,
     error: h,
     oauthProvider: c
-  } = S(), m = v(
+  } = C(), m = v(
     async (t) => {
-      const e = b(t);
-      e && l(e);
+      const i = b(t);
+      i && u(i);
     },
-    [l]
-  ), { dispatch: d } = _(), i = y(() => (a || ["email"]).map((t) => {
-    if (!g[t])
+    [u]
+  ), { dispatch: p } = g(), e = y(() => (l || ["email"]).map((t) => {
+    if (!_[t])
       return null;
-    const { label: e, icon: f } = g[t], p = t.startsWith("oauth:"), A = p ? () => m(t) : () => d({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), I = p && c.current === b(t) && s;
+    const { label: i, icon: f } = _[t], d = t.startsWith("oauth:"), A = d ? () => m(t) : () => p({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), I = d && c.current === b(t) && s;
     return {
       key: t,
-      label: e,
+      label: i,
       icon: f,
       onClick: A,
       isPending: I
     };
-  }).filter((t) => t !== null), [a, d, m, s, c]);
-  return !i.length || i.length === 1 && i[0].key === u ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
+  }).filter((t) => t !== null), [l, p, m, s, c]);
+  return !e.length || e.length === 1 && e[0].key === a ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
     /* @__PURE__ */ r("div", { className: o.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
-    i.map((t) => t.key === u ? null : /* @__PURE__ */ r(
-      C,
+    e.map((t) => t.key === a ? null : /* @__PURE__ */ r(
+      S,
       {
         "aria-label": t.ariaLabel,
         className: o["auth-btn"],
@@ -89,5 +94,5 @@ import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodBut
   ] });
 };
 export {
-  U as SignInAuthMethodButtons
+  q as SignInAuthMethodButtons
 };

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

@@ -1,27 +1,30 @@
-import { useSignInWithOAuth as g } from "@coinbase/cdp-hooks";
-import { useState as c, useRef as f, useCallback as m } from "react";
-import { useOauthStatusModal as A } from "../../OAuthStatusModal/index.js";
-import { isApiError as I } from "../../../utils/isApiError.js";
+import { useSignInWithOAuth as f } from "@coinbase/cdp-hooks";
+import { useState as l, useRef as m, useCallback as A } from "react";
+import { useOauthStatusModal as I } from "../../OAuthStatusModal/index.js";
+import { isApiError as O } from "../../../utils/isApiError.js";
 const E = () => {
-  const { signInWithOAuth: n } = g(), [r, s] = c(!1), [l, e] = c(null), o = f(null), i = "An error occurred while signing in. Please try again.", { persistOAuthState: u } = A();
+  const { signInWithOAuth: n } = f(), [r, e] = l(!1), [h, s] = l(null), o = m(null), i = "An error occurred while signing in. Please try again.", { persistOAuthState: u, cleanupOAuthState: a } = I();
   return {
-    signInWithOAuth: m(
-      async (a) => {
+    signInWithOAuth: A(
+      async (c) => {
         if (!r) {
-          o.current = a, s(!0), e(null);
+          o.current = c, e(!0), s(null);
           try {
-            await n(a), u(!1);
+            u(!1), await n(c);
           } catch (t) {
-            const h = I(t) ? t : t instanceof Error && t.message || i;
-            e(h), s(!1), console.error(t);
+            a();
+            const g = O(t) ? t : t instanceof Error && t.message || i;
+            s(g), console.error(t);
+          } finally {
+            e(!1);
           }
         }
       },
-      [r, n, u]
+      [r, n, u, a]
     ),
     oauthProvider: o,
     isPending: r,
-    error: l
+    error: h
   };
 };
 export {

package/dist/components/forms/PhoneNumberForm/index.d.ts

@@ -1,6 +1,6 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { FormHTMLAttributes, ReactNode } from 'react';
-import { PhoneNumberInputProps } from '../PhoneNumberInput/PhoneNumberInput';
+import { PhoneNumberInputProps } from '../PhoneNumberInput';
 export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
     countryCode: PhoneNumberInputProps["countryCode"];
     countryOptions?: PhoneNumberInputProps["countryOptions"];

package/dist/components/forms/PhoneNumberInput/index.d.ts

@@ -1,5 +1,5 @@
 import { CountryCode } from 'libphonenumber-js';
-import { InputProps } from '../Input/Input';
+import { InputProps } from '../Input';
 import { CountryOption } from '../../../data/countries';
 import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
 export interface PhoneNumberInputProps extends Omit<InputProps, "value" | "onChange"> {

package/dist/components/ui/Badge/index.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     children?: ReactNode;
     variant?: "primary" | "secondary" | "warning";
 }
 export declare const Badge: ({ children, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ui/Banner/index.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-interface BannerProps extends HTMLAttributes<HTMLElement> {
+export interface BannerProps extends HTMLAttributes<HTMLElement> {
     icon?: ReactNode;
     variant?: "success" | "warning" | "error";
 }
 export declare const Banner: ({ className, children, icon, variant, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/icons/IconTelegramLogo.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconTelegramLogo: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconTelegramLogo.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as C } from "./SvgIcon.js";
+const n = (r) => /* @__PURE__ */ o(C, { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", ...r, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M41.4193 7.30899C41.4193 7.30899 45.3046 5.79399 44.9808 9.47328C44.8729 10.9883 43.9016 16.2908 43.1461 22.0262L40.5559 39.0159C40.5559 39.0159 40.3401 41.5048 38.3974 41.9377C36.4547 42.3705 33.5408 40.4227 33.0011 39.9898C32.5694 39.6652 24.9068 34.7955 22.2086 32.4148C21.4531 31.7655 20.5897 30.4669 22.3165 28.9519L33.6487 18.1305C34.9438 16.8319 36.2389 13.8019 30.8426 17.4812L15.7331 27.7616C15.7331 27.7616 14.0063 28.8437 10.7686 27.8698L3.75342 25.7055C3.75342 25.7055 1.16321 24.0823 5.58815 22.459C16.3807 17.3729 29.6555 12.1786 41.4193 7.30899Z"
+  }
+) });
+export {
+  n as IconTelegramLogo
+};

package/dist/index.d.ts

@@ -26,4 +26,5 @@ export * from './theme';
 export * from './icons';
 export * from './utils';
 export { useVerifyMfaModal, type UseVerifyMfaModalOptions, type UseVerifyMfaModalReturn, } from './hooks/useVerifyMfaModal';
+export { usePhoneNumberState, type UsePhoneNumberStateOptions, type UsePhoneNumberStateResult, } from './hooks/usePhoneNumberState';
 export { type IframeTheme } from './types/secureIframe';

package/dist/index.js

@@ -2,46 +2,46 @@ import "./chunks/useSendComponentCallOnce.DGjALrnZ.js";
 import "react";
 import "./version.js";
 import { AuthButton as a } from "./components/AuthButton/index.js";
-import { c as l, A as p, C as x, O as i, V as s, d as M, e as d, f as u, u as c, a as I, b as g } from "./chunks/CDPReactProvider.BkmtXUv1.js";
+import { c as p, A as l, C as x, O as i, V as s, d as M, e as u, f as d, u as c, a as I, b as g } from "./chunks/CDPReactProvider.BkmtXUv1.js";
 import { CopyAddress as C } from "./components/CopyAddress/index.js";
-import { CopyEvmKeyButton as T } from "./components/CopyEvmKeyButton/index.js";
-import { CopySolanaKeyButton as S } from "./components/CopySolanaKeyButton/index.js";
+import { CopyEvmKeyButton as S } from "./components/CopyEvmKeyButton/index.js";
+import { CopySolanaKeyButton as h } from "./components/CopySolanaKeyButton/index.js";
 import { EnrollMfa as A, EnrollMfaError as k } from "./components/EnrollMfa/index.js";
 import { EnrollMfaModal as B, EnrollMfaModalContent as L, EnrollMfaModalTrigger as w } from "./components/EnrollMfaModal/index.js";
-import { ExportWallet as D, ExportWalletCopyAddress as b, ExportWalletCopyKeyButton as P, ExportWalletFooter as v, E as O, a as H, b as R, c as U, d as _, ExportWalletTitle as z, ExportWalletWarning as K } from "./components/ExportWallet/index.js";
+import { ExportWallet as b, ExportWalletCopyAddress as D, ExportWalletCopyKeyButton as P, ExportWalletFooter as v, E as O, a as H, b as R, c as U, d as _, ExportWalletTitle as z, ExportWalletWarning as K } from "./components/ExportWallet/index.js";
 import { Fund as j, FundFooter as G } from "./components/Fund/index.js";
 import { FundModal as q, FundModalContent as J, FundModalTrigger as Q } from "./components/FundModal/index.js";
 import { LinkAuth as Z, LinkAuthError as $ } from "./components/LinkAuth/index.js";
 import { LinkAuthModal as ro, LinkAuthModalContent as eo, LinkAuthModalTrigger as to } from "./components/LinkAuthModal/index.js";
 import { SendEvmTransactionButton as fo } from "./components/SendEvmTransactionButton/index.js";
 import { SendSolanaTransactionButton as mo } from "./components/SendSolanaTransactionButton/index.js";
-import { SignIn as po } from "./components/SignIn/index.js";
+import { SignIn as lo } from "./components/SignIn/index.js";
 import { useSignInReducer as io } from "./components/SignIn/useSignInReducer.js";
 import { SignInModal as Mo, SignInModalContent as uo, SignInModalTrigger as co } from "./components/SignInModal/index.js";
 import { SignOutButton as go } from "./components/SignOutButton/index.js";
 import { ThemeProvider as Co, useTheme as yo } from "./components/ThemeProvider/index.js";
-import { VerifyMfaInline as Fo, VerifyMfaInlineBackButton as So, VerifyMfaInlineFlow as ho, useVerifyMfaInlineContext as Ao } from "./components/VerifyMfaInline/index.js";
+import { VerifyMfaInline as To, VerifyMfaInlineBackButton as ho, VerifyMfaInlineFlow as Fo, useVerifyMfaInlineContext as Ao } from "./components/VerifyMfaInline/index.js";
 import { Button as Vo } from "./components/ui/Button/index.js";
-import { Modal as Lo, ModalClose as wo, ModalContent as Wo, ModalDescription as Do, ModalTitle as bo, ModalTrigger as Po } from "./components/ui/Modal/index.js";
+import { Modal as Lo, ModalClose as wo, ModalContent as Wo, ModalDescription as bo, ModalTitle as Do, ModalTrigger as Po } from "./components/ui/Modal/index.js";
 import { cssVariables as Oo } from "./theme/cssVariables.js";
 import { theme as Ro } from "./theme/theme.js";
 import { borderRadius as _o, borderRadiusComponents as zo, borderRadiusSemantic as Ko, colors as No, colorsBase as jo, colorsComponents as Go, colorsSemantic as Xo, font as qo, fontComponents as Jo, fontSemantic as Qo, tokens as Yo, zIndex as Zo, zIndexComponents as $o, zIndexSemantic as or } from "./theme/tokens.js";
 import { flattenTokensObject as er, themeToCssVariables as tr } from "./theme/utils.js";
 import { IconAppleLogo as fr } from "./icons/IconAppleLogo.js";
 import { IconArrowLeft as mr } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as pr } from "./icons/IconArrowsUpDown.js";
+import { IconArrowsUpDown as lr } from "./icons/IconArrowsUpDown.js";
 import { IconCheck as ir } from "./icons/IconCheck.js";
 import { IconCheckCircle as Mr } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as ur } from "./icons/IconChevronDown.js";
+import { IconChevronDown as dr } from "./icons/IconChevronDown.js";
 import { IconCopy as Ir } from "./icons/IconCopy.js";
 import { IconEnvelope as Er } from "./icons/IconEnvelope.js";
 import { IconExclamationCircle as yr } from "./icons/IconExclamationCircle.js";
-import { IconExclamationTriangle as Fr } from "./icons/IconExclamationTriangle.js";
-import { IconGoogleLogo as hr } from "./icons/IconGoogleLogo.js";
+import { IconExclamationTriangle as Tr } from "./icons/IconExclamationTriangle.js";
+import { IconGoogleLogo as Fr } from "./icons/IconGoogleLogo.js";
 import { IconLock as kr } from "./icons/IconLock.js";
 import { IconMinus as Br } from "./icons/IconMinus.js";
 import { IconPhone as wr } from "./icons/IconPhone.js";
-import { IconPinCode as Dr } from "./icons/IconPinCode.js";
+import { IconPinCode as br } from "./icons/IconPinCode.js";
 import { IconPlus as Pr } from "./icons/IconPlus.js";
 import { IconShield as Or } from "./icons/IconShield.js";
 import { IconSmartPhone as Rr } from "./icons/IconSmartPhone.js";
@@ -52,68 +52,69 @@ import { isApiError as Xr } from "./utils/isApiError.js";
 import { isEmailInvalid as Jr } from "./utils/isEmailInvalid.js";
 import { parseValuesFromPhoneNumber as Yr } from "./utils/parseValuesFromPhoneNumber.js";
 import { sendIframeMessage as $r } from "./utils/sendIframeMessage.js";
+import { usePhoneNumberState as re } from "./hooks/usePhoneNumberState.js";
 import "@coinbase/cdp-core";
-import { EnrollMfaDescription as re } from "./components/EnrollMfa/EnrollMfaDescription.js";
-import { EnrollMfaFlow as te } from "./components/EnrollMfa/EnrollMfaFlow.js";
-import { EnrollMfaFlowBackButton as fe } from "./components/EnrollMfa/EnrollMfaFlowBackButton.js";
-import { EnrollMfaFooter as me } from "./components/EnrollMfa/EnrollMfaFooter.js";
-import { EnrollMfaImage as pe } from "./components/EnrollMfa/EnrollMfaImage.js";
-import { EnrollMfaItem as ie } from "./components/EnrollMfa/EnrollMfaItem.js";
-import { EnrollMfaItems as Me } from "./components/EnrollMfa/EnrollMfaItems.js";
-import { EnrollMfaTitle as ue } from "./components/EnrollMfa/EnrollMfaTitle.js";
-import { useEnrollMfaContext as Ie } from "./components/EnrollMfa/EnrollMfaProvider.js";
-import { useEnrollMfaFlow as Ee } from "./components/EnrollMfa/EnrollMfaFlowProvider.js";
-import { FundForm as ye } from "./components/Fund/FundForm.js";
+import { EnrollMfaDescription as te } from "./components/EnrollMfa/EnrollMfaDescription.js";
+import { EnrollMfaFlow as fe } from "./components/EnrollMfa/EnrollMfaFlow.js";
+import { EnrollMfaFlowBackButton as me } from "./components/EnrollMfa/EnrollMfaFlowBackButton.js";
+import { EnrollMfaFooter as le } from "./components/EnrollMfa/EnrollMfaFooter.js";
+import { EnrollMfaImage as ie } from "./components/EnrollMfa/EnrollMfaImage.js";
+import { EnrollMfaItem as Me } from "./components/EnrollMfa/EnrollMfaItem.js";
+import { EnrollMfaItems as de } from "./components/EnrollMfa/EnrollMfaItems.js";
+import { EnrollMfaTitle as Ie } from "./components/EnrollMfa/EnrollMfaTitle.js";
+import { useEnrollMfaContext as Ee } from "./components/EnrollMfa/EnrollMfaProvider.js";
+import { useEnrollMfaFlow as ye } from "./components/EnrollMfa/EnrollMfaFlowProvider.js";
+import { FundForm as Te } from "./components/Fund/FundForm.js";
 import { FundTitle as Fe } from "./components/Fund/FundTitle.js";
-import { useFundContext as he } from "./components/Fund/FundProvider.js";
-import { a as ke, u as Ve } from "./chunks/LinkAuthFlow.B4FAtf4V.js";
-import { LinkAuthFlowBackButton as Le } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
-import { LinkAuthItem as We } from "./components/LinkAuth/LinkAuthItem.js";
-import { LinkAuthItems as be } from "./components/LinkAuth/LinkAuthItems.js";
-import { LinkAuthTitle as ve } from "./components/LinkAuth/LinkAuthTitle.js";
-import { useLinkAuthContext as He } from "./components/LinkAuth/LinkAuthProvider.js";
-import { SignInAuthMethodButtons as Ue } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as ze } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as Ne } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as Ge } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as qe } from "./components/SignIn/SignInForm.js";
-import { SignInImage as Qe } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Ze } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as ot } from "./components/SignIn/SignInProvider.js";
-import { VerifyMfaDescription as et } from "./components/VerifyMfa/VerifyMfaDescription.js";
-import { VerifyMfaFlow as nt } from "./components/VerifyMfa/VerifyMfaFlow.js";
-import { VerifyMfaFlowBackButton as at } from "./components/VerifyMfa/VerifyMfaFlowBackButton.js";
-import { VerifyMfaFooter as lt } from "./components/VerifyMfa/VerifyMfaFooter.js";
-import { VerifyMfaImage as xt } from "./components/VerifyMfa/VerifyMfaImage.js";
-import { VerifyMfaItem as st } from "./components/VerifyMfa/VerifyMfaItem.js";
-import { VerifyMfaItems as dt } from "./components/VerifyMfa/VerifyMfaItems.js";
-import { VerifyMfaTitle as ct } from "./components/VerifyMfa/VerifyMfaTitle.js";
-import { useVerifyMfaContext as gt } from "./components/VerifyMfa/VerifyMfaProvider.js";
-import { useVerifyMfaFlow as Ct } from "./components/VerifyMfa/VerifyMfaFlowProvider.js";
+import { useFundContext as ke } from "./components/Fund/FundProvider.js";
+import { a as Be, u as Le } from "./chunks/LinkAuthFlow.B4FAtf4V.js";
+import { LinkAuthFlowBackButton as We } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
+import { LinkAuthItem as De } from "./components/LinkAuth/LinkAuthItem.js";
+import { LinkAuthItems as ve } from "./components/LinkAuth/LinkAuthItems.js";
+import { LinkAuthTitle as He } from "./components/LinkAuth/LinkAuthTitle.js";
+import { useLinkAuthContext as Ue } from "./components/LinkAuth/LinkAuthProvider.js";
+import { SignInAuthMethodButtons as ze } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as Ne } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as Ge } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as qe } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Qe } from "./components/SignIn/SignInForm.js";
+import { SignInImage as Ze } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as ot } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as et } from "./components/SignIn/SignInProvider.js";
+import { VerifyMfaDescription as nt } from "./components/VerifyMfa/VerifyMfaDescription.js";
+import { VerifyMfaFlow as at } from "./components/VerifyMfa/VerifyMfaFlow.js";
+import { VerifyMfaFlowBackButton as pt } from "./components/VerifyMfa/VerifyMfaFlowBackButton.js";
+import { VerifyMfaFooter as xt } from "./components/VerifyMfa/VerifyMfaFooter.js";
+import { VerifyMfaImage as st } from "./components/VerifyMfa/VerifyMfaImage.js";
+import { VerifyMfaItem as ut } from "./components/VerifyMfa/VerifyMfaItem.js";
+import { VerifyMfaItems as ct } from "./components/VerifyMfa/VerifyMfaItems.js";
+import { VerifyMfaTitle as gt } from "./components/VerifyMfa/VerifyMfaTitle.js";
+import { useVerifyMfaContext as Ct } from "./components/VerifyMfa/VerifyMfaProvider.js";
+import { useVerifyMfaFlow as St } from "./components/VerifyMfa/VerifyMfaFlowProvider.js";
 export {
-  l as ALL_AUTH_METHODS,
-  p as AUTH_METHODS,
+  p as ALL_AUTH_METHODS,
+  l as AUTH_METHODS,
   a as AuthButton,
   Vo as Button,
   x as CDPReactProvider,
   C as CopyAddress,
-  T as CopyEvmKeyButton,
-  S as CopySolanaKeyButton,
+  S as CopyEvmKeyButton,
+  h as CopySolanaKeyButton,
   A as EnrollMfa,
-  re as EnrollMfaDescription,
+  te as EnrollMfaDescription,
   k as EnrollMfaError,
-  te as EnrollMfaFlow,
-  fe as EnrollMfaFlowBackButton,
-  me as EnrollMfaFooter,
-  pe as EnrollMfaImage,
-  ie as EnrollMfaItem,
-  Me as EnrollMfaItems,
+  fe as EnrollMfaFlow,
+  me as EnrollMfaFlowBackButton,
+  le as EnrollMfaFooter,
+  ie as EnrollMfaImage,
+  Me as EnrollMfaItem,
+  de as EnrollMfaItems,
   B as EnrollMfaModal,
   L as EnrollMfaModalContent,
   w as EnrollMfaModalTrigger,
-  ue as EnrollMfaTitle,
-  D as ExportWallet,
-  b as ExportWalletCopyAddress,
+  Ie as EnrollMfaTitle,
+  b as ExportWallet,
+  D as ExportWalletCopyAddress,
   P as ExportWalletCopyKeyButton,
   v as ExportWalletFooter,
   O as ExportWalletModal,
@@ -125,77 +126,77 @@ export {
   K as ExportWalletWarning,
   j as Fund,
   G as FundFooter,
-  ye as FundForm,
+  Te as FundForm,
   q as FundModal,
   J as FundModalContent,
   Q as FundModalTrigger,
   Fe as FundTitle,
   fr as IconAppleLogo,
   mr as IconArrowLeft,
-  pr as IconArrowsUpDown,
+  lr as IconArrowsUpDown,
   ir as IconCheck,
   Mr as IconCheckCircle,
-  ur as IconChevronDown,
+  dr as IconChevronDown,
   Ir as IconCopy,
   Er as IconEnvelope,
   yr as IconExclamationCircle,
-  Fr as IconExclamationTriangle,
-  hr as IconGoogleLogo,
+  Tr as IconExclamationTriangle,
+  Fr as IconGoogleLogo,
   kr as IconLock,
   Br as IconMinus,
   wr as IconPhone,
-  Dr as IconPinCode,
+  br as IconPinCode,
   Pr as IconPlus,
   Or as IconShield,
   Rr as IconSmartPhone,
   _r as IconXMark,
   Z as LinkAuth,
   $ as LinkAuthError,
-  ke as LinkAuthFlow,
-  Le as LinkAuthFlowBackButton,
-  We as LinkAuthItem,
-  be as LinkAuthItems,
+  Be as LinkAuthFlow,
+  We as LinkAuthFlowBackButton,
+  De as LinkAuthItem,
+  ve as LinkAuthItems,
   ro as LinkAuthModal,
   eo as LinkAuthModalContent,
   to as LinkAuthModalTrigger,
-  ve as LinkAuthTitle,
+  He as LinkAuthTitle,
   Lo as Modal,
   wo as ModalClose,
   Wo as ModalContent,
-  Do as ModalDescription,
-  bo as ModalTitle,
+  bo as ModalDescription,
+  Do as ModalTitle,
   Po as ModalTrigger,
   i as OAUTH_METHODS,
   fo as SendEvmTransactionButton,
   mo as SendSolanaTransactionButton,
-  po as SignIn,
-  Ue as SignInAuthMethodButtons,
-  ze as SignInBackButton,
-  Ne as SignInDescription,
-  Ge as SignInFooter,
-  qe as SignInForm,
-  Qe as SignInImage,
+  lo as SignIn,
+  ze as SignInAuthMethodButtons,
+  Ne as SignInBackButton,
+  Ge as SignInDescription,
+  qe as SignInFooter,
+  Qe as SignInForm,
+  Ze as SignInImage,
   Mo as SignInModal,
   uo as SignInModalContent,
   co as SignInModalTrigger,
-  Ze as SignInTitle,
+  ot as SignInTitle,
   go as SignOutButton,
   Co as ThemeProvider,
   s as VerifyMfa,
-  et as VerifyMfaDescription,
-  nt as VerifyMfaFlow,
-  at as VerifyMfaFlowBackButton,
-  lt as VerifyMfaFooter,
-  xt as VerifyMfaImage,
-  Fo as VerifyMfaInline,
-  So as VerifyMfaInlineBackButton,
-  ho as VerifyMfaInlineFlow,
-  st as VerifyMfaItem,
-  dt as VerifyMfaItems,
+  nt as VerifyMfaDescription,
+  at as VerifyMfaFlow,
+  pt as VerifyMfaFlowBackButton,
+  xt as VerifyMfaFooter,
+  st as VerifyMfaImage,
+  To as VerifyMfaInline,
+  ho as VerifyMfaInlineBackButton,
+  Fo as VerifyMfaInlineFlow,
+  ut as VerifyMfaItem,
+  ct as VerifyMfaItems,
   M as VerifyMfaModal,
-  d as VerifyMfaModalContent,
-  u as VerifyMfaModalTrigger,
-  ct as VerifyMfaTitle,
+  u as VerifyMfaModalContent,
+  d as VerifyMfaModalTrigger,
+  gt as VerifyMfaTitle,
   _o as borderRadius,
   zo as borderRadiusComponents,
   Ko as borderRadiusSemantic,
@@ -218,17 +219,18 @@ export {
   tr as themeToCssVariables,
   Yo as tokens,
   c as useAppConfig,
-  Ie as useEnrollMfaContext,
-  Ee as useEnrollMfaFlow,
-  he as useFundContext,
-  He as useLinkAuthContext,
-  Ve as useLinkAuthFlow,
+  Ee as useEnrollMfaContext,
+  ye as useEnrollMfaFlow,
+  ke as useFundContext,
+  Ue as useLinkAuthContext,
+  Le as useLinkAuthFlow,
+  re as usePhoneNumberState,
   I as useProviderName,
-  ot as useSignInContext,
+  et as useSignInContext,
   io as useSignInReducer,
   yo as useTheme,
-  gt as useVerifyMfaContext,
-  Ct as useVerifyMfaFlow,
+  Ct as useVerifyMfaContext,
+  St as useVerifyMfaFlow,
   Ao as useVerifyMfaInlineContext,
   g as useVerifyMfaModal,
   Zo as zIndex,

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.88";
+export declare const VERSION = "0.0.89";

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.0.88";
+const o = "0.0.89";
 export {
   o as VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -16,8 +16,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-hooks": "^0.0.88",
-    "@coinbase/cdp-core": "^0.0.88"
+    "@coinbase/cdp-core": "^0.0.89",
+    "@coinbase/cdp-hooks": "^0.0.89"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -49,8 +49,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-hooks": "^0.0.88",
-    "@coinbase/cdp-core": "^0.0.88"
+    "@coinbase/cdp-core": "^0.0.89",
+    "@coinbase/cdp-hooks": "^0.0.89"
   },
   "size-limit": [
     {