@coinbase/cdp-react 0.0.16 → 0.0.18

package/dist/components/AuthButton/index.js

@@ -13,7 +13,7 @@ import '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpD
   onSignOutSuccess: h,
   ...p
 }) => {
-  const i = _(), u = v(), [m, s] = c(u), [t, d] = c(!1), [n, r] = c(void 0), o = w(!1), I = () => {
+  const { isInitialized: i } = _(), { isSignedIn: u } = v(), [m, s] = c(u), [t, d] = c(!1), [n, r] = c(void 0), o = w(!1), I = () => {
     g?.(), r(S);
   }, O = () => {
     h?.(), s(!1);

package/dist/components/OTP/index.js

@@ -1,8 +1,8 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import { OneTimePasswordField as _, OneTimePasswordFieldInput as f, OneTimePasswordFieldHiddenInput as P } from "@radix-ui/react-one-time-password-field";
 import { forwardRef as O, useId as T, useRef as h, useEffect as y } from "react";
-import { Error as I } from "../Error/index.js";
-import { Input as v } from "../Input/index.js";
+import { Input as I } from "../Input/index.js";
+import { Error as v } from "../Error/index.js";
 import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-module__input___MEBPV", r = {
   otp: w,
   "group-container": "OTP-module__group-container___rfrCo",
@@ -29,7 +29,7 @@ import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-modu
           },
           children: [
             Array.from({ length: s }, (e, t) => /* @__PURE__ */ o("div", { className: r["input-container"], children: /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(
-              v,
+              I,
               {
                 name: `${c.name || "otp"}-${t}`,
                 ref: (m) => p(m, t),
@@ -40,7 +40,7 @@ import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-modu
           ]
         }
       ),
-      i && /* @__PURE__ */ o(I, { id: u, children: i })
+      i && /* @__PURE__ */ o(v, { id: u, children: i })
     ] });
   }
 );

package/dist/components/SendTransactionButton/index.js

