@coinbase/cdp-react 0.0.7 → 0.0.9

package/README.md

@@ -32,6 +32,13 @@ npm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
 1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
 2. On your dashboard, select a project from the dropdown at the at the top, and copy the Project ID
 
+### Allowlist your local app
+
+1. Navigate to the [Embedded Wallet Configuration](https://portal.cdp.coinbase.com/products/embedded-wallets/cors) 
+in CDP Portal, and click Add origin to include your local app
+2. Enter the origin of your locally running app - e.g., `http://localhost:3000`
+3. Click Add origin again to save your changes
+
 ### Setup Provider
 
 Next, you need to wrap your application with the `CDPReactProvider`.

package/dist/components/SignIn/SignInForm.js

@@ -2,19 +2,19 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { useSignInWithEmail as U, useVerifyEmailOTP as A } from "@coinbase/cdp-hooks";
 import { Form as R, FormSubmit as C } from "@radix-ui/react-form";
 import { useState as I, useEffect as T, useRef as F } from "react";
-import { Button as O } from "../Button/index.js";
 import { Field as B } from "../Field/index.js";
-import { withValidityState as x } from "../Input/index.js";
-import { LoadingSpinner as V } from "../LoadingSpinner/index.js";
-import { OTP as k } from "../OTP/index.js";
-import { ServerError as b } from "../ServerError/index.js";
-import { VisuallyHidden as W } from "../VisuallyHidden/index.js";
-import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as $ } from "../../icons/IconLock.js";
+import { OTP as x } from "../OTP/index.js";
+import { ServerError as O } from "../ServerError/index.js";
+import { IconCoinbaseWordmark as V } from "../../icons/IconCoinbaseWordmark.js";
+import { IconLock as W } from "../../icons/IconLock.js";
 import { isApiError as P } from "../../utils/isApiError.js";
-import { isEmailInvalid as j } from "../../utils/isEmailInvalid.js";
+import { isEmailInvalid as k } from "../../utils/isEmailInvalid.js";
 import { s } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
 import { useSignInContext as g } from "./SignInProvider.js";
