@coinbase/cdp-react 0.0.60 → 0.0.61
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/README.md +10 -8
- package/dist/chunks/{LinkAuthFlow.BZtyaLN-.js → LinkAuthFlow.CxSnHF2p.js} +1 -1
- package/dist/components/CDPReactProvider/index.js +52 -49
- package/dist/components/CopyEvmKeyButton/index.js +25 -26
- package/dist/components/CopySolanaKeyButton/index.js +15 -16
- package/dist/components/LinkAuth/LinkAuthFlow.js +1 -1
- package/dist/components/LinkAuth/LinkAuthFlowBackButton.js +1 -1
- package/dist/components/LinkAuth/LinkAuthFlowProvider.js +1 -1
- package/dist/components/LinkAuth/LinkAuthTitle.d.ts +1 -4
- package/dist/components/LinkAuth/index.js +2 -2
- package/dist/components/LinkAuthModal/index.js +1 -1
- package/dist/hooks/useKeyExportPostMessage.d.ts +3 -2
- package/dist/hooks/useKeyExportPostMessage.js +48 -51
- package/dist/index.js +1 -1
- package/dist/types/secureIframe.d.ts +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -3,14 +3,16 @@ the CDP frontend SDK.
|
|
|
3
3
|
|
|
4
4
|
## Components
|
|
5
5
|
|
|
6
|
-
- {@link SignInModal |
|
|
7
|
-
- {@link SignIn |
|
|
8
|
-
- {@link SignOutButton |
|
|
9
|
-
- {@link AuthButton |
|
|
10
|
-
- {@link SendEvmTransactionButton |
|
|
11
|
-
- {@link SendSolanaTransactionButton |
|
|
12
|
-
- {@link Fund |
|
|
13
|
-
- {@link FundModal |
|
|
6
|
+
- {@link SignInModal | SignInModal} - a button that triggers a modal with the sign-in flow
|
|
7
|
+
- {@link SignIn | SignIn} - the forms for the sign in flow, a logo, heading, and description text
|
|
8
|
+
- {@link SignOutButton | SignOutButton} - a sign out button
|
|
9
|
+
- {@link AuthButton | AuthButton} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
|
|
10
|
+
- {@link SendEvmTransactionButton | SendEvmTransactionButton} - a button that signs and sends an EVM transaction
|
|
11
|
+
- {@link SendSolanaTransactionButton | SendSolanaTransactionButton} - a button that signs and sends a Solana transaction
|
|
12
|
+
- {@link Fund | Fund} - the fund flow
|
|
13
|
+
- {@link FundModal | FundModal} - a button that triggers a modal with the fund flow
|
|
14
|
+
- {@link LinkAuth | LinkAuth} - a component to link or unlink auth methods
|
|
15
|
+
- {@link LinkAuthModal | LinkAuthModal} - a button that triggers a modal with the link / unlink flow
|
|
14
16
|
|
|
15
17
|
## Quickstart
|
|
16
18
|
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { jsx as p, jsxs as
|
|
2
|
-
import { OAuth2ProviderType as
|
|
3
|
-
import { lazy as
|
|
4
|
-
import { ThemeProvider as
|
|
5
|
-
const
|
|
1
|
+
import { jsx as p, jsxs as H } from "react/jsx-runtime";
|
|
2
|
+
import { OAuth2ProviderType as S, CDPContext as U, CDPHooksProvider as _ } from "@coinbase/cdp-hooks";
|
|
3
|
+
import { lazy as E, createContext as j, useContext as m, useMemo as L } from "react";
|
|
4
|
+
import { ThemeProvider as F } from "../ThemeProvider/index.js";
|
|
5
|
+
const k = E(() => import("../OAuthStatusModal/index.js")), I = (t) => {
|
|
6
6
|
try {
|
|
7
|
-
return JSON.stringify(
|
|
7
|
+
return JSON.stringify(t);
|
|
8
8
|
} catch {
|
|
9
9
|
}
|
|
10
10
|
return "";
|
|
11
|
-
},
|
|
11
|
+
}, J = Object.keys(S).map((t) => `oauth:${t}`), V = [
|
|
12
12
|
/** Email OTP method */
|
|
13
13
|
"email",
|
|
14
14
|
/** SMS OTP method */
|
|
15
15
|
"sms"
|
|
16
|
-
],
|
|
17
|
-
children:
|
|
16
|
+
], G = [...V, ...J], K = ({
|
|
17
|
+
children: t,
|
|
18
18
|
className: r = "",
|
|
19
19
|
config: n,
|
|
20
20
|
name: s,
|
|
@@ -25,16 +25,17 @@ const F = _(() => import("../OAuthStatusModal/index.js")), k = (e) => {
|
|
|
25
25
|
appName: h,
|
|
26
26
|
appLogoUrl: c,
|
|
27
27
|
showCoinbaseFooter: u,
|
|
28
|
-
authMethods:
|
|
28
|
+
authMethods: e,
|
|
29
29
|
projectId: d,
|
|
30
30
|
secureIframeBasePath: C,
|
|
31
31
|
useMock: l,
|
|
32
32
|
debugging: f,
|
|
33
33
|
basePath: A,
|
|
34
|
-
ethereum:
|
|
35
|
-
solana:
|
|
36
|
-
disableAnalytics: O
|
|
37
|
-
|
|
34
|
+
ethereum: y,
|
|
35
|
+
solana: b,
|
|
36
|
+
disableAnalytics: O,
|
|
37
|
+
customAuth: P
|
|
38
|
+
} = n, { createOnLogin: M } = y ?? {}, { createOnLogin: v } = b ?? {}, w = L(
|
|
38
39
|
() => ({
|
|
39
40
|
projectId: d,
|
|
40
41
|
useMock: l,
|
|
@@ -42,8 +43,9 @@ const F = _(() => import("../OAuthStatusModal/index.js")), k = (e) => {
|
|
|
42
43
|
basePath: A,
|
|
43
44
|
secureIframeBasePath: C,
|
|
44
45
|
disableAnalytics: O,
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
customAuth: P,
|
|
47
|
+
ethereum: { createOnLogin: M },
|
|
48
|
+
solana: { createOnLogin: v }
|
|
47
49
|
}),
|
|
48
50
|
[
|
|
49
51
|
d,
|
|
@@ -51,36 +53,37 @@ const F = _(() => import("../OAuthStatusModal/index.js")), k = (e) => {
|
|
|
51
53
|
f,
|
|
52
54
|
A,
|
|
53
55
|
C,
|
|
54
|
-
P,
|
|
55
56
|
M,
|
|
56
|
-
|
|
57
|
+
v,
|
|
58
|
+
O,
|
|
59
|
+
P
|
|
57
60
|
]
|
|
58
|
-
),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
), N = { appName: h, appLogoUrl: c, showCoinbaseFooter: u, authMethods: e }, T = e?.some((D) => D.startsWith("oauth:")), x = /* @__PURE__ */ p(z, { name: s, config: N, children: /* @__PURE__ */ H(F, { className: r, style: a, theme: i, children: [
|
|
62
|
+
t,
|
|
63
|
+
T && /* @__PURE__ */ p(k, {})
|
|
61
64
|
] }) });
|
|
62
|
-
return m(
|
|
63
|
-
}, g =
|
|
65
|
+
return m(U) ? x : /* @__PURE__ */ p(_, { config: w, children: x });
|
|
66
|
+
}, g = j(
|
|
64
67
|
void 0
|
|
65
|
-
),
|
|
68
|
+
), o = {
|
|
66
69
|
appName: "",
|
|
67
70
|
appLogoUrl: "",
|
|
68
71
|
showCoinbaseFooter: !0,
|
|
69
72
|
authMethods: ["email"]
|
|
70
|
-
},
|
|
71
|
-
children:
|
|
73
|
+
}, z = ({
|
|
74
|
+
children: t,
|
|
72
75
|
config: r,
|
|
73
76
|
name: n
|
|
74
77
|
}) => {
|
|
75
78
|
const {
|
|
76
|
-
appName: s =
|
|
77
|
-
appLogoUrl: a =
|
|
78
|
-
showCoinbaseFooter: i =
|
|
79
|
-
authMethods: h =
|
|
80
|
-
} = r ?? {}, c =
|
|
81
|
-
let
|
|
79
|
+
appName: s = o.appName,
|
|
80
|
+
appLogoUrl: a = o.appLogoUrl,
|
|
81
|
+
showCoinbaseFooter: i = o.showCoinbaseFooter,
|
|
82
|
+
authMethods: h = o.authMethods
|
|
83
|
+
} = r ?? {}, c = I(h), u = L(() => {
|
|
84
|
+
let e = ["email"];
|
|
82
85
|
try {
|
|
83
|
-
|
|
86
|
+
e = JSON.parse(c);
|
|
84
87
|
} catch {
|
|
85
88
|
}
|
|
86
89
|
return {
|
|
@@ -88,28 +91,28 @@ const F = _(() => import("../OAuthStatusModal/index.js")), k = (e) => {
|
|
|
88
91
|
appName: s,
|
|
89
92
|
appLogoUrl: a,
|
|
90
93
|
showCoinbaseFooter: i,
|
|
91
|
-
authMethods: Array.isArray(
|
|
94
|
+
authMethods: Array.isArray(e) && e?.length ? e : o.authMethods
|
|
92
95
|
},
|
|
93
96
|
name: n
|
|
94
97
|
};
|
|
95
98
|
}, [s, a, i, c, n]);
|
|
96
|
-
return /* @__PURE__ */ p(g.Provider, { value: u, children:
|
|
97
|
-
}, K = () => {
|
|
98
|
-
const e = m(g);
|
|
99
|
-
if (!e)
|
|
100
|
-
throw new Error("useAppConfig must be used within an AppConfigProvider");
|
|
101
|
-
return e.app;
|
|
99
|
+
return /* @__PURE__ */ p(g.Provider, { value: u, children: t });
|
|
102
100
|
}, Q = () => {
|
|
103
|
-
const
|
|
104
|
-
if (!
|
|
101
|
+
const t = m(g);
|
|
102
|
+
if (!t)
|
|
103
|
+
throw new Error("useAppConfig must be used within an AppConfigProvider");
|
|
104
|
+
return t.app;
|
|
105
|
+
}, X = () => {
|
|
106
|
+
const t = m(g);
|
|
107
|
+
if (!t)
|
|
105
108
|
throw new Error("useProviderName must be used within an AppConfigProvider");
|
|
106
|
-
return
|
|
109
|
+
return t.name ?? "";
|
|
107
110
|
};
|
|
108
111
|
export {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
G as ALL_AUTH_METHODS,
|
|
113
|
+
V as AUTH_METHODS,
|
|
114
|
+
K as CDPReactProvider,
|
|
115
|
+
J as OAUTH_METHODS,
|
|
116
|
+
Q as useAppConfig,
|
|
117
|
+
X as useProviderName
|
|
115
118
|
};
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useConfig as
|
|
3
|
-
import { useRef as
|
|
1
|
+
import { jsx as B } from "react/jsx-runtime";
|
|
2
|
+
import { useConfig as P } from "@coinbase/cdp-hooks";
|
|
3
|
+
import { useRef as v, useCallback as x } from "react";
|
|
4
4
|
import "../ui/Button/index.js";
|
|
5
|
-
import { IframeButton as
|
|
6
|
-
import { useKeyExportPostMessage as
|
|
5
|
+
import { IframeButton as I } from "../ui/IframeButton/index.js";
|
|
6
|
+
import { useKeyExportPostMessage as K } from "../../hooks/useKeyExportPostMessage.js";
|
|
7
7
|
import "@coinbase/cdp-core";
|
|
8
8
|
import "../../theme/cssVariables.js";
|
|
9
9
|
import "../../theme/theme.js";
|
|
10
10
|
import "../../theme/tokens.js";
|
|
11
11
|
const A = ({
|
|
12
|
-
address:
|
|
13
|
-
className:
|
|
12
|
+
address: s,
|
|
13
|
+
className: a = "",
|
|
14
14
|
copiedLabel: n = "Copied",
|
|
15
|
-
icon:
|
|
15
|
+
icon: o = !0,
|
|
16
16
|
fullWidth: c,
|
|
17
17
|
label: e = "Copy key",
|
|
18
18
|
onReady: t,
|
|
@@ -22,38 +22,37 @@ const A = ({
|
|
|
22
22
|
variant: u
|
|
23
23
|
}) => {
|
|
24
24
|
const {
|
|
25
|
-
config: { projectId:
|
|
26
|
-
} =
|
|
27
|
-
(
|
|
28
|
-
|
|
25
|
+
config: { projectId: l, secureIframeBasePath: y }
|
|
26
|
+
} = P(), f = v(null), d = x(
|
|
27
|
+
(r, g) => {
|
|
28
|
+
r === "ready" && t?.(), r === "success" && m?.(), r === "error" && i?.(g);
|
|
29
29
|
},
|
|
30
30
|
[t, m, i]
|
|
31
|
-
), { iframeUrl: C,
|
|
32
|
-
address:
|
|
31
|
+
), { iframeUrl: C, isPending: b } = K({
|
|
32
|
+
address: s,
|
|
33
33
|
type: "evm",
|
|
34
|
-
projectId:
|
|
34
|
+
projectId: l,
|
|
35
35
|
variant: u,
|
|
36
36
|
size: p,
|
|
37
37
|
label: e,
|
|
38
|
-
basePath:
|
|
38
|
+
basePath: y,
|
|
39
39
|
copiedLabel: n,
|
|
40
|
-
icon:
|
|
41
|
-
iframeRef:
|
|
42
|
-
onStatusUpdate:
|
|
40
|
+
icon: o,
|
|
41
|
+
iframeRef: f,
|
|
42
|
+
onStatusUpdate: d
|
|
43
43
|
});
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
|
|
44
|
+
return /* @__PURE__ */ B(
|
|
45
|
+
I,
|
|
46
46
|
{
|
|
47
|
-
ref:
|
|
47
|
+
ref: f,
|
|
48
48
|
src: C,
|
|
49
49
|
allow: "clipboard-read; clipboard-write",
|
|
50
|
-
|
|
51
|
-
isPending: g,
|
|
50
|
+
isPending: b,
|
|
52
51
|
label: e,
|
|
53
|
-
icon:
|
|
52
|
+
icon: o,
|
|
54
53
|
fullWidth: c,
|
|
55
54
|
size: p,
|
|
56
|
-
className:
|
|
55
|
+
className: a
|
|
57
56
|
}
|
|
58
57
|
);
|
|
59
58
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useConfig as
|
|
3
|
-
import { useRef as
|
|
1
|
+
import { jsx as B } from "react/jsx-runtime";
|
|
2
|
+
import { useConfig as P } from "@coinbase/cdp-hooks";
|
|
3
|
+
import { useRef as x, useCallback as I } from "react";
|
|
4
4
|
import "../ui/Button/index.js";
|
|
5
|
-
import { IframeButton as
|
|
6
|
-
import { useKeyExportPostMessage as
|
|
5
|
+
import { IframeButton as K } from "../ui/IframeButton/index.js";
|
|
6
|
+
import { useKeyExportPostMessage as h } from "../../hooks/useKeyExportPostMessage.js";
|
|
7
7
|
import "@coinbase/cdp-core";
|
|
8
8
|
import "../../theme/cssVariables.js";
|
|
9
9
|
import "../../theme/theme.js";
|
|
@@ -22,33 +22,32 @@ const A = ({
|
|
|
22
22
|
variant: l
|
|
23
23
|
}) => {
|
|
24
24
|
const {
|
|
25
|
-
config: { projectId: u, secureIframeBasePath:
|
|
26
|
-
} =
|
|
27
|
-
(o,
|
|
28
|
-
o === "ready" && t?.(), o === "success" && a?.(), o === "error" && i?.(
|
|
25
|
+
config: { projectId: u, secureIframeBasePath: y }
|
|
26
|
+
} = P(), m = x(null), d = I(
|
|
27
|
+
(o, g) => {
|
|
28
|
+
o === "ready" && t?.(), o === "success" && a?.(), o === "error" && i?.(g);
|
|
29
29
|
},
|
|
30
30
|
[t, a, i]
|
|
31
|
-
), { iframeUrl: C,
|
|
31
|
+
), { iframeUrl: C, isPending: b } = h({
|
|
32
32
|
address: s,
|
|
33
33
|
type: "solana",
|
|
34
34
|
projectId: u,
|
|
35
35
|
variant: l,
|
|
36
36
|
size: p,
|
|
37
37
|
label: e,
|
|
38
|
-
basePath:
|
|
38
|
+
basePath: y,
|
|
39
39
|
copiedLabel: n,
|
|
40
40
|
icon: r,
|
|
41
41
|
iframeRef: m,
|
|
42
|
-
onStatusUpdate:
|
|
42
|
+
onStatusUpdate: d
|
|
43
43
|
});
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
|
|
44
|
+
return /* @__PURE__ */ B(
|
|
45
|
+
K,
|
|
46
46
|
{
|
|
47
47
|
ref: m,
|
|
48
48
|
src: C,
|
|
49
49
|
allow: "clipboard-read; clipboard-write",
|
|
50
|
-
|
|
51
|
-
isPending: g,
|
|
50
|
+
isPending: b,
|
|
52
51
|
label: e,
|
|
53
52
|
icon: r,
|
|
54
53
|
fullWidth: c,
|
|
@@ -5,7 +5,7 @@ import "../SignIn/index.js";
|
|
|
5
5
|
import "@coinbase/cdp-hooks";
|
|
6
6
|
import "../ui/SwitchSlideTransition/index.js";
|
|
7
7
|
import "../ui/VisuallyHidden/index.js";
|
|
8
|
-
import { L as x } from "../../chunks/LinkAuthFlow.
|
|
8
|
+
import { L as x } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
9
9
|
import "./LinkAuthItems.js";
|
|
10
10
|
import "./types.js";
|
|
11
11
|
import "../SignIn/SignInProvider.js";
|
|
@@ -3,7 +3,7 @@ import { c as k } from "../../chunks/lite.1fxw3LjI.js";
|
|
|
3
3
|
import "react";
|
|
4
4
|
import { Button as p } from "../ui/Button/index.js";
|
|
5
5
|
import { IconArrowLeft as f } from "../../icons/IconArrowLeft.js";
|
|
6
|
-
import { b as w } from "../../chunks/LinkAuthFlow.
|
|
6
|
+
import { b as w } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
7
7
|
import { useLinkAuthContext as _ } from "./LinkAuthProvider.js";
|
|
8
8
|
import "../CDPReactProvider/index.js";
|
|
9
9
|
import { methodToView as b } from "./utils.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import "../CDPReactProvider/index.js";
|
|
4
|
-
import { a, u as e, b as n } from "../../chunks/LinkAuthFlow.
|
|
4
|
+
import { a, u as e, b as n } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
5
5
|
export {
|
|
6
6
|
a as LinkAuthFlowProvider,
|
|
7
7
|
e as useLinkAuthFlow,
|
|
@@ -3,7 +3,4 @@ export interface LinkAuthTitleProps extends HTMLAttributes<HTMLElement> {
|
|
|
3
3
|
as?: ElementType;
|
|
4
4
|
children?: ReactNode;
|
|
5
5
|
}
|
|
6
|
-
export declare const LinkAuthTitle: ({ as: Component, children, className, ...props }:
|
|
7
|
-
as?: React.ElementType;
|
|
8
|
-
children?: React.ReactNode;
|
|
9
|
-
} & HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export declare const LinkAuthTitle: ({ as: Component, children, className, ...props }: LinkAuthTitleProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -8,8 +8,8 @@ import { Banner as U } from "../ui/Banner/index.js";
|
|
|
8
8
|
import { getMessageFromUnknownError as D } from "../../utils/getMessageFromUnknownError.js";
|
|
9
9
|
import "libphonenumber-js";
|
|
10
10
|
import { toOAuthProviderType as H } from "../../utils/toOAuthProviderType.js";
|
|
11
|
-
import { a as M, L as v } from "../../chunks/LinkAuthFlow.
|
|
12
|
-
import { u as mt } from "../../chunks/LinkAuthFlow.
|
|
11
|
+
import { a as M, L as v } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
12
|
+
import { u as mt } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
13
13
|
import { LinkAuthFlowBackButton as V } from "./LinkAuthFlowBackButton.js";
|
|
14
14
|
import { LinkAuthItem as dt } from "./LinkAuthItem.js";
|
|
15
15
|
import { LinkAuthItems as ft } from "./LinkAuthItems.js";
|
|
@@ -11,7 +11,7 @@ import { IconXMark as F } from "../../icons/IconXMark.js";
|
|
|
11
11
|
import { childrenHasComponent as c } from "../../utils/childrenHasComponent.js";
|
|
12
12
|
import { LinkAuthTitle as H } from "../LinkAuth/LinkAuthTitle.js";
|
|
13
13
|
import { LinkAuthFlowBackButton as j } from "../LinkAuth/LinkAuthFlowBackButton.js";
|
|
14
|
-
import { L as B } from "../../chunks/LinkAuthFlow.
|
|
14
|
+
import { L as B } from "../../chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
15
15
|
import '../../assets/LinkAuthModal.css';const S = "LinkAuthModal-module__header___qoco6", D = "LinkAuthModal-module__error___Srl7H", E = "LinkAuthModal-module__trigger___aHDfG", r = {
|
|
16
16
|
header: S,
|
|
17
17
|
error: D,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
2
|
import { ButtonProps } from '../components/ui/Button';
|
|
3
|
-
import { SecureIframeStatus, SecureIframeEventType, SecureIframeIncomingMessage, SecureIframeOutgoingMessage } from '../types/secureIframe';
|
|
3
|
+
import { SecureIframeStatus, SecureIframeEventType, SecureIframeIncomingMessage, SecureIframeOutgoingMessage, SecureIframeInitMessage } from '../types/secureIframe';
|
|
4
4
|
export declare const SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE: Readonly<{
|
|
5
5
|
GET_PRIVATE_KEY: "CDP_WEB_SECURE_IFRAME_GET_PRIVATE_KEY";
|
|
6
6
|
INIT: "CDP_WEB_SECURE_IFRAME_INIT";
|
|
@@ -13,6 +13,8 @@ export type SecureIframeGetPrivateKeyMessage = {
|
|
|
13
13
|
payload: {
|
|
14
14
|
address: string;
|
|
15
15
|
type: "evm" | "solana";
|
|
16
|
+
authState: SecureIframeInitMessage["payload"]["authState"];
|
|
17
|
+
theme: SecureIframeInitMessage["payload"]["theme"];
|
|
16
18
|
};
|
|
17
19
|
};
|
|
18
20
|
export type SecureIframeKeyExportIncomingMessage = SecureIframeIncomingMessage | SecureIframeGetPrivateKeyMessage;
|
|
@@ -32,6 +34,5 @@ export declare const sendKeyExportMessage: (el: HTMLIFrameElement | null, messag
|
|
|
32
34
|
export declare const isKeyExportMessage: (message: unknown) => message is SecureIframeKeyExportIncomingMessage | SecureIframeKeyExportOutgoingMessage;
|
|
33
35
|
export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, size, type, variant, }: UseKeyExportPostMessageProps) => {
|
|
34
36
|
iframeUrl: string;
|
|
35
|
-
onLoad: () => Promise<void>;
|
|
36
37
|
isPending: boolean;
|
|
37
38
|
};
|
|
@@ -1,86 +1,83 @@
|
|
|
1
|
-
import { getAccessToken as
|
|
2
|
-
import { useCurrentUser as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { useTheme as
|
|
1
|
+
import { getAccessToken as M, getAccessTokenExpiration as S } from "@coinbase/cdp-core";
|
|
2
|
+
import { useCurrentUser as k } from "@coinbase/cdp-hooks";
|
|
3
|
+
import { useState as w, useMemo as K, useCallback as l, useEffect as $ } from "react";
|
|
4
|
+
import { useTheme as x } from "../components/ThemeProvider/index.js";
|
|
5
5
|
import "../components/ui/Button/index.js";
|
|
6
|
-
import { SECURE_IFRAME_EVENT_TYPE_PREFIX as h, SECURE_IFRAME_EVENT_TYPE as
|
|
6
|
+
import { SECURE_IFRAME_EVENT_TYPE_PREFIX as h, SECURE_IFRAME_EVENT_TYPE as C } from "../types/secureIframe.js";
|
|
7
7
|
import "libphonenumber-js";
|
|
8
|
-
import { sendIframeMessage as
|
|
9
|
-
const
|
|
10
|
-
...
|
|
8
|
+
import { sendIframeMessage as Y } from "../utils/sendIframeMessage.js";
|
|
9
|
+
const A = "https://secure.cdp.coinbase.com", o = Object.freeze({
|
|
10
|
+
...C,
|
|
11
11
|
GET_PRIVATE_KEY: `${h}GET_PRIVATE_KEY`
|
|
12
|
-
}),
|
|
13
|
-
|
|
14
|
-
}, F = (t) => typeof t == "object" && t !== null && "type" in t && typeof t.type == "string" && !!
|
|
12
|
+
}), V = (t, s) => {
|
|
13
|
+
Y(t, s);
|
|
14
|
+
}, F = (t) => typeof t == "object" && t !== null && "type" in t && typeof t.type == "string" && !!o[t.type.replace(
|
|
15
15
|
h,
|
|
16
16
|
""
|
|
17
|
-
)],
|
|
17
|
+
)], B = ({
|
|
18
18
|
address: t,
|
|
19
|
-
basePath:
|
|
20
|
-
copiedLabel:
|
|
21
|
-
icon:
|
|
22
|
-
iframeRef:
|
|
23
|
-
label:
|
|
24
|
-
onStatusUpdate:
|
|
25
|
-
projectId:
|
|
26
|
-
size:
|
|
27
|
-
type:
|
|
28
|
-
variant:
|
|
19
|
+
basePath: s = A,
|
|
20
|
+
copiedLabel: n,
|
|
21
|
+
icon: T,
|
|
22
|
+
iframeRef: i,
|
|
23
|
+
label: c,
|
|
24
|
+
onStatusUpdate: f,
|
|
25
|
+
projectId: E,
|
|
26
|
+
size: a,
|
|
27
|
+
type: _,
|
|
28
|
+
variant: p
|
|
29
29
|
}) => {
|
|
30
|
-
const { currentUser:
|
|
30
|
+
const { currentUser: u } = k(), { theme: d } = x(), [I, R] = w(!0), U = K(() => {
|
|
31
31
|
const e = ["fullWidth"];
|
|
32
|
-
return
|
|
33
|
-
}, [
|
|
34
|
-
if (!
|
|
35
|
-
const e = await
|
|
36
|
-
|
|
37
|
-
type:
|
|
32
|
+
return E && e.push(`projectId=${E.trim()}`), p && e.push(`variant=${p.trim()}`), a && e.push(`size=${a.trim()}`), c && e.push(`label=${encodeURIComponent(c.trim())}`), n && e.push(`copiedLabel=${encodeURIComponent(n.trim())}`), T && e.push("icon"), `${s}?${e.join("&")}`;
|
|
33
|
+
}, [E, p, a, c, n, T, s]), y = l(async () => {
|
|
34
|
+
if (!u || !i.current) return;
|
|
35
|
+
const e = await M(), r = await S();
|
|
36
|
+
V(i.current, {
|
|
37
|
+
type: o.GET_PRIVATE_KEY,
|
|
38
38
|
payload: {
|
|
39
|
+
address: t,
|
|
40
|
+
type: _,
|
|
39
41
|
authState: {
|
|
40
42
|
accessToken: e || "",
|
|
41
43
|
expiresAt: r || 0,
|
|
42
|
-
user:
|
|
44
|
+
user: u
|
|
43
45
|
},
|
|
44
|
-
theme:
|
|
46
|
+
theme: d
|
|
45
47
|
}
|
|
46
48
|
});
|
|
47
|
-
}, [
|
|
48
|
-
s && A(n.current, {
|
|
49
|
-
type: i.GET_PRIVATE_KEY,
|
|
50
|
-
payload: { address: t, type: f }
|
|
51
|
-
});
|
|
52
|
-
}, [s, t, f, n]), l = T(
|
|
49
|
+
}, [u, t, _, d, i]), g = l(
|
|
53
50
|
(e, r) => {
|
|
54
|
-
|
|
51
|
+
f?.(e, r), R(!1);
|
|
55
52
|
},
|
|
56
|
-
[
|
|
53
|
+
[f]
|
|
57
54
|
);
|
|
58
|
-
return
|
|
55
|
+
return $(() => {
|
|
59
56
|
const e = (r) => {
|
|
60
57
|
let m = "";
|
|
61
58
|
try {
|
|
62
|
-
m = new URL(
|
|
63
|
-
} catch (
|
|
64
|
-
console.error("Error parsing iframe origin",
|
|
59
|
+
m = new URL(s || A).origin;
|
|
60
|
+
} catch (P) {
|
|
61
|
+
console.error("Error parsing iframe origin", P);
|
|
65
62
|
}
|
|
66
63
|
if (!(!m || r.origin !== m) && F(r.data))
|
|
67
64
|
switch (r.data?.type) {
|
|
68
|
-
case
|
|
69
|
-
|
|
65
|
+
case o.LISTENING:
|
|
66
|
+
y();
|
|
70
67
|
break;
|
|
71
|
-
case
|
|
72
|
-
|
|
68
|
+
case o.STATUS:
|
|
69
|
+
g(r.data.payload.status, r.data.payload.message);
|
|
73
70
|
break;
|
|
74
71
|
}
|
|
75
72
|
};
|
|
76
73
|
return window.addEventListener("message", e), () => {
|
|
77
74
|
window.removeEventListener("message", e);
|
|
78
75
|
};
|
|
79
|
-
}, [
|
|
76
|
+
}, [y, g, s]), { iframeUrl: U, isPending: I };
|
|
80
77
|
};
|
|
81
78
|
export {
|
|
82
|
-
|
|
79
|
+
o as SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE,
|
|
83
80
|
F as isKeyExportMessage,
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
V as sendKeyExportMessage,
|
|
82
|
+
B as useKeyExportPostMessage
|
|
86
83
|
};
|
package/dist/index.js
CHANGED
|
@@ -45,7 +45,7 @@ import { sendIframeMessage as ar } from "./utils/sendIframeMessage.js";
|
|
|
45
45
|
import { FundForm as ur } from "./components/Fund/FundForm.js";
|
|
46
46
|
import { FundTitle as cr } from "./components/Fund/FundTitle.js";
|
|
47
47
|
import { useFundContext as Ir } from "./components/Fund/FundProvider.js";
|
|
48
|
-
import { L as Ar, u as hr } from "./chunks/LinkAuthFlow.
|
|
48
|
+
import { L as Ar, u as hr } from "./chunks/LinkAuthFlow.CxSnHF2p.js";
|
|
49
49
|
import { LinkAuthFlowBackButton as Mr } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
|
|
50
50
|
import { LinkAuthItem as Tr } from "./components/LinkAuth/LinkAuthItem.js";
|
|
51
51
|
import { LinkAuthItems as Lr } from "./components/LinkAuth/LinkAuthItems.js";
|
|
@@ -19,7 +19,7 @@ export type SecureIframeIncomingMessage = SecureIframeInitMessage;
|
|
|
19
19
|
export type SecureIframeListeningMessage = {
|
|
20
20
|
type: SecureIframeEventType["LISTENING"];
|
|
21
21
|
};
|
|
22
|
-
export type SecureIframeStatus = "
|
|
22
|
+
export type SecureIframeStatus = "ready" | "success" | "error";
|
|
23
23
|
export type SecureIframeStatusMessage = {
|
|
24
24
|
type: SecureIframeEventType["STATUS"];
|
|
25
25
|
payload: {
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "0.0.
|
|
1
|
+
export declare const VERSION = "0.0.61";
|
package/dist/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cdp-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.61",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@internationalized/number": "3.6.4",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=18.2.0 <19.2.0",
|
|
18
|
-
"@coinbase/cdp-core": "^0.0.
|
|
19
|
-
"@coinbase/cdp-hooks": "^0.0.
|
|
18
|
+
"@coinbase/cdp-core": "^0.0.61",
|
|
19
|
+
"@coinbase/cdp-hooks": "^0.0.61"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@size-limit/preset-big-lib": "^11.2.0",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"vite": "^7.0.4",
|
|
47
47
|
"vite-plugin-dts": "^4.5.4",
|
|
48
48
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
49
|
-
"@coinbase/cdp-core": "^0.0.
|
|
50
|
-
"@coinbase/cdp-hooks": "^0.0.
|
|
49
|
+
"@coinbase/cdp-core": "^0.0.61",
|
|
50
|
+
"@coinbase/cdp-hooks": "^0.0.61"
|
|
51
51
|
},
|
|
52
52
|
"size-limit": [
|
|
53
53
|
{
|