@redzone/taunt-logins-ui-react 0.0.19 → 0.0.20
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/cjs/index.cjs +169 -91
- package/dist/cjs/index.d.cts +20 -17
- package/dist/es/index.d.ts +20 -17
- package/dist/es/index.js +170 -92
- package/package.json +13 -8
- package/dist/cjs/cc-D-353NYd.cjs +0 -63
- package/dist/es/cc-D6TRVNtd.js +0 -61
package/dist/cjs/index.cjs
CHANGED
|
@@ -9,7 +9,6 @@ function __insertCSS(code) {
|
|
|
9
9
|
|
|
10
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
11
11
|
var react = require('react');
|
|
12
|
-
var cc = require('./cc-D-353NYd.cjs');
|
|
13
12
|
var tauntLogins = require('@redzone/taunt-logins');
|
|
14
13
|
|
|
15
14
|
__insertCSS(".rzd-loginui-complete{background:radial-gradient(50% 50% at 50% 50%,#132c50 0,#0b101b 100%);border-radius:37px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:40px;max-width:620px;min-height:455px;min-width:500px}.rzd-loginview{box-sizing:border-box;color:#fff;font-size:36px;font-weight:700;color:#fff;text-transform:uppercase;margin:20px 0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.card{padding:2em}.read-the-docs{color:#888}input.rdz-input{box-sizing:border-box;position:relative;width:100%;max-width:480px;height:58px;border:2px solid #009df3;box-shadow:0 0 16.9px 1px #0e79f3;border-radius:11px}input.rdz-input::placeholder{color:#fff;opacity:1;font-family:\"Futura PT\",sans-serif;font-size:1em}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.rdz-magic-email-error{color:red}.rdz-sign-up-text{font-family:\"Futura PT\",sans-serif;font-size:1.2em;font-weight:400}.rdz-icon-button{width:55px;height:55px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.1);filter:brightness(1.1)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-magic-email-button{background-size:100% 100%;background-position:center;background-repeat:no-repeat;font-family:DRUNKWIDE,sans-serif;border:none;color:#fff;padding:16px 32px;cursor:pointer;min-height:135px;margin-bottom:-20px;width:100%;max-width:410px;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background-color:transparent;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-logout-button{margin-left:8px;padding:12px 24px;background-color:#3b82f6;color:#fff;border-radius:6px;border:none;cursor:pointer;font-family:\"Futura PT\",sans-serif;font-size:16px;font-weight:500;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}");
|
|
@@ -81,24 +80,28 @@ function LoadingView() {
|
|
|
81
80
|
});
|
|
82
81
|
}
|
|
83
82
|
|
|
83
|
+
const DefinitelyUndefined = ()=>Promise.resolve(undefined);
|
|
84
84
|
const TauntContext = react.createContext({
|
|
85
85
|
tauntServiceEndpoint: "",
|
|
86
86
|
isLoading: false,
|
|
87
87
|
loggedIn: false,
|
|
88
|
-
setLoginDetails:
|
|
89
|
-
getMe:
|
|
90
|
-
metamaskLogin:
|
|
91
|
-
otpMagicLogin:
|
|
92
|
-
telegramLogin:
|
|
93
|
-
metaLogin:
|
|
94
|
-
coinbaseLogin:
|
|
95
|
-
refreshToken:
|
|
96
|
-
getClaimrToken:
|
|
97
|
-
|
|
98
|
-
|
|
88
|
+
setLoginDetails: DefinitelyUndefined,
|
|
89
|
+
getMe: DefinitelyUndefined,
|
|
90
|
+
metamaskLogin: DefinitelyUndefined,
|
|
91
|
+
otpMagicLogin: DefinitelyUndefined,
|
|
92
|
+
telegramLogin: DefinitelyUndefined,
|
|
93
|
+
metaLogin: DefinitelyUndefined,
|
|
94
|
+
coinbaseLogin: DefinitelyUndefined,
|
|
95
|
+
refreshToken: DefinitelyUndefined,
|
|
96
|
+
getClaimrToken: DefinitelyUndefined,
|
|
97
|
+
getClaimrSkulls: DefinitelyUndefined,
|
|
98
|
+
getClaimrReferralCode: DefinitelyUndefined,
|
|
99
|
+
logout: ()=>{
|
|
100
|
+
/* empty */ }
|
|
99
101
|
});
|
|
100
102
|
function useTaunt() {
|
|
101
103
|
const ctx = react.useContext(TauntContext);
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
102
105
|
if (!ctx) {
|
|
103
106
|
throw new Error("useTaunt must be used within a TauntProvider");
|
|
104
107
|
}
|
|
@@ -112,12 +115,12 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
112
115
|
const [showError, setShowError] = react.useState(false);
|
|
113
116
|
const validEmail = react.useMemo(()=>{
|
|
114
117
|
const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
|
|
115
|
-
return
|
|
118
|
+
return email?.match(validRegex) ? email : undefined;
|
|
116
119
|
}, [
|
|
117
120
|
email
|
|
118
121
|
]);
|
|
119
122
|
const runMagic = ()=>{
|
|
120
|
-
if (!validEmail) {
|
|
123
|
+
if (!email || !validEmail) {
|
|
121
124
|
setShowError(true);
|
|
122
125
|
return;
|
|
123
126
|
}
|
|
@@ -137,7 +140,9 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
137
140
|
}),
|
|
138
141
|
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
139
142
|
className: "rdz-input",
|
|
140
|
-
onChange: (e)=>
|
|
143
|
+
onChange: (e)=>{
|
|
144
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
145
|
+
},
|
|
141
146
|
placeholder: "Email address",
|
|
142
147
|
type: "email",
|
|
143
148
|
value: email
|
|
@@ -281,7 +286,9 @@ const LoginView = ({ providers = [
|
|
|
281
286
|
};
|
|
282
287
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
283
288
|
children: [
|
|
284
|
-
showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput,
|
|
289
|
+
showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput, {
|
|
290
|
+
...magicEmailProps
|
|
291
|
+
}),
|
|
285
292
|
showEmailInput && hasSocialProviders && /*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
286
293
|
className: "rdz-sign-up-text",
|
|
287
294
|
children: dividerText
|
|
@@ -294,18 +301,22 @@ const LoginView = ({ providers = [
|
|
|
294
301
|
alignItems: "center"
|
|
295
302
|
},
|
|
296
303
|
children: [
|
|
297
|
-
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsxRuntime.jsx(CoinbaseButton,
|
|
298
|
-
disabled: !providers.includes("coinbase")
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
},
|
|
304
|
+
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsxRuntime.jsx(CoinbaseButton, {
|
|
305
|
+
disabled: !providers.includes("coinbase"),
|
|
306
|
+
...coinbaseProps
|
|
307
|
+
}),
|
|
308
|
+
socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsxRuntime.jsx(MetaMaskButton, {
|
|
309
|
+
disabled: !providers.includes("metamask"),
|
|
310
|
+
...metamaskProps
|
|
311
|
+
}),
|
|
312
|
+
socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsxRuntime.jsx(MetaButton, {
|
|
313
|
+
disabled: !providers.includes("meta"),
|
|
314
|
+
...metaProps
|
|
315
|
+
}),
|
|
316
|
+
socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsxRuntime.jsx(TelegramButton, {
|
|
317
|
+
disabled: !providers.includes("telegram"),
|
|
318
|
+
...telegramProps
|
|
319
|
+
})
|
|
309
320
|
]
|
|
310
321
|
}),
|
|
311
322
|
console.log("Terms render check:", {
|
|
@@ -315,7 +326,7 @@ const LoginView = ({ providers = [
|
|
|
315
326
|
hasTermsClick: !!onTermsClick,
|
|
316
327
|
hasPrivacyClick: !!onPrivacyClick
|
|
317
328
|
}),
|
|
318
|
-
showTerms && (termsContent
|
|
329
|
+
showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsxs("p", {
|
|
319
330
|
style: {
|
|
320
331
|
fontFamily: "Futura PT, sans-serif",
|
|
321
332
|
fontSize: "1.3em"
|
|
@@ -323,7 +334,7 @@ const LoginView = ({ providers = [
|
|
|
323
334
|
children: [
|
|
324
335
|
"By connecting you are agreeing to our",
|
|
325
336
|
" ",
|
|
326
|
-
(termsContent
|
|
337
|
+
(termsContent ?? onTermsClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
|
|
327
338
|
href: "#",
|
|
328
339
|
onClick: (e)=>{
|
|
329
340
|
e.preventDefault();
|
|
@@ -336,8 +347,8 @@ const LoginView = ({ providers = [
|
|
|
336
347
|
},
|
|
337
348
|
children: "Terms of Service"
|
|
338
349
|
}),
|
|
339
|
-
(termsContent
|
|
340
|
-
(privacyContent
|
|
350
|
+
(termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
|
|
351
|
+
(privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
|
|
341
352
|
href: "#",
|
|
342
353
|
onClick: (e)=>{
|
|
343
354
|
e.preventDefault();
|
|
@@ -361,7 +372,9 @@ const LoginView = ({ providers = [
|
|
|
361
372
|
/*#__PURE__*/ jsxRuntime.jsx(ModalComponent, {
|
|
362
373
|
title: modalContent.title,
|
|
363
374
|
content: modalContent.content,
|
|
364
|
-
onClose: ()=>
|
|
375
|
+
onClose: ()=>{
|
|
376
|
+
setModalContent(null);
|
|
377
|
+
}
|
|
365
378
|
})
|
|
366
379
|
]
|
|
367
380
|
})
|
|
@@ -369,21 +382,19 @@ const LoginView = ({ providers = [
|
|
|
369
382
|
});
|
|
370
383
|
};
|
|
371
384
|
|
|
372
|
-
const LoginUIComplete = (
|
|
373
|
-
var { className, extLoading = false } = _param, loginProps = cc._object_without_properties_loose(_param, [
|
|
374
|
-
"className",
|
|
375
|
-
"extLoading"
|
|
376
|
-
]);
|
|
385
|
+
const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
|
|
377
386
|
const { loggedIn, isLoading } = useTaunt();
|
|
378
387
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
379
|
-
className: `rzd-loginview rzd-loginui-complete ${className
|
|
388
|
+
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
380
389
|
children: extLoading || isLoading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsxRuntime.jsx(LoggedInView, {}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
381
390
|
children: [
|
|
382
391
|
/*#__PURE__*/ jsxRuntime.jsx("h1", {
|
|
383
392
|
className: "header-login",
|
|
384
393
|
children: "login"
|
|
385
394
|
}),
|
|
386
|
-
/*#__PURE__*/ jsxRuntime.jsx(LoginView,
|
|
395
|
+
/*#__PURE__*/ jsxRuntime.jsx(LoginView, {
|
|
396
|
+
...loginProps
|
|
397
|
+
})
|
|
387
398
|
]
|
|
388
399
|
})
|
|
389
400
|
});
|
|
@@ -422,7 +433,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
422
433
|
if (e.key === "Escape") onClose();
|
|
423
434
|
};
|
|
424
435
|
document.addEventListener("keydown", handleEscape);
|
|
425
|
-
return ()=>
|
|
436
|
+
return ()=>{
|
|
437
|
+
document.removeEventListener("keydown", handleEscape);
|
|
438
|
+
};
|
|
426
439
|
}, [
|
|
427
440
|
onClose
|
|
428
441
|
]);
|
|
@@ -447,7 +460,7 @@ function ModalView({ title, content, onClose }) {
|
|
|
447
460
|
if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
|
|
448
461
|
// Check if next line starts with lowercase or is a paragraph
|
|
449
462
|
const nextLine = lines[index + 1].trim();
|
|
450
|
-
if (nextLine && (nextLine
|
|
463
|
+
if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
|
|
451
464
|
return /*#__PURE__*/ jsxRuntime.jsx("h3", {
|
|
452
465
|
style: {
|
|
453
466
|
marginTop: "24px",
|
|
@@ -499,7 +512,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
499
512
|
flexDirection: "column",
|
|
500
513
|
overflow: "hidden"
|
|
501
514
|
},
|
|
502
|
-
onClick: (e)=>
|
|
515
|
+
onClick: (e)=>{
|
|
516
|
+
e.stopPropagation();
|
|
517
|
+
},
|
|
503
518
|
children: [
|
|
504
519
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
505
520
|
style: {
|
|
@@ -553,84 +568,146 @@ function ModalView({ title, content, onClose }) {
|
|
|
553
568
|
}
|
|
554
569
|
|
|
555
570
|
const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
571
|
+
if (!tauntServiceEndpoint) {
|
|
572
|
+
throw new Error("TauntProvider: tauntServiceEndpoint is not provided");
|
|
573
|
+
}
|
|
574
|
+
console.log("🔧 Initializing TauntProvider with endpoint:", {
|
|
575
|
+
tauntServiceEndpoint,
|
|
576
|
+
magicKey
|
|
577
|
+
});
|
|
556
578
|
const [loginDetails, setLoginDetails] = react.useState();
|
|
579
|
+
const [tauntUser, setTauntUser] = react.useState();
|
|
557
580
|
const taunt = react.useMemo(()=>new tauntLogins.TauntApi(tauntServiceEndpoint), [
|
|
558
581
|
tauntServiceEndpoint
|
|
559
582
|
]);
|
|
560
583
|
const [isLoading, setIsLoading] = react.useState(false);
|
|
561
|
-
const loggedIn = !!
|
|
562
|
-
const
|
|
563
|
-
if (!
|
|
584
|
+
const loggedIn = !!tauntUser;
|
|
585
|
+
const getMe = react.useCallback(async (force = false)=>{
|
|
586
|
+
if (!force && !loggedIn) return undefined;
|
|
587
|
+
return taunt.getLoggedInUser();
|
|
588
|
+
}, [
|
|
589
|
+
loggedIn,
|
|
590
|
+
taunt
|
|
591
|
+
]);
|
|
592
|
+
const refreshUser = react.useCallback(async ()=>{
|
|
593
|
+
const me = await getMe(true);
|
|
594
|
+
setTauntUser(me);
|
|
595
|
+
return me;
|
|
596
|
+
}, [
|
|
597
|
+
getMe
|
|
598
|
+
]);
|
|
599
|
+
const loginWith = react.useCallback(async (fn)=>{
|
|
600
|
+
if (tauntUser) return Promise.resolve(tauntUser);
|
|
564
601
|
setIsLoading(true);
|
|
565
|
-
|
|
602
|
+
const resp = await fn({
|
|
603
|
+
taunt,
|
|
604
|
+
tauntServiceEndpoint,
|
|
605
|
+
magicKey: magicKey ?? ""
|
|
606
|
+
});
|
|
607
|
+
setLoginDetails(resp);
|
|
608
|
+
if (resp) {
|
|
609
|
+
await refreshUser();
|
|
610
|
+
}
|
|
611
|
+
setIsLoading(false);
|
|
612
|
+
return tauntUser;
|
|
566
613
|
}, [
|
|
614
|
+
tauntUser,
|
|
615
|
+
taunt,
|
|
567
616
|
tauntServiceEndpoint,
|
|
568
|
-
magicKey
|
|
617
|
+
magicKey,
|
|
618
|
+
refreshUser
|
|
569
619
|
]);
|
|
570
620
|
const metamaskLogin = react.useCallback(()=>{
|
|
571
|
-
|
|
572
|
-
tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
|
|
621
|
+
return loginWith(({ taunt, tauntServiceEndpoint })=>tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
|
|
573
622
|
}, [
|
|
574
|
-
|
|
623
|
+
loginWith
|
|
624
|
+
]);
|
|
625
|
+
const otpMagicLogin = react.useCallback((email)=>{
|
|
626
|
+
if (!magicKey) throw new Error("magicKey is required for OTP login");
|
|
627
|
+
if (!email) throw new Error("email is required for OTP login");
|
|
628
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntLogins.tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt));
|
|
629
|
+
}, [
|
|
630
|
+
loginWith,
|
|
631
|
+
magicKey
|
|
575
632
|
]);
|
|
576
633
|
const telegramLogin = react.useCallback(()=>{
|
|
577
634
|
if (!magicKey) throw new Error("magicKey is required for Telegram login");
|
|
578
|
-
|
|
579
|
-
tauntLogins.tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
|
|
635
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntLogins.tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
|
|
580
636
|
}, [
|
|
581
|
-
|
|
637
|
+
loginWith,
|
|
582
638
|
magicKey
|
|
583
639
|
]);
|
|
584
640
|
const metaLogin = react.useCallback(()=>{
|
|
585
641
|
setIsLoading(true);
|
|
586
642
|
console.log("Meta login not yet implemented");
|
|
587
643
|
// Placeholder for Meta login
|
|
588
|
-
setTimeout(()=>
|
|
644
|
+
setTimeout(()=>{
|
|
645
|
+
setIsLoading(false);
|
|
646
|
+
}, 1000);
|
|
647
|
+
return Promise.resolve(undefined);
|
|
589
648
|
}, []);
|
|
590
649
|
const coinbaseLogin = react.useCallback(()=>{
|
|
591
650
|
setIsLoading(true);
|
|
592
651
|
console.log("Coinbase login not yet implemented");
|
|
593
652
|
// Placeholder for Coinbase login
|
|
594
|
-
setTimeout(()=>
|
|
653
|
+
setTimeout(()=>{
|
|
654
|
+
setIsLoading(false);
|
|
655
|
+
}, 1000);
|
|
656
|
+
return Promise.resolve(undefined);
|
|
595
657
|
}, []);
|
|
596
|
-
const
|
|
597
|
-
|
|
598
|
-
|
|
658
|
+
const logout = react.useCallback(()=>{
|
|
659
|
+
void taunt.logout().then(()=>{
|
|
660
|
+
setTauntUser(undefined);
|
|
661
|
+
});
|
|
599
662
|
}, [
|
|
600
|
-
|
|
601
|
-
]);
|
|
602
|
-
const getMe = react.useCallback(()=>cc._async_to_generator(function*() {
|
|
603
|
-
if (!loggedIn) return undefined;
|
|
604
|
-
return taunt.getLoggedInUser();
|
|
605
|
-
})(), [
|
|
606
|
-
loggedIn
|
|
663
|
+
taunt
|
|
607
664
|
]);
|
|
608
|
-
const
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
})(), []);
|
|
623
|
-
const getClaimrData = react.useCallback(()=>cc._async_to_generator(function*() {
|
|
624
|
-
if (!loggedIn) return undefined;
|
|
625
|
-
return taunt.getClaimrData();
|
|
626
|
-
})(), [
|
|
627
|
-
loggedIn
|
|
665
|
+
const refreshToken = react.useCallback(async (token)=>{
|
|
666
|
+
if (!token) return;
|
|
667
|
+
setIsLoading(true);
|
|
668
|
+
try {
|
|
669
|
+
await taunt.refresh(token);
|
|
670
|
+
return await refreshUser();
|
|
671
|
+
} catch (error) {
|
|
672
|
+
console.error("Failed to refresh token:", error);
|
|
673
|
+
} finally{
|
|
674
|
+
setIsLoading(false);
|
|
675
|
+
}
|
|
676
|
+
}, [
|
|
677
|
+
refreshUser,
|
|
678
|
+
taunt
|
|
628
679
|
]);
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
|
|
680
|
+
const withTaunt = react.useCallback(async (fn)=>{
|
|
681
|
+
if (loggedIn) {
|
|
682
|
+
return fn(taunt);
|
|
683
|
+
}
|
|
684
|
+
}, [
|
|
685
|
+
loggedIn,
|
|
632
686
|
taunt
|
|
633
687
|
]);
|
|
688
|
+
const getClaimrSkulls = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrSkulls()), [
|
|
689
|
+
withTaunt
|
|
690
|
+
]);
|
|
691
|
+
const getClaimrToken = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrToken()), [
|
|
692
|
+
withTaunt
|
|
693
|
+
]);
|
|
694
|
+
const getClaimrReferralCode = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrReferralCode()), [
|
|
695
|
+
withTaunt
|
|
696
|
+
]);
|
|
697
|
+
const safeSetLoginDetails = react.useCallback((props)=>loginWith(async ({ taunt })=>{
|
|
698
|
+
await taunt.setLoginDetails(props);
|
|
699
|
+
return props;
|
|
700
|
+
}), [
|
|
701
|
+
loginWith
|
|
702
|
+
]);
|
|
703
|
+
react.useEffect(()=>{
|
|
704
|
+
if (!loggedIn) {
|
|
705
|
+
void refreshUser();
|
|
706
|
+
}
|
|
707
|
+
}, [
|
|
708
|
+
loggedIn,
|
|
709
|
+
refreshUser
|
|
710
|
+
]);
|
|
634
711
|
if (!tauntServiceEndpoint) {
|
|
635
712
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
636
713
|
children: "tauntServiceEndpoint is required"
|
|
@@ -641,12 +718,13 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
641
718
|
tauntServiceEndpoint,
|
|
642
719
|
loggedIn,
|
|
643
720
|
isLoading,
|
|
644
|
-
deets: loginDetails,
|
|
645
721
|
loginDetails,
|
|
722
|
+
tauntUser,
|
|
646
723
|
setLoginDetails: safeSetLoginDetails,
|
|
647
724
|
getMe,
|
|
648
|
-
getClaimrData,
|
|
649
725
|
getClaimrToken,
|
|
726
|
+
getClaimrSkulls,
|
|
727
|
+
getClaimrReferralCode,
|
|
650
728
|
otpMagicLogin,
|
|
651
729
|
metamaskLogin,
|
|
652
730
|
telegramLogin,
|
package/dist/cjs/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { TauntUser, TauntAccessDetails, ClaimrCampaignData } from '@redzone/taunt-logins';
|
|
4
4
|
|
|
5
5
|
interface CoinbaseButtonProps {
|
|
6
6
|
openCoinbase?: () => void;
|
|
@@ -10,9 +10,9 @@ declare const CoinbaseButton: ({ openCoinbase, disabled }: CoinbaseButtonProps)
|
|
|
10
10
|
|
|
11
11
|
declare function LoadingView(): react_jsx_runtime.JSX.Element;
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
interface MagicEmailProps {
|
|
14
14
|
onEmail?: (email: string) => void;
|
|
15
|
-
}
|
|
15
|
+
}
|
|
16
16
|
declare const MagicEmailInput: ({ onEmail }: MagicEmailProps) => react_jsx_runtime.JSX.Element;
|
|
17
17
|
|
|
18
18
|
interface MetaButtonProps {
|
|
@@ -83,30 +83,33 @@ interface ModalProps {
|
|
|
83
83
|
}
|
|
84
84
|
declare function ModalView({ title, content, onClose }: ModalProps): react_jsx_runtime.JSX.Element;
|
|
85
85
|
|
|
86
|
-
type
|
|
86
|
+
type MaybeUser = Promise<TauntUser | undefined>;
|
|
87
|
+
type MaybeString = Promise<string | undefined>;
|
|
88
|
+
interface ContextProps {
|
|
87
89
|
tauntServiceEndpoint: string;
|
|
88
90
|
loggedIn: boolean;
|
|
89
|
-
|
|
91
|
+
tauntUser?: TauntUser;
|
|
90
92
|
loginDetails?: TauntAccessDetails;
|
|
91
93
|
isLoading: boolean;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
getClaimrToken: () =>
|
|
101
|
-
|
|
94
|
+
metamaskLogin: () => MaybeUser;
|
|
95
|
+
otpMagicLogin: (email: string) => MaybeUser;
|
|
96
|
+
telegramLogin: () => MaybeUser;
|
|
97
|
+
metaLogin: () => MaybeUser;
|
|
98
|
+
coinbaseLogin: () => MaybeUser;
|
|
99
|
+
getMe: () => MaybeUser;
|
|
100
|
+
setLoginDetails: (props: TauntAccessDetails) => MaybeUser;
|
|
101
|
+
refreshToken: (token: string) => MaybeUser;
|
|
102
|
+
getClaimrToken: () => MaybeString;
|
|
103
|
+
getClaimrSkulls: () => Promise<ClaimrCampaignData | undefined>;
|
|
104
|
+
getClaimrReferralCode: () => MaybeString;
|
|
102
105
|
logout: () => void;
|
|
103
|
-
}
|
|
106
|
+
}
|
|
104
107
|
declare const TauntContext: react.Context<ContextProps>;
|
|
105
108
|
declare function useTaunt(): ContextProps;
|
|
106
109
|
|
|
107
110
|
declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
|
|
108
111
|
children: React.ReactNode;
|
|
109
|
-
tauntServiceEndpoint
|
|
112
|
+
tauntServiceEndpoint: string;
|
|
110
113
|
magicKey?: string;
|
|
111
114
|
}) => react_jsx_runtime.JSX.Element;
|
|
112
115
|
|
package/dist/es/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { TauntUser, TauntAccessDetails, ClaimrCampaignData } from '@redzone/taunt-logins';
|
|
4
4
|
|
|
5
5
|
interface CoinbaseButtonProps {
|
|
6
6
|
openCoinbase?: () => void;
|
|
@@ -10,9 +10,9 @@ declare const CoinbaseButton: ({ openCoinbase, disabled }: CoinbaseButtonProps)
|
|
|
10
10
|
|
|
11
11
|
declare function LoadingView(): react_jsx_runtime.JSX.Element;
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
interface MagicEmailProps {
|
|
14
14
|
onEmail?: (email: string) => void;
|
|
15
|
-
}
|
|
15
|
+
}
|
|
16
16
|
declare const MagicEmailInput: ({ onEmail }: MagicEmailProps) => react_jsx_runtime.JSX.Element;
|
|
17
17
|
|
|
18
18
|
interface MetaButtonProps {
|
|
@@ -83,30 +83,33 @@ interface ModalProps {
|
|
|
83
83
|
}
|
|
84
84
|
declare function ModalView({ title, content, onClose }: ModalProps): react_jsx_runtime.JSX.Element;
|
|
85
85
|
|
|
86
|
-
type
|
|
86
|
+
type MaybeUser = Promise<TauntUser | undefined>;
|
|
87
|
+
type MaybeString = Promise<string | undefined>;
|
|
88
|
+
interface ContextProps {
|
|
87
89
|
tauntServiceEndpoint: string;
|
|
88
90
|
loggedIn: boolean;
|
|
89
|
-
|
|
91
|
+
tauntUser?: TauntUser;
|
|
90
92
|
loginDetails?: TauntAccessDetails;
|
|
91
93
|
isLoading: boolean;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
getClaimrToken: () =>
|
|
101
|
-
|
|
94
|
+
metamaskLogin: () => MaybeUser;
|
|
95
|
+
otpMagicLogin: (email: string) => MaybeUser;
|
|
96
|
+
telegramLogin: () => MaybeUser;
|
|
97
|
+
metaLogin: () => MaybeUser;
|
|
98
|
+
coinbaseLogin: () => MaybeUser;
|
|
99
|
+
getMe: () => MaybeUser;
|
|
100
|
+
setLoginDetails: (props: TauntAccessDetails) => MaybeUser;
|
|
101
|
+
refreshToken: (token: string) => MaybeUser;
|
|
102
|
+
getClaimrToken: () => MaybeString;
|
|
103
|
+
getClaimrSkulls: () => Promise<ClaimrCampaignData | undefined>;
|
|
104
|
+
getClaimrReferralCode: () => MaybeString;
|
|
102
105
|
logout: () => void;
|
|
103
|
-
}
|
|
106
|
+
}
|
|
104
107
|
declare const TauntContext: react.Context<ContextProps>;
|
|
105
108
|
declare function useTaunt(): ContextProps;
|
|
106
109
|
|
|
107
110
|
declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
|
|
108
111
|
children: React.ReactNode;
|
|
109
|
-
tauntServiceEndpoint
|
|
112
|
+
tauntServiceEndpoint: string;
|
|
110
113
|
magicKey?: string;
|
|
111
114
|
}) => react_jsx_runtime.JSX.Element;
|
|
112
115
|
|
package/dist/es/index.js
CHANGED
|
@@ -9,8 +9,7 @@ function __insertCSS(code) {
|
|
|
9
9
|
|
|
10
10
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
11
|
import { useCallback, createContext, useContext, useState, useMemo, useEffect } from 'react';
|
|
12
|
-
import {
|
|
13
|
-
import { TauntApi, tauntMagicEmailOTPLogin, tauntMetamaskLogin, tauntMagicTelegramLogin } from '@redzone/taunt-logins';
|
|
12
|
+
import { TauntApi, tauntMetamaskLogin, tauntMagicEmailOTPLogin, tauntMagicTelegramLogin } from '@redzone/taunt-logins';
|
|
14
13
|
|
|
15
14
|
__insertCSS(".rzd-loginui-complete{background:radial-gradient(50% 50% at 50% 50%,#132c50 0,#0b101b 100%);border-radius:37px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:40px;max-width:620px;min-height:455px;min-width:500px}.rzd-loginview{box-sizing:border-box;color:#fff;font-size:36px;font-weight:700;color:#fff;text-transform:uppercase;margin:20px 0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.card{padding:2em}.read-the-docs{color:#888}input.rdz-input{box-sizing:border-box;position:relative;width:100%;max-width:480px;height:58px;border:2px solid #009df3;box-shadow:0 0 16.9px 1px #0e79f3;border-radius:11px}input.rdz-input::placeholder{color:#fff;opacity:1;font-family:\"Futura PT\",sans-serif;font-size:1em}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.rdz-magic-email-error{color:red}.rdz-sign-up-text{font-family:\"Futura PT\",sans-serif;font-size:1.2em;font-weight:400}.rdz-icon-button{width:55px;height:55px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.1);filter:brightness(1.1)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-magic-email-button{background-size:100% 100%;background-position:center;background-repeat:no-repeat;font-family:DRUNKWIDE,sans-serif;border:none;color:#fff;padding:16px 32px;cursor:pointer;min-height:135px;margin-bottom:-20px;width:100%;max-width:410px;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background-color:transparent;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-logout-button{margin-left:8px;padding:12px 24px;background-color:#3b82f6;color:#fff;border-radius:6px;border:none;cursor:pointer;font-family:\"Futura PT\",sans-serif;font-size:16px;font-weight:500;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}");
|
|
16
15
|
|
|
@@ -81,24 +80,28 @@ function LoadingView() {
|
|
|
81
80
|
});
|
|
82
81
|
}
|
|
83
82
|
|
|
83
|
+
const DefinitelyUndefined = ()=>Promise.resolve(undefined);
|
|
84
84
|
const TauntContext = createContext({
|
|
85
85
|
tauntServiceEndpoint: "",
|
|
86
86
|
isLoading: false,
|
|
87
87
|
loggedIn: false,
|
|
88
|
-
setLoginDetails:
|
|
89
|
-
getMe:
|
|
90
|
-
metamaskLogin:
|
|
91
|
-
otpMagicLogin:
|
|
92
|
-
telegramLogin:
|
|
93
|
-
metaLogin:
|
|
94
|
-
coinbaseLogin:
|
|
95
|
-
refreshToken:
|
|
96
|
-
getClaimrToken:
|
|
97
|
-
|
|
98
|
-
|
|
88
|
+
setLoginDetails: DefinitelyUndefined,
|
|
89
|
+
getMe: DefinitelyUndefined,
|
|
90
|
+
metamaskLogin: DefinitelyUndefined,
|
|
91
|
+
otpMagicLogin: DefinitelyUndefined,
|
|
92
|
+
telegramLogin: DefinitelyUndefined,
|
|
93
|
+
metaLogin: DefinitelyUndefined,
|
|
94
|
+
coinbaseLogin: DefinitelyUndefined,
|
|
95
|
+
refreshToken: DefinitelyUndefined,
|
|
96
|
+
getClaimrToken: DefinitelyUndefined,
|
|
97
|
+
getClaimrSkulls: DefinitelyUndefined,
|
|
98
|
+
getClaimrReferralCode: DefinitelyUndefined,
|
|
99
|
+
logout: ()=>{
|
|
100
|
+
/* empty */ }
|
|
99
101
|
});
|
|
100
102
|
function useTaunt() {
|
|
101
103
|
const ctx = useContext(TauntContext);
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
102
105
|
if (!ctx) {
|
|
103
106
|
throw new Error("useTaunt must be used within a TauntProvider");
|
|
104
107
|
}
|
|
@@ -112,12 +115,12 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
112
115
|
const [showError, setShowError] = useState(false);
|
|
113
116
|
const validEmail = useMemo(()=>{
|
|
114
117
|
const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
|
|
115
|
-
return
|
|
118
|
+
return email?.match(validRegex) ? email : undefined;
|
|
116
119
|
}, [
|
|
117
120
|
email
|
|
118
121
|
]);
|
|
119
122
|
const runMagic = ()=>{
|
|
120
|
-
if (!validEmail) {
|
|
123
|
+
if (!email || !validEmail) {
|
|
121
124
|
setShowError(true);
|
|
122
125
|
return;
|
|
123
126
|
}
|
|
@@ -137,7 +140,9 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
137
140
|
}),
|
|
138
141
|
/*#__PURE__*/ jsx("input", {
|
|
139
142
|
className: "rdz-input",
|
|
140
|
-
onChange: (e)=>
|
|
143
|
+
onChange: (e)=>{
|
|
144
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
145
|
+
},
|
|
141
146
|
placeholder: "Email address",
|
|
142
147
|
type: "email",
|
|
143
148
|
value: email
|
|
@@ -281,7 +286,9 @@ const LoginView = ({ providers = [
|
|
|
281
286
|
};
|
|
282
287
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
283
288
|
children: [
|
|
284
|
-
showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput,
|
|
289
|
+
showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput, {
|
|
290
|
+
...magicEmailProps
|
|
291
|
+
}),
|
|
285
292
|
showEmailInput && hasSocialProviders && /*#__PURE__*/ jsx("p", {
|
|
286
293
|
className: "rdz-sign-up-text",
|
|
287
294
|
children: dividerText
|
|
@@ -294,18 +301,22 @@ const LoginView = ({ providers = [
|
|
|
294
301
|
alignItems: "center"
|
|
295
302
|
},
|
|
296
303
|
children: [
|
|
297
|
-
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsx(CoinbaseButton,
|
|
298
|
-
disabled: !providers.includes("coinbase")
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
},
|
|
304
|
+
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsx(CoinbaseButton, {
|
|
305
|
+
disabled: !providers.includes("coinbase"),
|
|
306
|
+
...coinbaseProps
|
|
307
|
+
}),
|
|
308
|
+
socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsx(MetaMaskButton, {
|
|
309
|
+
disabled: !providers.includes("metamask"),
|
|
310
|
+
...metamaskProps
|
|
311
|
+
}),
|
|
312
|
+
socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsx(MetaButton, {
|
|
313
|
+
disabled: !providers.includes("meta"),
|
|
314
|
+
...metaProps
|
|
315
|
+
}),
|
|
316
|
+
socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsx(TelegramButton, {
|
|
317
|
+
disabled: !providers.includes("telegram"),
|
|
318
|
+
...telegramProps
|
|
319
|
+
})
|
|
309
320
|
]
|
|
310
321
|
}),
|
|
311
322
|
console.log("Terms render check:", {
|
|
@@ -315,7 +326,7 @@ const LoginView = ({ providers = [
|
|
|
315
326
|
hasTermsClick: !!onTermsClick,
|
|
316
327
|
hasPrivacyClick: !!onPrivacyClick
|
|
317
328
|
}),
|
|
318
|
-
showTerms && (termsContent
|
|
329
|
+
showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxs("p", {
|
|
319
330
|
style: {
|
|
320
331
|
fontFamily: "Futura PT, sans-serif",
|
|
321
332
|
fontSize: "1.3em"
|
|
@@ -323,7 +334,7 @@ const LoginView = ({ providers = [
|
|
|
323
334
|
children: [
|
|
324
335
|
"By connecting you are agreeing to our",
|
|
325
336
|
" ",
|
|
326
|
-
(termsContent
|
|
337
|
+
(termsContent ?? onTermsClick) && /*#__PURE__*/ jsx("a", {
|
|
327
338
|
href: "#",
|
|
328
339
|
onClick: (e)=>{
|
|
329
340
|
e.preventDefault();
|
|
@@ -336,8 +347,8 @@ const LoginView = ({ providers = [
|
|
|
336
347
|
},
|
|
337
348
|
children: "Terms of Service"
|
|
338
349
|
}),
|
|
339
|
-
(termsContent
|
|
340
|
-
(privacyContent
|
|
350
|
+
(termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
|
|
351
|
+
(privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsx("a", {
|
|
341
352
|
href: "#",
|
|
342
353
|
onClick: (e)=>{
|
|
343
354
|
e.preventDefault();
|
|
@@ -361,7 +372,9 @@ const LoginView = ({ providers = [
|
|
|
361
372
|
/*#__PURE__*/ jsx(ModalComponent, {
|
|
362
373
|
title: modalContent.title,
|
|
363
374
|
content: modalContent.content,
|
|
364
|
-
onClose: ()=>
|
|
375
|
+
onClose: ()=>{
|
|
376
|
+
setModalContent(null);
|
|
377
|
+
}
|
|
365
378
|
})
|
|
366
379
|
]
|
|
367
380
|
})
|
|
@@ -369,21 +382,19 @@ const LoginView = ({ providers = [
|
|
|
369
382
|
});
|
|
370
383
|
};
|
|
371
384
|
|
|
372
|
-
const LoginUIComplete = (
|
|
373
|
-
var { className, extLoading = false } = _param, loginProps = _object_without_properties_loose(_param, [
|
|
374
|
-
"className",
|
|
375
|
-
"extLoading"
|
|
376
|
-
]);
|
|
385
|
+
const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
|
|
377
386
|
const { loggedIn, isLoading } = useTaunt();
|
|
378
387
|
return /*#__PURE__*/ jsx("div", {
|
|
379
|
-
className: `rzd-loginview rzd-loginui-complete ${className
|
|
388
|
+
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
380
389
|
children: extLoading || isLoading ? /*#__PURE__*/ jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsx(LoggedInView, {}) : /*#__PURE__*/ jsxs(Fragment, {
|
|
381
390
|
children: [
|
|
382
391
|
/*#__PURE__*/ jsx("h1", {
|
|
383
392
|
className: "header-login",
|
|
384
393
|
children: "login"
|
|
385
394
|
}),
|
|
386
|
-
/*#__PURE__*/ jsx(LoginView,
|
|
395
|
+
/*#__PURE__*/ jsx(LoginView, {
|
|
396
|
+
...loginProps
|
|
397
|
+
})
|
|
387
398
|
]
|
|
388
399
|
})
|
|
389
400
|
});
|
|
@@ -422,7 +433,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
422
433
|
if (e.key === "Escape") onClose();
|
|
423
434
|
};
|
|
424
435
|
document.addEventListener("keydown", handleEscape);
|
|
425
|
-
return ()=>
|
|
436
|
+
return ()=>{
|
|
437
|
+
document.removeEventListener("keydown", handleEscape);
|
|
438
|
+
};
|
|
426
439
|
}, [
|
|
427
440
|
onClose
|
|
428
441
|
]);
|
|
@@ -447,7 +460,7 @@ function ModalView({ title, content, onClose }) {
|
|
|
447
460
|
if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
|
|
448
461
|
// Check if next line starts with lowercase or is a paragraph
|
|
449
462
|
const nextLine = lines[index + 1].trim();
|
|
450
|
-
if (nextLine && (nextLine
|
|
463
|
+
if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
|
|
451
464
|
return /*#__PURE__*/ jsx("h3", {
|
|
452
465
|
style: {
|
|
453
466
|
marginTop: "24px",
|
|
@@ -499,7 +512,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
499
512
|
flexDirection: "column",
|
|
500
513
|
overflow: "hidden"
|
|
501
514
|
},
|
|
502
|
-
onClick: (e)=>
|
|
515
|
+
onClick: (e)=>{
|
|
516
|
+
e.stopPropagation();
|
|
517
|
+
},
|
|
503
518
|
children: [
|
|
504
519
|
/*#__PURE__*/ jsxs("div", {
|
|
505
520
|
style: {
|
|
@@ -553,84 +568,146 @@ function ModalView({ title, content, onClose }) {
|
|
|
553
568
|
}
|
|
554
569
|
|
|
555
570
|
const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
571
|
+
if (!tauntServiceEndpoint) {
|
|
572
|
+
throw new Error("TauntProvider: tauntServiceEndpoint is not provided");
|
|
573
|
+
}
|
|
574
|
+
console.log("🔧 Initializing TauntProvider with endpoint:", {
|
|
575
|
+
tauntServiceEndpoint,
|
|
576
|
+
magicKey
|
|
577
|
+
});
|
|
556
578
|
const [loginDetails, setLoginDetails] = useState();
|
|
579
|
+
const [tauntUser, setTauntUser] = useState();
|
|
557
580
|
const taunt = useMemo(()=>new TauntApi(tauntServiceEndpoint), [
|
|
558
581
|
tauntServiceEndpoint
|
|
559
582
|
]);
|
|
560
583
|
const [isLoading, setIsLoading] = useState(false);
|
|
561
|
-
const loggedIn = !!
|
|
562
|
-
const
|
|
563
|
-
if (!
|
|
584
|
+
const loggedIn = !!tauntUser;
|
|
585
|
+
const getMe = useCallback(async (force = false)=>{
|
|
586
|
+
if (!force && !loggedIn) return undefined;
|
|
587
|
+
return taunt.getLoggedInUser();
|
|
588
|
+
}, [
|
|
589
|
+
loggedIn,
|
|
590
|
+
taunt
|
|
591
|
+
]);
|
|
592
|
+
const refreshUser = useCallback(async ()=>{
|
|
593
|
+
const me = await getMe(true);
|
|
594
|
+
setTauntUser(me);
|
|
595
|
+
return me;
|
|
596
|
+
}, [
|
|
597
|
+
getMe
|
|
598
|
+
]);
|
|
599
|
+
const loginWith = useCallback(async (fn)=>{
|
|
600
|
+
if (tauntUser) return Promise.resolve(tauntUser);
|
|
564
601
|
setIsLoading(true);
|
|
565
|
-
|
|
602
|
+
const resp = await fn({
|
|
603
|
+
taunt,
|
|
604
|
+
tauntServiceEndpoint,
|
|
605
|
+
magicKey: magicKey ?? ""
|
|
606
|
+
});
|
|
607
|
+
setLoginDetails(resp);
|
|
608
|
+
if (resp) {
|
|
609
|
+
await refreshUser();
|
|
610
|
+
}
|
|
611
|
+
setIsLoading(false);
|
|
612
|
+
return tauntUser;
|
|
566
613
|
}, [
|
|
614
|
+
tauntUser,
|
|
615
|
+
taunt,
|
|
567
616
|
tauntServiceEndpoint,
|
|
568
|
-
magicKey
|
|
617
|
+
magicKey,
|
|
618
|
+
refreshUser
|
|
569
619
|
]);
|
|
570
620
|
const metamaskLogin = useCallback(()=>{
|
|
571
|
-
|
|
572
|
-
tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
|
|
621
|
+
return loginWith(({ taunt, tauntServiceEndpoint })=>tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
|
|
573
622
|
}, [
|
|
574
|
-
|
|
623
|
+
loginWith
|
|
624
|
+
]);
|
|
625
|
+
const otpMagicLogin = useCallback((email)=>{
|
|
626
|
+
if (!magicKey) throw new Error("magicKey is required for OTP login");
|
|
627
|
+
if (!email) throw new Error("email is required for OTP login");
|
|
628
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt));
|
|
629
|
+
}, [
|
|
630
|
+
loginWith,
|
|
631
|
+
magicKey
|
|
575
632
|
]);
|
|
576
633
|
const telegramLogin = useCallback(()=>{
|
|
577
634
|
if (!magicKey) throw new Error("magicKey is required for Telegram login");
|
|
578
|
-
|
|
579
|
-
tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
|
|
635
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
|
|
580
636
|
}, [
|
|
581
|
-
|
|
637
|
+
loginWith,
|
|
582
638
|
magicKey
|
|
583
639
|
]);
|
|
584
640
|
const metaLogin = useCallback(()=>{
|
|
585
641
|
setIsLoading(true);
|
|
586
642
|
console.log("Meta login not yet implemented");
|
|
587
643
|
// Placeholder for Meta login
|
|
588
|
-
setTimeout(()=>
|
|
644
|
+
setTimeout(()=>{
|
|
645
|
+
setIsLoading(false);
|
|
646
|
+
}, 1000);
|
|
647
|
+
return Promise.resolve(undefined);
|
|
589
648
|
}, []);
|
|
590
649
|
const coinbaseLogin = useCallback(()=>{
|
|
591
650
|
setIsLoading(true);
|
|
592
651
|
console.log("Coinbase login not yet implemented");
|
|
593
652
|
// Placeholder for Coinbase login
|
|
594
|
-
setTimeout(()=>
|
|
653
|
+
setTimeout(()=>{
|
|
654
|
+
setIsLoading(false);
|
|
655
|
+
}, 1000);
|
|
656
|
+
return Promise.resolve(undefined);
|
|
595
657
|
}, []);
|
|
596
|
-
const
|
|
597
|
-
|
|
598
|
-
|
|
658
|
+
const logout = useCallback(()=>{
|
|
659
|
+
void taunt.logout().then(()=>{
|
|
660
|
+
setTauntUser(undefined);
|
|
661
|
+
});
|
|
599
662
|
}, [
|
|
600
|
-
|
|
601
|
-
]);
|
|
602
|
-
const getMe = useCallback(()=>_async_to_generator(function*() {
|
|
603
|
-
if (!loggedIn) return undefined;
|
|
604
|
-
return taunt.getLoggedInUser();
|
|
605
|
-
})(), [
|
|
606
|
-
loggedIn
|
|
663
|
+
taunt
|
|
607
664
|
]);
|
|
608
|
-
const
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
})(), []);
|
|
623
|
-
const getClaimrData = useCallback(()=>_async_to_generator(function*() {
|
|
624
|
-
if (!loggedIn) return undefined;
|
|
625
|
-
return taunt.getClaimrData();
|
|
626
|
-
})(), [
|
|
627
|
-
loggedIn
|
|
665
|
+
const refreshToken = useCallback(async (token)=>{
|
|
666
|
+
if (!token) return;
|
|
667
|
+
setIsLoading(true);
|
|
668
|
+
try {
|
|
669
|
+
await taunt.refresh(token);
|
|
670
|
+
return await refreshUser();
|
|
671
|
+
} catch (error) {
|
|
672
|
+
console.error("Failed to refresh token:", error);
|
|
673
|
+
} finally{
|
|
674
|
+
setIsLoading(false);
|
|
675
|
+
}
|
|
676
|
+
}, [
|
|
677
|
+
refreshUser,
|
|
678
|
+
taunt
|
|
628
679
|
]);
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
|
|
680
|
+
const withTaunt = useCallback(async (fn)=>{
|
|
681
|
+
if (loggedIn) {
|
|
682
|
+
return fn(taunt);
|
|
683
|
+
}
|
|
684
|
+
}, [
|
|
685
|
+
loggedIn,
|
|
632
686
|
taunt
|
|
633
687
|
]);
|
|
688
|
+
const getClaimrSkulls = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrSkulls()), [
|
|
689
|
+
withTaunt
|
|
690
|
+
]);
|
|
691
|
+
const getClaimrToken = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrToken()), [
|
|
692
|
+
withTaunt
|
|
693
|
+
]);
|
|
694
|
+
const getClaimrReferralCode = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrReferralCode()), [
|
|
695
|
+
withTaunt
|
|
696
|
+
]);
|
|
697
|
+
const safeSetLoginDetails = useCallback((props)=>loginWith(async ({ taunt })=>{
|
|
698
|
+
await taunt.setLoginDetails(props);
|
|
699
|
+
return props;
|
|
700
|
+
}), [
|
|
701
|
+
loginWith
|
|
702
|
+
]);
|
|
703
|
+
useEffect(()=>{
|
|
704
|
+
if (!loggedIn) {
|
|
705
|
+
void refreshUser();
|
|
706
|
+
}
|
|
707
|
+
}, [
|
|
708
|
+
loggedIn,
|
|
709
|
+
refreshUser
|
|
710
|
+
]);
|
|
634
711
|
if (!tauntServiceEndpoint) {
|
|
635
712
|
return /*#__PURE__*/ jsx("div", {
|
|
636
713
|
children: "tauntServiceEndpoint is required"
|
|
@@ -641,12 +718,13 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
641
718
|
tauntServiceEndpoint,
|
|
642
719
|
loggedIn,
|
|
643
720
|
isLoading,
|
|
644
|
-
deets: loginDetails,
|
|
645
721
|
loginDetails,
|
|
722
|
+
tauntUser,
|
|
646
723
|
setLoginDetails: safeSetLoginDetails,
|
|
647
724
|
getMe,
|
|
648
|
-
getClaimrData,
|
|
649
725
|
getClaimrToken,
|
|
726
|
+
getClaimrSkulls,
|
|
727
|
+
getClaimrReferralCode,
|
|
650
728
|
otpMagicLogin,
|
|
651
729
|
metamaskLogin,
|
|
652
730
|
telegramLogin,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redzone/taunt-logins-ui-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/es/index.js",
|
|
6
6
|
"module": "./dist/es/index.js",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "bunchee",
|
|
26
26
|
"dev": "bunchee --watch",
|
|
27
|
+
"vite:dev": "vite",
|
|
27
28
|
"copy:styles": "cp src/lib/styling.css dist/styling.css",
|
|
28
29
|
"pack": "npm pack",
|
|
29
30
|
"postbuild": "npm run copy:styles",
|
|
@@ -32,7 +33,8 @@
|
|
|
32
33
|
"prenpm:publish": "npm run build",
|
|
33
34
|
"npm:publish": "npm publish --access public",
|
|
34
35
|
"fb:login": "firebase login --reauth",
|
|
35
|
-
"fb:deploy": "firebase deploy --only hosting:dev"
|
|
36
|
+
"fb:deploy": "firebase deploy --only hosting:dev",
|
|
37
|
+
"eslint:inspect": "eslint --inspect-config"
|
|
36
38
|
},
|
|
37
39
|
"peerDependencies": {
|
|
38
40
|
"react": "*"
|
|
@@ -41,23 +43,26 @@
|
|
|
41
43
|
"@redzone/taunt-logins": "*"
|
|
42
44
|
},
|
|
43
45
|
"devDependencies": {
|
|
44
|
-
"@repo/eslint-config": "*",
|
|
45
|
-
"@repo/typescript-config": "*",
|
|
46
46
|
"@eslint/js": "^9.36.0",
|
|
47
47
|
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
|
|
48
|
+
"@repo/eslint-config": "*",
|
|
49
|
+
"@repo/typescript-config": "*",
|
|
48
50
|
"@types/chrome": "^0.1.21",
|
|
49
51
|
"@types/node": "^24.6.0",
|
|
50
52
|
"@types/react": "*",
|
|
53
|
+
"@vitejs/plugin-react-swc": "^4.2.0",
|
|
51
54
|
"bunchee": "latest",
|
|
52
|
-
"
|
|
55
|
+
"chrome-types": "^0.1.387",
|
|
53
56
|
"eslint": "latest",
|
|
54
|
-
"prettier": "latest",
|
|
55
|
-
"prettier-config-custom": "*",
|
|
56
57
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
57
58
|
"eslint-plugin-react-refresh": "^0.4.22",
|
|
58
59
|
"globals": "^16.4.0",
|
|
60
|
+
"prettier": "latest",
|
|
61
|
+
"prettier-config-custom": "*",
|
|
62
|
+
"react": "latest",
|
|
59
63
|
"typescript": "~5.9.3",
|
|
60
|
-
"typescript-eslint": "^8.45.0"
|
|
64
|
+
"typescript-eslint": "^8.45.0",
|
|
65
|
+
"vite": "^7.2.1"
|
|
61
66
|
},
|
|
62
67
|
"files": [
|
|
63
68
|
"dist"
|
package/dist/cjs/cc-D-353NYd.cjs
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
function __insertCSS(code) {
|
|
2
|
-
if (!code || typeof document == 'undefined') return
|
|
3
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
-
let style = document.createElement('style')
|
|
5
|
-
style.type = 'text/css'
|
|
6
|
-
head.appendChild(style)
|
|
7
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function _extends() {
|
|
11
|
-
_extends = Object.assign || function assign(target) {
|
|
12
|
-
for(var i = 1; i < arguments.length; i++){
|
|
13
|
-
var source = arguments[i];
|
|
14
|
-
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
-
}
|
|
16
|
-
return target;
|
|
17
|
-
};
|
|
18
|
-
return _extends.apply(this, arguments);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function _object_without_properties_loose(source, excluded) {
|
|
22
|
-
if (source == null) return {};
|
|
23
|
-
var target = {};
|
|
24
|
-
var sourceKeys = Object.keys(source);
|
|
25
|
-
var key, i;
|
|
26
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
27
|
-
key = sourceKeys[i];
|
|
28
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
29
|
-
target[key] = source[key];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
35
|
-
try {
|
|
36
|
-
var info = gen[key](arg);
|
|
37
|
-
var value = info.value;
|
|
38
|
-
} catch (error) {
|
|
39
|
-
reject(error);
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
if (info.done) resolve(value);
|
|
43
|
-
else Promise.resolve(value).then(_next, _throw);
|
|
44
|
-
}
|
|
45
|
-
function _async_to_generator(fn) {
|
|
46
|
-
return function() {
|
|
47
|
-
var self = this, args = arguments;
|
|
48
|
-
return new Promise(function(resolve, reject) {
|
|
49
|
-
var gen = fn.apply(self, args);
|
|
50
|
-
function _next(value) {
|
|
51
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
52
|
-
}
|
|
53
|
-
function _throw(err) {
|
|
54
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
55
|
-
}
|
|
56
|
-
_next(undefined);
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
exports._async_to_generator = _async_to_generator;
|
|
62
|
-
exports._extends = _extends;
|
|
63
|
-
exports._object_without_properties_loose = _object_without_properties_loose;
|
package/dist/es/cc-D6TRVNtd.js
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
function __insertCSS(code) {
|
|
2
|
-
if (!code || typeof document == 'undefined') return
|
|
3
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
-
let style = document.createElement('style')
|
|
5
|
-
style.type = 'text/css'
|
|
6
|
-
head.appendChild(style)
|
|
7
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function _extends() {
|
|
11
|
-
_extends = Object.assign || function assign(target) {
|
|
12
|
-
for(var i = 1; i < arguments.length; i++){
|
|
13
|
-
var source = arguments[i];
|
|
14
|
-
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
-
}
|
|
16
|
-
return target;
|
|
17
|
-
};
|
|
18
|
-
return _extends.apply(this, arguments);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function _object_without_properties_loose(source, excluded) {
|
|
22
|
-
if (source == null) return {};
|
|
23
|
-
var target = {};
|
|
24
|
-
var sourceKeys = Object.keys(source);
|
|
25
|
-
var key, i;
|
|
26
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
27
|
-
key = sourceKeys[i];
|
|
28
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
29
|
-
target[key] = source[key];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
35
|
-
try {
|
|
36
|
-
var info = gen[key](arg);
|
|
37
|
-
var value = info.value;
|
|
38
|
-
} catch (error) {
|
|
39
|
-
reject(error);
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
if (info.done) resolve(value);
|
|
43
|
-
else Promise.resolve(value).then(_next, _throw);
|
|
44
|
-
}
|
|
45
|
-
function _async_to_generator(fn) {
|
|
46
|
-
return function() {
|
|
47
|
-
var self = this, args = arguments;
|
|
48
|
-
return new Promise(function(resolve, reject) {
|
|
49
|
-
var gen = fn.apply(self, args);
|
|
50
|
-
function _next(value) {
|
|
51
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
52
|
-
}
|
|
53
|
-
function _throw(err) {
|
|
54
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
55
|
-
}
|
|
56
|
-
_next(undefined);
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export { _async_to_generator as _, _extends as a, _object_without_properties_loose as b };
|