+import { withValidityState as D } from "../Input/index.js";
+import { Button as b } from "../Button/index.js";
+import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
 const q = ({ submit: u }) => {
   const { state: n, dispatch: d } = g(), e = () => d({ type: "CLEAR_ERROR" }), f = (p) => (p.preventDefault(), u(n.email));
   return /* @__PURE__ */ o(
@@ -32,9 +32,9 @@ const q = ({ submit: u }) => {
             validators: [
               ["valueMissing", "Email is required"],
               ["typeMismatch", "Use a valid email address"],
-              [j, "Use a valid email address"]
+              [k, "Use a valid email address"]
             ],
-            children: x({
+            children: D({
               type: "email",
               placeholder: "name@example.com",
               required: !0,
@@ -45,8 +45,8 @@ const q = ({ submit: u }) => {
             })
           }
         ),
-        n.error && /* @__PURE__ */ t(b, { error: n.error, className: s.serverError }),
-        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(O, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
+        n.error && /* @__PURE__ */ t(O, { error: n.error, className: s.serverError }),
+        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(b, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
       ]
     }
   );
@@ -68,7 +68,7 @@ const q = ({ submit: u }) => {
       onSubmit: h,
       children: [
         /* @__PURE__ */ t(
-          k,
+          x,
           {
             ref: c,
             name: "otp",
@@ -84,12 +84,12 @@ const q = ({ submit: u }) => {
         ),
         /* @__PURE__ */ o("div", { className: s.formFooter, children: [
           (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ o("div", { className: s.serverStateWrapper, children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ t(V, { className: s.loadingSpinner }),
-            e.error && /* @__PURE__ */ t(b, { error: e.error, className: s.serverError })
+            e.isPending && !e.canResetOTP && /* @__PURE__ */ t($, { className: s.loadingSpinner }),
+            e.error && /* @__PURE__ */ t(O, { error: e.error, className: s.serverError })
           ] }),
           /* @__PURE__ */ o("div", { children: [
             e.canResetOTP && /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(
-              O,
+              b,
               {
                 type: "button",
                 onClick: E,
@@ -104,7 +104,7 @@ const q = ({ submit: u }) => {
                 n,
                 "s"
               ] }),
-              /* @__PURE__ */ o(W, { children: [
+              /* @__PURE__ */ o(j, { children: [
                 n,
                 " ",
                 n === 1 ? "second" : "seconds"
@@ -121,7 +121,7 @@ const q = ({ submit: u }) => {
   onSuccess: d,
   ...e
 }) => {
-  const c = "An error occurred while signing in. Please try again.", [h, E] = I(0), [m, y] = I(!1), _ = U(), w = A(), { state: i, dispatch: l } = g(), L = (a) => {
+  const c = "An error occurred while signing in. Please try again.", [h, E] = I(0), [m, y] = I(!1), _ = U(), L = A(), { state: i, dispatch: l } = g(), N = (a) => {
     E(a), y(!0);
   };
   T(() => {
@@ -141,13 +141,13 @@ const q = ({ submit: u }) => {
         const { flowId: r } = await _({
           email: a
         });
-        l({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), L(60);
+        l({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), N(60);
       } catch (r) {
         const S = P(r) ? r : r instanceof Error && r.message || c;
         l({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: S } }), console.error(r);
       }
     }
-  }, N = async (a) => {
+  }, w = async (a) => {
     if (!i.isPending) {
       if (a.length !== 6) {
         l({ type: "SET_OTP", payload: { otp: a } });
@@ -155,7 +155,7 @@ const q = ({ submit: u }) => {
       }
       l({ type: "SUBMIT_OTP", payload: { otp: a } });
       try {
-        await w({
+        await L({
           flowId: i.flowId,
           otp: a
         }), l({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: a } }), d?.();
@@ -169,14 +169,13 @@ const q = ({ submit: u }) => {
   };
   return /* @__PURE__ */ o(u, { className: `${s.form} ${n}`, ...e, children: [
     i.step === "email" && /* @__PURE__ */ t(q, { submit: v }),
-    i.step === "otp" && /* @__PURE__ */ t(H, { submit: N, reset: M, resetCountdown: h }),
+    i.step === "otp" && /* @__PURE__ */ t(H, { submit: w, reset: M, resetCountdown: h }),
     /* @__PURE__ */ t("hr", { className: s.hr }),
     /* @__PURE__ */ o("div", { className: s.footer, children: [
-      /* @__PURE__ */ t($, { className: s.icon }),
+      /* @__PURE__ */ t(W, { className: s.icon }),
       /* @__PURE__ */ o("p", { children: [
-        "Secured by",
-        " ",
-        /* @__PURE__ */ t("a", { href: "https://www.coinbase.com/security", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ t(D, { className: s.coinbaseIcon, "aria-label": "Coinbase" }) })
+        "Secured by ",
+        /* @__PURE__ */ t(V, { className: s.coinbaseIcon, "aria-label": "Coinbase" })
       ] })
     ] })
   ] });

package/dist/components/SignInModal/index.js

@@ -2,13 +2,13 @@ import { jsxs as o, jsx as n } from "react/jsx-runtime";
 import { Dialog as g, DialogTrigger as c, DialogPortal as m, DialogOverlay as _, DialogContent as d, DialogClose as I, DialogTitle as p, 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 { SignIn as S } from "../SignIn/index.js";
 import { useTheme as D } from "../ThemeProvider/index.js";
 import { SignInImage as M } from "../SignIn/SignInImage.js";
 import { SignInTitle as f } from "../SignIn/SignInTitle.js";
 import { SignInDescription as v } from "../SignIn/SignInDescription.js";
 import { SignInForm as N } from "../SignIn/SignInForm.js";
+import { Button as r } from "../Button/index.js";
 import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___IcJ8x", T = "SignInModal-module__modal___PErrT", C = "SignInModal-module__signIn___hQuJk", x = "SignInModal-module__signInForm___6-UdI", B = "SignInModal-module__signInTitle___AF-XA", F = "SignInModal-module__signInDescription___SZjXu", W = "SignInModal-module__signInImage___hMBda", j = "SignInModal-module__closeWrapper___cx8Zq", X = "SignInModal-module__closeButton___yf-ZW", Z = "SignInModal-module__overlay___-0rmi", b = "SignInModal-module__spacer___x-lRH", i = {
   trigger: y,
   modal: T,

package/dist/components/SignOutButton/index.js

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useSignOut as r } from "@coinbase/cdp-hooks";
 import "react";
-import { Button as m } from "../Button/index.js";
 import "../../theme/theme.js";
+import { Button as m } from "../Button/index.js";
 import '../../assets/SignOutButton.css';const g = "SignOutButton-module__signOutButton___WNhmy", c = {
   signOutButton: g
 }, l = ({ children: t, variant: n = "primary", onSuccess: o }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.7",
-    "@coinbase/cdp-hooks": "^0.0.7"
+    "@coinbase/cdp-core": "^0.0.9",
+    "@coinbase/cdp-hooks": "^0.0.9"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -34,20 +34,22 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.7",
-    "@coinbase/cdp-hooks": "^0.0.7"
+    "@coinbase/cdp-core": "^0.0.9",
+    "@coinbase/cdp-hooks": "^0.0.9"
   },
   "size-limit": [
     {
       "name": "full-package",
       "path": "./dist/index.js",
       "import": "*",
+      "running": false,
       "limit": "65 KB"
     },
     {
       "name": "single-component",
       "path": "./dist/components/SignIn/index.js",
       "import": "{ SignIn }",
+      "running": false,
       "limit": "65 KB"
     }
   ],