@coinbase/cdp-react 0.0.88 → 0.0.90
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/ExportWallet/index.js +3 -2
- package/dist/components/LinkAuth/LinkAuthItems.js +29 -27
- package/dist/components/LinkAuth/LinkAuthProvider.js +27 -22
- package/dist/components/LinkAuth/index.js +56 -56
- package/dist/components/OAuthStatusModal/index.d.ts +1 -0
- package/dist/components/OAuthStatusModal/index.js +73 -69
- package/dist/components/SignIn/SignInAuthMethodButtons.js +29 -24
- package/dist/components/SignIn/hooks/useSignInWithOAuth.js +16 -13
- package/dist/components/forms/PhoneNumberForm/index.d.ts +1 -1
- package/dist/components/forms/PhoneNumberInput/index.d.ts +1 -1
- package/dist/components/ui/Badge/index.d.ts +1 -2
- package/dist/components/ui/Banner/index.d.ts +1 -2
- package/dist/icons/IconTelegramLogo.d.ts +2 -0
- package/dist/icons/IconTelegramLogo.js +13 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +106 -104
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +5 -5
|
@@ -57,6 +57,7 @@ import "../../utils/isApiError.js";
|
|
|
57
57
|
import "../../utils/isEmailInvalid.js";
|
|
58
58
|
import "../../utils/parseValuesFromPhoneNumber.js";
|
|
59
59
|
import "../../utils/sendIframeMessage.js";
|
|
60
|
+
import "../../hooks/usePhoneNumberState.js";
|
|
60
61
|
import "@coinbase/cdp-core";
|
|
61
62
|
import "../EnrollMfa/EnrollMfaDescription.js";
|
|
62
63
|
import "../EnrollMfa/EnrollMfaFlow.js";
|
|
@@ -332,7 +333,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
|
|
|
332
333
|
]
|
|
333
334
|
}
|
|
334
335
|
) });
|
|
335
|
-
},
|
|
336
|
+
}, se = ({
|
|
336
337
|
address: o,
|
|
337
338
|
children: e,
|
|
338
339
|
onIframeReady: r,
|
|
@@ -365,7 +366,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
|
|
|
365
366
|
};
|
|
366
367
|
D.registerPackageVersion("react", q);
|
|
367
368
|
export {
|
|
368
|
-
|
|
369
|
+
se as E,
|
|
369
370
|
pt as ExportWallet,
|
|
370
371
|
j as ExportWalletCopyAddress,
|
|
371
372
|
B as ExportWalletCopyKeyButton,
|
|
@@ -1,47 +1,49 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
2
|
+
import { c as u } from "../../chunks/lite.1fxw3LjI.js";
|
|
3
3
|
import { useMemo as b } from "react";
|
|
4
4
|
import "../../chunks/CDPReactProvider.BkmtXUv1.js";
|
|
5
|
-
import { IconAppleLogo as
|
|
6
|
-
import { IconEnvelope as
|
|
7
|
-
import { IconGoogleColorLogo as
|
|
8
|
-
import { IconPhone as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
5
|
+
import { IconAppleLogo as g } from "../../icons/IconAppleLogo.js";
|
|
6
|
+
import { IconEnvelope as d } from "../../icons/IconEnvelope.js";
|
|
7
|
+
import { IconGoogleColorLogo as f } from "../../icons/IconGoogleColorLogo.js";
|
|
8
|
+
import { IconPhone as L } from "../../icons/IconPhone.js";
|
|
9
|
+
import { IconTelegramLogo as _ } from "../../icons/IconTelegramLogo.js";
|
|
10
|
+
import { IconXLogo as A } from "../../icons/IconXLogo.js";
|
|
11
|
+
import { LinkAuthItem as P } from "./LinkAuthItem.js";
|
|
12
|
+
import { useLinkAuthContext as T } from "./LinkAuthProvider.js";
|
|
12
13
|
import '../../assets/LinkAuthItems.css';const k = "LinkAuthItems-module__list___5AimM", x = {
|
|
13
14
|
list: k
|
|
14
15
|
}, M = {
|
|
15
|
-
email: { Icon: /* @__PURE__ */ l(
|
|
16
|
-
sms: { Icon: /* @__PURE__ */ l(
|
|
17
|
-
"oauth:google": { Icon: /* @__PURE__ */ l(
|
|
18
|
-
"oauth:apple": { Icon: /* @__PURE__ */ l(
|
|
19
|
-
"oauth:x": { Icon: /* @__PURE__ */ l(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
email: { Icon: /* @__PURE__ */ l(d, { "aria-label": "Email" }), label: "Email" },
|
|
17
|
+
sms: { Icon: /* @__PURE__ */ l(L, { "aria-label": "Phone" }), label: "Phone" },
|
|
18
|
+
"oauth:google": { Icon: /* @__PURE__ */ l(f, { "aria-label": "Google" }), label: "Google" },
|
|
19
|
+
"oauth:apple": { Icon: /* @__PURE__ */ l(g, { "aria-label": "Apple" }), label: "Apple" },
|
|
20
|
+
"oauth:x": { Icon: /* @__PURE__ */ l(A, { "aria-label": "X" }), label: "X" },
|
|
21
|
+
"oauth:telegram": { Icon: /* @__PURE__ */ l(_, { "aria-label": "Telegram" }), label: "Telegram" }
|
|
22
|
+
}, O = ({ children: m, className: s = "", onLink: t, ...c }) => {
|
|
23
|
+
const { state: p, dispatch: a } = T(), { authMethods: i, isPending: r, methodToLink: n } = p, h = b(() => i.map((o) => {
|
|
24
|
+
const { Icon: e, label: I } = M[o.method];
|
|
23
25
|
return {
|
|
24
26
|
...o,
|
|
25
|
-
icon:
|
|
26
|
-
label:
|
|
27
|
+
icon: e,
|
|
28
|
+
label: I,
|
|
27
29
|
onLink: async () => {
|
|
28
|
-
|
|
30
|
+
a({ type: "LINK_AUTH_METHOD", payload: { method: o.method } }), await t?.(o.method);
|
|
29
31
|
}
|
|
30
32
|
};
|
|
31
|
-
}), [
|
|
32
|
-
return /* @__PURE__ */ l("ul", { className:
|
|
33
|
-
...
|
|
33
|
+
}), [i, a, t]);
|
|
34
|
+
return /* @__PURE__ */ l("ul", { className: u(x.list, s), ...c, children: h.map(({ method: o, ...e }) => /* @__PURE__ */ l("li", { children: m?.({
|
|
35
|
+
...e,
|
|
34
36
|
authMethod: o,
|
|
35
|
-
isPending:
|
|
37
|
+
isPending: r && n === o
|
|
36
38
|
}) || /* @__PURE__ */ l(
|
|
37
|
-
|
|
39
|
+
P,
|
|
38
40
|
{
|
|
39
|
-
...
|
|
41
|
+
...e,
|
|
40
42
|
authMethod: o,
|
|
41
|
-
isPending:
|
|
43
|
+
isPending: r && n === o
|
|
42
44
|
}
|
|
43
45
|
) }, o)) });
|
|
44
46
|
};
|
|
45
47
|
export {
|
|
46
|
-
|
|
48
|
+
O as LinkAuthItems
|
|
47
49
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { useCurrentUser as c } from "@coinbase/cdp-hooks";
|
|
3
|
-
import { createContext as
|
|
3
|
+
import { createContext as M, useContext as p, useMemo as r, useReducer as A, useEffect as f } from "react";
|
|
4
4
|
import { u as L } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
|
|
5
5
|
import { formatPhoneNumber as k } from "../../utils/formatPhoneNumber.js";
|
|
6
|
-
const
|
|
6
|
+
const g = {
|
|
7
7
|
methodToLink: null,
|
|
8
8
|
authMethods: [],
|
|
9
9
|
error: null,
|
|
10
10
|
isPending: !1
|
|
11
|
-
}, d =
|
|
11
|
+
}, d = M(void 0), T = (e, t) => {
|
|
12
12
|
switch (t) {
|
|
13
13
|
case "email":
|
|
14
14
|
return {
|
|
@@ -35,11 +35,16 @@ const T = {
|
|
|
35
35
|
userAlias: (e.authenticationMethods.x?.username ? `@${e.authenticationMethods.x.username}` : e.authenticationMethods.x?.email) ?? "",
|
|
36
36
|
isLinked: !!e.authenticationMethods.x
|
|
37
37
|
};
|
|
38
|
+
case "oauth:telegram":
|
|
39
|
+
return {
|
|
40
|
+
userAlias: e.authenticationMethods.telegram?.username ? `@${e.authenticationMethods.telegram.username}` : "",
|
|
41
|
+
isLinked: !!e.authenticationMethods.telegram
|
|
42
|
+
};
|
|
38
43
|
default:
|
|
39
44
|
return null;
|
|
40
45
|
}
|
|
41
46
|
};
|
|
42
|
-
function
|
|
47
|
+
function E(e, t) {
|
|
43
48
|
switch (t.type) {
|
|
44
49
|
case "LINK_AUTH_METHOD":
|
|
45
50
|
return {
|
|
@@ -71,33 +76,33 @@ function g(e, t) {
|
|
|
71
76
|
}
|
|
72
77
|
}
|
|
73
78
|
const y = ({ children: e }) => {
|
|
74
|
-
const { currentUser: t } = c(), { authMethods:
|
|
75
|
-
const
|
|
76
|
-
return
|
|
79
|
+
const { currentUser: t } = c(), { authMethods: n } = L(), a = r(() => {
|
|
80
|
+
const i = [];
|
|
81
|
+
return n.forEach((s) => {
|
|
77
82
|
if (!t) {
|
|
78
|
-
|
|
83
|
+
i.push({
|
|
79
84
|
userAlias: "",
|
|
80
85
|
isLinked: !1,
|
|
81
|
-
method:
|
|
86
|
+
method: s
|
|
82
87
|
});
|
|
83
88
|
return;
|
|
84
89
|
}
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
userAlias:
|
|
88
|
-
isLinked:
|
|
89
|
-
method:
|
|
90
|
+
const u = T(t, s);
|
|
91
|
+
i.push({
|
|
92
|
+
userAlias: u?.userAlias ?? "",
|
|
93
|
+
isLinked: u?.isLinked ?? !1,
|
|
94
|
+
method: s
|
|
90
95
|
});
|
|
91
|
-
}),
|
|
92
|
-
}, [t,
|
|
93
|
-
...
|
|
94
|
-
authMethods:
|
|
95
|
-
}), l = r(() => ({ state:
|
|
96
|
+
}), i;
|
|
97
|
+
}, [t, n]), [h, o] = A(E, {
|
|
98
|
+
...g,
|
|
99
|
+
authMethods: a
|
|
100
|
+
}), l = r(() => ({ state: h, dispatch: o }), [h, o]);
|
|
96
101
|
return f(() => {
|
|
97
|
-
o({ type: "SET_AUTH_METHODS", payload: { methods:
|
|
98
|
-
}, [o,
|
|
102
|
+
o({ type: "SET_AUTH_METHODS", payload: { methods: a } });
|
|
103
|
+
}, [o, a]), /* @__PURE__ */ m(d.Provider, { value: l, children: e });
|
|
99
104
|
}, C = () => {
|
|
100
|
-
const e =
|
|
105
|
+
const e = p(d);
|
|
101
106
|
if (!e)
|
|
102
107
|
throw new Error("useLinkAuthContext must be used within a LinkAuthProvider");
|
|
103
108
|
return e;
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { jsx as r, jsxs as h, Fragment as
|
|
2
|
-
import { useLinkOAuth as
|
|
3
|
-
import { u as
|
|
4
|
-
import { useRef as d, useState as
|
|
1
|
+
import { jsx as r, jsxs as h, Fragment as I } from "react/jsx-runtime";
|
|
2
|
+
import { useLinkOAuth as N } from "@coinbase/cdp-hooks";
|
|
3
|
+
import { u as P } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
|
|
4
|
+
import { useRef as d, useState as U, useCallback as a } from "react";
|
|
5
5
|
import "../../chunks/CDPReactProvider.BkmtXUv1.js";
|
|
6
|
-
import { useOauthStatusModal as
|
|
7
|
-
import { Banner as
|
|
8
|
-
import { useTimeout as
|
|
9
|
-
import { getMessageFromUnknownError as
|
|
6
|
+
import { useOauthStatusModal as D } from "../OAuthStatusModal/index.js";
|
|
7
|
+
import { Banner as H } from "../ui/Banner/index.js";
|
|
8
|
+
import { useTimeout as M } from "../../hooks/useTimeout.js";
|
|
9
|
+
import { getMessageFromUnknownError as v } from "../../utils/getMessageFromUnknownError.js";
|
|
10
10
|
import "libphonenumber-js";
|
|
11
|
-
import { toOAuthProviderType as
|
|
12
|
-
import { L as
|
|
13
|
-
import { u as
|
|
14
|
-
import { LinkAuthFlowBackButton as
|
|
15
|
-
import { LinkAuthItem as
|
|
16
|
-
import { LinkAuthItems as
|
|
17
|
-
import { useLinkAuthContext as
|
|
18
|
-
import { LinkAuthTitle as
|
|
19
|
-
import { methodToView as
|
|
20
|
-
import '../../assets/LinkAuth.css';const
|
|
11
|
+
import { toOAuthProviderType as V } from "../../utils/toOAuthProviderType.js";
|
|
12
|
+
import { L as j, a as K } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
|
|
13
|
+
import { u as ft } from "../../chunks/LinkAuthFlow.B4FAtf4V.js";
|
|
14
|
+
import { LinkAuthFlowBackButton as W } from "./LinkAuthFlowBackButton.js";
|
|
15
|
+
import { LinkAuthItem as Lt } from "./LinkAuthItem.js";
|
|
16
|
+
import { LinkAuthItems as _t } from "./LinkAuthItems.js";
|
|
17
|
+
import { useLinkAuthContext as x, LinkAuthProvider as $ } from "./LinkAuthProvider.js";
|
|
18
|
+
import { LinkAuthTitle as b } from "./LinkAuthTitle.js";
|
|
19
|
+
import { methodToView as O } from "./utils.js";
|
|
20
|
+
import '../../assets/LinkAuth.css';const G = "LinkAuth-module__header___0UuxP", J = "LinkAuth-module__error___XUo4W", k = {
|
|
21
21
|
"link-auth": "LinkAuth-module__link-auth___kPJao",
|
|
22
|
-
header:
|
|
23
|
-
error:
|
|
24
|
-
},
|
|
25
|
-
const { state: i } =
|
|
26
|
-
return s ? /* @__PURE__ */ r(
|
|
27
|
-
},
|
|
28
|
-
const { linkOAuth: f } =
|
|
22
|
+
header: G,
|
|
23
|
+
error: J
|
|
24
|
+
}, X = ({ role: o = "alert", ...c }) => {
|
|
25
|
+
const { state: i } = x(), { error: s } = i;
|
|
26
|
+
return s ? /* @__PURE__ */ r(H, { variant: "error", role: o, ...c, children: s }) : null;
|
|
27
|
+
}, q = ({ children: o, className: c = "", onLinkSuccess: i, ...s }) => {
|
|
28
|
+
const { linkOAuth: f } = N(), { persistOAuthState: p, cleanupOAuthState: L } = D(), { state: u, dispatch: n } = x(), { methodToLink: E } = u, A = d(null), l = d(null), { schedule: _ } = M(), S = O(E), T = d(S), [B, m] = U("left"), e = a(
|
|
29
29
|
(t) => {
|
|
30
|
-
|
|
30
|
+
T.current !== t && (T.current = t, A.current?.transition.toggle(t), t === "list" && n({ type: "RESET_STATE" }), (t === "email" || t === "sms") && n({ type: "LINK_AUTH_METHOD", payload: { method: t } }));
|
|
31
31
|
},
|
|
32
32
|
[n]
|
|
33
33
|
), F = a(() => {
|
|
@@ -37,56 +37,56 @@ import '../../assets/LinkAuth.css';const b = "LinkAuth-module__header___0UuxP",
|
|
|
37
37
|
}
|
|
38
38
|
e("list");
|
|
39
39
|
}, [e]), R = a(() => {
|
|
40
|
-
m("left"), i?.(u.methodToLink),
|
|
41
|
-
}, [e, u.methodToLink, i,
|
|
40
|
+
m("left"), i?.(u.methodToLink), _(() => e("list"), 800);
|
|
41
|
+
}, [e, u.methodToLink, i, _]), w = a(
|
|
42
42
|
async (t) => {
|
|
43
43
|
if (m("left"), t?.startsWith("oauth:")) {
|
|
44
|
-
const
|
|
45
|
-
if (
|
|
44
|
+
const y = V(t);
|
|
45
|
+
if (y)
|
|
46
46
|
try {
|
|
47
|
-
|
|
48
|
-
} catch (
|
|
49
|
-
n({
|
|
47
|
+
p(!0), await f(y);
|
|
48
|
+
} catch (C) {
|
|
49
|
+
L(), n({
|
|
50
50
|
type: "LINK_AUTH_METHOD_ERROR",
|
|
51
|
-
payload: { error:
|
|
51
|
+
payload: { error: v(C) }
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
54
|
} else
|
|
55
|
-
e(
|
|
55
|
+
e(O(t));
|
|
56
56
|
},
|
|
57
|
-
[f, e, p, n]
|
|
58
|
-
),
|
|
57
|
+
[f, e, p, L, n]
|
|
58
|
+
), g = typeof o == "function" ? o(u) : o;
|
|
59
59
|
return /* @__PURE__ */ r("div", { className: `${k["link-auth"]} ${c}`, ...s, children: /* @__PURE__ */ h(
|
|
60
|
-
|
|
60
|
+
j,
|
|
61
61
|
{
|
|
62
62
|
direction: B,
|
|
63
63
|
onBack: F,
|
|
64
|
-
onLink:
|
|
64
|
+
onLink: w,
|
|
65
65
|
onLinkSuccess: R,
|
|
66
66
|
signInRef: l,
|
|
67
|
-
transitionRef:
|
|
67
|
+
transitionRef: A,
|
|
68
68
|
children: [
|
|
69
|
-
|
|
70
|
-
!
|
|
69
|
+
g,
|
|
70
|
+
!g && /* @__PURE__ */ h(I, { children: [
|
|
71
71
|
/* @__PURE__ */ h("div", { className: k.header, children: [
|
|
72
|
-
/* @__PURE__ */ r(
|
|
73
|
-
/* @__PURE__ */ r(
|
|
72
|
+
/* @__PURE__ */ r(b, {}),
|
|
73
|
+
/* @__PURE__ */ r(W, {})
|
|
74
74
|
] }),
|
|
75
|
-
/* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(
|
|
76
|
-
/* @__PURE__ */ r(
|
|
75
|
+
/* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(X, {}) }),
|
|
76
|
+
/* @__PURE__ */ r(K, {})
|
|
77
77
|
] })
|
|
78
78
|
]
|
|
79
79
|
}
|
|
80
80
|
) });
|
|
81
|
-
},
|
|
81
|
+
}, ht = (o) => (P("manage_auth"), /* @__PURE__ */ r($, { children: /* @__PURE__ */ r(q, { ...o }) }));
|
|
82
82
|
export {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
83
|
+
ht as LinkAuth,
|
|
84
|
+
X as LinkAuthError,
|
|
85
|
+
K as LinkAuthFlow,
|
|
86
|
+
W as LinkAuthFlowBackButton,
|
|
87
|
+
Lt as LinkAuthItem,
|
|
88
|
+
_t as LinkAuthItems,
|
|
89
|
+
b as LinkAuthTitle,
|
|
90
|
+
x as useLinkAuthContext,
|
|
91
|
+
ft as useLinkAuthFlow
|
|
92
92
|
};
|
|
@@ -6,6 +6,7 @@ type OAuthStatusModalContentProps = {
|
|
|
6
6
|
};
|
|
7
7
|
export declare const useOauthStatusModal: () => {
|
|
8
8
|
persistOAuthState: (isAccountLink?: boolean) => void;
|
|
9
|
+
cleanupOAuthState: () => void;
|
|
9
10
|
};
|
|
10
11
|
export declare const OAuthStatusModal: () => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export declare const OAuthStatusModalContent: ({ isAccountLink, handleClose, }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,98 +1,101 @@
|
|
|
1
|
-
import { jsx as s, jsxs as r, Fragment as
|
|
1
|
+
import { jsx as s, jsxs as r, Fragment as f } from "react/jsx-runtime";
|
|
2
2
|
import "@coinbase/cdp-core";
|
|
3
|
-
import { useOAuthState as
|
|
3
|
+
import { useOAuthState as N } from "@coinbase/cdp-hooks";
|
|
4
4
|
import { u as b } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
|
|
5
|
-
import { useCallback as
|
|
6
|
-
import { a as
|
|
5
|
+
import { useCallback as g, useState as A, useEffect as S, useRef as I } from "react";
|
|
6
|
+
import { a as v } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
|
|
7
7
|
import { CoinbaseFooter as k } from "../ui/CoinbaseFooter/index.js";
|
|
8
8
|
import { LoadingSpinner as w } from "../ui/LoadingSpinner/index.js";
|
|
9
|
-
import { Modal as
|
|
9
|
+
import { Modal as L, ModalContent as E, ModalTitle as y, ModalDescription as R } from "../ui/Modal/index.js";
|
|
10
10
|
import { SwitchFadeTransition as P } from "../ui/SwitchFadeTransition/index.js";
|
|
11
11
|
import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
|
|
12
12
|
import { useTimer as U } from "../../hooks/useTimer.js";
|
|
13
13
|
import { IconAppleLogo as K } from "../../icons/IconAppleLogo.js";
|
|
14
14
|
import { IconCheck as x } from "../../icons/IconCheck.js";
|
|
15
15
|
import { IconGoogleColorLogo as G } from "../../icons/IconGoogleColorLogo.js";
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
16
|
+
import { IconTelegramLogo as H } from "../../icons/IconTelegramLogo.js";
|
|
17
|
+
import { IconXLogo as q } from "../../icons/IconXLogo.js";
|
|
18
|
+
import { IconXMark as Y } from "../../icons/IconXMark.js";
|
|
18
19
|
import { capitalize as _ } from "../../utils/capitalize.js";
|
|
19
|
-
import '../../assets/OAuthStatusModal.css';const
|
|
20
|
+
import '../../assets/OAuthStatusModal.css';const j = "OAuthStatusModal-module__status___vU6x7", D = "OAuthStatusModal-module__graphic___2fKoa", F = "OAuthStatusModal-module__pad___oooMz", z = "OAuthStatusModal-module__spinner___Q3dYq", V = "OAuthStatusModal-module__icon___Lj5Gf", W = "OAuthStatusModal-module__subhead___Pg9GI", X = "OAuthStatusModal-module__description___0qOZY", J = "OAuthStatusModal-module__ring___mKwSb", Q = "OAuthStatusModal-module__invisible___IeRd0", t = {
|
|
20
21
|
"oauth-status-modal": "OAuthStatusModal-module__oauth-status-modal___I69Ii",
|
|
21
22
|
"transition-wrapper": "OAuthStatusModal-module__transition-wrapper___TmPRh",
|
|
22
|
-
status:
|
|
23
|
-
graphic:
|
|
24
|
-
pad:
|
|
25
|
-
spinner:
|
|
26
|
-
icon:
|
|
23
|
+
status: j,
|
|
24
|
+
graphic: D,
|
|
25
|
+
pad: F,
|
|
26
|
+
spinner: z,
|
|
27
|
+
icon: V,
|
|
27
28
|
"icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
|
|
28
29
|
"icon-error": "OAuthStatusModal-module__icon-error___psI7m",
|
|
29
|
-
subhead:
|
|
30
|
-
description:
|
|
31
|
-
ring:
|
|
30
|
+
subhead: W,
|
|
31
|
+
description: X,
|
|
32
|
+
ring: J,
|
|
32
33
|
"ring-success": "OAuthStatusModal-module__ring-success___unyM9",
|
|
33
34
|
"ring-error": "OAuthStatusModal-module__ring-error___OsgqU",
|
|
34
|
-
invisible:
|
|
35
|
-
}, p = "cdp-react-sign-in-with-oauth-provider-name",
|
|
36
|
-
const n =
|
|
37
|
-
|
|
38
|
-
(e) => {
|
|
35
|
+
invisible: Q
|
|
36
|
+
}, p = "cdp-react-sign-in-with-oauth-provider-name", h = "cdp-react-sign-in-with-oauth-is-account-link", Z = ["pending", "success", "error"], vt = () => {
|
|
37
|
+
const n = v() || "", o = g(
|
|
38
|
+
(a) => {
|
|
39
39
|
sessionStorage.setItem(p, n), sessionStorage.setItem(
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
h,
|
|
41
|
+
a ? "true" : "false"
|
|
42
42
|
);
|
|
43
43
|
},
|
|
44
44
|
[n]
|
|
45
|
-
)
|
|
46
|
-
|
|
45
|
+
), e = g(() => {
|
|
46
|
+
sessionStorage.removeItem(p), sessionStorage.removeItem(h);
|
|
47
|
+
}, []);
|
|
48
|
+
return { persistOAuthState: o, cleanupOAuthState: e };
|
|
49
|
+
}, $t = () => {
|
|
47
50
|
b("oauth_status_modal");
|
|
48
|
-
const [n, o] =
|
|
49
|
-
return
|
|
51
|
+
const [n, o] = A(!1), { oauthState: e } = N(), [a, i] = A(!1), u = v(), l = e?.providerType || "google";
|
|
52
|
+
return S(() => {
|
|
50
53
|
if (e?.status === "pending" || e?.status === "error" || e?.status === "success") {
|
|
51
|
-
const
|
|
52
|
-
if (
|
|
54
|
+
const d = sessionStorage.getItem(p);
|
|
55
|
+
if (d === null || d !== u)
|
|
53
56
|
return;
|
|
54
57
|
sessionStorage.removeItem(p), o(!0);
|
|
55
|
-
const m = sessionStorage.getItem(
|
|
56
|
-
sessionStorage.removeItem(
|
|
58
|
+
const m = sessionStorage.getItem(h) === "true";
|
|
59
|
+
sessionStorage.removeItem(h), i(m);
|
|
57
60
|
}
|
|
58
|
-
}, [e?.status,
|
|
61
|
+
}, [e?.status, u]), /* @__PURE__ */ s(L, { open: n, onOpenChange: o, children: /* @__PURE__ */ r(E, { children: [
|
|
59
62
|
/* @__PURE__ */ s(M, { children: /* @__PURE__ */ s(y, { children: "OAuth Status" }) }),
|
|
60
63
|
/* @__PURE__ */ s(M, { children: /* @__PURE__ */ r(R, { children: [
|
|
61
|
-
|
|
64
|
+
a ? `Linking your ${l} account` : `Signing in with ${l}`,
|
|
62
65
|
" ",
|
|
63
66
|
e?.status ? `${e?.status === "success" ? "successful" : e?.status === "error" ? "failed" : "pending"}` : ""
|
|
64
67
|
] }) }),
|
|
65
|
-
/* @__PURE__ */ s(
|
|
68
|
+
/* @__PURE__ */ s(B, { isAccountLink: a, handleClose: () => o(!1) })
|
|
66
69
|
] }) });
|
|
67
|
-
},
|
|
70
|
+
}, B = ({
|
|
68
71
|
isAccountLink: n,
|
|
69
72
|
handleClose: o
|
|
70
73
|
}) => {
|
|
71
|
-
const { oauthState: e } =
|
|
72
|
-
m.current ===
|
|
74
|
+
const { oauthState: e } = N(), a = e?.providerType || "google", { timeRemaining: i, start: u, reset: l } = U(), d = I(null), m = I(null), $ = 250, O = g((c) => {
|
|
75
|
+
m.current === c || c === void 0 || (m.current = c, d.current?.transition.toggle(c));
|
|
73
76
|
}, []);
|
|
74
|
-
return
|
|
75
|
-
|
|
76
|
-
}, [e?.status,
|
|
77
|
-
|
|
78
|
-
}, [
|
|
77
|
+
return S(() => {
|
|
78
|
+
O(e?.status), e?.status === "success" && u(3);
|
|
79
|
+
}, [e?.status, O, u]), S(() => {
|
|
80
|
+
i !== null && i <= 0 && (l(), o());
|
|
81
|
+
}, [i, l, o]), /* @__PURE__ */ r("div", { className: t["oauth-status-modal"], children: [
|
|
79
82
|
/* @__PURE__ */ s(
|
|
80
83
|
P,
|
|
81
84
|
{
|
|
82
85
|
animateHeight: !1,
|
|
83
|
-
timeout:
|
|
84
|
-
items:
|
|
86
|
+
timeout: $,
|
|
87
|
+
items: Z,
|
|
85
88
|
initialEntered: !1,
|
|
86
|
-
transitionRef:
|
|
89
|
+
transitionRef: d,
|
|
87
90
|
className: t["transition-wrapper"],
|
|
88
|
-
children: ({ itemKey:
|
|
89
|
-
const
|
|
90
|
-
return /* @__PURE__ */ s("div", { ...
|
|
91
|
-
|
|
91
|
+
children: ({ itemKey: c, ...T }) => {
|
|
92
|
+
const C = ot[c];
|
|
93
|
+
return /* @__PURE__ */ s("div", { ...T, className: t.status, children: /* @__PURE__ */ s(
|
|
94
|
+
C,
|
|
92
95
|
{
|
|
93
96
|
isAccountLink: n,
|
|
94
|
-
timeRemaining:
|
|
95
|
-
provider:
|
|
97
|
+
timeRemaining: i,
|
|
98
|
+
provider: a
|
|
96
99
|
}
|
|
97
100
|
) });
|
|
98
101
|
}
|
|
@@ -100,9 +103,9 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
|
|
|
100
103
|
),
|
|
101
104
|
/* @__PURE__ */ s(k, {})
|
|
102
105
|
] });
|
|
103
|
-
},
|
|
104
|
-
const e =
|
|
105
|
-
return /* @__PURE__ */ r(
|
|
106
|
+
}, tt = ({ isAccountLink: n, provider: o }) => {
|
|
107
|
+
const e = nt[o];
|
|
108
|
+
return /* @__PURE__ */ r(f, { children: [
|
|
106
109
|
/* @__PURE__ */ r("div", { className: t.graphic, children: [
|
|
107
110
|
/* @__PURE__ */ s(
|
|
108
111
|
w,
|
|
@@ -118,11 +121,11 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
|
|
|
118
121
|
/* @__PURE__ */ s("p", { className: t.subhead, children: n ? `Linking your ${_(o)} account` : `Signing in with ${_(o)}` }),
|
|
119
122
|
/* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
|
|
120
123
|
] });
|
|
121
|
-
},
|
|
124
|
+
}, st = ({
|
|
122
125
|
isAccountLink: n,
|
|
123
126
|
timeRemaining: o,
|
|
124
127
|
provider: e
|
|
125
|
-
}) => /* @__PURE__ */ r(
|
|
128
|
+
}) => /* @__PURE__ */ r(f, { children: [
|
|
126
129
|
/* @__PURE__ */ r("div", { className: t.graphic, children: [
|
|
127
130
|
/* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
|
|
128
131
|
/* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(x, {}) })
|
|
@@ -132,27 +135,28 @@ import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__s
|
|
|
132
135
|
"This window will automatically close in ",
|
|
133
136
|
o ?? "soon"
|
|
134
137
|
] })
|
|
135
|
-
] }),
|
|
138
|
+
] }), et = ({ isAccountLink: n }) => /* @__PURE__ */ r(f, { children: [
|
|
136
139
|
/* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
|
|
137
140
|
/* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
|
|
138
|
-
/* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(
|
|
141
|
+
/* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(Y, {}) })
|
|
139
142
|
] }),
|
|
140
143
|
/* @__PURE__ */ s("p", { className: t.subhead, children: n ? "Account linking failed" : "Sign in failed" }),
|
|
141
144
|
/* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." })
|
|
142
|
-
] }),
|
|
143
|
-
pending:
|
|
144
|
-
success:
|
|
145
|
-
error:
|
|
146
|
-
},
|
|
145
|
+
] }), ot = {
|
|
146
|
+
pending: tt,
|
|
147
|
+
success: st,
|
|
148
|
+
error: et
|
|
149
|
+
}, nt = {
|
|
147
150
|
google: G,
|
|
148
151
|
apple: K,
|
|
149
|
-
x:
|
|
152
|
+
x: q,
|
|
153
|
+
telegram: H
|
|
150
154
|
};
|
|
151
155
|
export {
|
|
152
|
-
|
|
156
|
+
h as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
|
|
153
157
|
p as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
+
$t as OAuthStatusModal,
|
|
159
|
+
B as OAuthStatusModalContent,
|
|
160
|
+
$t as default,
|
|
161
|
+
vt as useOauthStatusModal
|
|
158
162
|
};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback as v, useMemo as y } from "react";
|
|
3
3
|
import "../../chunks/CDPReactProvider.BkmtXUv1.js";
|
|
4
|
-
import { useSignInWithOAuth as
|
|
5
|
-
import { useSignInContext as
|
|
6
|
-
import { Button as
|
|
4
|
+
import { useSignInWithOAuth as C } from "./hooks/useSignInWithOAuth.js";
|
|
5
|
+
import { useSignInContext as g } from "./SignInProvider.js";
|
|
6
|
+
import { Button as S } from "../ui/Button/index.js";
|
|
7
7
|
import { ServerError as M } from "../ui/ServerError/index.js";
|
|
8
8
|
import { IconAppleLogo as k } from "../../icons/IconAppleLogo.js";
|
|
9
9
|
import { IconEnvelope as B } from "../../icons/IconEnvelope.js";
|
|
10
10
|
import { IconGoogleLogo as E } from "../../icons/IconGoogleLogo.js";
|
|
11
11
|
import { IconPhone as P } from "../../icons/IconPhone.js";
|
|
12
|
-
import {
|
|
12
|
+
import { IconTelegramLogo as O } from "../../icons/IconTelegramLogo.js";
|
|
13
|
+
import { IconXLogo as w } from "../../icons/IconXLogo.js";
|
|
13
14
|
import { toOAuthProviderType as b } from "../../utils/toOAuthProviderType.js";
|
|
14
|
-
import '../../assets/SignInAuthMethodButtons.css';const
|
|
15
|
+
import '../../assets/SignInAuthMethodButtons.css';const T = "SignInAuthMethodButtons-module__divider___zphEh", o = {
|
|
15
16
|
"auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
|
|
16
17
|
"auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
|
|
17
18
|
"auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
|
|
18
19
|
"auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
|
|
19
|
-
divider:
|
|
20
|
-
},
|
|
20
|
+
divider: T
|
|
21
|
+
}, _ = {
|
|
21
22
|
email: {
|
|
22
23
|
label: "Continue with email",
|
|
23
24
|
icon: /* @__PURE__ */ n(B, {})
|
|
@@ -36,41 +37,45 @@ import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodBut
|
|
|
36
37
|
},
|
|
37
38
|
"oauth:x": {
|
|
38
39
|
label: "Continue with X",
|
|
40
|
+
icon: /* @__PURE__ */ n(w, {})
|
|
41
|
+
},
|
|
42
|
+
"oauth:telegram": {
|
|
43
|
+
label: "Continue with Telegram",
|
|
39
44
|
icon: /* @__PURE__ */ n(O, {})
|
|
40
45
|
}
|
|
41
|
-
},
|
|
46
|
+
}, q = ({ activeMethod: a }) => {
|
|
42
47
|
const {
|
|
43
|
-
state: { authMethods:
|
|
44
|
-
} =
|
|
45
|
-
signInWithOAuth:
|
|
48
|
+
state: { authMethods: l }
|
|
49
|
+
} = g(), {
|
|
50
|
+
signInWithOAuth: u,
|
|
46
51
|
isPending: s,
|
|
47
52
|
error: h,
|
|
48
53
|
oauthProvider: c
|
|
49
|
-
} =
|
|
54
|
+
} = C(), m = v(
|
|
50
55
|
async (t) => {
|
|
51
|
-
const
|
|
52
|
-
|
|
56
|
+
const i = b(t);
|
|
57
|
+
i && u(i);
|
|
53
58
|
},
|
|
54
|
-
[
|
|
55
|
-
), { dispatch:
|
|
56
|
-
if (!
|
|
59
|
+
[u]
|
|
60
|
+
), { dispatch: p } = g(), e = y(() => (l || ["email"]).map((t) => {
|
|
61
|
+
if (!_[t])
|
|
57
62
|
return null;
|
|
58
|
-
const { label:
|
|
63
|
+
const { label: i, icon: f } = _[t], d = t.startsWith("oauth:"), A = d ? () => m(t) : () => p({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), I = d && c.current === b(t) && s;
|
|
59
64
|
return {
|
|
60
65
|
key: t,
|
|
61
|
-
label:
|
|
66
|
+
label: i,
|
|
62
67
|
icon: f,
|
|
63
68
|
onClick: A,
|
|
64
69
|
isPending: I
|
|
65
70
|
};
|
|
66
|
-
}).filter((t) => t !== null), [
|
|
67
|
-
return !
|
|
71
|
+
}).filter((t) => t !== null), [l, p, m, s, c]);
|
|
72
|
+
return !e.length || e.length === 1 && e[0].key === a ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
|
|
68
73
|
/* @__PURE__ */ r("div", { className: o.divider, children: [
|
|
69
74
|
/* @__PURE__ */ n("hr", {}),
|
|
70
75
|
/* @__PURE__ */ n("span", { children: "or" })
|
|
71
76
|
] }),
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
e.map((t) => t.key === a ? null : /* @__PURE__ */ r(
|
|
78
|
+
S,
|
|
74
79
|
{
|
|
75
80
|
"aria-label": t.ariaLabel,
|
|
76
81
|
className: o["auth-btn"],
|
|
@@ -89,5 +94,5 @@ import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodBut
|
|
|
89
94
|
] });
|
|
90
95
|
};
|
|
91
96
|
export {
|
|
92
|
-
|
|
97
|
+
q as SignInAuthMethodButtons
|
|
93
98
|
};
|
|
@@ -1,27 +1,30 @@
|
|
|
1
|
-
import { useSignInWithOAuth as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { useOauthStatusModal as
|
|
4
|
-
import { isApiError as
|
|
1
|
+
import { useSignInWithOAuth as f } from "@coinbase/cdp-hooks";
|
|
2
|
+
import { useState as l, useRef as m, useCallback as A } from "react";
|
|
3
|
+
import { useOauthStatusModal as I } from "../../OAuthStatusModal/index.js";
|
|
4
|
+
import { isApiError as O } from "../../../utils/isApiError.js";
|
|
5
5
|
const E = () => {
|
|
6
|
-
const { signInWithOAuth: n } =
|
|
6
|
+
const { signInWithOAuth: n } = f(), [r, e] = l(!1), [h, s] = l(null), o = m(null), i = "An error occurred while signing in. Please try again.", { persistOAuthState: u, cleanupOAuthState: a } = I();
|
|
7
7
|
return {
|
|
8
|
-
signInWithOAuth:
|
|
9
|
-
async (
|
|
8
|
+
signInWithOAuth: A(
|
|
9
|
+
async (c) => {
|
|
10
10
|
if (!r) {
|
|
11
|
-
o.current =
|
|
11
|
+
o.current = c, e(!0), s(null);
|
|
12
12
|
try {
|
|
13
|
-
|
|
13
|
+
u(!1), await n(c);
|
|
14
14
|
} catch (t) {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
a();
|
|
16
|
+
const g = O(t) ? t : t instanceof Error && t.message || i;
|
|
17
|
+
s(g), console.error(t);
|
|
18
|
+
} finally {
|
|
19
|
+
e(!1);
|
|
17
20
|
}
|
|
18
21
|
}
|
|
19
22
|
},
|
|
20
|
-
[r, n, u]
|
|
23
|
+
[r, n, u, a]
|
|
21
24
|
),
|
|
22
25
|
oauthProvider: o,
|
|
23
26
|
isPending: r,
|
|
24
|
-
error:
|
|
27
|
+
error: h
|
|
25
28
|
};
|
|
26
29
|
};
|
|
27
30
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { APIError } from '@coinbase/cdp-hooks';
|
|
2
2
|
import { FormHTMLAttributes, ReactNode } from 'react';
|
|
3
|
-
import { PhoneNumberInputProps } from '../PhoneNumberInput
|
|
3
|
+
import { PhoneNumberInputProps } from '../PhoneNumberInput';
|
|
4
4
|
export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
|
|
5
5
|
countryCode: PhoneNumberInputProps["countryCode"];
|
|
6
6
|
countryOptions?: PhoneNumberInputProps["countryOptions"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CountryCode } from 'libphonenumber-js';
|
|
2
|
-
import { InputProps } from '../Input
|
|
2
|
+
import { InputProps } from '../Input';
|
|
3
3
|
import { CountryOption } from '../../../data/countries';
|
|
4
4
|
import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
|
|
5
5
|
export interface PhoneNumberInputProps extends Omit<InputProps, "value" | "onChange"> {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
2
|
+
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
variant?: "primary" | "secondary" | "warning";
|
|
5
5
|
}
|
|
6
6
|
export declare const Badge: ({ children, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
interface BannerProps extends HTMLAttributes<HTMLElement> {
|
|
2
|
+
export interface BannerProps extends HTMLAttributes<HTMLElement> {
|
|
3
3
|
icon?: ReactNode;
|
|
4
4
|
variant?: "success" | "warning" | "error";
|
|
5
5
|
}
|
|
6
6
|
export declare const Banner: ({ className, children, icon, variant, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { SvgIcon as C } from "./SvgIcon.js";
|
|
4
|
+
const n = (r) => /* @__PURE__ */ o(C, { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", ...r, children: /* @__PURE__ */ o(
|
|
5
|
+
"path",
|
|
6
|
+
{
|
|
7
|
+
fill: "currentColor",
|
|
8
|
+
d: "M41.4193 7.30899C41.4193 7.30899 45.3046 5.79399 44.9808 9.47328C44.8729 10.9883 43.9016 16.2908 43.1461 22.0262L40.5559 39.0159C40.5559 39.0159 40.3401 41.5048 38.3974 41.9377C36.4547 42.3705 33.5408 40.4227 33.0011 39.9898C32.5694 39.6652 24.9068 34.7955 22.2086 32.4148C21.4531 31.7655 20.5897 30.4669 22.3165 28.9519L33.6487 18.1305C34.9438 16.8319 36.2389 13.8019 30.8426 17.4812L15.7331 27.7616C15.7331 27.7616 14.0063 28.8437 10.7686 27.8698L3.75342 25.7055C3.75342 25.7055 1.16321 24.0823 5.58815 22.459C16.3807 17.3729 29.6555 12.1786 41.4193 7.30899Z"
|
|
9
|
+
}
|
|
10
|
+
) });
|
|
11
|
+
export {
|
|
12
|
+
n as IconTelegramLogo
|
|
13
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -26,4 +26,5 @@ export * from './theme';
|
|
|
26
26
|
export * from './icons';
|
|
27
27
|
export * from './utils';
|
|
28
28
|
export { useVerifyMfaModal, type UseVerifyMfaModalOptions, type UseVerifyMfaModalReturn, } from './hooks/useVerifyMfaModal';
|
|
29
|
+
export { usePhoneNumberState, type UsePhoneNumberStateOptions, type UsePhoneNumberStateResult, } from './hooks/usePhoneNumberState';
|
|
29
30
|
export { type IframeTheme } from './types/secureIframe';
|
package/dist/index.js
CHANGED
|
@@ -2,46 +2,46 @@ import "./chunks/useSendComponentCallOnce.DGjALrnZ.js";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import "./version.js";
|
|
4
4
|
import { AuthButton as a } from "./components/AuthButton/index.js";
|
|
5
|
-
import { c as
|
|
5
|
+
import { c as p, A as l, C as x, O as i, V as s, d as M, e as u, f as d, u as c, a as I, b as g } from "./chunks/CDPReactProvider.BkmtXUv1.js";
|
|
6
6
|
import { CopyAddress as C } from "./components/CopyAddress/index.js";
|
|
7
|
-
import { CopyEvmKeyButton as
|
|
8
|
-
import { CopySolanaKeyButton as
|
|
7
|
+
import { CopyEvmKeyButton as S } from "./components/CopyEvmKeyButton/index.js";
|
|
8
|
+
import { CopySolanaKeyButton as h } from "./components/CopySolanaKeyButton/index.js";
|
|
9
9
|
import { EnrollMfa as A, EnrollMfaError as k } from "./components/EnrollMfa/index.js";
|
|
10
10
|
import { EnrollMfaModal as B, EnrollMfaModalContent as L, EnrollMfaModalTrigger as w } from "./components/EnrollMfaModal/index.js";
|
|
11
|
-
import { ExportWallet as
|
|
11
|
+
import { ExportWallet as b, ExportWalletCopyAddress as D, ExportWalletCopyKeyButton as P, ExportWalletFooter as v, E as O, a as H, b as R, c as U, d as _, ExportWalletTitle as z, ExportWalletWarning as K } from "./components/ExportWallet/index.js";
|
|
12
12
|
import { Fund as j, FundFooter as G } from "./components/Fund/index.js";
|
|
13
13
|
import { FundModal as q, FundModalContent as J, FundModalTrigger as Q } from "./components/FundModal/index.js";
|
|
14
14
|
import { LinkAuth as Z, LinkAuthError as $ } from "./components/LinkAuth/index.js";
|
|
15
15
|
import { LinkAuthModal as ro, LinkAuthModalContent as eo, LinkAuthModalTrigger as to } from "./components/LinkAuthModal/index.js";
|
|
16
16
|
import { SendEvmTransactionButton as fo } from "./components/SendEvmTransactionButton/index.js";
|
|
17
17
|
import { SendSolanaTransactionButton as mo } from "./components/SendSolanaTransactionButton/index.js";
|
|
18
|
-
import { SignIn as
|
|
18
|
+
import { SignIn as lo } from "./components/SignIn/index.js";
|
|
19
19
|
import { useSignInReducer as io } from "./components/SignIn/useSignInReducer.js";
|
|
20
20
|
import { SignInModal as Mo, SignInModalContent as uo, SignInModalTrigger as co } from "./components/SignInModal/index.js";
|
|
21
21
|
import { SignOutButton as go } from "./components/SignOutButton/index.js";
|
|
22
22
|
import { ThemeProvider as Co, useTheme as yo } from "./components/ThemeProvider/index.js";
|
|
23
|
-
import { VerifyMfaInline as
|
|
23
|
+
import { VerifyMfaInline as To, VerifyMfaInlineBackButton as ho, VerifyMfaInlineFlow as Fo, useVerifyMfaInlineContext as Ao } from "./components/VerifyMfaInline/index.js";
|
|
24
24
|
import { Button as Vo } from "./components/ui/Button/index.js";
|
|
25
|
-
import { Modal as Lo, ModalClose as wo, ModalContent as Wo, ModalDescription as
|
|
25
|
+
import { Modal as Lo, ModalClose as wo, ModalContent as Wo, ModalDescription as bo, ModalTitle as Do, ModalTrigger as Po } from "./components/ui/Modal/index.js";
|
|
26
26
|
import { cssVariables as Oo } from "./theme/cssVariables.js";
|
|
27
27
|
import { theme as Ro } from "./theme/theme.js";
|
|
28
28
|
import { borderRadius as _o, borderRadiusComponents as zo, borderRadiusSemantic as Ko, colors as No, colorsBase as jo, colorsComponents as Go, colorsSemantic as Xo, font as qo, fontComponents as Jo, fontSemantic as Qo, tokens as Yo, zIndex as Zo, zIndexComponents as $o, zIndexSemantic as or } from "./theme/tokens.js";
|
|
29
29
|
import { flattenTokensObject as er, themeToCssVariables as tr } from "./theme/utils.js";
|
|
30
30
|
import { IconAppleLogo as fr } from "./icons/IconAppleLogo.js";
|
|
31
31
|
import { IconArrowLeft as mr } from "./icons/IconArrowLeft.js";
|
|
32
|
-
import { IconArrowsUpDown as
|
|
32
|
+
import { IconArrowsUpDown as lr } from "./icons/IconArrowsUpDown.js";
|
|
33
33
|
import { IconCheck as ir } from "./icons/IconCheck.js";
|
|
34
34
|
import { IconCheckCircle as Mr } from "./icons/IconCheckCircle.js";
|
|
35
|
-
import { IconChevronDown as
|
|
35
|
+
import { IconChevronDown as dr } from "./icons/IconChevronDown.js";
|
|
36
36
|
import { IconCopy as Ir } from "./icons/IconCopy.js";
|
|
37
37
|
import { IconEnvelope as Er } from "./icons/IconEnvelope.js";
|
|
38
38
|
import { IconExclamationCircle as yr } from "./icons/IconExclamationCircle.js";
|
|
39
|
-
import { IconExclamationTriangle as
|
|
40
|
-
import { IconGoogleLogo as
|
|
39
|
+
import { IconExclamationTriangle as Tr } from "./icons/IconExclamationTriangle.js";
|
|
40
|
+
import { IconGoogleLogo as Fr } from "./icons/IconGoogleLogo.js";
|
|
41
41
|
import { IconLock as kr } from "./icons/IconLock.js";
|
|
42
42
|
import { IconMinus as Br } from "./icons/IconMinus.js";
|
|
43
43
|
import { IconPhone as wr } from "./icons/IconPhone.js";
|
|
44
|
-
import { IconPinCode as
|
|
44
|
+
import { IconPinCode as br } from "./icons/IconPinCode.js";
|
|
45
45
|
import { IconPlus as Pr } from "./icons/IconPlus.js";
|
|
46
46
|
import { IconShield as Or } from "./icons/IconShield.js";
|
|
47
47
|
import { IconSmartPhone as Rr } from "./icons/IconSmartPhone.js";
|
|
@@ -52,68 +52,69 @@ import { isApiError as Xr } from "./utils/isApiError.js";
|
|
|
52
52
|
import { isEmailInvalid as Jr } from "./utils/isEmailInvalid.js";
|
|
53
53
|
import { parseValuesFromPhoneNumber as Yr } from "./utils/parseValuesFromPhoneNumber.js";
|
|
54
54
|
import { sendIframeMessage as $r } from "./utils/sendIframeMessage.js";
|
|
55
|
+
import { usePhoneNumberState as re } from "./hooks/usePhoneNumberState.js";
|
|
55
56
|
import "@coinbase/cdp-core";
|
|
56
|
-
import { EnrollMfaDescription as
|
|
57
|
-
import { EnrollMfaFlow as
|
|
58
|
-
import { EnrollMfaFlowBackButton as
|
|
59
|
-
import { EnrollMfaFooter as
|
|
60
|
-
import { EnrollMfaImage as
|
|
61
|
-
import { EnrollMfaItem as
|
|
62
|
-
import { EnrollMfaItems as
|
|
63
|
-
import { EnrollMfaTitle as
|
|
64
|
-
import { useEnrollMfaContext as
|
|
65
|
-
import { useEnrollMfaFlow as
|
|
66
|
-
import { FundForm as
|
|
57
|
+
import { EnrollMfaDescription as te } from "./components/EnrollMfa/EnrollMfaDescription.js";
|
|
58
|
+
import { EnrollMfaFlow as fe } from "./components/EnrollMfa/EnrollMfaFlow.js";
|
|
59
|
+
import { EnrollMfaFlowBackButton as me } from "./components/EnrollMfa/EnrollMfaFlowBackButton.js";
|
|
60
|
+
import { EnrollMfaFooter as le } from "./components/EnrollMfa/EnrollMfaFooter.js";
|
|
61
|
+
import { EnrollMfaImage as ie } from "./components/EnrollMfa/EnrollMfaImage.js";
|
|
62
|
+
import { EnrollMfaItem as Me } from "./components/EnrollMfa/EnrollMfaItem.js";
|
|
63
|
+
import { EnrollMfaItems as de } from "./components/EnrollMfa/EnrollMfaItems.js";
|
|
64
|
+
import { EnrollMfaTitle as Ie } from "./components/EnrollMfa/EnrollMfaTitle.js";
|
|
65
|
+
import { useEnrollMfaContext as Ee } from "./components/EnrollMfa/EnrollMfaProvider.js";
|
|
66
|
+
import { useEnrollMfaFlow as ye } from "./components/EnrollMfa/EnrollMfaFlowProvider.js";
|
|
67
|
+
import { FundForm as Te } from "./components/Fund/FundForm.js";
|
|
67
68
|
import { FundTitle as Fe } from "./components/Fund/FundTitle.js";
|
|
68
|
-
import { useFundContext as
|
|
69
|
-
import { a as
|
|
70
|
-
import { LinkAuthFlowBackButton as
|
|
71
|
-
import { LinkAuthItem as
|
|
72
|
-
import { LinkAuthItems as
|
|
73
|
-
import { LinkAuthTitle as
|
|
74
|
-
import { useLinkAuthContext as
|
|
75
|
-
import { SignInAuthMethodButtons as
|
|
76
|
-
import { SignInBackButton as
|
|
77
|
-
import { SignInDescription as
|
|
78
|
-
import { SignInFooter as
|
|
79
|
-
import { SignInForm as
|
|
80
|
-
import { SignInImage as
|
|
81
|
-
import { SignInTitle as
|
|
82
|
-
import { useSignInContext as
|
|
83
|
-
import { VerifyMfaDescription as
|
|
84
|
-
import { VerifyMfaFlow as
|
|
85
|
-
import { VerifyMfaFlowBackButton as
|
|
86
|
-
import { VerifyMfaFooter as
|
|
87
|
-
import { VerifyMfaImage as
|
|
88
|
-
import { VerifyMfaItem as
|
|
89
|
-
import { VerifyMfaItems as
|
|
90
|
-
import { VerifyMfaTitle as
|
|
91
|
-
import { useVerifyMfaContext as
|
|
92
|
-
import { useVerifyMfaFlow as
|
|
69
|
+
import { useFundContext as ke } from "./components/Fund/FundProvider.js";
|
|
70
|
+
import { a as Be, u as Le } from "./chunks/LinkAuthFlow.B4FAtf4V.js";
|
|
71
|
+
import { LinkAuthFlowBackButton as We } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
|
|
72
|
+
import { LinkAuthItem as De } from "./components/LinkAuth/LinkAuthItem.js";
|
|
73
|
+
import { LinkAuthItems as ve } from "./components/LinkAuth/LinkAuthItems.js";
|
|
74
|
+
import { LinkAuthTitle as He } from "./components/LinkAuth/LinkAuthTitle.js";
|
|
75
|
+
import { useLinkAuthContext as Ue } from "./components/LinkAuth/LinkAuthProvider.js";
|
|
76
|
+
import { SignInAuthMethodButtons as ze } from "./components/SignIn/SignInAuthMethodButtons.js";
|
|
77
|
+
import { SignInBackButton as Ne } from "./components/SignIn/SignInBackButton.js";
|
|
78
|
+
import { SignInDescription as Ge } from "./components/SignIn/SignInDescription.js";
|
|
79
|
+
import { SignInFooter as qe } from "./components/SignIn/SignInFooter.js";
|
|
80
|
+
import { SignInForm as Qe } from "./components/SignIn/SignInForm.js";
|
|
81
|
+
import { SignInImage as Ze } from "./components/SignIn/SignInImage.js";
|
|
82
|
+
import { SignInTitle as ot } from "./components/SignIn/SignInTitle.js";
|
|
83
|
+
import { useSignInContext as et } from "./components/SignIn/SignInProvider.js";
|
|
84
|
+
import { VerifyMfaDescription as nt } from "./components/VerifyMfa/VerifyMfaDescription.js";
|
|
85
|
+
import { VerifyMfaFlow as at } from "./components/VerifyMfa/VerifyMfaFlow.js";
|
|
86
|
+
import { VerifyMfaFlowBackButton as pt } from "./components/VerifyMfa/VerifyMfaFlowBackButton.js";
|
|
87
|
+
import { VerifyMfaFooter as xt } from "./components/VerifyMfa/VerifyMfaFooter.js";
|
|
88
|
+
import { VerifyMfaImage as st } from "./components/VerifyMfa/VerifyMfaImage.js";
|
|
89
|
+
import { VerifyMfaItem as ut } from "./components/VerifyMfa/VerifyMfaItem.js";
|
|
90
|
+
import { VerifyMfaItems as ct } from "./components/VerifyMfa/VerifyMfaItems.js";
|
|
91
|
+
import { VerifyMfaTitle as gt } from "./components/VerifyMfa/VerifyMfaTitle.js";
|
|
92
|
+
import { useVerifyMfaContext as Ct } from "./components/VerifyMfa/VerifyMfaProvider.js";
|
|
93
|
+
import { useVerifyMfaFlow as St } from "./components/VerifyMfa/VerifyMfaFlowProvider.js";
|
|
93
94
|
export {
|
|
94
|
-
|
|
95
|
-
|
|
95
|
+
p as ALL_AUTH_METHODS,
|
|
96
|
+
l as AUTH_METHODS,
|
|
96
97
|
a as AuthButton,
|
|
97
98
|
Vo as Button,
|
|
98
99
|
x as CDPReactProvider,
|
|
99
100
|
C as CopyAddress,
|
|
100
|
-
|
|
101
|
-
|
|
101
|
+
S as CopyEvmKeyButton,
|
|
102
|
+
h as CopySolanaKeyButton,
|
|
102
103
|
A as EnrollMfa,
|
|
103
|
-
|
|
104
|
+
te as EnrollMfaDescription,
|
|
104
105
|
k as EnrollMfaError,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
106
|
+
fe as EnrollMfaFlow,
|
|
107
|
+
me as EnrollMfaFlowBackButton,
|
|
108
|
+
le as EnrollMfaFooter,
|
|
109
|
+
ie as EnrollMfaImage,
|
|
110
|
+
Me as EnrollMfaItem,
|
|
111
|
+
de as EnrollMfaItems,
|
|
111
112
|
B as EnrollMfaModal,
|
|
112
113
|
L as EnrollMfaModalContent,
|
|
113
114
|
w as EnrollMfaModalTrigger,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
Ie as EnrollMfaTitle,
|
|
116
|
+
b as ExportWallet,
|
|
117
|
+
D as ExportWalletCopyAddress,
|
|
117
118
|
P as ExportWalletCopyKeyButton,
|
|
118
119
|
v as ExportWalletFooter,
|
|
119
120
|
O as ExportWalletModal,
|
|
@@ -125,77 +126,77 @@ export {
|
|
|
125
126
|
K as ExportWalletWarning,
|
|
126
127
|
j as Fund,
|
|
127
128
|
G as FundFooter,
|
|
128
|
-
|
|
129
|
+
Te as FundForm,
|
|
129
130
|
q as FundModal,
|
|
130
131
|
J as FundModalContent,
|
|
131
132
|
Q as FundModalTrigger,
|
|
132
133
|
Fe as FundTitle,
|
|
133
134
|
fr as IconAppleLogo,
|
|
134
135
|
mr as IconArrowLeft,
|
|
135
|
-
|
|
136
|
+
lr as IconArrowsUpDown,
|
|
136
137
|
ir as IconCheck,
|
|
137
138
|
Mr as IconCheckCircle,
|
|
138
|
-
|
|
139
|
+
dr as IconChevronDown,
|
|
139
140
|
Ir as IconCopy,
|
|
140
141
|
Er as IconEnvelope,
|
|
141
142
|
yr as IconExclamationCircle,
|
|
142
|
-
|
|
143
|
-
|
|
143
|
+
Tr as IconExclamationTriangle,
|
|
144
|
+
Fr as IconGoogleLogo,
|
|
144
145
|
kr as IconLock,
|
|
145
146
|
Br as IconMinus,
|
|
146
147
|
wr as IconPhone,
|
|
147
|
-
|
|
148
|
+
br as IconPinCode,
|
|
148
149
|
Pr as IconPlus,
|
|
149
150
|
Or as IconShield,
|
|
150
151
|
Rr as IconSmartPhone,
|
|
151
152
|
_r as IconXMark,
|
|
152
153
|
Z as LinkAuth,
|
|
153
154
|
$ as LinkAuthError,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
Be as LinkAuthFlow,
|
|
156
|
+
We as LinkAuthFlowBackButton,
|
|
157
|
+
De as LinkAuthItem,
|
|
158
|
+
ve as LinkAuthItems,
|
|
158
159
|
ro as LinkAuthModal,
|
|
159
160
|
eo as LinkAuthModalContent,
|
|
160
161
|
to as LinkAuthModalTrigger,
|
|
161
|
-
|
|
162
|
+
He as LinkAuthTitle,
|
|
162
163
|
Lo as Modal,
|
|
163
164
|
wo as ModalClose,
|
|
164
165
|
Wo as ModalContent,
|
|
165
|
-
|
|
166
|
-
|
|
166
|
+
bo as ModalDescription,
|
|
167
|
+
Do as ModalTitle,
|
|
167
168
|
Po as ModalTrigger,
|
|
168
169
|
i as OAUTH_METHODS,
|
|
169
170
|
fo as SendEvmTransactionButton,
|
|
170
171
|
mo as SendSolanaTransactionButton,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
172
|
+
lo as SignIn,
|
|
173
|
+
ze as SignInAuthMethodButtons,
|
|
174
|
+
Ne as SignInBackButton,
|
|
175
|
+
Ge as SignInDescription,
|
|
176
|
+
qe as SignInFooter,
|
|
177
|
+
Qe as SignInForm,
|
|
178
|
+
Ze as SignInImage,
|
|
178
179
|
Mo as SignInModal,
|
|
179
180
|
uo as SignInModalContent,
|
|
180
181
|
co as SignInModalTrigger,
|
|
181
|
-
|
|
182
|
+
ot as SignInTitle,
|
|
182
183
|
go as SignOutButton,
|
|
183
184
|
Co as ThemeProvider,
|
|
184
185
|
s as VerifyMfa,
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
186
|
+
nt as VerifyMfaDescription,
|
|
187
|
+
at as VerifyMfaFlow,
|
|
188
|
+
pt as VerifyMfaFlowBackButton,
|
|
189
|
+
xt as VerifyMfaFooter,
|
|
190
|
+
st as VerifyMfaImage,
|
|
191
|
+
To as VerifyMfaInline,
|
|
192
|
+
ho as VerifyMfaInlineBackButton,
|
|
193
|
+
Fo as VerifyMfaInlineFlow,
|
|
194
|
+
ut as VerifyMfaItem,
|
|
195
|
+
ct as VerifyMfaItems,
|
|
195
196
|
M as VerifyMfaModal,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
197
|
+
u as VerifyMfaModalContent,
|
|
198
|
+
d as VerifyMfaModalTrigger,
|
|
199
|
+
gt as VerifyMfaTitle,
|
|
199
200
|
_o as borderRadius,
|
|
200
201
|
zo as borderRadiusComponents,
|
|
201
202
|
Ko as borderRadiusSemantic,
|
|
@@ -218,17 +219,18 @@ export {
|
|
|
218
219
|
tr as themeToCssVariables,
|
|
219
220
|
Yo as tokens,
|
|
220
221
|
c as useAppConfig,
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
222
|
+
Ee as useEnrollMfaContext,
|
|
223
|
+
ye as useEnrollMfaFlow,
|
|
224
|
+
ke as useFundContext,
|
|
225
|
+
Ue as useLinkAuthContext,
|
|
226
|
+
Le as useLinkAuthFlow,
|
|
227
|
+
re as usePhoneNumberState,
|
|
226
228
|
I as useProviderName,
|
|
227
|
-
|
|
229
|
+
et as useSignInContext,
|
|
228
230
|
io as useSignInReducer,
|
|
229
231
|
yo as useTheme,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
+
Ct as useVerifyMfaContext,
|
|
233
|
+
St as useVerifyMfaFlow,
|
|
232
234
|
Ao as useVerifyMfaInlineContext,
|
|
233
235
|
g as useVerifyMfaModal,
|
|
234
236
|
Zo as zIndex,
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "0.0.
|
|
1
|
+
export declare const VERSION = "0.0.90";
|
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.90",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@internationalized/number": "3.6.4",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=18.2.0 <19.2.0",
|
|
19
|
-
"@coinbase/cdp-
|
|
20
|
-
"@coinbase/cdp-
|
|
19
|
+
"@coinbase/cdp-core": "^0.0.90",
|
|
20
|
+
"@coinbase/cdp-hooks": "^0.0.90"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@size-limit/preset-big-lib": "^11.2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"vite": "^7.0.4",
|
|
50
50
|
"vite-plugin-dts": "^4.5.4",
|
|
51
51
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
52
|
-
"@coinbase/cdp-
|
|
53
|
-
"@coinbase/cdp-
|
|
52
|
+
"@coinbase/cdp-core": "^0.0.90",
|
|
53
|
+
"@coinbase/cdp-hooks": "^0.0.90"
|
|
54
54
|
},
|
|
55
55
|
"size-limit": [
|
|
56
56
|
{
|