@coinbase/cdp-react 0.0.14 → 0.0.16

package/README.md

@@ -7,6 +7,7 @@ the CDP frontend SDK.
  - {@link SignIn | `SignIn`} - the forms for the sign in flow, a logo, heading, and description text
  - {@link SignOutButton | `SignOutButton`} - a sign out button
  - {@link AuthButton | `AuthButton`} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
+ - {@link SendTransactionButton | `SendTransactionButton`} - a button that signs and sends a transaction
 
 ## Quickstart
 

package/dist/assets/SendTransactionButton.css

@@ -0,0 +1 @@
+.SendTransactionButton-module__send-transaction-button___-6UsN{padding-left:2em;padding-right:2em}

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 { Input as I } from "../Input/index.js";
-import { Error as v } from "../Error/index.js";
+import { Error as I } from "../Error/index.js";
+import { Input as v } from "../Input/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(
-              I,
+              v,
               {
                 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(v, { id: u, children: i })
+      i && /* @__PURE__ */ o(I, { id: u, children: i })
     ] });
   }
 );

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

@@ -0,0 +1,13 @@
+import { APIError, SendEvmTransactionOptions } from '@coinbase/cdp-hooks';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonVariant } from '../../theme/theme';
+export interface SendTransactionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
+    account: SendEvmTransactionOptions["evmAccount"];
+    network: SendEvmTransactionOptions["network"];
+    onError?: (error: APIError | Error) => void;
+    onSuccess?: (hash: string) => void;
+    pendingLabel?: ReactNode;
+    transaction: SendEvmTransactionOptions["transaction"];
+    variant?: ButtonVariant;
+}
+export declare const SendTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, variant, ...props }: SendTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SendTransactionButton/index.js

@@ -0,0 +1,67 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useSendEvmTransaction as y, APIError as T } from "@coinbase/cdp-hooks";
+import { useState as _, useCallback as v } from "react";
+import { Button as w } from "../Button/index.js";
+import "../../theme/theme.js";
+import { getMessageFromUnknownError as B } from "../../utils/getMessageFromUnknownError.js";
+import '../../assets/SendTransactionButton.css';const P = {
+  "send-transaction-button": "SendTransactionButton-module__send-transaction-button___-6UsN"
+}, N = ({
+  account: s,
+  children: f,
+  className: l = "",
+  network: r,
+  onClick: o,
+  onError: a,
+  onSuccess: i,
+  pendingLabel: u,
+  transaction: e,
+  variant: p = "primary",
+  ...g
+}) => {
+  const [h, c] = _(!1), m = y(), E = v(
+    async (d) => {
+      d.preventDefault(), o?.(d);
+      try {
+        if (!s || !r || !e) {
+          const n = [];
+          throw s || n.push("account"), r || n.push("network"), e || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
+        }
+        c(!0);
+        const { transactionHash: t } = await m({
+          transaction: e,
+          evmAccount: s,
+          network: r
+        });
+        i?.(t);
+      } catch (t) {
+        let n;
+        if (t instanceof T || t instanceof Error)
+          n = t;
+        else {
+          const S = B(t);
+          n = new Error(S);
+        }
+        a?.(n);
+      } finally {
+        c(!1);
+      }
+    },
+    [s, r, o, a, i, m, e]
+  );
+  return /* @__PURE__ */ b(
+    w,
+    {
+      className: `${P["send-transaction-button"]} ${l}`,
+      isPending: h,
+      pendingLabel: u || "Sending transaction...",
+      onClick: E,
+      variant: p,
+      ...g,
+      children: f || "Send transaction"
+    }
+  );
+};
+export {
+  N as SendTransactionButton
+};

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

@@ -1,6 +1,6 @@
-import { ApiError } from '../../utils/isApiError';
+import { APIError } from '@coinbase/cdp-hooks';
 interface Props {
-    error: string | ApiError;
+    error: string | APIError;
     id?: string;
     className?: string;
 }

package/dist/components/ServerError/index.js

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

package/dist/components/SignIn/SignInForm.js

