@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.
- package/dist/components/CDPReactProvider/index.d.ts +2 -2
- package/dist/components/SignIn/SignInForm.js +16 -16
- package/dist/components/SignIn/SignInImage.js +9 -9
- package/dist/components/SignInModal/index.js +1 -1
- package/dist/components/SignOutButton/index.js +1 -1
- package/dist/components/ThemeProvider/index.d.ts +3 -1
- package/dist/index.js +33 -33
- package/package.json +5 -5
|
@@ -4,8 +4,8 @@ export interface AppConfig {
|
|
|
4
4
|
name: string;
|
|
5
5
|
logoUrl?: string;
|
|
6
6
|
}
|
|
7
|
-
export type CDPReactProviderProps =
|
|
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 {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
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
|
|
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
|
-
[
|
|
35
|
+
[D, "Use a valid email address"]
|
|
36
36
|
],
|
|
37
|
-
children:
|
|
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(
|
|
49
|
-
/* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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(
|
|
175
|
+
/* @__PURE__ */ t(k, { className: s.icon }),
|
|
176
176
|
/* @__PURE__ */ o("p", { children: [
|
|
177
177
|
"Secured by ",
|
|
178
|
-
/* @__PURE__ */ t(
|
|
178
|
+
/* @__PURE__ */ t(W, { className: s.coinbaseIcon, "aria-label": "Coinbase" })
|
|
179
179
|
] })
|
|
180
180
|
] })
|
|
181
181
|
] });
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useAppConfig as
|
|
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
|
|
7
|
-
const { state: m } = f(), { step: r } = m,
|
|
8
|
-
return r !== "success" &&
|
|
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:
|
|
11
|
+
src: n,
|
|
12
12
|
alt: p || "",
|
|
13
|
-
className: `${c.logo} ${
|
|
13
|
+
className: `${c.logo} ${o}`,
|
|
14
14
|
width: 64,
|
|
15
15
|
height: 64
|
|
16
16
|
}
|
|
17
|
-
) : r === "success" ? /* @__PURE__ */
|
|
17
|
+
) : r === "success" ? /* @__PURE__ */ e(a, { className: `${c.successIcon} ${o}` }) : null;
|
|
18
18
|
};
|
|
19
19
|
export {
|
|
20
|
-
|
|
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 }) => {
|
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 {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
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
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
v as IconCheckCircle,
|
|
26
|
+
E as IconExclamationCircle,
|
|
27
|
+
b as IconLock,
|
|
28
|
+
D as IconXMark,
|
|
29
29
|
f as SignIn,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
L as SignInDescription,
|
|
31
|
+
X as SignInForm,
|
|
32
|
+
w as SignInImage,
|
|
33
33
|
a as SignInModal,
|
|
34
|
-
|
|
34
|
+
z as SignInTitle,
|
|
35
35
|
I as SignOutButton,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
-
|
|
45
|
+
H as useSignInContext,
|
|
46
46
|
x as useSignInReducer,
|
|
47
|
-
|
|
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.
|
|
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.
|
|
13
|
-
"@coinbase/cdp-hooks": "^0.0.
|
|
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.
|
|
38
|
-
"@coinbase/cdp-hooks": "^0.0.
|
|
37
|
+
"@coinbase/cdp-core": "^0.0.10",
|
|
38
|
+
"@coinbase/cdp-hooks": "^0.0.10"
|
|
39
39
|
},
|
|
40
40
|
"size-limit": [
|
|
41
41
|
{
|