@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.
@@ -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: ()=>Promise.resolve(undefined),
90
- metamaskLogin: ()=>{},
91
- otpMagicLogin: ()=>{},
92
- telegramLogin: ()=>{},
93
- metaLogin: ()=>{},
94
- coinbaseLogin: ()=>{},
95
- refreshToken: (token)=>cc._async_to_generator(function*() {})(),
96
- getClaimrToken: ()=>Promise.resolve(undefined),
97
- getClaimrData: ()=>Promise.resolve(undefined),
98
- logout: ()=>{}
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 (email == null ? void 0 : email.match(validRegex)) ? email : undefined;
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)=>setEmail(e.target.value ? e.target.value : undefined),
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, cc._extends({}, magicEmailProps)),
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, cc._extends({
298
- disabled: !providers.includes("coinbase")
299
- }, coinbaseProps)),
300
- socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsxRuntime.jsx(MetaMaskButton, cc._extends({
301
- disabled: !providers.includes("metamask")
302
- }, metamaskProps)),
303
- socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsxRuntime.jsx(MetaButton, cc._extends({
304
- disabled: !providers.includes("meta")
305
- }, metaProps)),
306
- socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsxRuntime.jsx(TelegramButton, cc._extends({
307
- disabled: !providers.includes("telegram")
308
- }, telegramProps))
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 || privacyContent || onTermsClick || onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsxs("p", {
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 || onTermsClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
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 || onTermsClick) && (privacyContent || onPrivacyClick) && " and ",
340
- (privacyContent || onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
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: ()=>setModalContent(null)
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 = (_param)=>{
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, cc._extends({}, loginProps))
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 ()=>document.removeEventListener("keydown", handleEscape);
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[0] === nextLine[0].toUpperCase() || nextLine.startsWith("We "))) {
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)=>e.stopPropagation(),
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 = !!loginDetails;
562
- const otpMagicLogin = react.useCallback((email)=>{
563
- if (!magicKey) throw new Error("magicKey is required for OTP login");
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
- tauntLogins.tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
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
- setIsLoading(true);
572
- tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
621
+ return loginWith(({ taunt, tauntServiceEndpoint })=>tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
573
622
  }, [
574
- tauntServiceEndpoint
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
- setIsLoading(true);
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
- tauntServiceEndpoint,
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(()=>setIsLoading(false), 1000);
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(()=>setIsLoading(false), 1000);
653
+ setTimeout(()=>{
654
+ setIsLoading(false);
655
+ }, 1000);
656
+ return Promise.resolve(undefined);
595
657
  }, []);
596
- const getClaimrToken = react.useCallback(()=>{
597
- if (!loggedIn) return undefined;
598
- return taunt.getClaimrToken();
658
+ const logout = react.useCallback(()=>{
659
+ void taunt.logout().then(()=>{
660
+ setTauntUser(undefined);
661
+ });
599
662
  }, [
600
- loggedIn
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 logout = react.useCallback(()=>{
609
- setLoginDetails(undefined);
610
- }, []);
611
- const refreshToken = react.useCallback((token)=>cc._async_to_generator(function*() {
612
- if (!token) return;
613
- setIsLoading(true);
614
- try {
615
- const newDeets = yield taunt.refresh(token);
616
- setLoginDetails(newDeets);
617
- } catch (error) {
618
- console.error("Failed to refresh token:", error);
619
- } finally{
620
- setIsLoading(false);
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 safeSetLoginDetails = react.useCallback((props)=>cc._async_to_generator(function*() {
630
- taunt.setLoginDetails(props).then(setLoginDetails);
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,
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { TauntAccessDetails, 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
- type MagicEmailProps = {
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 ContextProps = {
86
+ type MaybeUser = Promise<TauntUser | undefined>;
87
+ type MaybeString = Promise<string | undefined>;
88
+ interface ContextProps {
87
89
  tauntServiceEndpoint: string;
88
90
  loggedIn: boolean;
89
- deets?: TauntAccessDetails;
91
+ tauntUser?: TauntUser;
90
92
  loginDetails?: TauntAccessDetails;
91
93
  isLoading: boolean;
92
- setLoginDetails: (props: TauntAccessDetails) => void;
93
- getMe: () => Promise<TauntUser | undefined>;
94
- metamaskLogin: () => void;
95
- otpMagicLogin: (email: string) => void;
96
- telegramLogin: () => void;
97
- metaLogin: () => void;
98
- coinbaseLogin: () => void;
99
- getClaimrData: () => Promise<ClaimrCampaignData | undefined>;
100
- getClaimrToken: () => Promise<string | undefined>;
101
- refreshToken: (token: string) => Promise<void>;
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?: string;
112
+ tauntServiceEndpoint: string;
110
113
  magicKey?: string;
111
114
  }) => react_jsx_runtime.JSX.Element;
112
115
 
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { TauntAccessDetails, 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
- type MagicEmailProps = {
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 ContextProps = {
86
+ type MaybeUser = Promise<TauntUser | undefined>;
87
+ type MaybeString = Promise<string | undefined>;
88
+ interface ContextProps {
87
89
  tauntServiceEndpoint: string;
88
90
  loggedIn: boolean;
89
- deets?: TauntAccessDetails;
91
+ tauntUser?: TauntUser;
90
92
  loginDetails?: TauntAccessDetails;
91
93
  isLoading: boolean;
92
- setLoginDetails: (props: TauntAccessDetails) => void;
93
- getMe: () => Promise<TauntUser | undefined>;
94
- metamaskLogin: () => void;
95
- otpMagicLogin: (email: string) => void;
96
- telegramLogin: () => void;
97
- metaLogin: () => void;
98
- coinbaseLogin: () => void;
99
- getClaimrData: () => Promise<ClaimrCampaignData | undefined>;
100
- getClaimrToken: () => Promise<string | undefined>;
101
- refreshToken: (token: string) => Promise<void>;
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?: string;
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 { _ as _async_to_generator, a as _extends, b as _object_without_properties_loose } from './cc-D6TRVNtd.js';
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: ()=>Promise.resolve(undefined),
90
- metamaskLogin: ()=>{},
91
- otpMagicLogin: ()=>{},
92
- telegramLogin: ()=>{},
93
- metaLogin: ()=>{},
94
- coinbaseLogin: ()=>{},
95
- refreshToken: (token)=>_async_to_generator(function*() {})(),
96
- getClaimrToken: ()=>Promise.resolve(undefined),
97
- getClaimrData: ()=>Promise.resolve(undefined),
98
- logout: ()=>{}
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 (email == null ? void 0 : email.match(validRegex)) ? email : undefined;
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)=>setEmail(e.target.value ? e.target.value : undefined),
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, _extends({}, magicEmailProps)),
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, _extends({
298
- disabled: !providers.includes("coinbase")
299
- }, coinbaseProps)),
300
- socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsx(MetaMaskButton, _extends({
301
- disabled: !providers.includes("metamask")
302
- }, metamaskProps)),
303
- socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsx(MetaButton, _extends({
304
- disabled: !providers.includes("meta")
305
- }, metaProps)),
306
- socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsx(TelegramButton, _extends({
307
- disabled: !providers.includes("telegram")
308
- }, telegramProps))
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 || privacyContent || onTermsClick || onPrivacyClick) && /*#__PURE__*/ jsxs("p", {
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 || onTermsClick) && /*#__PURE__*/ jsx("a", {
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 || onTermsClick) && (privacyContent || onPrivacyClick) && " and ",
340
- (privacyContent || onPrivacyClick) && /*#__PURE__*/ jsx("a", {
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: ()=>setModalContent(null)
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 = (_param)=>{
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, _extends({}, loginProps))
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 ()=>document.removeEventListener("keydown", handleEscape);
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[0] === nextLine[0].toUpperCase() || nextLine.startsWith("We "))) {
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)=>e.stopPropagation(),
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 = !!loginDetails;
562
- const otpMagicLogin = useCallback((email)=>{
563
- if (!magicKey) throw new Error("magicKey is required for OTP login");
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
- tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
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
- setIsLoading(true);
572
- tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
621
+ return loginWith(({ taunt, tauntServiceEndpoint })=>tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
573
622
  }, [
574
- tauntServiceEndpoint
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
- setIsLoading(true);
579
- tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
635
+ return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
580
636
  }, [
581
- tauntServiceEndpoint,
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(()=>setIsLoading(false), 1000);
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(()=>setIsLoading(false), 1000);
653
+ setTimeout(()=>{
654
+ setIsLoading(false);
655
+ }, 1000);
656
+ return Promise.resolve(undefined);
595
657
  }, []);
596
- const getClaimrToken = useCallback(()=>{
597
- if (!loggedIn) return undefined;
598
- return taunt.getClaimrToken();
658
+ const logout = useCallback(()=>{
659
+ void taunt.logout().then(()=>{
660
+ setTauntUser(undefined);
661
+ });
599
662
  }, [
600
- loggedIn
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 logout = useCallback(()=>{
609
- setLoginDetails(undefined);
610
- }, []);
611
- const refreshToken = useCallback((token)=>_async_to_generator(function*() {
612
- if (!token) return;
613
- setIsLoading(true);
614
- try {
615
- const newDeets = yield taunt.refresh(token);
616
- setLoginDetails(newDeets);
617
- } catch (error) {
618
- console.error("Failed to refresh token:", error);
619
- } finally{
620
- setIsLoading(false);
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 safeSetLoginDetails = useCallback((props)=>_async_to_generator(function*() {
630
- taunt.setLoginDetails(props).then(setLoginDetails);
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.19",
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
- "react": "latest",
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"
@@ -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;
@@ -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 };