@redzone/taunt-logins-ui-react 0.0.19 → 0.0.21

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,32 @@ function LoadingView() {
81
80
  });
82
81
  }
83
82
 
83
+ const DefinitelyUndefined = ()=>Promise.resolve(undefined);
84
84
  const TauntContext = react.createContext({
85
+ taunt: {},
85
86
  tauntServiceEndpoint: "",
86
- isLoading: false,
87
+ initialised: false,
87
88
  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: ()=>{}
89
+ isLoading: false,
90
+ tauntUser: undefined,
91
+ loginDetails: undefined,
92
+ setLoginDetails: DefinitelyUndefined,
93
+ getMe: DefinitelyUndefined,
94
+ metamaskLogin: DefinitelyUndefined,
95
+ otpMagicLogin: DefinitelyUndefined,
96
+ telegramLogin: DefinitelyUndefined,
97
+ metaLogin: DefinitelyUndefined,
98
+ coinbaseLogin: DefinitelyUndefined,
99
+ refreshToken: DefinitelyUndefined,
100
+ getClaimrToken: DefinitelyUndefined,
101
+ getClaimrSkulls: DefinitelyUndefined,
102
+ getClaimrReferralCode: DefinitelyUndefined,
103
+ logout: ()=>{
104
+ /* empty */ }
99
105
  });