@@ -19,7 +19,7 @@ import '../../assets/SendTransactionButton.css';const P = {
   variant: p = "primary",
   ...g
 }) => {
-  const [h, c] = _(!1), m = y(), E = v(
+  const [h, c] = _(!1), { sendEvmTransaction: m } = y(), E = v(
     async (d) => {
       d.preventDefault(), o?.(d);
       try {

package/dist/components/ServerError/index.js

@@ -1,12 +1,12 @@
 import { jsx as s } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import { forwardRef as t } from "react";
-import { Error as p } from "../Error/index.js";
-import { isApiError as f } from "../../utils/isApiError.js";
+import { isApiError as p } from "../../utils/isApiError.js";
+import { Error as f } from "../Error/index.js";
 const a = t(
   ({ error: r, id: o, className: e = "" }, m) => {
-    const i = f(r) ? r.errorMessage : r;
-    return /* @__PURE__ */ s(p, { ref: m, id: o, className: e, children: i });
+    const i = p(r) ? r.errorMessage : r;
+    return /* @__PURE__ */ s(f, { ref: m, id: o, className: e, children: i });
   }
 );
 a.displayName = "ServerError";

package/dist/components/SignIn/SignInForm.js

@@ -1,20 +1,20 @@
-import { jsxs as s, jsx as o, Fragment as A } from "react/jsx-runtime";
+import { jsxs as i, jsx as o, Fragment as A } from "react/jsx-runtime";
 import { useSignInWithEmail as U, useVerifyEmailOTP as V } from "@coinbase/cdp-hooks";
 import { Form as P, FormSubmit as R } from "@radix-ui/react-form";
 import { useState as v, useEffect as y, useRef as B } from "react";
 import { Button as C } from "../Button/index.js";
 import { useAppConfig as k } from "../CDPReactProvider/index.js";
 import { Field as x } from "../Field/index.js";
-import { LoadingSpinner as q } from "../LoadingSpinner/index.js";
-import { OTP as D } from "../OTP/index.js";
+import { OTP as q } from "../OTP/index.js";
 import { ServerError as O } from "../ServerError/index.js";
-import { VisuallyHidden as W } from "../VisuallyHidden/index.js";
-import { IconCoinbaseWordmark as Q } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as Z } from "../../icons/IconLock.js";
+import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
+import { IconLock as W } from "../../icons/IconLock.js";
 import { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as $ } from "../../utils/isEmailInvalid.js";
+import { isEmailInvalid as Q } from "../../utils/isEmailInvalid.js";
 import { useSignInContext as E } from "./SignInProvider.js";
-import { withValidityState as j } from "../Input/index.js";
+import { withValidityState as Z } from "../Input/index.js";
+import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
 import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V", G = "SignInForm-module__footer___6Lo9w", H = "SignInForm-module__hr___fOcy4", X = "SignInForm-module__icon___qkJnq", n = {
   "form-wrapper": "SignInForm-module__form-wrapper___SlQkZ",
   form: J,
@@ -29,8 +29,8 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
   hr: H,
   icon: X
 }, Y = ({ submit: _ }) => {
-  const { state: i, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), u = (p) => (p.preventDefault(), _(i.email));
-  return /* @__PURE__ */ s(
+  const { state: s, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), u = (p) => (p.preventDefault(), _(s.email));
+  return /* @__PURE__ */ i(
     P,
     {
       className: n.form,
@@ -45,36 +45,36 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
             validators: [
               ["valueMissing", "Email is required"],
               ["typeMismatch", "Use a valid email address"],
-              [$, "Use a valid email address"]
+              [Q, "Use a valid email address"]
             ],
-            children: j({
+            children: Z({
               autoComplete: "email",
               type: "email",
               placeholder: "name@example.com",
               required: !0,
-              value: i.email,
+              value: s.email,
               onChange: (p) => {
                 d({ type: "SET_EMAIL", payload: { email: p.target.value } });
               }
             })
           }
         ),
-        i.error && /* @__PURE__ */ o(O, { error: i.error, className: n["server-error"] }),
-        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(C, { type: "submit", isPending: i.isPending, children: "Continue with email" }) })
+        s.error && /* @__PURE__ */ o(O, { error: s.error, className: n["server-error"] }),
+        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(C, { type: "submit", isPending: s.isPending, children: "Continue with email" }) })
       ]
     }
   );
 }, z = ({
   reset: _,
-  resetCountdown: i,
+  resetCountdown: s,
   submit: d
 }) => {
-  const { state: e, dispatch: u } = E(), p = () => u({ type: "CLEAR_ERROR" }), l = B([]), f = (c) => (c.preventDefault(), d(e.otp)), S = () => {
+  const { state: e, dispatch: u } = E(), p = () => u({ type: "CLEAR_ERROR" }), l = B([]), f = (c) => (c.preventDefault(), d(e.otp)), h = () => {
     _(), l.current[0]?.focus();
   };
   return y(() => {
     e.step === "otp" && l.current[0]?.focus();
-  }, [e.step]), /* @__PURE__ */ s(
+  }, [e.step]), /* @__PURE__ */ i(
     P,
     {
       className: `${n.form}`,
@@ -82,7 +82,7 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
       onSubmit: f,
       children: [
         /* @__PURE__ */ o(
-          D,
+          q,
           {
             ref: l,
             name: "otp",
@@ -96,32 +96,32 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
             autoSubmit: !0
           }
         ),
-        /* @__PURE__ */ s("div", { className: n["form-footer"], children: [
-          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ s("div", { className: n["server-state-wrapper"], children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ o(q, { className: n["loading-spinner"] }),
+        /* @__PURE__ */ i("div", { className: n["form-footer"], children: [
+          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ i("div", { className: n["server-state-wrapper"], children: [
+            e.isPending && !e.canResetOTP && /* @__PURE__ */ o($, { className: n["loading-spinner"] }),
             e.error && /* @__PURE__ */ o(O, { error: e.error, className: n["server-error"] })
           ] }),
-          /* @__PURE__ */ s("div", { className: n["resend-wrapper"], children: [
+          /* @__PURE__ */ i("div", { className: n["resend-wrapper"], children: [
             e.canResetOTP && /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
               C,
               {
                 type: "button",
-                onClick: S,
+                onClick: h,
                 isPending: e.isPending,
                 variant: "linkPrimary",
                 children: "Resend code"
               }
             ) }),
-            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ s("p", { children: [
+            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ i("p", { children: [
               "Resend code in ",
-              /* @__PURE__ */ s("span", { "aria-hidden": "true", children: [
-                i,
+              /* @__PURE__ */ i("span", { "aria-hidden": "true", children: [
+                s,
                 "s"
               ] }),
-              /* @__PURE__ */ s(W, { children: [
-                i,
+              /* @__PURE__ */ i(j, { children: [
+                s,
                 " ",
-                i === 1 ? "second" : "seconds"
+                s === 1 ? "second" : "seconds"
               ] })
             ] }) })
           ] })
@@ -129,20 +129,20 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
       ]
     }
   );
-}, Se = ({
+}, he = ({
   as: _ = "div",
-  className: i = "",
+  className: s = "",
   onSuccess: d,
   ...e
 }) => {
-  const l = "An error occurred while signing in. Please try again.", [f, S] = v(0), [c, h] = v(!1), w = U(), b = V(), { state: a, dispatch: m } = E(), { showCoinbaseFooter: F } = k(), L = (t) => {
-    S(t), h(!0);
+  const l = "An error occurred while signing in. Please try again.", [f, h] = v(0), [c, S] = v(!1), { signInWithEmail: w } = U(), { verifyEmailOTP: b } = V(), { state: a, dispatch: m } = E(), { showCoinbaseFooter: F } = k(), L = (t) => {
+    h(t), S(!0);
   };
   y(() => {
     if (!c)
       return;
     const t = setInterval(() => {
-      S((r) => r > 1 ? r - 1 : (h(!1), 0));
+      h((r) => r > 1 ? r - 1 : (S(!1), 0));
     }, 1e3);
     return () => clearInterval(t);
   }, [c]), y(() => {
@@ -179,24 +179,24 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
       }
     }
   }, N = () => {
-    m({ type: "RESET_OTP" }), h(!1), I(a.email);
+    m({ type: "RESET_OTP" }), S(!1), I(a.email);
   };
-  return /* @__PURE__ */ s(_, { className: `${n["form-wrapper"]} ${i}`, ...e, children: [
+  return /* @__PURE__ */ i(_, { className: `${n["form-wrapper"]} ${s}`, ...e, children: [
     a.step === "email" && /* @__PURE__ */ o(Y, { submit: I }),
     a.step === "otp" && /* @__PURE__ */ o(z, { submit: M, reset: N, resetCountdown: f }),
-    F && /* @__PURE__ */ s(A, { children: [
+    F && /* @__PURE__ */ i(A, { children: [
       /* @__PURE__ */ o("hr", { className: n.hr }),
-      /* @__PURE__ */ s("div", { className: n.footer, children: [
-        /* @__PURE__ */ o(Z, { className: n.icon }),
-        /* @__PURE__ */ s("p", { children: [
+      /* @__PURE__ */ i("div", { className: n.footer, children: [
+        /* @__PURE__ */ o(W, { className: n.icon }),
+        /* @__PURE__ */ i("p", { children: [
           "Secured by",
           " ",
-          /* @__PURE__ */ o(Q, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
+          /* @__PURE__ */ o(D, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
         ] })
       ] })
     ] })
   ] });
 };
 export {
-  Se as SignInForm
+  he as SignInForm
 };

package/dist/components/SignInModal/index.js

@@ -1,10 +1,11 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { Dialog as g, DialogTrigger as m, DialogPortal as _, DialogOverlay as d, DialogContent as c, DialogClose as p, DialogTitle as I, DialogDescription as u } from "@radix-ui/react-dialog";
+import { Dialog as m, DialogTrigger as g, DialogPortal as _, DialogOverlay as d, DialogContent as c, DialogClose as p, DialogTitle as I, DialogDescription as u } from "@radix-ui/react-dialog";
 import "react";
 import { IconXMark as h } from "../../icons/IconXMark.js";
-import { Button as r } from "../Button/index.js";
-import { useTheme as S } from "../ThemeProvider/index.js";
-import { SignIn as f } from "../SignIn/index.js";
+import { Button as e } from "../Button/index.js";
+import { SignIn as S } from "../SignIn/index.js";
+import "@coinbase/cdp-hooks";
+import { useTheme as f } from "../ThemeProvider/index.js";
 import { SignInImage as M } from "../SignIn/SignInImage.js";
 import { SignInTitle as D } from "../SignIn/SignInTitle.js";
 import { SignInDescription as v } from "../SignIn/SignInDescription.js";
@@ -20,15 +21,15 @@ import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___I
   "close-button": "SignInModal-module__close-button___k1I5Q",
   overlay: x,
   spacer: b
-}, G = ({ children: l, open: a, setIsOpen: s, onSuccess: e }) => {
-  const { cssVariables: t } = S();
-  return /* @__PURE__ */ o(g, { open: a, onOpenChange: s, children: [
-    /* @__PURE__ */ i(m, { asChild: !0, children: l || /* @__PURE__ */ i(r, { variant: "primary", className: n.trigger, children: "Sign In" }) }),
+}, H = ({ children: l, open: a, setIsOpen: s, onSuccess: r }) => {
+  const { cssVariables: t } = f();
+  return /* @__PURE__ */ o(m, { open: a, onOpenChange: s, children: [
+    /* @__PURE__ */ i(g, { asChild: !0, children: l || /* @__PURE__ */ i(e, { variant: "primary", className: n.trigger, children: "Sign In" }) }),
     /* @__PURE__ */ i(_, { children: /* @__PURE__ */ o(d, { className: n.overlay, style: t, children: [
       /* @__PURE__ */ i("div", { className: n.spacer }),
-      /* @__PURE__ */ i(c, { className: n.modal, children: /* @__PURE__ */ o(f, { onSuccess: e, className: n["sign-in"], children: [
+      /* @__PURE__ */ i(c, { className: n.modal, children: /* @__PURE__ */ o(S, { onSuccess: r, className: n["sign-in"], children: [
         /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
-          r,
+          e,
           {
             "aria-label": "Close",
             variant: "transparentSecondary",
@@ -39,11 +40,11 @@ import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___I
         /* @__PURE__ */ i("div", { className: n["sign-in-image"], children: /* @__PURE__ */ i(M, {}) }),
         /* @__PURE__ */ i("div", { className: n["sign-in-title"], children: /* @__PURE__ */ i(I, { asChild: !0, children: /* @__PURE__ */ i(D, {}) }) }),
         /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(v, { className: n["sign-in-description"] }) }),
-        /* @__PURE__ */ i(N, { className: n["sign-in-form"], onSuccess: e })
+        /* @__PURE__ */ i(N, { className: n["sign-in-form"], onSuccess: r })
       ] }) })
     ] }) })
   ] });
 };
 export {
-  G as SignInModal
+  H as SignInModal
 };

package/dist/components/SignOutButton/index.js

@@ -6,7 +6,7 @@ import "../../theme/theme.js";
 import '../../assets/SignOutButton.css';const e = {
   "sign-out-button": "SignOutButton-module__sign-out-button___qiybe"
 }, O = ({ children: t, variant: o = "primary", onSuccess: n }) => {
-  const i = r(), u = async () => {
+  const { signOut: i } = r(), u = async () => {
     await i(), n?.();
   };
   return /* @__PURE__ */ s(m, { variant: o, className: e["sign-out-button"], onClick: u, children: t || "Sign out" });

package/dist/index.js

@@ -1,58 +1,58 @@
 import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
 import { AuthButton as m } from "./components/AuthButton/index.js";
 import { SendTransactionButton as f } from "./components/SendTransactionButton/index.js";
-import { SignOutButton as x } from "./components/SignOutButton/index.js";
-import { SignInModal as c } from "./components/SignInModal/index.js";
-import { cssVariables as l } from "./theme/cssVariables.js";
-import { theme as g } from "./theme/theme.js";
-import { colors as u, colorsBase as C, colorsComponents as d, colorsSemantic as h, font as k, tokens as T } from "./theme/tokens.js";
-import { flattenTokensObject as E, themeToCssVariables as b } from "./theme/utils.js";
-import { IconCheckCircle as A } from "./icons/IconCheckCircle.js";
-import { IconExclamationCircle as P } from "./icons/IconExclamationCircle.js";
-import { IconLock as F } from "./icons/IconLock.js";
-import { IconXMark as R } from "./icons/IconXMark.js";
-import { getMessageFromUnknownError as j } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as L } from "./utils/isApiError.js";
-import { isEmailInvalid as X } from "./utils/isEmailInvalid.js";
-import { SignIn as y } from "./components/SignIn/index.js";
-import { SignInDescription as G } from "./components/SignIn/SignInDescription.js";
-import { SignInForm as J } from "./components/SignIn/SignInForm.js";
-import { SignInImage as N } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as W } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as Z } from "./components/SignIn/SignInProvider.js";
-import { useSignInReducer as $ } from "./components/SignIn/useSignInReducer.js";
-import { ThemeProvider as ro, useTheme as eo } from "./components/ThemeProvider/index.js";
+import { SignIn as x } from "./components/SignIn/index.js";
+import { useSignInReducer as c } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as l } from "./components/SignOutButton/index.js";
+import { SignInModal as g } from "./components/SignInModal/index.js";
+import { ThemeProvider as u, useTheme as C } from "./components/ThemeProvider/index.js";
+import { cssVariables as h } from "./theme/cssVariables.js";
+import { theme as T } from "./theme/theme.js";
+import { colors as E, colorsBase as b, colorsComponents as v, colorsSemantic as A, font as M, tokens as P } from "./theme/tokens.js";
+import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
+import { IconCheckCircle as V } from "./icons/IconCheckCircle.js";
+import { IconExclamationCircle as w } from "./icons/IconExclamationCircle.js";
+import { IconLock as U } from "./icons/IconLock.js";
+import { IconXMark as q } from "./icons/IconXMark.js";
+import { getMessageFromUnknownError as z } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as H } from "./utils/isApiError.js";
+import { isEmailInvalid as K } from "./utils/isEmailInvalid.js";
+import { SignInDescription as Q } from "./components/SignIn/SignInDescription.js";
+import { SignInForm as Y } from "./components/SignIn/SignInForm.js";
+import { SignInImage as _ } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as oo } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as eo } from "./components/SignIn/SignInProvider.js";
 export {
   m as AuthButton,
   e as CDPReactProvider,
-  A as IconCheckCircle,
-  P as IconExclamationCircle,
-  F as IconLock,
-  R as IconXMark,
+  V as IconCheckCircle,
+  w as IconExclamationCircle,
+  U as IconLock,
+  q as IconXMark,
   f as SendTransactionButton,
-  y as SignIn,
-  G as SignInDescription,
-  J as SignInForm,
-  N as SignInImage,
-  c as SignInModal,
-  W as SignInTitle,
-  x as SignOutButton,
-  ro as ThemeProvider,
-  u as colors,
-  C as colorsBase,
-  d as colorsComponents,
-  h as colorsSemantic,
-  l as cssVariables,
-  E as flattenTokensObject,
-  k as font,
-  j as getMessageFromUnknownError,
-  L as isApiError,
-  X as isEmailInvalid,
-  g as theme,
-  b as themeToCssVariables,
-  T as tokens,
+  x as SignIn,
+  Q as SignInDescription,
+  Y as SignInForm,
+  _ as SignInImage,
+  g as SignInModal,
+  oo as SignInTitle,
+  l as SignOutButton,
+  u as ThemeProvider,
+  E as colors,
+  b as colorsBase,
+  v as colorsComponents,
+  A as colorsSemantic,
+  h as cssVariables,
+  F as flattenTokensObject,
+  M as font,
+  z as getMessageFromUnknownError,
+  H as isApiError,
+  K as isEmailInvalid,
+  T as theme,
+  O as themeToCssVariables,
+  P as tokens,
   t as useAppConfig,
-  Z as useSignInContext,
-  $ as useSignInReducer,
-  eo as useTheme
+  eo as useSignInContext,
+  c as useSignInReducer,
+  C as useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.16",
-    "@coinbase/cdp-hooks": "^0.0.16"
+    "@coinbase/cdp-core": "^0.0.18",
+    "@coinbase/cdp-hooks": "^0.0.18"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -38,8 +38,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.16",
-    "@coinbase/cdp-hooks": "^0.0.16"
+    "@coinbase/cdp-core": "^0.0.18",
+    "@coinbase/cdp-hooks": "^0.0.18"
   },
   "size-limit": [
     {