@@ -5,16 +5,16 @@ 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 { withValidityState as q } from "../Input/index.js";
+import { LoadingSpinner as q } from "../LoadingSpinner/index.js";
 import { OTP as D } from "../OTP/index.js";
 import { ServerError as O } from "../ServerError/index.js";
-import { IconCoinbaseWordmark as W } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as Q } from "../../icons/IconLock.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 { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as Z } from "../../utils/isEmailInvalid.js";
+import { isEmailInvalid as $ } from "../../utils/isEmailInvalid.js";
 import { useSignInContext as E } from "./SignInProvider.js";
-import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
+import { withValidityState as j } from "../Input/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,
@@ -45,9 +45,9 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
             validators: [
               ["valueMissing", "Email is required"],
               ["typeMismatch", "Use a valid email address"],
-              [Z, "Use a valid email address"]
+              [$, "Use a valid email address"]
             ],
-            children: q({
+            children: j({
               autoComplete: "email",
               type: "email",
               placeholder: "name@example.com",
@@ -98,7 +98,7 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
         ),
         /* @__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($, { className: n["loading-spinner"] }),
+            e.isPending && !e.canResetOTP && /* @__PURE__ */ o(q, { className: n["loading-spinner"] }),
             e.error && /* @__PURE__ */ o(O, { error: e.error, className: n["server-error"] })
           ] }),
           /* @__PURE__ */ s("div", { className: n["resend-wrapper"], children: [
@@ -118,7 +118,7 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
                 i,
                 "s"
               ] }),