100
106
  function useTaunt() {
101
107
  const ctx = react.useContext(TauntContext);
108
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
102
109
  if (!ctx) {
103
110
  throw new Error("useTaunt must be used within a TauntProvider");
104
111
  }
@@ -112,12 +119,12 @@ const MagicEmailInput = ({ onEmail })=>{
112
119
  const [showError, setShowError] = react.useState(false);
113
120
  const validEmail = react.useMemo(()=>{
114
121
  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;
122
+ return email?.match(validRegex) ? email : undefined;
116
123
  }, [
117
124
  email
118
125
  ]);
119
126
  const runMagic = ()=>{
120
- if (!validEmail) {
127
+ if (!email || !validEmail) {
121
128
  setShowError(true);
122
129
  return;
123
130
  }
@@ -137,7 +144,9 @@ const MagicEmailInput = ({ onEmail })=>{
137
144
  }),
138
145
  /*#__PURE__*/ jsxRuntime.jsx("input", {
139
146
  className: "rdz-input",
140
- onChange: (e)=>setEmail(e.target.value ? e.target.value : undefined),
147
+ onChange: (e)=>{
148
+ setEmail(e.target.value ? e.target.value : undefined);
149
+ },
141
150
  placeholder: "Email address",
142
151
  type: "email",
143
152
  value: email
@@ -281,7 +290,9 @@ const LoginView = ({ providers = [
281
290
  };
282
291
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
283
292
  children: [
284
- showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput, cc._extends({}, magicEmailProps)),
293
+ showEmailInput && /*#__PURE__*/ jsxRuntime.jsx(MagicEmailInput, {
294
+ ...magicEmailProps
295
+ }),
285
296
  showEmailInput && hasSocialProviders && /*#__PURE__*/ jsxRuntime.jsx("p", {
286
297
  className: "rdz-sign-up-text",
287
298
  children: dividerText
@@ -294,18 +305,22 @@ const LoginView = ({ providers = [
294
305
  alignItems: "center"
295
306
  },
296
307
  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))
308
+ socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsxRuntime.jsx(CoinbaseButton, {
309
+ disabled: !providers.includes("coinbase"),
310
+ ...coinbaseProps
311
+ }),
312
+ socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsxRuntime.jsx(MetaMaskButton, {
313
+ disabled: !providers.includes("metamask"),
314
+ ...metamaskProps
315
+ }),
316
+ socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsxRuntime.jsx(MetaButton, {
317
+ disabled: !providers.includes("meta"),
318
+ ...metaProps
319
+ }),
320
+ socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsxRuntime.jsx(TelegramButton, {
321
+ disabled: !providers.includes("telegram"),
322
+ ...telegramProps
323
+ })
309
324
  ]
310
325
  }),
311
326
  console.log("Terms render check:", {
@@ -315,7 +330,7 @@ const LoginView = ({ providers = [
315
330
  hasTermsClick: !!onTermsClick,
316
331
  hasPrivacyClick: !!onPrivacyClick
317
332
  }),
318
- showTerms && (termsContent || privacyContent || onTermsClick || onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsxs("p", {
333
+ showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsxs("p", {
319
334
  style: {
320
335
  fontFamily: "Futura PT, sans-serif",
321
336
  fontSize: "1.3em"
@@ -323,7 +338,7 @@ const LoginView = ({ providers = [
323
338
  children: [
324
339
  "By connecting you are agreeing to our",
325
340
  " ",
326
- (termsContent || onTermsClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
341
+ (termsContent ?? onTermsClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
327
342
  href: "#",
328
343
  onClick: (e)=>{
329
344
  e.preventDefault();
@@ -336,8 +351,8 @@ const LoginView = ({ providers = [
336
351
  },
337
352
  children: "Terms of Service"
338
353
  }),
339
- (termsContent || onTermsClick) && (privacyContent || onPrivacyClick) && " and ",
340
- (privacyContent || onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
354
+ (termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
355
+ (privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsxRuntime.jsx("a", {
341
356
  href: "#",
342
357
  onClick: (e)=>{
343
358
  e.preventDefault();
@@ -361,7 +376,9 @@ const LoginView = ({ providers = [
361
376
  /*#__PURE__*/ jsxRuntime.jsx(ModalComponent, {
362
377
  title: modalContent.title,
363
378
  content: modalContent.content,
364
- onClose: ()=>setModalContent(null)
379
+ onClose: ()=>{
380
+ setModalContent(null);
381
+ }
365
382
  })
366
383
  ]
367
384
  })
@@ -369,21 +386,19 @@ const LoginView = ({ providers = [
369
386
  });
370
387
  };
371
388
 
372
- const LoginUIComplete = (_param)=>{
373
- var { className, extLoading = false } = _param, loginProps = cc._object_without_properties_loose(_param, [
374
- "className",
375
- "extLoading"
376
- ]);
389
+ const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
377
390
  const { loggedIn, isLoading } = useTaunt();
378
391
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
379
- className: `rzd-loginview rzd-loginui-complete ${className || ""}`,
392
+ className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
380
393
  children: extLoading || isLoading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsxRuntime.jsx(LoggedInView, {}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
381
394
  children: [
382
395
  /*#__PURE__*/ jsxRuntime.jsx("h1", {
383
396
  className: "header-login",
384
397
  children: "login"
385
398
  }),
386
- /*#__PURE__*/ jsxRuntime.jsx(LoginView, cc._extends({}, loginProps))
399
+ /*#__PURE__*/ jsxRuntime.jsx(LoginView, {
400
+ ...loginProps
401
+ })
387
402
  ]
388
403
  })
389
404
  });
@@ -422,7 +437,9 @@ function ModalView({ title, content, onClose }) {
422
437
  if (e.key === "Escape") onClose();
423
438
  };
424
439
  document.addEventListener("keydown", handleEscape);
425
- return ()=>document.removeEventListener("keydown", handleEscape);
440
+ return ()=>{
441
+ document.removeEventListener("keydown", handleEscape);
442
+ };
426
443
  }, [
427
444
  onClose
428
445
  ]);
@@ -447,7 +464,7 @@ function ModalView({ title, content, onClose }) {
447
464
  if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
448
465
  // Check if next line starts with lowercase or is a paragraph
449
466
  const nextLine = lines[index + 1].trim();
450
- if (nextLine && (nextLine[0] === nextLine[0].toUpperCase() || nextLine.startsWith("We "))) {
467
+ if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
451
468
  return /*#__PURE__*/ jsxRuntime.jsx("h3", {
452
469
  style: {
453
470
  marginTop: "24px",
@@ -499,7 +516,9 @@ function ModalView({ title, content, onClose }) {
499
516
  flexDirection: "column",
500
517
  overflow: "hidden"
501
518
  },
502
- onClick: (e)=>e.stopPropagation(),
519
+ onClick: (e)=>{
520
+ e.stopPropagation();
521
+ },
503
522
  children: [
504
523
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
505
524
  style: {
@@ -553,84 +572,150 @@ function ModalView({ title, content, onClose }) {
553
572
  }
554
573
 
555
574
  const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
575
+ if (!tauntServiceEndpoint) {
576
+ throw new Error("TauntProvider: tauntServiceEndpoint is not provided");
577
+ }
578
+ console.log("🔧 Initializing TauntProvider with endpoint:", {
579
+ tauntServiceEndpoint,
580
+ magicKey
581
+ });
582
+ const [initialised, setInitialised] = react.useState(false);
556
583
  const [loginDetails, setLoginDetails] = react.useState();
584
+ const [tauntUser, setTauntUser] = react.useState();
557
585
  const taunt = react.useMemo(()=>new tauntLogins.TauntApi(tauntServiceEndpoint), [
558
586
  tauntServiceEndpoint
559
587
  ]);
560
588
  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");
589
+ const loggedIn = !!tauntUser;
590
+ const getMe = react.useCallback(async (force = false)=>{
591
+ if (!force && !loggedIn) return undefined;
592
+ return taunt.getLoggedInUser();
593
+ }, [
594
+ loggedIn,
595
+ taunt
596
+ ]);
597
+ const refreshUser = react.useCallback(async ()=>{
598
+ const me = await getMe(true);
599
+ setTauntUser(me);
600
+ return me;
601
+ }, [
602
+ getMe
603
+ ]);
604
+ const loginWith = react.useCallback(async (fn)=>{
605
+ if (tauntUser) return Promise.resolve(tauntUser);
564
606
  setIsLoading(true);
565
- tauntLogins.tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
607
+ const resp = await fn({
608
+ taunt,
609
+ tauntServiceEndpoint,
610
+ magicKey: magicKey ?? ""
611
+ });
612
+ setLoginDetails(resp);
613
+ if (resp) {
614
+ await refreshUser();
615
+ }
616
+ setIsLoading(false);
617
+ return tauntUser;
566
618
  }, [
619
+ tauntUser,
620
+ taunt,
567
621
  tauntServiceEndpoint,
568
- magicKey
622
+ magicKey,
623
+ refreshUser
569
624
  ]);
570
625
  const metamaskLogin = react.useCallback(()=>{
571
- setIsLoading(true);
572
- tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
626
+ return loginWith(({ taunt, tauntServiceEndpoint })=>tauntLogins.tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
573
627
  }, [
574
- tauntServiceEndpoint
628
+ loginWith
629
+ ]);
630
+ const otpMagicLogin = react.useCallback((email)=>{
631
+ if (!magicKey) throw new Error("magicKey is required for OTP login");
632
+ if (!email) throw new Error("email is required for OTP login");
633
+ return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntLogins.tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt));
634
+ }, [
635
+ loginWith,
636
+ magicKey
575
637
  ]);
576
638
  const telegramLogin = react.useCallback(()=>{
577
639
  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));
640
+ return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntLogins.tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
580
641
  }, [
581
- tauntServiceEndpoint,
642
+ loginWith,
582
643
  magicKey
583
644
  ]);
584
645
  const metaLogin = react.useCallback(()=>{
585
646
  setIsLoading(true);
586
647
  console.log("Meta login not yet implemented");
587
648
  // Placeholder for Meta login
588
- setTimeout(()=>setIsLoading(false), 1000);
649
+ setTimeout(()=>{
650
+ setIsLoading(false);
651
+ }, 1000);
652
+ return Promise.resolve(undefined);
589
653
  }, []);
590
654
  const coinbaseLogin = react.useCallback(()=>{
591
655
  setIsLoading(true);
592
656
  console.log("Coinbase login not yet implemented");
593
657
  // Placeholder for Coinbase login
594
- setTimeout(()=>setIsLoading(false), 1000);
658
+ setTimeout(()=>{
659
+ setIsLoading(false);
660
+ }, 1000);
661
+ return Promise.resolve(undefined);
595
662
  }, []);
596
- const getClaimrToken = react.useCallback(()=>{
597
- if (!loggedIn) return undefined;
598
- return taunt.getClaimrToken();
663
+ const logout = react.useCallback(()=>{
664
+ void taunt.logout().then(()=>{
665
+ setTauntUser(undefined);
666
+ });
599
667
  }, [
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
668
+ taunt
607
669
  ]);
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
670
+ const refreshToken = react.useCallback(async (token)=>{
671
+ if (!token) return;
672
+ setIsLoading(true);
673
+ try {
674
+ await taunt.refresh(token);
675
+ return await refreshUser();
676
+ } catch (error) {
677
+ console.error("Failed to refresh token:", error);
678
+ } finally{
679
+ setIsLoading(false);
680
+ }
681
+ }, [
682
+ refreshUser,
683
+ taunt
628
684
  ]);
629
- const safeSetLoginDetails = react.useCallback((props)=>cc._async_to_generator(function*() {
630
- taunt.setLoginDetails(props).then(setLoginDetails);
631
- })(), [
685
+ const withTaunt = react.useCallback(async (fn)=>{
686
+ if (loggedIn) {
687
+ return fn(taunt);
688
+ }
689
+ }, [
690
+ loggedIn,
632
691
  taunt
633
692
  ]);
693
+ const getClaimrSkulls = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrSkulls()), [
694
+ withTaunt
695
+ ]);
696
+ const getClaimrToken = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrToken()), [
697
+ withTaunt
698
+ ]);
699
+ const getClaimrReferralCode = react.useCallback(()=>withTaunt((taunt)=>taunt.getClaimrReferralCode()), [
700
+ withTaunt
701
+ ]);
702
+ const safeSetLoginDetails = react.useCallback((props)=>loginWith(async ({ taunt })=>{
703
+ await taunt.setLoginDetails(props);
704
+ return props;
705
+ }), [
706
+ loginWith
707
+ ]);
708
+ react.useEffect(()=>{
709
+ if (!initialised && !loggedIn) {
710
+ void refreshUser().then(()=>{
711
+ setInitialised(true);
712
+ });
713
+ }
714
+ }, [
715
+ initialised,
716
+ loggedIn,
717
+ refreshUser
718
+ ]);
634
719
  if (!tauntServiceEndpoint) {
635
720
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
636
721
  children: "tauntServiceEndpoint is required"
@@ -638,15 +723,18 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
638
723
  }
639
724
  return /*#__PURE__*/ jsxRuntime.jsx(TauntContext.Provider, {
640
725
  value: {
726
+ taunt,
641
727
  tauntServiceEndpoint,
728
+ initialised,
642
729
  loggedIn,
643
730
  isLoading,
644
- deets: loginDetails,
645
731
  loginDetails,
732
+ tauntUser,
646
733
  setLoginDetails: safeSetLoginDetails,
647
734
  getMe,
648
- getClaimrData,
649
735
  getClaimrToken,
736
+ getClaimrSkulls,
737
+ getClaimrReferralCode,
650
738
  otpMagicLogin,
651
739
  metamaskLogin,
652
740
  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 { TauntApi, 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,35 @@ 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 {
89
+ taunt: TauntApi;
87
90
  tauntServiceEndpoint: string;
91
+ initialised: boolean;
88
92
  loggedIn: boolean;
89
- deets?: TauntAccessDetails;
90
- 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
+ tauntUser: TauntUser | undefined;
95
+ loginDetails: TauntAccessDetails | undefined;
96
+ metamaskLogin: () => MaybeUser;
97
+ otpMagicLogin: (email: string) => MaybeUser;
98
+ telegramLogin: () => MaybeUser;
99
+ metaLogin: () => MaybeUser;
100
+ coinbaseLogin: () => MaybeUser;
101
+ getMe: () => MaybeUser;
102
+ setLoginDetails: (props: TauntAccessDetails) => MaybeUser;
103
+ refreshToken: (token: string) => MaybeUser;
104
+ getClaimrToken: () => MaybeString;
105
+ getClaimrSkulls: () => Promise<ClaimrCampaignData | undefined>;
106
+ getClaimrReferralCode: () => MaybeString;
102
107
  logout: () => void;
103
- };
108
+ }
104
109
  declare const TauntContext: react.Context<ContextProps>;
105
110
  declare function useTaunt(): ContextProps;
106
111
 
107
112
  declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
108
113
  children: React.ReactNode;
109
- tauntServiceEndpoint?: string;
114
+ tauntServiceEndpoint: string;
110
115
  magicKey?: string;
111
116
  }) => react_jsx_runtime.JSX.Element;
112
117
 
@@ -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 { TauntApi, 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,35 @@ 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 {
89
+ taunt: TauntApi;
87
90
  tauntServiceEndpoint: string;
91
+ initialised: boolean;
88
92
  loggedIn: boolean;
89
- deets?: TauntAccessDetails;
90
- 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
+ tauntUser: TauntUser | undefined;
95
+ loginDetails: TauntAccessDetails | undefined;
96
+ metamaskLogin: () => MaybeUser;
97
+ otpMagicLogin: (email: string) => MaybeUser;
98
+ telegramLogin: () => MaybeUser;
99
+ metaLogin: () => MaybeUser;
100
+ coinbaseLogin: () => MaybeUser;
101
+ getMe: () => MaybeUser;
102
+ setLoginDetails: (props: TauntAccessDetails) => MaybeUser;
103
+ refreshToken: (token: string) => MaybeUser;
104
+ getClaimrToken: () => MaybeString;
105
+ getClaimrSkulls: () => Promise<ClaimrCampaignData | undefined>;
106
+ getClaimrReferralCode: () => MaybeString;
102
107
  logout: () => void;
103
- };
108
+ }
104
109
  declare const TauntContext: react.Context<ContextProps>;
105
110
  declare function useTaunt(): ContextProps;
106
111
 
107
112
  declare const TauntProvider: ({ children, tauntServiceEndpoint, magicKey }: {
108
113
  children: React.ReactNode;
109
- tauntServiceEndpoint?: string;
114
+ tauntServiceEndpoint: string;
110
115
  magicKey?: string;
111
116
  }) => react_jsx_runtime.JSX.Element;
112
117
 
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,32 @@ function LoadingView() {
81
80
  });
82
81
  }
83
82
 
83
+ const DefinitelyUndefined = ()=>Promise.resolve(undefined);
84
84
  const TauntContext = createContext({
85
+ taunt: {},
85
86
  tauntServiceEndpoint: "",
86
- isLoading: false,
87
+ initialised: false,
87
88
  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: ()=>{}
89
+ isLoading: false,
90
+ tauntUser: undefined,
91
+ loginDetails: undefined,
92
+ setLoginDetails: DefinitelyUndefined,
93
+ getMe: DefinitelyUndefined,
94
+ metamaskLogin: DefinitelyUndefined,
95
+ otpMagicLogin: DefinitelyUndefined,
96
+ telegramLogin: DefinitelyUndefined,
97
+ metaLogin: DefinitelyUndefined,
98
+ coinbaseLogin: DefinitelyUndefined,
99
+ refreshToken: DefinitelyUndefined,
100
+ getClaimrToken: DefinitelyUndefined,
101
+ getClaimrSkulls: DefinitelyUndefined,
102
+ getClaimrReferralCode: DefinitelyUndefined,
103
+ logout: ()=>{
104
+ /* empty */ }
99
105
  });
100
106
  function useTaunt() {
101
107
  const ctx = useContext(TauntContext);
108
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
102
109
  if (!ctx) {
103
110
  throw new Error("useTaunt must be used within a TauntProvider");
104
111
  }
@@ -112,12 +119,12 @@ const MagicEmailInput = ({ onEmail })=>{
112
119
  const [showError, setShowError] = useState(false);
113
120
  const validEmail = useMemo(()=>{
114
121
  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;
122
+ return email?.match(validRegex) ? email : undefined;
116
123
  }, [
117
124
  email
118
125
  ]);
119
126
  const runMagic = ()=>{
120
- if (!validEmail) {
127
+ if (!email || !validEmail) {
121
128
  setShowError(true);
122
129
  return;
123
130
  }
@@ -137,7 +144,9 @@ const MagicEmailInput = ({ onEmail })=>{
137
144
  }),
138
145
  /*#__PURE__*/ jsx("input", {
139
146
  className: "rdz-input",
140
- onChange: (e)=>setEmail(e.target.value ? e.target.value : undefined),
147
+ onChange: (e)=>{
148
+ setEmail(e.target.value ? e.target.value : undefined);
149
+ },
141
150
  placeholder: "Email address",
142
151
  type: "email",
143
152
  value: email
@@ -281,7 +290,9 @@ const LoginView = ({ providers = [
281
290
  };
282
291
  return /*#__PURE__*/ jsxs(Fragment, {
283
292
  children: [
284
- showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput, _extends({}, magicEmailProps)),
293
+ showEmailInput && /*#__PURE__*/ jsx(MagicEmailInput, {
294
+ ...magicEmailProps
295
+ }),
285
296
  showEmailInput && hasSocialProviders && /*#__PURE__*/ jsx("p", {
286
297
  className: "rdz-sign-up-text",
287
298
  children: dividerText
@@ -294,18 +305,22 @@ const LoginView = ({ providers = [
294
305
  alignItems: "center"
295
306
  },
296
307
  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))
308
+ socialProvidersToShow.includes("coinbase") && /*#__PURE__*/ jsx(CoinbaseButton, {
309
+ disabled: !providers.includes("coinbase"),
310
+ ...coinbaseProps
311
+ }),
312
+ socialProvidersToShow.includes("metamask") && /*#__PURE__*/ jsx(MetaMaskButton, {
313
+ disabled: !providers.includes("metamask"),
314
+ ...metamaskProps
315
+ }),
316
+ socialProvidersToShow.includes("meta") && /*#__PURE__*/ jsx(MetaButton, {
317
+ disabled: !providers.includes("meta"),
318
+ ...metaProps
319
+ }),
320
+ socialProvidersToShow.includes("telegram") && /*#__PURE__*/ jsx(TelegramButton, {
321
+ disabled: !providers.includes("telegram"),
322
+ ...telegramProps
323
+ })
309
324
  ]
310
325
  }),
311
326
  console.log("Terms render check:", {
@@ -315,7 +330,7 @@ const LoginView = ({ providers = [
315
330
  hasTermsClick: !!onTermsClick,
316
331
  hasPrivacyClick: !!onPrivacyClick
317
332
  }),
318
- showTerms && (termsContent || privacyContent || onTermsClick || onPrivacyClick) && /*#__PURE__*/ jsxs("p", {
333
+ showTerms && (termsContent ?? privacyContent ?? onTermsClick ?? onPrivacyClick) && /*#__PURE__*/ jsxs("p", {
319
334
  style: {
320
335
  fontFamily: "Futura PT, sans-serif",
321
336
  fontSize: "1.3em"
@@ -323,7 +338,7 @@ const LoginView = ({ providers = [
323
338
  children: [
324
339
  "By connecting you are agreeing to our",
325
340
  " ",
326
- (termsContent || onTermsClick) && /*#__PURE__*/ jsx("a", {
341
+ (termsContent ?? onTermsClick) && /*#__PURE__*/ jsx("a", {
327
342
  href: "#",
328
343
  onClick: (e)=>{
329
344
  e.preventDefault();
@@ -336,8 +351,8 @@ const LoginView = ({ providers = [
336
351
  },
337
352
  children: "Terms of Service"
338
353
  }),
339
- (termsContent || onTermsClick) && (privacyContent || onPrivacyClick) && " and ",
340
- (privacyContent || onPrivacyClick) && /*#__PURE__*/ jsx("a", {
354
+ (termsContent ?? onTermsClick) && (privacyContent ?? onPrivacyClick) && " and ",
355
+ (privacyContent ?? onPrivacyClick) && /*#__PURE__*/ jsx("a", {
341
356
  href: "#",
342
357
  onClick: (e)=>{
343
358
  e.preventDefault();
@@ -361,7 +376,9 @@ const LoginView = ({ providers = [
361
376
  /*#__PURE__*/ jsx(ModalComponent, {
362
377
  title: modalContent.title,
363
378
  content: modalContent.content,
364
- onClose: ()=>setModalContent(null)
379
+ onClose: ()=>{
380
+ setModalContent(null);
381
+ }
365
382
  })
366
383
  ]
367
384
  })
@@ -369,21 +386,19 @@ const LoginView = ({ providers = [
369
386
  });
370
387
  };
371
388
 
372
- const LoginUIComplete = (_param)=>{
373
- var { className, extLoading = false } = _param, loginProps = _object_without_properties_loose(_param, [
374
- "className",
375
- "extLoading"
376
- ]);
389
+ const LoginUIComplete = ({ className, extLoading = false, ...loginProps })=>{
377
390
  const { loggedIn, isLoading } = useTaunt();
378
391
  return /*#__PURE__*/ jsx("div", {
379
- className: `rzd-loginview rzd-loginui-complete ${className || ""}`,
392
+ className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
380
393
  children: extLoading || isLoading ? /*#__PURE__*/ jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsx(LoggedInView, {}) : /*#__PURE__*/ jsxs(Fragment, {
381
394
  children: [
382
395
  /*#__PURE__*/ jsx("h1", {
383
396
  className: "header-login",
384
397
  children: "login"
385
398
  }),
386
- /*#__PURE__*/ jsx(LoginView, _extends({}, loginProps))
399
+ /*#__PURE__*/ jsx(LoginView, {
400
+ ...loginProps
401
+ })
387
402
  ]
388
403
  })
389
404
  });
@@ -422,7 +437,9 @@ function ModalView({ title, content, onClose }) {
422
437
  if (e.key === "Escape") onClose();
423
438
  };
424
439
  document.addEventListener("keydown", handleEscape);
425
- return ()=>document.removeEventListener("keydown", handleEscape);
440
+ return ()=>{
441
+ document.removeEventListener("keydown", handleEscape);
442
+ };
426
443
  }, [
427
444
  onClose
428
445
  ]);
@@ -447,7 +464,7 @@ function ModalView({ title, content, onClose }) {
447
464
  if (trimmedLine && trimmedLine.length < 100 && !trimmedLine.includes(".") && index < lines.length - 1 && lines[index + 1].trim()) {
448
465
  // Check if next line starts with lowercase or is a paragraph
449
466
  const nextLine = lines[index + 1].trim();
450
- if (nextLine && (nextLine[0] === nextLine[0].toUpperCase() || nextLine.startsWith("We "))) {
467
+ if (nextLine && (nextLine.substring(0) === nextLine.substring(0).toUpperCase() || nextLine.startsWith("We "))) {
451
468
  return /*#__PURE__*/ jsx("h3", {
452
469
  style: {
453
470
  marginTop: "24px",
@@ -499,7 +516,9 @@ function ModalView({ title, content, onClose }) {
499
516
  flexDirection: "column",
500
517
  overflow: "hidden"
501
518
  },
502
- onClick: (e)=>e.stopPropagation(),
519
+ onClick: (e)=>{
520
+ e.stopPropagation();
521
+ },
503
522
  children: [
504
523
  /*#__PURE__*/ jsxs("div", {
505
524
  style: {
@@ -553,84 +572,150 @@ function ModalView({ title, content, onClose }) {
553
572
  }
554
573
 
555
574
  const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
575
+ if (!tauntServiceEndpoint) {
576
+ throw new Error("TauntProvider: tauntServiceEndpoint is not provided");
577
+ }
578
+ console.log("🔧 Initializing TauntProvider with endpoint:", {
579
+ tauntServiceEndpoint,
580
+ magicKey
581
+ });
582
+ const [initialised, setInitialised] = useState(false);
556
583
  const [loginDetails, setLoginDetails] = useState();
584
+ const [tauntUser, setTauntUser] = useState();
557
585
  const taunt = useMemo(()=>new TauntApi(tauntServiceEndpoint), [
558
586
  tauntServiceEndpoint
559
587
  ]);
560
588
  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");
589
+ const loggedIn = !!tauntUser;
590
+ const getMe = useCallback(async (force = false)=>{
591
+ if (!force && !loggedIn) return undefined;
592
+ return taunt.getLoggedInUser();
593
+ }, [
594
+ loggedIn,
595
+ taunt
596
+ ]);
597
+ const refreshUser = useCallback(async ()=>{
598
+ const me = await getMe(true);
599
+ setTauntUser(me);
600
+ return me;
601
+ }, [
602
+ getMe
603
+ ]);
604
+ const loginWith = useCallback(async (fn)=>{
605
+ if (tauntUser) return Promise.resolve(tauntUser);
564
606
  setIsLoading(true);
565
- tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
607
+ const resp = await fn({
608
+ taunt,
609
+ tauntServiceEndpoint,
610
+ magicKey: magicKey ?? ""
611
+ });
612
+ setLoginDetails(resp);
613
+ if (resp) {
614
+ await refreshUser();
615
+ }
616
+ setIsLoading(false);
617
+ return tauntUser;
566
618
  }, [
619
+ tauntUser,
620
+ taunt,
567
621
  tauntServiceEndpoint,
568
- magicKey
622
+ magicKey,
623
+ refreshUser
569
624
  ]);
570
625
  const metamaskLogin = useCallback(()=>{
571
- setIsLoading(true);
572
- tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
626
+ return loginWith(({ taunt, tauntServiceEndpoint })=>tauntMetamaskLogin(tauntServiceEndpoint, undefined, taunt));
573
627
  }, [
574
- tauntServiceEndpoint
628
+ loginWith
629
+ ]);
630
+ const otpMagicLogin = useCallback((email)=>{
631
+ if (!magicKey) throw new Error("magicKey is required for OTP login");
632
+ if (!email) throw new Error("email is required for OTP login");
633
+ return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicEmailOTPLogin(tauntServiceEndpoint, magicKey, email, taunt));
634
+ }, [
635
+ loginWith,
636
+ magicKey
575
637
  ]);
576
638
  const telegramLogin = useCallback(()=>{
577
639
  if (!magicKey) throw new Error("magicKey is required for Telegram login");
578
- setIsLoading(true);
579
- tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt).then(setLoginDetails).finally(()=>setIsLoading(false));
640
+ return loginWith(({ taunt, tauntServiceEndpoint, magicKey })=>tauntMagicTelegramLogin(tauntServiceEndpoint, magicKey, taunt));
580
641
  }, [
581
- tauntServiceEndpoint,
642
+ loginWith,
582
643
  magicKey
583
644
  ]);
584
645
  const metaLogin = useCallback(()=>{
585
646
  setIsLoading(true);
586
647
  console.log("Meta login not yet implemented");
587
648
  // Placeholder for Meta login
588
- setTimeout(()=>setIsLoading(false), 1000);
649
+ setTimeout(()=>{
650
+ setIsLoading(false);
651
+ }, 1000);
652
+ return Promise.resolve(undefined);
589
653
  }, []);
590
654
  const coinbaseLogin = useCallback(()=>{
591
655
  setIsLoading(true);
592
656
  console.log("Coinbase login not yet implemented");
593
657
  // Placeholder for Coinbase login
594
- setTimeout(()=>setIsLoading(false), 1000);
658
+ setTimeout(()=>{
659
+ setIsLoading(false);
660
+ }, 1000);
661
+ return Promise.resolve(undefined);
595
662
  }, []);
596
- const getClaimrToken = useCallback(()=>{
597
- if (!loggedIn) return undefined;
598
- return taunt.getClaimrToken();
663
+ const logout = useCallback(()=>{
664
+ void taunt.logout().then(()=>{
665
+ setTauntUser(undefined);
666
+ });
599
667
  }, [
600
- loggedIn
601
- ]);
602
- const getMe = useCallback(()=>_async_to_generator(function*() {
603
- if (!loggedIn) return undefined;
604
- return taunt.getLoggedInUser();
605
- })(), [
606
- loggedIn
668
+ taunt
607
669
  ]);
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
670
+ const refreshToken = useCallback(async (token)=>{
671
+ if (!token) return;
672
+ setIsLoading(true);
673
+ try {
674
+ await taunt.refresh(token);
675
+ return await refreshUser();
676
+ } catch (error) {
677
+ console.error("Failed to refresh token:", error);
678
+ } finally{
679
+ setIsLoading(false);
680
+ }
681
+ }, [
682
+ refreshUser,
683
+ taunt
628
684
  ]);
629
- const safeSetLoginDetails = useCallback((props)=>_async_to_generator(function*() {
630
- taunt.setLoginDetails(props).then(setLoginDetails);
631
- })(), [
685
+ const withTaunt = useCallback(async (fn)=>{
686
+ if (loggedIn) {
687
+ return fn(taunt);
688
+ }
689
+ }, [
690
+ loggedIn,
632
691
  taunt
633
692
  ]);
693
+ const getClaimrSkulls = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrSkulls()), [
694
+ withTaunt
695
+ ]);
696
+ const getClaimrToken = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrToken()), [
697
+ withTaunt
698
+ ]);
699
+ const getClaimrReferralCode = useCallback(()=>withTaunt((taunt)=>taunt.getClaimrReferralCode()), [
700
+ withTaunt
701
+ ]);
702
+ const safeSetLoginDetails = useCallback((props)=>loginWith(async ({ taunt })=>{
703
+ await taunt.setLoginDetails(props);
704
+ return props;
705
+ }), [
706
+ loginWith
707
+ ]);
708
+ useEffect(()=>{
709
+ if (!initialised && !loggedIn) {
710
+ void refreshUser().then(()=>{
711
+ setInitialised(true);
712
+ });
713
+ }
714
+ }, [
715
+ initialised,
716
+ loggedIn,
717
+ refreshUser
718
+ ]);
634
719
  if (!tauntServiceEndpoint) {
635
720
  return /*#__PURE__*/ jsx("div", {
636
721
  children: "tauntServiceEndpoint is required"
@@ -638,15 +723,18 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
638
723
  }
639
724
  return /*#__PURE__*/ jsx(TauntContext.Provider, {
640
725
  value: {
726
+ taunt,
641
727
  tauntServiceEndpoint,
728
+ initialised,
642
729
  loggedIn,
643
730
  isLoading,
644
- deets: loginDetails,
645
731
  loginDetails,
732
+ tauntUser,
646
733
  setLoginDetails: safeSetLoginDetails,
647
734
  getMe,
648
- getClaimrData,
649
735
  getClaimrToken,
736
+ getClaimrSkulls,
737
+ getClaimrReferralCode,
650
738
  otpMagicLogin,
651
739
  metamaskLogin,
652
740
  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.21",
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 };