@orangecheck/auth-client 0.2.0 → 0.4.0
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/index.d.mts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +383 -20
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +381 -20
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -33,6 +33,15 @@ declare function OcSessionProvider({ children, config, defaultReturnTo, }: OcSes
|
|
|
33
33
|
declare function useOcSession(): OcSessionState;
|
|
34
34
|
declare function useOptionalOcSession(): OcSessionState | null;
|
|
35
35
|
|
|
36
|
+
interface OcAccountChipProps {
|
|
37
|
+
dashboardUrl?: string;
|
|
38
|
+
signInLabel?: string;
|
|
39
|
+
className?: string;
|
|
40
|
+
triggerClassName?: string;
|
|
41
|
+
popoverClassName?: string;
|
|
42
|
+
menuItemClassName?: string;
|
|
43
|
+
}
|
|
44
|
+
declare function OcAccountChip({ dashboardUrl, signInLabel, className, triggerClassName, popoverClassName, menuItemClassName, }: OcAccountChipProps): React.ReactElement | null;
|
|
36
45
|
interface OcSignInButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
37
46
|
label?: string;
|
|
38
47
|
eager?: boolean;
|
|
@@ -54,6 +63,29 @@ interface OcAddressInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
|
|
|
54
63
|
popoverClassName?: string;
|
|
55
64
|
suggestionClassName?: string;
|
|
56
65
|
}
|
|
66
|
+
interface UseOcAddressSuggestionOptions {
|
|
67
|
+
value: string;
|
|
68
|
+
onValueChange: (value: string) => void;
|
|
69
|
+
suggestionLabel?: string;
|
|
70
|
+
popoverClassName?: string;
|
|
71
|
+
suggestionClassName?: string;
|
|
72
|
+
}
|
|
73
|
+
interface UseOcAddressSuggestionReturn {
|
|
74
|
+
inputProps: {
|
|
75
|
+
onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
76
|
+
onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
77
|
+
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
78
|
+
role: 'combobox';
|
|
79
|
+
'aria-haspopup': 'listbox';
|
|
80
|
+
'aria-expanded': boolean;
|
|
81
|
+
'aria-controls': string | undefined;
|
|
82
|
+
'aria-activedescendant': string | undefined;
|
|
83
|
+
autoComplete: 'off';
|
|
84
|
+
spellCheck: false;
|
|
85
|
+
};
|
|
86
|
+
popover: React.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
declare function useOcAddressSuggestion(options: UseOcAddressSuggestionOptions): UseOcAddressSuggestionReturn;
|
|
57
89
|
declare const OcAddressInput: React.ForwardRefExoticComponent<OcAddressInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
58
90
|
|
|
59
|
-
export { DEFAULT_CONFIG, type OcAccount, OcAccountPill, type OcAccountPillProps, OcAddressInput, type OcAddressInputProps, type OcAuthConfig, OcSessionProvider, type OcSessionState, type OcSessionStatus, OcSignInButton, type OcSignInButtonProps, buildSignInUrl, useOcSession, useOptionalOcSession };
|
|
91
|
+
export { DEFAULT_CONFIG, type OcAccount, OcAccountChip, type OcAccountChipProps, OcAccountPill, type OcAccountPillProps, OcAddressInput, type OcAddressInputProps, type OcAuthConfig, OcSessionProvider, type OcSessionState, type OcSessionStatus, OcSignInButton, type OcSignInButtonProps, type UseOcAddressSuggestionOptions, type UseOcAddressSuggestionReturn, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession };
|
package/dist/index.d.ts
CHANGED
|
@@ -33,6 +33,15 @@ declare function OcSessionProvider({ children, config, defaultReturnTo, }: OcSes
|
|
|
33
33
|
declare function useOcSession(): OcSessionState;
|
|
34
34
|
declare function useOptionalOcSession(): OcSessionState | null;
|
|
35
35
|
|
|
36
|
+
interface OcAccountChipProps {
|
|
37
|
+
dashboardUrl?: string;
|
|
38
|
+
signInLabel?: string;
|
|
39
|
+
className?: string;
|
|
40
|
+
triggerClassName?: string;
|
|
41
|
+
popoverClassName?: string;
|
|
42
|
+
menuItemClassName?: string;
|
|
43
|
+
}
|
|
44
|
+
declare function OcAccountChip({ dashboardUrl, signInLabel, className, triggerClassName, popoverClassName, menuItemClassName, }: OcAccountChipProps): React.ReactElement | null;
|
|
36
45
|
interface OcSignInButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
37
46
|
label?: string;
|
|
38
47
|
eager?: boolean;
|
|
@@ -54,6 +63,29 @@ interface OcAddressInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
|
|
|
54
63
|
popoverClassName?: string;
|
|
55
64
|
suggestionClassName?: string;
|
|
56
65
|
}
|
|
66
|
+
interface UseOcAddressSuggestionOptions {
|
|
67
|
+
value: string;
|
|
68
|
+
onValueChange: (value: string) => void;
|
|
69
|
+
suggestionLabel?: string;
|
|
70
|
+
popoverClassName?: string;
|
|
71
|
+
suggestionClassName?: string;
|
|
72
|
+
}
|
|
73
|
+
interface UseOcAddressSuggestionReturn {
|
|
74
|
+
inputProps: {
|
|
75
|
+
onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
76
|
+
onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
77
|
+
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
78
|
+
role: 'combobox';
|
|
79
|
+
'aria-haspopup': 'listbox';
|
|
80
|
+
'aria-expanded': boolean;
|
|
81
|
+
'aria-controls': string | undefined;
|
|
82
|
+
'aria-activedescendant': string | undefined;
|
|
83
|
+
autoComplete: 'off';
|
|
84
|
+
spellCheck: false;
|
|
85
|
+
};
|
|
86
|
+
popover: React.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
declare function useOcAddressSuggestion(options: UseOcAddressSuggestionOptions): UseOcAddressSuggestionReturn;
|
|
57
89
|
declare const OcAddressInput: React.ForwardRefExoticComponent<OcAddressInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
58
90
|
|
|
59
|
-
export { DEFAULT_CONFIG, type OcAccount, OcAccountPill, type OcAccountPillProps, OcAddressInput, type OcAddressInputProps, type OcAuthConfig, OcSessionProvider, type OcSessionState, type OcSessionStatus, OcSignInButton, type OcSignInButtonProps, buildSignInUrl, useOcSession, useOptionalOcSession };
|
|
91
|
+
export { DEFAULT_CONFIG, type OcAccount, OcAccountChip, type OcAccountChipProps, OcAccountPill, type OcAccountPillProps, OcAddressInput, type OcAddressInputProps, type OcAuthConfig, OcSessionProvider, type OcSessionState, type OcSessionStatus, OcSignInButton, type OcSignInButtonProps, type UseOcAddressSuggestionOptions, type UseOcAddressSuggestionReturn, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React2 = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
|
|
6
6
|
function _interopNamespace(e) {
|
|
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
|
|
|
21
21
|
return Object.freeze(n);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
|
|
25
25
|
|
|
26
26
|
// src/provider.tsx
|
|
27
27
|
|
|
@@ -42,7 +42,7 @@ function buildSignInUrl(cfg, returnTo) {
|
|
|
42
42
|
u.searchParams.set("return_to", returnTo);
|
|
43
43
|
return u.toString();
|
|
44
44
|
}
|
|
45
|
-
var SessionContext =
|
|
45
|
+
var SessionContext = React2__namespace.createContext(null);
|
|
46
46
|
function normalizeAccount(raw) {
|
|
47
47
|
if (!raw) return null;
|
|
48
48
|
const address = raw.btc_address ?? raw.address;
|
|
@@ -60,11 +60,11 @@ function OcSessionProvider({
|
|
|
60
60
|
config,
|
|
61
61
|
defaultReturnTo
|
|
62
62
|
}) {
|
|
63
|
-
const cfg =
|
|
64
|
-
const [account, setAccount] =
|
|
65
|
-
const [status, setStatus] =
|
|
66
|
-
const [error, setError] =
|
|
67
|
-
const refresh =
|
|
63
|
+
const cfg = React2__namespace.useMemo(() => resolveConfig(config), [config]);
|
|
64
|
+
const [account, setAccount] = React2__namespace.useState(null);
|
|
65
|
+
const [status, setStatus] = React2__namespace.useState("loading");
|
|
66
|
+
const [error, setError] = React2__namespace.useState(null);
|
|
67
|
+
const refresh = React2__namespace.useCallback(async () => {
|
|
68
68
|
if (typeof window === "undefined") return;
|
|
69
69
|
try {
|
|
70
70
|
const res = await fetch(cfg.mePath, {
|
|
@@ -93,10 +93,10 @@ function OcSessionProvider({
|
|
|
93
93
|
setError(err instanceof Error ? err : new Error(String(err)));
|
|
94
94
|
}
|
|
95
95
|
}, [cfg.mePath]);
|
|
96
|
-
|
|
96
|
+
React2__namespace.useEffect(() => {
|
|
97
97
|
void refresh();
|
|
98
98
|
}, [refresh]);
|
|
99
|
-
const signOut =
|
|
99
|
+
const signOut = React2__namespace.useCallback(async () => {
|
|
100
100
|
try {
|
|
101
101
|
await fetch(`${cfg.authOrigin}${cfg.logoutPath}`, {
|
|
102
102
|
method: "POST",
|
|
@@ -107,7 +107,7 @@ function OcSessionProvider({
|
|
|
107
107
|
setAccount(null);
|
|
108
108
|
setStatus("anonymous");
|
|
109
109
|
}, [cfg.authOrigin, cfg.logoutPath]);
|
|
110
|
-
const value =
|
|
110
|
+
const value = React2__namespace.useMemo(() => {
|
|
111
111
|
const returnTo = defaultReturnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
|
|
112
112
|
return {
|
|
113
113
|
status,
|
|
@@ -121,7 +121,7 @@ function OcSessionProvider({
|
|
|
121
121
|
return /* @__PURE__ */ jsxRuntime.jsx(SessionContext.Provider, { value, children });
|
|
122
122
|
}
|
|
123
123
|
function useOcSession() {
|
|
124
|
-
const ctx =
|
|
124
|
+
const ctx = React2__namespace.useContext(SessionContext);
|
|
125
125
|
if (!ctx) {
|
|
126
126
|
throw new Error(
|
|
127
127
|
"[@orangecheck/auth-client] useOcSession() must be called inside <OcSessionProvider>"
|
|
@@ -130,7 +130,7 @@ function useOcSession() {
|
|
|
130
130
|
return ctx;
|
|
131
131
|
}
|
|
132
132
|
function useOptionalOcSession() {
|
|
133
|
-
return
|
|
133
|
+
return React2__namespace.useContext(SessionContext);
|
|
134
134
|
}
|
|
135
135
|
function shortenAddress(addr) {
|
|
136
136
|
if (addr.length <= 12) return addr;
|
|
@@ -145,9 +145,243 @@ function isPrefixOf(value, target) {
|
|
|
145
145
|
}
|
|
146
146
|
var listboxIdCounter = 0;
|
|
147
147
|
function useUniqueId(prefix) {
|
|
148
|
-
const [id] =
|
|
148
|
+
const [id] = React2__namespace.useState(() => `${prefix}-${++listboxIdCounter}`);
|
|
149
149
|
return id;
|
|
150
150
|
}
|
|
151
|
+
function OcAccountChip({
|
|
152
|
+
dashboardUrl = "https://ochk.io/dashboard",
|
|
153
|
+
signInLabel = "sign in",
|
|
154
|
+
className,
|
|
155
|
+
triggerClassName,
|
|
156
|
+
popoverClassName,
|
|
157
|
+
menuItemClassName
|
|
158
|
+
}) {
|
|
159
|
+
const { status, account, signInUrl, signOut } = useOcSession();
|
|
160
|
+
const [open, setOpen] = React2__namespace.useState(false);
|
|
161
|
+
const wrapRef = React2__namespace.useRef(null);
|
|
162
|
+
React2__namespace.useEffect(() => {
|
|
163
|
+
if (!open) return;
|
|
164
|
+
function handleClickOutside(e) {
|
|
165
|
+
if (wrapRef.current && !wrapRef.current.contains(e.target)) {
|
|
166
|
+
setOpen(false);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
function handleEscape(e) {
|
|
170
|
+
if (e.key === "Escape") setOpen(false);
|
|
171
|
+
}
|
|
172
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
173
|
+
document.addEventListener("keydown", handleEscape);
|
|
174
|
+
return () => {
|
|
175
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
176
|
+
document.removeEventListener("keydown", handleEscape);
|
|
177
|
+
};
|
|
178
|
+
}, [open]);
|
|
179
|
+
if (status === "loading") return null;
|
|
180
|
+
if (status !== "authenticated" || !account) {
|
|
181
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
182
|
+
"a",
|
|
183
|
+
{
|
|
184
|
+
href: signInUrl,
|
|
185
|
+
className: triggerClassName ?? className,
|
|
186
|
+
"data-oc-account-chip-signin": "",
|
|
187
|
+
children: signInLabel
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
192
|
+
"div",
|
|
193
|
+
{
|
|
194
|
+
ref: wrapRef,
|
|
195
|
+
className,
|
|
196
|
+
"data-oc-account-chip": "",
|
|
197
|
+
style: { position: "relative", display: "inline-block" },
|
|
198
|
+
children: [
|
|
199
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
200
|
+
"button",
|
|
201
|
+
{
|
|
202
|
+
type: "button",
|
|
203
|
+
onClick: () => setOpen((v) => !v),
|
|
204
|
+
"aria-haspopup": "menu",
|
|
205
|
+
"aria-expanded": open,
|
|
206
|
+
"aria-label": `Signed in as ${account.address}. Open account menu.`,
|
|
207
|
+
className: triggerClassName,
|
|
208
|
+
"data-oc-account-chip-trigger": "",
|
|
209
|
+
style: triggerClassName ? void 0 : {
|
|
210
|
+
display: "inline-flex",
|
|
211
|
+
alignItems: "center",
|
|
212
|
+
gap: "0.4rem",
|
|
213
|
+
padding: "0.25rem 0.625rem",
|
|
214
|
+
borderRadius: "9999px",
|
|
215
|
+
border: "1px solid #27272a",
|
|
216
|
+
background: "rgba(39, 39, 42, 0.4)",
|
|
217
|
+
color: "#fafafa",
|
|
218
|
+
fontFamily: "ui-monospace, SFMono-Regular, monospace",
|
|
219
|
+
fontSize: 12,
|
|
220
|
+
cursor: "pointer"
|
|
221
|
+
},
|
|
222
|
+
children: [
|
|
223
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { color: "#22c55e", fontSize: 8 }, children: "\u25CF" }),
|
|
224
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: shortenAddress(account.address) }),
|
|
225
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
226
|
+
"svg",
|
|
227
|
+
{
|
|
228
|
+
width: "9",
|
|
229
|
+
height: "9",
|
|
230
|
+
viewBox: "0 0 10 10",
|
|
231
|
+
"aria-hidden": "true",
|
|
232
|
+
style: {
|
|
233
|
+
transition: "transform 120ms",
|
|
234
|
+
transform: open ? "rotate(180deg)" : "rotate(0)",
|
|
235
|
+
opacity: 0.6
|
|
236
|
+
},
|
|
237
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
238
|
+
"path",
|
|
239
|
+
{
|
|
240
|
+
d: "M2 4 L5 7 L8 4",
|
|
241
|
+
stroke: "currentColor",
|
|
242
|
+
strokeWidth: "1.5",
|
|
243
|
+
fill: "none",
|
|
244
|
+
strokeLinecap: "round"
|
|
245
|
+
}
|
|
246
|
+
)
|
|
247
|
+
}
|
|
248
|
+
)
|
|
249
|
+
]
|
|
250
|
+
}
|
|
251
|
+
),
|
|
252
|
+
open && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
253
|
+
"div",
|
|
254
|
+
{
|
|
255
|
+
role: "menu",
|
|
256
|
+
"aria-label": "Account menu",
|
|
257
|
+
className: popoverClassName,
|
|
258
|
+
"data-oc-account-chip-popover": "",
|
|
259
|
+
style: popoverClassName ? { position: "absolute", zIndex: 50, top: "calc(100% + 6px)", right: 0 } : {
|
|
260
|
+
position: "absolute",
|
|
261
|
+
zIndex: 50,
|
|
262
|
+
top: "calc(100% + 6px)",
|
|
263
|
+
right: 0,
|
|
264
|
+
minWidth: 240,
|
|
265
|
+
background: "#0a0a0a",
|
|
266
|
+
border: "1px solid #27272a",
|
|
267
|
+
boxShadow: "0 10px 32px -4px rgba(0,0,0,0.6)",
|
|
268
|
+
fontFamily: "ui-monospace, SFMono-Regular, monospace"
|
|
269
|
+
},
|
|
270
|
+
children: [
|
|
271
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
272
|
+
"div",
|
|
273
|
+
{
|
|
274
|
+
"data-oc-account-chip-header": "",
|
|
275
|
+
style: { padding: "0.75rem 0.75rem 0.625rem", borderBottom: "1px solid #27272a" },
|
|
276
|
+
children: [
|
|
277
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
278
|
+
"div",
|
|
279
|
+
{
|
|
280
|
+
"data-oc-account-chip-label": "",
|
|
281
|
+
style: {
|
|
282
|
+
color: "#f97316",
|
|
283
|
+
fontSize: 10,
|
|
284
|
+
letterSpacing: "0.18em",
|
|
285
|
+
textTransform: "uppercase",
|
|
286
|
+
marginBottom: 4
|
|
287
|
+
},
|
|
288
|
+
children: "\xA7 signed in"
|
|
289
|
+
}
|
|
290
|
+
),
|
|
291
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
292
|
+
"div",
|
|
293
|
+
{
|
|
294
|
+
"data-oc-account-chip-address": "",
|
|
295
|
+
style: {
|
|
296
|
+
color: "#fafafa",
|
|
297
|
+
fontSize: 11,
|
|
298
|
+
wordBreak: "break-all",
|
|
299
|
+
lineHeight: 1.35
|
|
300
|
+
},
|
|
301
|
+
children: account.address
|
|
302
|
+
}
|
|
303
|
+
),
|
|
304
|
+
account.displayName ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
305
|
+
"div",
|
|
306
|
+
{
|
|
307
|
+
style: {
|
|
308
|
+
color: "#a1a1aa",
|
|
309
|
+
fontSize: 10,
|
|
310
|
+
marginTop: 4,
|
|
311
|
+
letterSpacing: "0.06em"
|
|
312
|
+
},
|
|
313
|
+
children: account.displayName
|
|
314
|
+
}
|
|
315
|
+
) : null
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
),
|
|
319
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { role: "none", style: { padding: "0.25rem" }, children: [
|
|
320
|
+
dashboardUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
321
|
+
"a",
|
|
322
|
+
{
|
|
323
|
+
role: "menuitem",
|
|
324
|
+
href: dashboardUrl,
|
|
325
|
+
onClick: () => setOpen(false),
|
|
326
|
+
className: menuItemClassName,
|
|
327
|
+
"data-oc-account-chip-item": "",
|
|
328
|
+
style: menuItemClassName ? void 0 : {
|
|
329
|
+
display: "flex",
|
|
330
|
+
alignItems: "center",
|
|
331
|
+
gap: "0.5rem",
|
|
332
|
+
padding: "0.5rem 0.625rem",
|
|
333
|
+
fontSize: 12,
|
|
334
|
+
color: "#fafafa",
|
|
335
|
+
textDecoration: "none",
|
|
336
|
+
cursor: "pointer"
|
|
337
|
+
},
|
|
338
|
+
children: [
|
|
339
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { color: "#a1a1aa" }, children: "\u2192" }),
|
|
340
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: "dashboard" }),
|
|
341
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#a1a1aa", fontSize: 10 }, children: "\u2197" })
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
) : null,
|
|
345
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
346
|
+
"button",
|
|
347
|
+
{
|
|
348
|
+
type: "button",
|
|
349
|
+
role: "menuitem",
|
|
350
|
+
onClick: () => {
|
|
351
|
+
setOpen(false);
|
|
352
|
+
void signOut();
|
|
353
|
+
},
|
|
354
|
+
className: menuItemClassName,
|
|
355
|
+
"data-oc-account-chip-item": "",
|
|
356
|
+
"data-oc-account-chip-signout": "",
|
|
357
|
+
style: menuItemClassName ? void 0 : {
|
|
358
|
+
display: "flex",
|
|
359
|
+
alignItems: "center",
|
|
360
|
+
gap: "0.5rem",
|
|
361
|
+
width: "100%",
|
|
362
|
+
padding: "0.5rem 0.625rem",
|
|
363
|
+
fontSize: 12,
|
|
364
|
+
color: "#fafafa",
|
|
365
|
+
background: "transparent",
|
|
366
|
+
border: 0,
|
|
367
|
+
fontFamily: "inherit",
|
|
368
|
+
textAlign: "left",
|
|
369
|
+
cursor: "pointer"
|
|
370
|
+
},
|
|
371
|
+
children: [
|
|
372
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { color: "#a1a1aa" }, children: "\u2192" }),
|
|
373
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: "sign out" })
|
|
374
|
+
]
|
|
375
|
+
}
|
|
376
|
+
)
|
|
377
|
+
] })
|
|
378
|
+
]
|
|
379
|
+
}
|
|
380
|
+
)
|
|
381
|
+
]
|
|
382
|
+
}
|
|
383
|
+
);
|
|
384
|
+
}
|
|
151
385
|
function OcSignInButton({
|
|
152
386
|
label = "sign in with bitcoin",
|
|
153
387
|
eager = false,
|
|
@@ -209,7 +443,134 @@ function OcAccountPill({
|
|
|
209
443
|
}
|
|
210
444
|
);
|
|
211
445
|
}
|
|
212
|
-
|
|
446
|
+
function useOcAddressSuggestion(options) {
|
|
447
|
+
const {
|
|
448
|
+
value,
|
|
449
|
+
onValueChange,
|
|
450
|
+
suggestionLabel = "use your address",
|
|
451
|
+
popoverClassName,
|
|
452
|
+
suggestionClassName
|
|
453
|
+
} = options;
|
|
454
|
+
const { status, account } = useOcSession();
|
|
455
|
+
const sessionAddress = status === "authenticated" ? account?.address ?? null : null;
|
|
456
|
+
const [open, setOpen] = React2__namespace.useState(false);
|
|
457
|
+
const [highlighted, setHighlighted] = React2__namespace.useState(false);
|
|
458
|
+
const blurTimer = React2__namespace.useRef(null);
|
|
459
|
+
const listboxId = useUniqueId("oc-addr-listbox");
|
|
460
|
+
const optionId = `${listboxId}-opt`;
|
|
461
|
+
const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
|
|
462
|
+
const canSuggest = sessionAddress != null && sessionAddress.length > 0 && !valueMatchesSession && isPrefixOf(value, sessionAddress);
|
|
463
|
+
const showPopover = open && canSuggest;
|
|
464
|
+
function selectSuggestion() {
|
|
465
|
+
if (!sessionAddress) return;
|
|
466
|
+
onValueChange(sessionAddress);
|
|
467
|
+
setOpen(false);
|
|
468
|
+
setHighlighted(false);
|
|
469
|
+
}
|
|
470
|
+
React2__namespace.useEffect(() => {
|
|
471
|
+
return () => {
|
|
472
|
+
if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
|
|
473
|
+
};
|
|
474
|
+
}, []);
|
|
475
|
+
const inputProps = {
|
|
476
|
+
onFocus: () => {
|
|
477
|
+
if (blurTimer.current != null) {
|
|
478
|
+
window.clearTimeout(blurTimer.current);
|
|
479
|
+
blurTimer.current = null;
|
|
480
|
+
}
|
|
481
|
+
setOpen(true);
|
|
482
|
+
},
|
|
483
|
+
onBlur: () => {
|
|
484
|
+
blurTimer.current = window.setTimeout(() => {
|
|
485
|
+
setOpen(false);
|
|
486
|
+
setHighlighted(false);
|
|
487
|
+
}, 120);
|
|
488
|
+
},
|
|
489
|
+
onKeyDown: (e) => {
|
|
490
|
+
if (!showPopover) return;
|
|
491
|
+
if (e.key === "ArrowDown") {
|
|
492
|
+
e.preventDefault();
|
|
493
|
+
setHighlighted(true);
|
|
494
|
+
} else if (e.key === "ArrowUp") {
|
|
495
|
+
e.preventDefault();
|
|
496
|
+
setHighlighted(false);
|
|
497
|
+
} else if (e.key === "Escape") {
|
|
498
|
+
e.preventDefault();
|
|
499
|
+
setOpen(false);
|
|
500
|
+
setHighlighted(false);
|
|
501
|
+
} else if (e.key === "Enter" && highlighted) {
|
|
502
|
+
e.preventDefault();
|
|
503
|
+
selectSuggestion();
|
|
504
|
+
}
|
|
505
|
+
},
|
|
506
|
+
role: "combobox",
|
|
507
|
+
"aria-haspopup": "listbox",
|
|
508
|
+
"aria-expanded": showPopover,
|
|
509
|
+
"aria-controls": showPopover ? listboxId : void 0,
|
|
510
|
+
"aria-activedescendant": highlighted ? optionId : void 0,
|
|
511
|
+
autoComplete: "off",
|
|
512
|
+
spellCheck: false
|
|
513
|
+
};
|
|
514
|
+
const popover = showPopover && sessionAddress ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
515
|
+
"div",
|
|
516
|
+
{
|
|
517
|
+
id: listboxId,
|
|
518
|
+
role: "listbox",
|
|
519
|
+
"data-oc-address-popover": "",
|
|
520
|
+
className: popoverClassName,
|
|
521
|
+
style: {
|
|
522
|
+
position: "absolute",
|
|
523
|
+
zIndex: 50,
|
|
524
|
+
top: "calc(100% + 4px)",
|
|
525
|
+
left: 0,
|
|
526
|
+
right: 0
|
|
527
|
+
},
|
|
528
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
529
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
530
|
+
"button",
|
|
531
|
+
{
|
|
532
|
+
type: "button",
|
|
533
|
+
id: optionId,
|
|
534
|
+
role: "option",
|
|
535
|
+
"aria-selected": highlighted,
|
|
536
|
+
"data-oc-address-suggestion": "",
|
|
537
|
+
"data-highlighted": highlighted ? "" : void 0,
|
|
538
|
+
className: suggestionClassName,
|
|
539
|
+
onClick: selectSuggestion,
|
|
540
|
+
onMouseEnter: () => setHighlighted(true),
|
|
541
|
+
onMouseLeave: () => setHighlighted(false),
|
|
542
|
+
style: {
|
|
543
|
+
display: "flex",
|
|
544
|
+
alignItems: "center",
|
|
545
|
+
justifyContent: "space-between",
|
|
546
|
+
gap: "0.75rem",
|
|
547
|
+
width: "100%",
|
|
548
|
+
textAlign: "left",
|
|
549
|
+
cursor: "pointer",
|
|
550
|
+
font: "inherit",
|
|
551
|
+
background: "inherit",
|
|
552
|
+
color: "inherit",
|
|
553
|
+
border: 0,
|
|
554
|
+
padding: "inherit"
|
|
555
|
+
},
|
|
556
|
+
children: [
|
|
557
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "data-oc-address-suggestion-label": "", children: suggestionLabel }),
|
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
559
|
+
"span",
|
|
560
|
+
{
|
|
561
|
+
"data-oc-address-suggestion-value": "",
|
|
562
|
+
style: { fontFamily: "ui-monospace, monospace" },
|
|
563
|
+
children: shortenAddressMid(sessionAddress)
|
|
564
|
+
}
|
|
565
|
+
)
|
|
566
|
+
]
|
|
567
|
+
}
|
|
568
|
+
)
|
|
569
|
+
}
|
|
570
|
+
) : null;
|
|
571
|
+
return { inputProps, popover };
|
|
572
|
+
}
|
|
573
|
+
var OcAddressInput = React2__namespace.forwardRef(
|
|
213
574
|
function OcAddressInput2({
|
|
214
575
|
value,
|
|
215
576
|
onValueChange,
|
|
@@ -224,15 +585,15 @@ var OcAddressInput = React__namespace.forwardRef(
|
|
|
224
585
|
}, forwardedRef) {
|
|
225
586
|
const { status, account } = useOcSession();
|
|
226
587
|
const sessionAddress = status === "authenticated" ? account?.address ?? null : null;
|
|
227
|
-
const [open, setOpen] =
|
|
228
|
-
const [highlighted, setHighlighted] =
|
|
229
|
-
const innerRef =
|
|
588
|
+
const [open, setOpen] = React2__namespace.useState(false);
|
|
589
|
+
const [highlighted, setHighlighted] = React2__namespace.useState(false);
|
|
590
|
+
const innerRef = React2__namespace.useRef(null);
|
|
230
591
|
const setRef = (node) => {
|
|
231
592
|
innerRef.current = node;
|
|
232
593
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
233
594
|
else if (forwardedRef) forwardedRef.current = node;
|
|
234
595
|
};
|
|
235
|
-
const blurTimer =
|
|
596
|
+
const blurTimer = React2__namespace.useRef(null);
|
|
236
597
|
const listboxId = useUniqueId("oc-addr-listbox");
|
|
237
598
|
const optionId = `${listboxId}-opt`;
|
|
238
599
|
const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
|
|
@@ -279,7 +640,7 @@ var OcAddressInput = React__namespace.forwardRef(
|
|
|
279
640
|
}
|
|
280
641
|
onKeyDown?.(e);
|
|
281
642
|
}
|
|
282
|
-
|
|
643
|
+
React2__namespace.useEffect(() => {
|
|
283
644
|
return () => {
|
|
284
645
|
if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
|
|
285
646
|
};
|
|
@@ -374,11 +735,13 @@ var OcAddressInput = React__namespace.forwardRef(
|
|
|
374
735
|
);
|
|
375
736
|
|
|
376
737
|
exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
|
|
738
|
+
exports.OcAccountChip = OcAccountChip;
|
|
377
739
|
exports.OcAccountPill = OcAccountPill;
|
|
378
740
|
exports.OcAddressInput = OcAddressInput;
|
|
379
741
|
exports.OcSessionProvider = OcSessionProvider;
|
|
380
742
|
exports.OcSignInButton = OcSignInButton;
|
|
381
743
|
exports.buildSignInUrl = buildSignInUrl;
|
|
744
|
+
exports.useOcAddressSuggestion = useOcAddressSuggestion;
|
|
382
745
|
exports.useOcSession = useOcSession;
|
|
383
746
|
exports.useOptionalOcSession = useOptionalOcSession;
|
|
384
747
|
//# sourceMappingURL=index.js.map
|