-              /* @__PURE__ */ s(j, { children: [
+              /* @__PURE__ */ s(W, { children: [
                 i,
                 " ",
                 i === 1 ? "second" : "seconds"
@@ -187,11 +187,11 @@ import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V"
     F && /* @__PURE__ */ s(A, { children: [
       /* @__PURE__ */ o("hr", { className: n.hr }),
       /* @__PURE__ */ s("div", { className: n.footer, children: [
-        /* @__PURE__ */ o(Q, { className: n.icon }),
+        /* @__PURE__ */ o(Z, { className: n.icon }),
         /* @__PURE__ */ s("p", { children: [
           "Secured by",
           " ",
-          /* @__PURE__ */ o(W, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
+          /* @__PURE__ */ o(Q, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
         ] })
       ] })
     ] })

package/dist/components/SignIn/index.js

@@ -1,10 +1,11 @@
 import { jsx as n, jsxs as r, Fragment as s } from "react/jsx-runtime";
 import "react";
 import { SignInDescription as g } from "./SignInDescription.js";
-import { SignInForm as c } from "./SignInForm.js";
-import { SignInImage as p } from "./SignInImage.js";
+import { SignInForm as p } from "./SignInForm.js";
+import { SignInImage as c } from "./SignInImage.js";
 import { SignInProvider as I, useSignInContext as S } from "./SignInProvider.js";
 import { SignInTitle as f } from "./SignInTitle.js";
+import "@coinbase/cdp-hooks";
 import '../../assets/SignIn.css';const a = {
   "sign-in": "SignIn-module__sign-in___cYpee"
 }, l = ({ className: i = "", children: t, onSuccess: e }) => {
@@ -12,18 +13,18 @@ import '../../assets/SignIn.css';const a = {
   return /* @__PURE__ */ r("div", { className: `${a["sign-in"]} ${i}`, children: [
     o,
     !o && /* @__PURE__ */ r(s, { children: [
-      /* @__PURE__ */ n(p, {}),
+      /* @__PURE__ */ n(c, {}),
       /* @__PURE__ */ n(f, {}),
       /* @__PURE__ */ n(g, {}),
-      /* @__PURE__ */ n(c, { onSuccess: e })
+      /* @__PURE__ */ n(p, { onSuccess: e })
     ] })
   ] });
-}, C = (i) => /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(l, { ...i }) });
+}, F = (i) => /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(l, { ...i }) });
 export {
-  C as SignIn,
+  F as SignIn,
   g as SignInDescription,
-  c as SignInForm,
-  p as SignInImage,
+  p as SignInForm,
+  c as SignInImage,
   f as SignInTitle,
   S as useSignInContext
 };

package/dist/components/SignIn/useSignInReducer.d.ts

@@ -1,8 +1,8 @@
-import { ApiError } from '../../utils/isApiError';
+import { APIError } from '@coinbase/cdp-hooks';
 export interface SignInState {
     canResetOTP: boolean;
     email: string;
-    error: string | ApiError | null;
+    error: string | APIError | null;
     flowId: string;
     isPending: boolean;
     otp: string;
@@ -26,7 +26,7 @@ export type SignInAction = {
 } | {
     type: "SUBMIT_EMAIL_FAILURE";
     payload: {
-        error: string | ApiError;
+        error: string | APIError;
     };
 } | {
     type: "SET_OTP";
@@ -46,7 +46,7 @@ export type SignInAction = {
 } | {
     type: "SUBMIT_OTP_FAILURE";
     payload: {
-        error: string | ApiError;
+        error: string | APIError;
     };
 } | {
     type: "ALLOW_RESET_OTP";

package/dist/components/SignIn/useSignInReducer.js

@@ -1,3 +1,4 @@
+import "@coinbase/cdp-hooks";
 import { useReducer as n } from "react";
 function l(r, e) {
   switch (e.type) {
@@ -43,7 +44,7 @@ function l(r, e) {
       throw new Error("Unknown action type");
   }
 }
-const o = (r) => n(l, r);
+const s = (r) => n(l, r);
 export {
-  o as useSignInReducer
+  s as useSignInReducer
 };

package/dist/components/SignInModal/index.js

@@ -3,8 +3,8 @@ import { Dialog as g, DialogTrigger as m, DialogPortal as _, DialogOverlay as d,
 import "react";
 import { IconXMark as h } from "../../icons/IconXMark.js";
 import { Button as r } from "../Button/index.js";
-import { SignIn as S } from "../SignIn/index.js";
-import { useTheme as f } from "../ThemeProvider/index.js";
+import { useTheme as S } from "../ThemeProvider/index.js";
+import { SignIn as f } from "../SignIn/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";
@@ -21,12 +21,12 @@ import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___I
   overlay: x,
   spacer: b
 }, G = ({ children: l, open: a, setIsOpen: s, onSuccess: e }) => {
-  const { cssVariables: t } = f();
+  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" }) }),
     /* @__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(S, { onSuccess: e, className: n["sign-in"], children: [
+      /* @__PURE__ */ i(c, { className: n.modal, children: /* @__PURE__ */ o(f, { onSuccess: e, className: n["sign-in"], children: [
         /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
           r,
           {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/CDPReactProvider';
 export * from './components/AuthButton';
+export * from './components/SendTransactionButton';
 export * from './components/SignIn';
 export * from './components/SignOutButton';
 export * from './components/SignInModal';

package/dist/index.js

@@ -1,54 +1,58 @@
 import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
 import { AuthButton as m } from "./components/AuthButton/index.js";
-import { SignIn as i } from "./components/SignIn/index.js";
-import { useSignInReducer as x } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as c } from "./components/SignOutButton/index.js";
-import { SignInModal as l } from "./components/SignInModal/index.js";
-import { ThemeProvider as g, useTheme as S } from "./components/ThemeProvider/index.js";
-import { cssVariables as C } from "./theme/cssVariables.js";
-import { theme as d } from "./theme/theme.js";
-import { colors as T, colorsBase as b, colorsComponents as v, colorsSemantic as A, font as B, tokens as E } from "./theme/tokens.js";
-import { flattenTokensObject as D, themeToCssVariables as M } from "./theme/utils.js";
-import { IconCheckCircle as R } from "./icons/IconCheckCircle.js";
-import { IconExclamationCircle as j } from "./icons/IconExclamationCircle.js";
-import { IconLock as L } from "./icons/IconLock.js";
-import { IconXMark as q } from "./icons/IconXMark.js";
-import { isEmailInvalid as y } from "./utils/isEmailInvalid.js";
-import { isApiError as G } from "./utils/isApiError.js";
-import { SignInDescription as J } from "./components/SignIn/SignInDescription.js";
-import { SignInForm as N } from "./components/SignIn/SignInForm.js";
-import { SignInImage as U } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Y } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as _ } from "./components/SignIn/SignInProvider.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";
 export {
   m as AuthButton,
   e as CDPReactProvider,
-  R as IconCheckCircle,
-  j as IconExclamationCircle,
-  L as IconLock,
-  q as IconXMark,
-  i as SignIn,
-  J as SignInDescription,
-  N as SignInForm,
-  U as SignInImage,
-  l as SignInModal,
-  Y as SignInTitle,
-  c as SignOutButton,
-  g as ThemeProvider,
-  T as colors,
-  b as colorsBase,
-  v as colorsComponents,
-  A as colorsSemantic,
-  C as cssVariables,
-  D as flattenTokensObject,
-  B as font,
-  G as isApiError,
-  y as isEmailInvalid,
-  d as theme,
-  M as themeToCssVariables,
-  E as tokens,
+  A as IconCheckCircle,
+  P as IconExclamationCircle,
+  F as IconLock,
+  R 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,
   t as useAppConfig,
-  _ as useSignInContext,
-  x as useSignInReducer,
-  S as useTheme
+  Z as useSignInContext,
+  $ as useSignInReducer,
+  eo as useTheme
 };

package/dist/utils/getMessageFromUnknownError.d.ts

@@ -0,0 +1 @@
+export declare const getMessageFromUnknownError: (error: unknown, defaultMesasge?: string) => string;

package/dist/utils/getMessageFromUnknownError.js

@@ -0,0 +1,8 @@
+import { APIError as t } from "@coinbase/cdp-hooks";
+const i = (e, n = "Something went wrong") => {
+  let s = "";
+  return e instanceof Error || e instanceof t || typeof e == "object" && e !== null && "message" in e && typeof e.message == "string" ? s = e.message : typeof e == "string" && (s = e), s || n;
+};
+export {
+  i as getMessageFromUnknownError
+};

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
-export * from './isEmailInvalid';
+export * from './getMessageFromUnknownError';
 export * from './isApiError';
+export * from './isEmailInvalid';

package/dist/utils/index.js

@@ -1,6 +1,8 @@
-import { isEmailInvalid as o } from "./isEmailInvalid.js";
-import { isApiError as p } from "./isApiError.js";
+import { getMessageFromUnknownError as e } from "./getMessageFromUnknownError.js";
+import { isApiError as m } from "./isApiError.js";
+import { isEmailInvalid as p } from "./isEmailInvalid.js";
 export {
-  p as isApiError,
-  o as isEmailInvalid
+  e as getMessageFromUnknownError,
+  m as isApiError,
+  p as isEmailInvalid
 };

package/dist/utils/isApiError.d.ts

@@ -1,6 +1,2 @@
-export interface ApiError extends Error {
-    errorLink?: string;
-    errorMessage: string;
-    errorType: string;
-}
-export declare const isApiError: (error: unknown) => error is ApiError;
+import { APIError } from '@coinbase/cdp-hooks';
+export declare const isApiError: (error: unknown) => error is APIError;

package/dist/utils/isApiError.js

@@ -1,4 +1,5 @@
-const e = (r) => r instanceof Error && "errorMessage" in r && "errorType" in r;
+import { APIError as o } from "@coinbase/cdp-hooks";
+const i = (r) => r instanceof o;
 export {
-  e as isApiError
+  i as isApiError
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.14",
-    "@coinbase/cdp-hooks": "^0.0.14"
+    "@coinbase/cdp-core": "^0.0.16",
+    "@coinbase/cdp-hooks": "^0.0.16"
   },
   "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.14",
-    "@coinbase/cdp-hooks": "^0.0.14"
+    "@coinbase/cdp-core": "^0.0.16",
+    "@coinbase/cdp-hooks": "^0.0.16"
   },
   "size-limit": [
     {