@redzone/taunt-logins-ui-react 0.0.18 → 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 +173 -87
- package/dist/cjs/index.d.cts +21 -19
- package/dist/es/index.d.ts +21 -19
- package/dist/es/index.js +174 -88
- 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,23 +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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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 */ }
|
|
98
101
|
});
|
|
99
102
|
function useTaunt() {
|
|
100
103
|
const ctx = react.useContext(TauntContext);
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
101
105
|
if (!ctx) {
|
|
102
106
|
throw new Error("useTaunt must be used within a TauntProvider");
|
|
103
107
|
}
|
|
@@ -111,12 +115,12 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
111
115
|
const [showError, setShowError] = react.useState(false);
|
|
112
116
|
const validEmail = react.useMemo(()=>{
|
|
113
117
|
const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
|
|
114
|
-
return
|
|
118
|
+
return email?.match(validRegex) ? email : undefined;
|
|
115
119
|
}, [
|
|
116
120
|
email
|
|
117
121
|
]);
|
|
118
122
|
const runMagic = ()=>{
|
|
119
|
-
if (!validEmail) {
|
|
123
|
+
if (!email || !validEmail) {
|
|
120
124
|
setShowError(true);
|
|
121
125
|
return;
|
|
122
126
|
}
|
|
@@ -136,7 +140,9 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
136
140
|
}),
|
|
137
141
|
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
138
142
|
className: "rdz-input",
|
|
139
|
-
onChange: (e)=>
|
|
143
|
+
onChange: (e)=>{
|
|
144
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
145
|
+
},
|
|
140
146
|
placeholder: "Email address",
|
|
141
147
|
type: "email",
|
|
142
148
|
value: email
|
|
@@ -280,7 +286,9 @@ const LoginView = ({ providers = [
|
|
|
280
286
|
};
|
|
281
287
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
282
288
|
children: [
|
|
283
|
-
showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput,
|
|
289
|
+
showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput, {
|
|
290
|
+
...magicEmailProps
|
|
291
|
+
}),
|
|
284
292
|
showEmailInput && hasSocialProviders && /*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
285
293
|
className: "rdz-sign-up-text",
|
|
286
294
|
children: dividerText
|
|
@@ -293,18 +301,22 @@ const LoginView = ({ providers = [
|
|
|
293
301
|
alignItems: "center"
|
|
294
302
|
},
|
|
295
303
|
children: [
|
|
296
|
-
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsxRuntime.jsx(CoinbaseButton,
|
|
297
|
-
disabled: !providers.includes("coinbase")
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
},
|
|
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
|
+
})
|
|
308
320
|
]
|
|
309
321
|
}),
|
|
310
322
|
console.log("Terms render check:", {
|
|
@@ -314,7 +326,7 @@ const LoginView = ({ providers = [
|
|
|
314
326
|
hasTermsClick: !!onTermsClick,
|
|
315
327
|
hasPrivacyClick: !!onPrivacyClick
|
|
316
328
|
}),
|
|
317
|
-
showTerms && (termsContent
|
|
329
|
+
showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsxs("p", {
|
|
318
330
|
style: {
|
|
319
331
|
fontFamily: "Futura PT, sans-serif",
|
|
320
332
|
fontSize: "1.3em"
|
|
@@ -322,7 +334,7 @@ const LoginView = ({ providers = [
|
|
|
322
334
|
children: [
|
|
323
335
|
"By connecting you are agreeing to our",
|
|
324
336
|
" ",
|
|
325
|
-
(termsContent
|
|
337
|
+
(termsContent ?? onTermsClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
|
|
326
338
|
href: "#",
|
|
327
339
|
onClick: (e)=>{
|
|
328
340
|
e.preventDefault();
|
|
@@ -335,8 +347,8 @@ const LoginView = ({ providers = [
|
|
|
335
347
|
},
|
|
336
348
|
children: "Terms of Service"
|
|
337
349
|
}),
|
|
338
|
-
(termsContent
|
|
339
|
-
(privacyContent
|
|
350
|
+
(termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
|
|
351
|
+
(privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
|
|
340
352
|
href: "#",
|
|
341
353
|
onClick: (e)=>{
|
|
342
354
|
e.preventDefault();
|
|
@@ -360,7 +372,9 @@ const LoginView = ({ providers = [
|
|
|
360
372
|
/*#__PURE__*/ jsxRuntime.jsx(ModalComponent, {
|
|
361
373
|
title: modalContent.title,
|
|
362
374
|
content: modalContent.content,
|
|
363
|
-
onClose: ()=>
|
|
375
|
+
onClose: ()=>{
|
|
376
|
+
setModalContent(null);
|
|
377
|
+
}
|
|
364
378
|
})
|
|
365
379
|
]
|
|
366
380
|
})
|
|
@@ -368,21 +382,19 @@ const LoginView = ({ providers = [
|
|
|
368
382
|
});
|
|
369
383
|
};
|
|
370
384
|
|
|
371
|
-
const LoginUIComplete = (
|
|
372
|
-
var { className, extLoading = false } = _param, loginProps = cc._object_without_properties_loose(_param, [
|
|
373
|
-
"className",
|
|
374
|
-
"extLoading"
|
|
375
|
-
]);
|
|
385
|
+
const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
|
|
376
386
|
const { loggedIn, isLoading } = useTaunt();
|
|
377
387
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
378
|
-
className: `rzd-loginview rzd-loginui-complete ${className
|
|
388
|
+
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
379
389
|
children: extLoading || isLoading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsxRuntime.jsx(LoggedInView, {}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
380
390
|
children: [
|
|
381
391
|
/*#__PURE__*/ jsxRuntime.jsx("h1", {
|
|
382
392
|
className: "header-login",
|
|
383
393
|
children: "login"
|
|
384
394
|
}),
|
|
385
|
-
/*#__PURE__*/ jsxRuntime.jsx(LoginView,
|
|
395
|
+
/*#__PURE__*/ jsxRuntime.jsx(LoginView, {
|
|
396
|
+
...loginProps
|
|
397
|
+
})
|
|
386
398
|
]
|
|
387
399
|
})
|
|
388
400
|
});
|
|
@@ -421,7 +433,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
421
433
|
if (e.key === "Escape") onClose();
|
|
422
434
|
};
|
|
423
435
|
document.addEventListener("keydown", handleEscape);
|
|
424
|
-
return ()=>
|
|
436
|
+
return ()=>{
|
|
437
|
+
document.removeEventListener("keydown", handleEscape);
|
|
438
|
+
};
|
|
425
439
|
}, [
|
|
426
440
|
onClose
|
|
427
441
|
]);
|
|
@@ -446,7 +460,7 @@ function ModalView({ title, content, onClose }) {
|
|
|
446
460
|
if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
|
|
447
461
|
// Check if next line starts with lowercase or is a paragraph
|
|
448
462
|
const nextLine = lines[index + 1].trim();
|
|
449
|
-
if (nextLine && (nextLine
|
|
463
|
+
if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
|
|
450
464
|
return /*#__PURE__*/ jsxRuntime.jsx("h3", {
|
|
451
465
|
style: {
|
|
452
466
|
marginTop: "24px",
|
|
@@ -498,7 +512,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
498
512
|
flexDirection: "column",
|
|
499
513
|
overflow: "hidden"
|
|
500
514
|
},
|
|
501
|
-
onClick: (e)=>
|
|
515
|
+
onClick: (e)=>{
|
|
516
|
+
e.stopPropagation();
|
|
517
|
+
},
|
|
502
518
|
children: [
|
|
503
519
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
504
520
|
style: {
|
|
@@ -552,78 +568,145 @@ function ModalView({ title, content, onClose }) {
|
|
|
552
568
|
}
|
|
553
569
|
|
|
554
570
|
const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
555
|
-
|
|
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
|
+
});
|
|
578
|
+
const [loginDetails, setLoginDetails] = react.useState();
|
|
579
|
+
const [tauntUser, setTauntUser] = react.useState();
|
|
556
580
|
const taunt = react.useMemo(()=>new tauntLogins.TauntApi(tauntServiceEndpoint), [
|
|
557
581
|
tauntServiceEndpoint
|
|
558
582
|
]);
|
|
559
583
|
const [isLoading, setIsLoading] = react.useState(false);
|
|
560
|
-
const loggedIn = !!
|
|
561
|
-
const
|
|
562
|
-
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);
|
|
563
601
|
setIsLoading(true);
|
|
564
|
-
|
|
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;
|
|
565
613
|
}, [
|
|
614
|
+
tauntUser,
|
|
615
|
+
taunt,
|
|
566
616
|
tauntServiceEndpoint,
|
|
567
|
-
magicKey
|
|
617
|
+
magicKey,
|
|
618
|
+
refreshUser
|
|
568
619
|
]);
|
|
569
620
|
const metamaskLogin = react.useCallback(()=>{
|
|
570
|
-
|
|
571
|
-
tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setDeets).finally(()=>setIsLoading(false));
|
|
621
|
+
return loginWith(({ taunt, tauntServiceEndpoint })=>tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
|
|
572
622
|
}, [
|
|
573
|
-
|
|
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
|
|
574
632
|
]);
|
|
575
633
|
const telegramLogin = react.useCallback(()=>{
|
|
576
634
|
if (!magicKey) throw new Error("magicKey is required for Telegram login");
|
|
577
|
-
|
|
578
|
-
tauntLogins.tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setDeets).finally(()=>setIsLoading(false));
|
|
635
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntLogins.tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
|
|
579
636
|
}, [
|
|
580
|
-
|
|
637
|
+
loginWith,
|
|
581
638
|
magicKey
|
|
582
639
|
]);
|
|
583
640
|
const metaLogin = react.useCallback(()=>{
|
|
584
641
|
setIsLoading(true);
|
|
585
642
|
console.log("Meta login not yet implemented");
|
|
586
643
|
// Placeholder for Meta login
|
|
587
|
-
setTimeout(()=>
|
|
644
|
+
setTimeout(()=>{
|
|
645
|
+
setIsLoading(false);
|
|
646
|
+
}, 1000);
|
|
647
|
+
return Promise.resolve(undefined);
|
|
588
648
|
}, []);
|
|
589
649
|
const coinbaseLogin = react.useCallback(()=>{
|
|
590
650
|
setIsLoading(true);
|
|
591
651
|
console.log("Coinbase login not yet implemented");
|
|
592
652
|
// Placeholder for Coinbase login
|
|
593
|
-
setTimeout(()=>
|
|
653
|
+
setTimeout(()=>{
|
|
654
|
+
setIsLoading(false);
|
|
655
|
+
}, 1000);
|
|
656
|
+
return Promise.resolve(undefined);
|
|
594
657
|
}, []);
|
|
595
|
-
const
|
|
596
|
-
|
|
597
|
-
|
|
658
|
+
const logout = react.useCallback(()=>{
|
|
659
|
+
void taunt.logout().then(()=>{
|
|
660
|
+
setTauntUser(undefined);
|
|
661
|
+
});
|
|
662
|
+
}, [
|
|
663
|
+
taunt
|
|
664
|
+
]);
|
|
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
|
+
}
|
|
598
676
|
}, [
|
|
599
|
-
|
|
677
|
+
refreshUser,
|
|
678
|
+
taunt
|
|
600
679
|
]);
|
|
601
|
-
const
|
|
602
|
-
|
|
603
|
-
return taunt
|
|
604
|
-
}
|
|
605
|
-
|
|
680
|
+
const withTaunt = react.useCallback(async (fn)=>{
|
|
681
|
+
if (loggedIn) {
|
|
682
|
+
return fn(taunt);
|
|
683
|
+
}
|
|
684
|
+
}, [
|
|
685
|
+
loggedIn,
|
|
686
|
+
taunt
|
|
606
687
|
]);
|
|
607
|
-
const
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
const
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
}
|
|
626
|
-
|
|
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
|
|
627
710
|
]);
|
|
628
711
|
if (!tauntServiceEndpoint) {
|
|
629
712
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -635,10 +718,13 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
635
718
|
tauntServiceEndpoint,
|
|
636
719
|
loggedIn,
|
|
637
720
|
isLoading,
|
|
638
|
-
|
|
721
|
+
loginDetails,
|
|
722
|
+
tauntUser,
|
|
723
|
+
setLoginDetails: safeSetLoginDetails,
|
|
639
724
|
getMe,
|
|
640
|
-
getClaimrData,
|
|
641
725
|
getClaimrToken,
|
|
726
|
+
getClaimrSkulls,
|
|
727
|
+
getClaimrReferralCode,
|
|
642
728
|
otpMagicLogin,
|
|
643
729
|
metamaskLogin,
|
|
644
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 { TauntUser, ClaimrCampaignData } from '@redzone/taunt-logins';
|
|
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,31 +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
|
-
|
|
90
|
-
|
|
91
|
-
refreshToken: string;
|
|
92
|
-
};
|
|
91
|
+
tauntUser?: TauntUser;
|
|
92
|
+
loginDetails?: TauntAccessDetails;
|
|
93
93
|
isLoading: boolean;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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;
|
|
103
105
|
logout: () => void;
|
|
104
|
-
}
|
|
106
|
+
}
|
|
105
107
|
declare const TauntContext: react.Context<ContextProps>;
|
|
106
108
|
declare function useTaunt(): ContextProps;
|
|
107
109
|
|
|
108
110
|
declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
|
|
109
111
|
children: React.ReactNode;
|
|
110
|
-
tauntServiceEndpoint
|
|
112
|
+
tauntServiceEndpoint: string;
|
|
111
113
|
magicKey?: string;
|
|
112
114
|
}) => react_jsx_runtime.JSX.Element;
|
|
113
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 { TauntUser, ClaimrCampaignData } from '@redzone/taunt-logins';
|
|
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,31 +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
|
-
|
|
90
|
-
|
|
91
|
-
refreshToken: string;
|
|
92
|
-
};
|
|
91
|
+
tauntUser?: TauntUser;
|
|
92
|
+
loginDetails?: TauntAccessDetails;
|
|
93
93
|
isLoading: boolean;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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;
|
|
103
105
|
logout: () => void;
|
|
104
|
-
}
|
|
106
|
+
}
|
|
105
107
|
declare const TauntContext: react.Context<ContextProps>;
|
|
106
108
|
declare function useTaunt(): ContextProps;
|
|
107
109
|
|
|
108
110
|
declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
|
|
109
111
|
children: React.ReactNode;
|
|
110
|
-
tauntServiceEndpoint
|
|
112
|
+
tauntServiceEndpoint: string;
|
|
111
113
|
magicKey?: string;
|
|
112
114
|
}) => react_jsx_runtime.JSX.Element;
|
|
113
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,23 +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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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 */ }
|
|
98
101
|
});
|
|
99
102
|
function useTaunt() {
|
|
100
103
|
const ctx = useContext(TauntContext);
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
101
105
|
if (!ctx) {
|
|
102
106
|
throw new Error("useTaunt must be used within a TauntProvider");
|
|
103
107
|
}
|
|
@@ -111,12 +115,12 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
111
115
|
const [showError, setShowError] = useState(false);
|
|
112
116
|
const validEmail = useMemo(()=>{
|
|
113
117
|
const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
|
|
114
|
-
return
|
|
118
|
+
return email?.match(validRegex) ? email : undefined;
|
|
115
119
|
}, [
|
|
116
120
|
email
|
|
117
121
|
]);
|
|
118
122
|
const runMagic = ()=>{
|
|
119
|
-
if (!validEmail) {
|
|
123
|
+
if (!email || !validEmail) {
|
|
120
124
|
setShowError(true);
|
|
121
125
|
return;
|
|
122
126
|
}
|
|
@@ -136,7 +140,9 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
136
140
|
}),
|
|
137
141
|
/*#__PURE__*/ jsx("input", {
|
|
138
142
|
className: "rdz-input",
|
|
139
|
-
onChange: (e)=>
|
|
143
|
+
onChange: (e)=>{
|
|
144
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
145
|
+
},
|
|
140
146
|
placeholder: "Email address",
|
|
141
147
|
type: "email",
|
|
142
148
|
value: email
|
|
@@ -280,7 +286,9 @@ const LoginView = ({ providers = [
|
|
|
280
286
|
};
|
|
281
287
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
282
288
|
children: [
|
|
283
|
-
showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput,
|
|
289
|
+
showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput, {
|
|
290
|
+
...magicEmailProps
|
|
291
|
+
}),
|
|
284
292
|
showEmailInput && hasSocialProviders && /*#__PURE__*/ jsx("p", {
|
|
285
293
|
className: "rdz-sign-up-text",
|
|
286
294
|
children: dividerText
|
|
@@ -293,18 +301,22 @@ const LoginView = ({ providers = [
|
|
|
293
301
|
alignItems: "center"
|
|
294
302
|
},
|
|
295
303
|
children: [
|
|
296
|
-
socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsx(CoinbaseButton,
|
|
297
|
-
disabled: !providers.includes("coinbase")
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
},
|
|
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
|
+
})
|
|
308
320
|
]
|
|
309
321
|
}),
|
|
310
322
|
console.log("Terms render check:", {
|
|
@@ -314,7 +326,7 @@ const LoginView = ({ providers = [
|
|
|
314
326
|
hasTermsClick: !!onTermsClick,
|
|
315
327
|
hasPrivacyClick: !!onPrivacyClick
|
|
316
328
|
}),
|
|
317
|
-
showTerms && (termsContent
|
|
329
|
+
showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxs("p", {
|
|
318
330
|
style: {
|
|
319
331
|
fontFamily: "Futura PT, sans-serif",
|
|
320
332
|
fontSize: "1.3em"
|
|
@@ -322,7 +334,7 @@ const LoginView = ({ providers = [
|
|
|
322
334
|
children: [
|
|
323
335
|
"By connecting you are agreeing to our",
|
|
324
336
|
" ",
|
|
325
|
-
(termsContent
|
|
337
|
+
(termsContent ?? onTermsClick) && /*#__PURE__*/ jsx("a", {
|
|
326
338
|
href: "#",
|
|
327
339
|
onClick: (e)=>{
|
|
328
340
|
e.preventDefault();
|
|
@@ -335,8 +347,8 @@ const LoginView = ({ providers = [
|
|
|
335
347
|
},
|
|
336
348
|
children: "Terms of Service"
|
|
337
349
|
}),
|
|
338
|
-
(termsContent
|
|
339
|
-
(privacyContent
|
|
350
|
+
(termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
|
|
351
|
+
(privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsx("a", {
|
|
340
352
|
href: "#",
|
|
341
353
|
onClick: (e)=>{
|
|
342
354
|
e.preventDefault();
|
|
@@ -360,7 +372,9 @@ const LoginView = ({ providers = [
|
|
|
360
372
|
/*#__PURE__*/ jsx(ModalComponent, {
|
|
361
373
|
title: modalContent.title,
|
|
362
374
|
content: modalContent.content,
|
|
363
|
-
onClose: ()=>
|
|
375
|
+
onClose: ()=>{
|
|
376
|
+
setModalContent(null);
|
|
377
|
+
}
|
|
364
378
|
})
|
|
365
379
|
]
|
|
366
380
|
})
|
|
@@ -368,21 +382,19 @@ const LoginView = ({ providers = [
|
|
|
368
382
|
});
|
|
369
383
|
};
|
|
370
384
|
|
|
371
|
-
const LoginUIComplete = (
|
|
372
|
-
var { className, extLoading = false } = _param, loginProps = _object_without_properties_loose(_param, [
|
|
373
|
-
"className",
|
|
374
|
-
"extLoading"
|
|
375
|
-
]);
|
|
385
|
+
const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
|
|
376
386
|
const { loggedIn, isLoading } = useTaunt();
|
|
377
387
|
return /*#__PURE__*/ jsx("div", {
|
|
378
|
-
className: `rzd-loginview rzd-loginui-complete ${className
|
|
388
|
+
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
379
389
|
children: extLoading || isLoading ? /*#__PURE__*/ jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsx(LoggedInView, {}) : /*#__PURE__*/ jsxs(Fragment, {
|
|
380
390
|
children: [
|
|
381
391
|
/*#__PURE__*/ jsx("h1", {
|
|
382
392
|
className: "header-login",
|
|
383
393
|
children: "login"
|
|
384
394
|
}),
|
|
385
|
-
/*#__PURE__*/ jsx(LoginView,
|
|
395
|
+
/*#__PURE__*/ jsx(LoginView, {
|
|
396
|
+
...loginProps
|
|
397
|
+
})
|
|
386
398
|
]
|
|
387
399
|
})
|
|
388
400
|
});
|
|
@@ -421,7 +433,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
421
433
|
if (e.key === "Escape") onClose();
|
|
422
434
|
};
|
|
423
435
|
document.addEventListener("keydown", handleEscape);
|
|
424
|
-
return ()=>
|
|
436
|
+
return ()=>{
|
|
437
|
+
document.removeEventListener("keydown", handleEscape);
|
|
438
|
+
};
|
|
425
439
|
}, [
|
|
426
440
|
onClose
|
|
427
441
|
]);
|
|
@@ -446,7 +460,7 @@ function ModalView({ title, content, onClose }) {
|
|
|
446
460
|
if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
|
|
447
461
|
// Check if next line starts with lowercase or is a paragraph
|
|
448
462
|
const nextLine = lines[index + 1].trim();
|
|
449
|
-
if (nextLine && (nextLine
|
|
463
|
+
if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
|
|
450
464
|
return /*#__PURE__*/ jsx("h3", {
|
|
451
465
|
style: {
|
|
452
466
|
marginTop: "24px",
|
|
@@ -498,7 +512,9 @@ function ModalView({ title, content, onClose }) {
|
|
|
498
512
|
flexDirection: "column",
|
|
499
513
|
overflow: "hidden"
|
|
500
514
|
},
|
|
501
|
-
onClick: (e)=>
|
|
515
|
+
onClick: (e)=>{
|
|
516
|
+
e.stopPropagation();
|
|
517
|
+
},
|
|
502
518
|
children: [
|
|
503
519
|
/*#__PURE__*/ jsxs("div", {
|
|
504
520
|
style: {
|
|
@@ -552,78 +568,145 @@ function ModalView({ title, content, onClose }) {
|
|
|
552
568
|
}
|
|
553
569
|
|
|
554
570
|
const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
555
|
-
|
|
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
|
+
});
|
|
578
|
+
const [loginDetails, setLoginDetails] = useState();
|
|
579
|
+
const [tauntUser, setTauntUser] = useState();
|
|
556
580
|
const taunt = useMemo(()=>new TauntApi(tauntServiceEndpoint), [
|
|
557
581
|
tauntServiceEndpoint
|
|
558
582
|
]);
|
|
559
583
|
const [isLoading, setIsLoading] = useState(false);
|
|
560
|
-
const loggedIn = !!
|
|
561
|
-
const
|
|
562
|
-
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);
|
|
563
601
|
setIsLoading(true);
|
|
564
|
-
|
|
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;
|
|
565
613
|
}, [
|
|
614
|
+
tauntUser,
|
|
615
|
+
taunt,
|
|
566
616
|
tauntServiceEndpoint,
|
|
567
|
-
magicKey
|
|
617
|
+
magicKey,
|
|
618
|
+
refreshUser
|
|
568
619
|
]);
|
|
569
620
|
const metamaskLogin = useCallback(()=>{
|
|
570
|
-
|
|
571
|
-
tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setDeets).finally(()=>setIsLoading(false));
|
|
621
|
+
return loginWith(({ taunt, tauntServiceEndpoint })=>tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
|
|
572
622
|
}, [
|
|
573
|
-
|
|
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
|
|
574
632
|
]);
|
|
575
633
|
const telegramLogin = useCallback(()=>{
|
|
576
634
|
if (!magicKey) throw new Error("magicKey is required for Telegram login");
|
|
577
|
-
|
|
578
|
-
tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setDeets).finally(()=>setIsLoading(false));
|
|
635
|
+
return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
|
|
579
636
|
}, [
|
|
580
|
-
|
|
637
|
+
loginWith,
|
|
581
638
|
magicKey
|
|
582
639
|
]);
|
|
583
640
|
const metaLogin = useCallback(()=>{
|
|
584
641
|
setIsLoading(true);
|
|
585
642
|
console.log("Meta login not yet implemented");
|
|
586
643
|
// Placeholder for Meta login
|
|
587
|
-
setTimeout(()=>
|
|
644
|
+
setTimeout(()=>{
|
|
645
|
+
setIsLoading(false);
|
|
646
|
+
}, 1000);
|
|
647
|
+
return Promise.resolve(undefined);
|
|
588
648
|
}, []);
|
|
589
649
|
const coinbaseLogin = useCallback(()=>{
|
|
590
650
|
setIsLoading(true);
|
|
591
651
|
console.log("Coinbase login not yet implemented");
|
|
592
652
|
// Placeholder for Coinbase login
|
|
593
|
-
setTimeout(()=>
|
|
653
|
+
setTimeout(()=>{
|
|
654
|
+
setIsLoading(false);
|
|
655
|
+
}, 1000);
|
|
656
|
+
return Promise.resolve(undefined);
|
|
594
657
|
}, []);
|
|
595
|
-
const
|
|
596
|
-
|
|
597
|
-
|
|
658
|
+
const logout = useCallback(()=>{
|
|
659
|
+
void taunt.logout().then(()=>{
|
|
660
|
+
setTauntUser(undefined);
|
|
661
|
+
});
|
|
662
|
+
}, [
|
|
663
|
+
taunt
|
|
664
|
+
]);
|
|
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
|
+
}
|
|
598
676
|
}, [
|
|
599
|
-
|
|
677
|
+
refreshUser,
|
|
678
|
+
taunt
|
|
600
679
|
]);
|
|
601
|
-
const
|
|
602
|
-
|
|
603
|
-
return taunt
|
|
604
|
-
}
|
|
605
|
-
|
|
680
|
+
const withTaunt = useCallback(async (fn)=>{
|
|
681
|
+
if (loggedIn) {
|
|
682
|
+
return fn(taunt);
|
|
683
|
+
}
|
|
684
|
+
}, [
|
|
685
|
+
loggedIn,
|
|
686
|
+
taunt
|
|
606
687
|
]);
|
|
607
|
-
const
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
const
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
}
|
|
626
|
-
|
|
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
|
|
627
710
|
]);
|
|
628
711
|
if (!tauntServiceEndpoint) {
|
|
629
712
|
return /*#__PURE__*/ jsx("div", {
|
|
@@ -635,10 +718,13 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
635
718
|
tauntServiceEndpoint,
|
|
636
719
|
loggedIn,
|
|
637
720
|
isLoading,
|
|
638
|
-
|
|
721
|
+
loginDetails,
|
|
722
|
+
tauntUser,
|
|
723
|
+
setLoginDetails: safeSetLoginDetails,
|
|
639
724
|
getMe,
|
|
640
|
-
getClaimrData,
|
|
641
725
|
getClaimrToken,
|
|
726
|
+
getClaimrSkulls,
|
|
727
|
+
getClaimrReferralCode,
|
|
642
728
|
otpMagicLogin,
|
|
643
729
|
metamaskLogin,
|
|
644
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 };
|