@coinbase/cdp-react 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,8 +4,8 @@ export interface AppConfig {
4
4
  name: string;
5
5
  logoUrl?: string;
6
6
  }
7
- export type CDPReactProviderProps = CDPHooksProviderProps & ThemeProviderProps & {
7
+ export type CDPReactProviderProps = {
8
8
  app?: AppConfig;
9
- };
9
+ } & CDPHooksProviderProps & ThemeProviderProps;
10
10
  export declare const CDPReactProvider: ({ children, config, theme, app }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
11
11
  export declare const useAppConfig: () => AppConfig;
@@ -2,17 +2,17 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
2
2
  import { useSignInWithEmail as U, useVerifyEmailOTP as A } from "@coinbase/cdp-hooks";
3
3
  import { Form as R, FormSubmit as C } from "@radix-ui/react-form";
4
4
  import { useState as I, useEffect as T, useRef as F } from "react";
5
+ import { Button as O } from "../Button/index.js";
5
6
  import { Field as B } from "../Field/index.js";
6
- import { OTP as x } from "../OTP/index.js";
7
- import { ServerError as O } from "../ServerError/index.js";
8
- import { IconCoinbaseWordmark as V } from "../../icons/IconCoinbaseWordmark.js";
9
- import { IconLock as W } from "../../icons/IconLock.js";
7
+ import { withValidityState as x } from "../Input/index.js";
8
+ import { OTP as V } from "../OTP/index.js";
9
+ import { ServerError as b } from "../ServerError/index.js";
10
+ import { IconCoinbaseWordmark as W } from "../../icons/IconCoinbaseWordmark.js";
11
+ import { IconLock as k } from "../../icons/IconLock.js";
10
12
  import { isApiError as P } from "../../utils/isApiError.js";
11
- import { isEmailInvalid as k } from "../../utils/isEmailInvalid.js";
13
+ import { isEmailInvalid as D } from "../../utils/isEmailInvalid.js";
12
14
  import { s } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
13
15
  import { useSignInContext as g } from "./SignInProvider.js";
14
- import { withValidityState as D } from "../Input/index.js";
15
- import { Button as b } from "../Button/index.js";
16
16
  import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
17
17
  import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
18
18
  const q = ({ submit: u }) => {
@@ -32,9 +32,9 @@ const q = ({ submit: u }) => {
32
32
  validators: [
33
33
  ["valueMissing", "Email is required"],
34
34
  ["typeMismatch", "Use a valid email address"],
35
- [k, "Use a valid email address"]
35
+ [D, "Use a valid email address"]
36
36
  ],
37
- children: D({
37
+ children: x({
38
38
  type: "email",
39
39
  placeholder: "name@example.com",
40
40
  required: !0,
@@ -45,8 +45,8 @@ const q = ({ submit: u }) => {
45
45
  })
46
46
  }
47
47
  ),
48
- n.error && /* @__PURE__ */ t(O, { error: n.error, className: s.serverError }),
49
- /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(b, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
48
+ n.error && /* @__PURE__ */ t(b, { error: n.error, className: s.serverError }),
49
+ /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(O, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
50
50
  ]
51
51
  }
52
52
  );
@@ -68,7 +68,7 @@ const q = ({ submit: u }) => {
68
68
  onSubmit: h,
69
69
  children: [
70
70
  /* @__PURE__ */ t(
71
- x,
71
+ V,
72
72
  {
73
73
  ref: c,
74
74
  name: "otp",
@@ -85,11 +85,11 @@ const q = ({ submit: u }) => {
85
85
  /* @__PURE__ */ o("div", { className: s.formFooter, children: [
86
86
  (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ o("div", { className: s.serverStateWrapper, children: [
87
87
  e.isPending && !e.canResetOTP && /* @__PURE__ */ t($, { className: s.loadingSpinner }),
88
- e.error && /* @__PURE__ */ t(O, { error: e.error, className: s.serverError })
88
+ e.error && /* @__PURE__ */ t(b, { error: e.error, className: s.serverError })
89
89
  ] }),
90
90
  /* @__PURE__ */ o("div", { children: [
91
91
  e.canResetOTP && /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(
92
- b,
92
+ O,
93
93
  {
94
94
  type: "button",
95
95
  onClick: E,
@@ -172,10 +172,10 @@ const q = ({ submit: u }) => {
172
172
  i.step === "otp" && /* @__PURE__ */ t(H, { submit: w, reset: M, resetCountdown: h }),
173
173
  /* @__PURE__ */ t("hr", { className: s.hr }),
174
174
  /* @__PURE__ */ o("div", { className: s.footer, children: [
175
- /* @__PURE__ */ t(W, { className: s.icon }),
175
+ /* @__PURE__ */ t(k, { className: s.icon }),
176
176
  /* @__PURE__ */ o("p", { children: [
177
177
  "Secured by ",
178
- /* @__PURE__ */ t(V, { className: s.coinbaseIcon, "aria-label": "Coinbase" })
178
+ /* @__PURE__ */ t(W, { className: s.coinbaseIcon, "aria-label": "Coinbase" })
179
179
  ] })
180
180
  ] })
181
181
  ] });
@@ -1,21 +1,21 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { useAppConfig as g } from "../CDPReactProvider/index.js";
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { useAppConfig as u } from "../CDPReactProvider/index.js";
3
3
  import { IconCheckCircle as a } from "../../icons/IconCheckCircle.js";
4
4
  import { s as c } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
5
5
  import { useSignInContext as f } from "./SignInProvider.js";
6
- const $ = ({ className: s = "", alt: i, src: t }) => {
7
- const { state: m } = f(), { step: r } = m, o = g(), l = o.logoUrl && /^http?s:\/\//.test(o.logoUrl) ? o.logoUrl : void 0, e = t && /^http?s:\/\//.test(t) ? t : l, p = i || o.name;
8
- return r !== "success" && e ? /* @__PURE__ */ n(
6
+ const i = (o) => /^https?:\/\//.test(o), x = ({ className: o = "", alt: l, src: s }) => {
7
+ const { state: m } = f(), { step: r } = m, t = u(), g = t.logoUrl && i(t.logoUrl) ? t.logoUrl : void 0, n = s && i(s) ? s : g, p = l || t.name;
8
+ return r !== "success" && n ? /* @__PURE__ */ e(
9
9
  "img",
10
10
  {
11
- src: e,
11
+ src: n,
12
12
  alt: p || "",
13
- className: `${c.logo} ${s}`,
13
+ className: `${c.logo} ${o}`,
14
14
  width: 64,
15
15
  height: 64
16
16
  }
17
- ) : r === "success" ? /* @__PURE__ */ n(a, { className: `${c.successIcon} ${s}` }) : null;
17
+ ) : r === "success" ? /* @__PURE__ */ e(a, { className: `${c.successIcon} ${o}` }) : null;
18
18
  };
19
19
  export {
20
- $ as SignInImage
20
+ x as SignInImage
21
21
  };
@@ -2,13 +2,13 @@ import { jsxs as o, jsx as n } from "react/jsx-runtime";
2
2
  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";
3
3
  import "react";
4
4
  import { IconXMark as h } from "../../icons/IconXMark.js";
5
+ import { Button as r } from "../Button/index.js";
5
6
  import { SignIn as S } from "../SignIn/index.js";
6
7
  import { useTheme as D } from "../ThemeProvider/index.js";
7
8
  import { SignInImage as M } from "../SignIn/SignInImage.js";
8
9
  import { SignInTitle as f } from "../SignIn/SignInTitle.js";
9
10
  import { SignInDescription as v } from "../SignIn/SignInDescription.js";
10
11
  import { SignInForm as N } from "../SignIn/SignInForm.js";
11
- import { Button as r } from "../Button/index.js";
12
12
  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 = {
13
13
  trigger: y,
14
14
  modal: T,
@@ -1,8 +1,8 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
2
  import { useSignOut as r } from "@coinbase/cdp-hooks";
3
3
  import "react";
4
- import "../../theme/theme.js";
5
4
  import { Button as m } from "../Button/index.js";
5
+ import "../../theme/theme.js";
6
6
  import '../../assets/SignOutButton.css';const g = "SignOutButton-module__signOutButton___WNhmy", c = {
7
7
  signOutButton: g
8
8
  }, l = ({ children: t, variant: n = "primary", onSuccess: o }) => {
@@ -5,7 +5,9 @@ export type ThemeProviderProps = {
5
5
  children: ReactNode;
6
6
  className?: string;
7
7
  style?: CSSProperties;
8
- theme?: Partial<Theme>;
8
+ theme?: Partial<{
9
+ [K in keyof Theme]: Theme[K];
10
+ }>;
9
11
  };
10
12
  export interface ThemeContextValue {
11
13
  theme: Theme;
package/dist/index.js CHANGED
@@ -4,45 +4,45 @@ import { SignIn as f } from "./components/SignIn/index.js";
4
4
  import { useSignInReducer as x } from "./components/SignIn/useSignInReducer.js";
5
5
  import { SignOutButton as I } from "./components/SignOutButton/index.js";
6
6
  import { SignInModal as a } from "./components/SignInModal/index.js";
7
- import { ThemeProvider as l, useTheme as u } from "./components/ThemeProvider/index.js";
8
- import { flattenedTheme as C } from "./theme/theme.js";
9
- import { colors as h, tokens as T } from "./theme/tokens.js";
10
- import { flattenTokensObject as v, themeToCssVariables as A } from "./theme/utils.js";
11
- import { IconCheckCircle as P } from "./icons/IconCheckCircle.js";
12
- import { IconExclamationCircle as B } from "./icons/IconExclamationCircle.js";
13
- import { IconLock as M } from "./icons/IconLock.js";
14
- import { IconXMark as R } from "./icons/IconXMark.js";
15
- import { isEmailInvalid as F } from "./utils/isEmailInvalid.js";
16
- import { isApiError as V } from "./utils/isApiError.js";
17
- import { SignInDescription as q } from "./components/SignIn/SignInDescription.js";
18
- import { SignInForm as y } from "./components/SignIn/SignInForm.js";
19
- import { SignInImage as G } from "./components/SignIn/SignInImage.js";
20
- import { SignInTitle as J } from "./components/SignIn/SignInTitle.js";
21
- import { useSignInContext as N } from "./components/SignIn/SignInProvider.js";
7
+ import { flattenedTheme as l } from "./theme/theme.js";
8
+ import { colors as S, tokens as C } from "./theme/tokens.js";
9
+ import { flattenTokensObject as h, themeToCssVariables as T } from "./theme/utils.js";
10
+ import { IconCheckCircle as v } from "./icons/IconCheckCircle.js";
11
+ import { IconExclamationCircle as E } from "./icons/IconExclamationCircle.js";
12
+ import { IconLock as b } from "./icons/IconLock.js";
13
+ import { IconXMark as D } from "./icons/IconXMark.js";
14
+ import { isEmailInvalid as O } from "./utils/isEmailInvalid.js";
15
+ import { isApiError as j } from "./utils/isApiError.js";
16
+ import { SignInDescription as L } from "./components/SignIn/SignInDescription.js";
17
+ import { SignInForm as X } from "./components/SignIn/SignInForm.js";
18
+ import { SignInImage as w } from "./components/SignIn/SignInImage.js";
19
+ import { SignInTitle as z } from "./components/SignIn/SignInTitle.js";
20
+ import { useSignInContext as H } from "./components/SignIn/SignInProvider.js";
21
+ import { ThemeProvider as K, useTheme as N } from "./components/ThemeProvider/index.js";
22
22
  export {
23
23
  m as AuthButton,
24
24
  e as CDPReactProvider,
25
- P as IconCheckCircle,
26
- B as IconExclamationCircle,
27
- M as IconLock,
28
- R as IconXMark,
25
+ v as IconCheckCircle,
26
+ E as IconExclamationCircle,
27
+ b as IconLock,
28
+ D as IconXMark,
29
29
  f as SignIn,
30
- q as SignInDescription,
31
- y as SignInForm,
32
- G as SignInImage,
30
+ L as SignInDescription,
31
+ X as SignInForm,
32
+ w as SignInImage,
33
33
  a as SignInModal,
34
- J as SignInTitle,
34
+ z as SignInTitle,
35
35
  I as SignOutButton,
36
- l as ThemeProvider,
37
- h as colors,
38
- v as flattenTokensObject,
39
- C as flattenedTheme,
40
- V as isApiError,
41
- F as isEmailInvalid,
42
- A as themeToCssVariables,
43
- T as tokens,
36
+ K as ThemeProvider,
37
+ S as colors,
38
+ h as flattenTokensObject,
39
+ l as flattenedTheme,
40
+ j as isApiError,
41
+ O as isEmailInvalid,
42
+ T as themeToCssVariables,
43
+ C as tokens,
44
44
  t as useAppConfig,
45
- N as useSignInContext,
45
+ H as useSignInContext,
46
46
  x as useSignInReducer,
47
- u as useTheme
47
+ N as useTheme
48
48
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cdp-react",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
9
9
  },
10
10
  "peerDependencies": {
11
11
  "react": ">=18.2.0",
12
- "@coinbase/cdp-core": "^0.0.9",
13
- "@coinbase/cdp-hooks": "^0.0.9"
12
+ "@coinbase/cdp-core": "^0.0.10",
13
+ "@coinbase/cdp-hooks": "^0.0.10"
14
14
  },
15
15
  "devDependencies": {
16
16
  "@size-limit/preset-big-lib": "^11.2.0",
@@ -34,8 +34,8 @@
34
34
  "vite": "^7.0.4",
35
35
  "vite-plugin-dts": "^4.5.4",
36
36
  "vite-plugin-lib-inject-css": "^2.2.2",
37
- "@coinbase/cdp-core": "^0.0.9",
38
- "@coinbase/cdp-hooks": "^0.0.9"
37
+ "@coinbase/cdp-core": "^0.0.10",
38
+ "@coinbase/cdp-hooks": "^0.0.10"
39
39
  },
40
40
  "size-limit": [
41
41
  {